Javascript 盲区和 操作实例 笔记
第一個總結:
1.
Splice 函數是直接對原數組進行操作,會影響原數組
Slice 是從原數組中取一段元素,生成新的數組,原數組不變。
第二個總結:
2. 判斷一個對象為數組類型。三種方法。
第三個總結:
3. push 從數組末尾加元素,返回新長度。Pop 刪除最后一個元素,并且返回
Unshift 向數組開頭添加元素,返回新的長度;shift 刪除第一個元素,并且返回。
第四個總結:
4. 截取URL 參數方法
//截取URL 的相關方法
fucntion queryURLtoString(url){
var str = url.split("?");
var items = str.split("&");
var result = [];
var arr = “”;
for(var i=0;i<items.length;i++){
arr = items.split("=");
result[arr[0]] = arr[1];
}
return result;
}
第五個總結:
5. 同源策略 與跨域請求。這次我一定要弄明白,而且記住。
首先是著名的同源策略
源 : 源(origin)就是協議、域名和端口號。
以上url中的源就是:http://www.company.com:80。若地址里面的協議、域名和端口號均相同則屬于同源。
以下是相對于 http://www.a.com/test/index.html 的同源檢測
? http://www.a.com/dir/page.html ----成功
? http://www.child.a.com/test/index.html ----失敗,域名不同
? https://www.a.com/test/index.html ----失敗,協議不同
? http://www.a.com:8080/test/index.html ----失敗,端口號不同
假設 在test.com 先的 test.php 頁面。他做出如下事情:
$.ajax({
Type: “get”,
url : ‘http://www.qianduan.com/books.php’
});
這時,頁面會報錯誤,報出跨域請求錯誤。【Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.】因為你發送的請求不是在你現在的服務器目錄下的資源。還有一種常見如下:
原因如下:1.
2.
同源策略是瀏覽器的一個安全功能,不同源的客戶端腳本在沒有明確授權的情況下,不能讀寫對方資源。所以a.com下的js腳本采用ajax讀取b.com里面的文件數據是會報錯的。
? 不受同源策略限制的:
1、頁面中的鏈接,重定向以及表單提交是不會受到同源策略限制的。
2、跨域資源的引入是可以的。但是js不能讀寫加載的內容。如嵌入到頁面中的,,,>等。
?什么是跨域
受前面所講的瀏覽器同源策略的影響,不是同源的腳本不能操作其他源下面的對象。想要操作另一個源下的對象是就需要跨域。
2、跨域的實現形式
? 降域 document.domain
同源策略認為域和子域屬于不同的域,如:child1.a.com 與 a.com,child1.a.com 與 child2.a.com,xxx.child1.a.com 與 child1.a.com
兩兩不同源,可以通過設置 document.damain=‘a.com’,瀏覽器就會認為它們都是同一個源。想要實現以上任意兩個頁面之間的通信,兩個頁面必須都設置 documen.damain=‘a.com’。
此方式的特點:
? 其它類似方法
? JSONP跨域
JSONP和JSON并沒有什么關系!
JSONP的原理:(舉例:a.com/jsonp.html想得到b.com/main.js中的數據)在a.com的jsonp.html里創建一個回調函數xxx,動態添加
1 function addScriptTag(src) {
2 ? var script = document.createElement(‘script’);
3 ? script.setAttribute(“type”,“text/javascript”);
4 ? script.src = src;
5 ? document.body.appendChild(script);
6 ? }
7 ? window.onload = function () {
8 ? addScriptTag(‘http://b.com/main.js?callback=foo’);
9 ? } //window.onload是為了讓頁面加載完成后再執行
10 ? function foo(data) {
11 ? console.log(data.name+“歡迎您”);
12 ? };
//b.com/main.js中的代碼
foo({name:“hl”})
這樣便實現了跨域的參數傳遞。
采用jsonp跨域也存在問題:
? CORS
CORS是一個W3C標準,全稱是"跨域資源共享"(Cross-origin resource sharing)。
它允許瀏覽器向跨源服務器,發出XMLHttpRequest請求,從而克服了AJAX只能同源使用的限制。
剛才的例子中,在b.com里面添加響應頭聲明允許a.com的訪問,代碼:
Access-Control-Allow-Origin: http://a.com
然后a.com就可以用ajax獲取b.com里的數據了。
注意:此方法IE8以下完全不支持,IE8-10部分支持。詳見caniuse-CORS
詳細內容請參考:跨域資源共享 CORS 詳解
那么現在說說我自己對跨域請求和解決方案了》》》
1.由于瀏覽器的同源策略,在a.com 下請求 b.com 的資源,是不允許的,處于安全考慮,因為不同源。
2.如果要想實現在a.com 下請求 b.com 的資源,那么就是跨域了。就是垮了域名。
3.但是,要想實現跨域,瀏覽器對img ,link ,script ,iframe, a ,標簽這些是不做限制的。
因此就可以使用這些標簽的 src 實現跨域,最經典的就是 使用google 的Jquery CDN 。因此是不是理解了。
那么就動態生成script標簽,加載src 資源,但是這個src 有要求,要有毀掉函數。
Src = ‘http://www.test.com/test.ptp?callback=JsonpHandle’ ;
本人對實現跨域的使用。
1.jsonp 看著你們學習的
2. document.domain 和window.name 因為當時在深信服使用 iframe 時需要用到。所以印象深刻。
3.CORS 設置(沒有用過)Access-Control-Allow-Origin: http://a.com
其中動態生成script 的步驟如下
Function JsonpHandle (data){
} 這個就是處理函數
var Jsonp = document.createElement(‘script’); //創建標簽
Jsonp.type = ‘text/javascript’;
Jsonp.src = “http://www.qianduan.com/Jsonp.php?callback=JsonpHandle”;
//在header 后面添加這個script 標簽
document.getElementsByTagName(‘head’)[0].appendChild(Jsonp);
第六個總結:
6. 事件委托實現一波
主要流程有以下:獲取父元素,給父元素注冊監聽事件,獲取到以后在給子元素注冊監聽。
//實現一波事件委托噠
window.onload = function(){
var content = document.getElementById(‘content’);
content.onclick = function(ev){
var e = ev||window.ev;
var target = e.target||e.srcElement;
target.onclick = function(){
alert(‘test’);
}
}
}
第七個總結:
CSS 的彈性布局和多列布局
彈性布局:有很多的屬性設置,其中最主要的就是display 屬性的設置,彈性布局是為了兼容各類屏幕和尺寸大小。
display: -webkit-flex; /* Safari /
display: flex;
多列布局:就是為了防止文本一行顯示,移動麻煩,就用 多列布局,
-moz-column-count:3; / Firefox /
-webkit-column-count:3; / Safari and Chrome */
column-count:3;
第八個總結:
Reflow 回流 和 replain 重繪
首先 : 弄清楚什么是回流和重繪
1.瀏覽器解析html 源碼,構造出DOM 樹,
2.瀏覽器開始對CSS 進行解析,構造渲染樹。
3.繪制。
4. 重繪與回流
當第一次打開一個頁面時,至少會有一次重繪和回流。之后,如果渲染樹發生了變動,那么可能會觸發重繪或回流中的一個或二者。
如果渲染樹的結點發生了結構性變化,例如寬度、高度或者位置上的變化時,那么會觸發Reflow(回流)的邏輯。我們第一次進入一個頁面時便會至少觸發一次這個邏輯。
如果渲染樹結點發生了非結構性變化,例如背景色等的變化時,那么會觸發Repaint(重繪)的邏輯。
其次,相關觸發機制
觸發Repaint或Reflow
我們具體看看哪些操作會導致重繪或回流:
增加、刪除、修改DOM結點
使用display:none;的方式隱藏一個結點會導致repaint與reflow,使用visibility:hidden;進行dom隱藏僅僅導致repaint(沒有結構性變化,僅僅看不見而已)
移動dom或著該dom進行動畫
添加新的樣式,或者修改某個樣式
用戶的一些操作諸如改變瀏覽器窗口大小,調整字體大小,滾動等等
我們看些例子:
var bstyle = document.body.style; // cache
bstyle.padding = “20px”; // reflow, repaint
bstyle.border = “10px solid red”; // another reflow and a repaint
bstyle.color = “blue”; // repaint only, no dimensions changed
bstyle.backgroundColor = “#fad”; // repaint
bstyle.fontSize = “2em”; // reflow, repaint
// new DOM element - reflow, repaint
document.body.appendChild(document.createTextNode(‘dude!’));
第三點:如何減少。
1. 壓縮replaints 和 reflows ,使用CSS 去盡量減少這些,一次性操作完畢。
2. 對多個dom進行操作時,我們可以使用一種“離線”方式。
3. 不要經常去訪問計算后的樣式
第九個總結:
9.1 實現空格的截取,
window.onload = function(){
var _rstrsBtn = document.getElementById(‘rstrsBtn’);
var _strs = document.getElementById(‘strs’);
_rstrsBtn.onclick = function (){
_strs.value = _strs.value.replace(/^(\s|u00A0)+|(\s|u00A0)+$/g,"");
}
};
9.2 判斷文本框內容是否為空
alert(!_strs.value?true:false);
9.3 禁止輸入
9.4 禁止復制粘貼
var _banCopyPaste = document.getElementById(‘banCopyPaste’);
_banCopyPaste.oncopy = function(){
return false;
}
_banCopyPaste.onpaste = function(){
return false;
}
9.4 只運行輸入數字
這個方式IE 不兼容。
兼容IE 方案,使用正則表達式
var banNumber = document.getElementById(‘banNumber’);
clearNumber = function(tThis){
var _v= tThis.value;
tThis.value = _v.replace(/\D/g,"");
}
’
9.5 限制輸入長度
第二種方式 ,截取的方式。
var limitLength = document.getElementById(“limitLength”), //獲取限制對象
clearNonumber = function(tThis){ //清除數字
var _v = tThis.value,
_vLen = _v.length,
dataLength = tThis.getAttribute(“data-length”),//獲取長度屬性
dataModel = tThis.getAttribute(“data-model”),
subLen = dataLength;
if(_vLen > dataLength) tThis.value = _v.substr(0, subLen);//判斷長度
};
limitLength.onfocus = function(){ //獲取焦點事件
clearNonumber(this);
}
limitLength.onkeyup = function(){ //鍵盤事件
clearNonumber(this);
}
limitLength.onblur = function(){ //失去焦點事件
clearNonumber(this);
}
9.5 輸入框的長度提示實現
測試1:還可以輸入:6個字符
var inputLength = document.getElementById(‘inputLength’);
var remainingLength = document.getElementById(‘remainingLength’);
RemainingLength = function(tThis){
var _v = tThis.value;
var _vlength = _v.length;
var maxLength = tThis.getAttribute(‘data-length’);
remainingLength.innerText = maxLength-_vlength;
if(maxLength-_vlength <= 0)
remainingLength.innerText = 0;
if(_vlength>maxLength){
tThis.value = _v.substr(0,maxLength);
}
}
inputLength.onfocus = function(){
RemainingLength(this);
}
inputLength.onkeyup = function(){
RemainingLength(this);
}
inputLength.onblur = function(){
RemainingLength(this);
}
9.6 類似密碼復雜度提示實現一下
var inputLength = document.getElementById(‘inputLength’);
var remainingLength = document.getElementById(‘remainingLength’);
RemainingLength = function(tThis){
var _v = tThis.value;
var _vlength = _v.length;
var maxLength = tThis.getAttribute(‘data-length’);
var low = document.getElementById(‘low’);
var middle = document.getElementById(‘middle’);
var high = document.getElementById(‘high’);
if(_vlength <= 6){
middle.style.display = ‘none’;
high.style.display = ‘none’;
}
if(_vlength > 6&&_vlength <=12){
middle.style.display = ‘inline’;
high.style.display = ‘none’;
low.style.background = ‘yellow’;
}
if(_vlength > 12){
high.style.display = ‘inline’;
// high.style.display = ‘none’;
low.style.background = ‘yellow’;
middle.style.background = ‘yellow’;
}
9.7 文本框默認提示信息
9.8 提示密碼的相關強度
2.13節,密碼強度實時驗證密碼強度實時驗證
9.8 實現下拉菜單實時更新,省市聯動效果
下拉框聯動效果
省級:
市級:
9.9 文件的上傳相關操作 2.37節,JavaScript對上傳文件相關操作JavaScript對上傳文件相關操作
這里,主要了解了,文件的 files[0]的相關屬性。
第十個總結:
第十一個總結:
總結
以上是生活随笔為你收集整理的Javascript 盲区和 操作实例 笔记的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 小苏打可以喷辣椒叶面?
- 下一篇: 家常蛋糕的做法?