當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS笔记-强化版2
1、DOM： ? DOM : Document Object Model 文檔對象模型 文檔：html頁面 文檔對象：頁面中元素 文檔對象模型：定義 為了能夠讓程序(js)去操作頁面中的元素 ? DOM會把文檔看作是一棵樹，同時定義了很多方法來操作這棵數中的每一個元素（節點）DOM節點（document-html-（head、body）..） ? getElementById getElementByTagName document document.body ? 1）childNodes 不推薦使用 ? 元素.childNodes : 只讀 屬性 子節點列表集合 childNodes只包含一級子節點，不包含后輩孫級以下的節點 ? 標準瀏覽器下：包含了文本和元素類型的節點，也會包含非法嵌套的子節點 //比如ul里的p標簽。 非標準瀏覽器下：只包含元素類型的節點，ie7以下不會包含非法嵌套子節點 元素.nodeType : 只讀 屬性 當前元素的節點類型 DOM節點的類型有12種 常見的如下： 元素節點 : 1 屬性節點 : 2 文本節點 : 3 // 比如ul和第一個li的回車，也算一個空文本節點 ? 為ul每一個元素設置背景顏色 for (var i=0; i<oUl.childNodes.length; i++) { if ( oUl.childNodes[i].nodeType == 1 ) { //通過判斷nodetype是不是元素節點來兼容標準和不標準瀏覽器 oUl.childNodes[i].style.background = 'red'; } ? ? 元素.attributes : 只讀 屬性 屬性列表集合 ? oUl.attributes.length //標簽含有的屬性，比如 id style class 等 oUl.attributes[0].name // 第一個屬性的名稱 oUl.attributes[0].value // 第一個屬性的值
2）children 推薦使用 ? 元素.children : 只讀 屬性 子節點列表集合 標準下：只包含元素類型的節點,，也會包含非法嵌套的子節點 //比如ul里的p標簽。 非標準下：只包含元素類型的節點，ie7以下不會包含非法嵌套子節點 ? 為ul每一個元素設置背景顏色 for (var i=0; i<oUl.children.length; i++) { oUl.children[i].style.background = 'red'; } ? ? 3) firstChild（不推薦使用）、firstElementChild ? 元素.firstChild : 只讀 屬性 第一個子節點 標準下：firstChild會包含文本類型的節點 非標準下：只包含元素節點 ? 元素.firstElementChild : 非標準不支持 只讀 屬性 標準下獲取第一個元素類型的子節點 ? if ( oUl.firstElementChild ) { oUl.firstElementChild.style.background = 'red'; //標準下 } else { oUl.firstChild.style.background = 'red'; //非標準下 } ? 簡寫：var oFirst = oUl.firstElementChild || oUl.firstChild; oFirst.style.background = 'red'; ? 如果含有空節點： ? if ( oUl.children[0] ) { oUl.children[0].style.background = 'red'; } else { alert( '沒有子節點可以設置' ); } ? ? 4) lastChild ? /* 元素.lastChild || 元素.lastElementChild 最后一個子節點 */ var oLast = oUl.lastElementChild || oUl.lastChild; oLast.style.background = 'yellow'; ? 5) nextSibling ? /* 元素.nextSibling || 元素.nextElementSibling 下一個兄弟節點 */ var oNext = oFirst.nextElementSibling || oFirst.nextSibling; oNext.style.background = 'blue'; ? 6) previousSibling ? /* 元素.previousSibling || 元素.previousElementSibling 上一個兄弟節點 */ var oPrev = oLast.previousElementSibling || oLast.previousSibling; oPrev.style.background = 'orange'; ? 7）parentNode ? 元素.parentNode : 只讀 屬性 當前節點的父級節點，只有一個，沒有兼容問題 ? 8）offsetParent、offsetLeft ? 元素.offsetParent : 只讀 屬性 離當前元素最近的一個有定位屬性的父節點 如果沒有定位父級，默認是body ie7以下，如果當前元素沒有定位默認是body，如果有定位則是html ie7以下，如果當前元素的某個父級觸發了layout，那么offsetParent就會被指向到這個觸發了layout特性的父節點上 ? 元素.offsetLeft[Top] : 只讀 屬性 當前元素到定位父級的距離（偏移值） 到當前元素的offsetParent的距離 ? 如果沒有定位父級 offsetParent -> body offsetLeft -> html 如果有定位父級 ie7以下：如果自己沒有定位，那么offsetLeft[Top]是到body的距離 如果自己有定位，那么就是到定位父級的距離 ? 其他瀏覽器：到定位父級的距離 ? ? 9）寬高 /* width height style.width : 樣式寬 clientWidth : 可視區寬 offsetWidth : 占位寬 */ <div id="div1" style="width: 100px; height: 100px; border: 1px solid red; padding: 10px; margin: 10px;"></div> alert( oDiv.style.width ); //100 alert( oDiv.clientWidth ); //樣式寬 + padding = 120 alert( oDiv.offsetWidth ); //樣式寬 + padding + border 可視區寬 + 邊框 = 122 ? ? 10）getPos（）；元素距瀏覽器最外部的絕對距離。 ? function getPos(obj) { var pos = {left:0, top:0}; while (obj) {//offsetLeft(Top)是到定位父級元素的距離 pos.left += obj.offsetLeft; pos.top += obj.offsetTop; obj = obj.offsetParent;//定位父級 } return pos; } ? 11）操作元素屬性的方法： ? oText.value = '222';//對其進行賦值 alert( oText.value );//對其進行讀取 oText['value'] = '222';//對其進行賦值 alert( oText['value'] );//對其進行讀取 對于變量必須用中括號 [] 形式 var name = 'value'; oText.name; 有問題 oText[name]; OK ? 元素.getAttribute(屬性名稱); 方法 獲取指定元素的指定屬性的值 ? //alert( oText.getAttribute('value') ); 元素.setAttribute(屬性名稱，屬性值); 方法 給指定元素指定的屬性設置值 ? //oText.setAttribute( 'value', 'hello' ); 元素.removeAttribute(屬性名稱); 方法 移除指定的元素的指定的屬性 ? //oText.removeAttribute( 'value' ); 用 . 和[]的形式無法操作元素的自定義屬性 getAttribute可以操作元素的自定義屬性 ? //alert( oText._name_ ); //undefined //alert( oText['_name_'] ); //undefined //alert( oText.getAttribute('_name_') ); //可以 ? var oImg = document.getElementById('img1'); 可以獲取元素屬性實際的值 ie7下還是會返回資源的絕對路徑 ? //alert( oImg.src ); 彈出內容有圖片所屬的絕對路徑 //alert( oImg['src'] );彈出內容有圖片所屬的絕對路徑 //alert( oImg.getAttribute('src') ); //alert( oImg.style.getAttribute('width') ); ? 11） 元素的動態創建： ? 在點擊oBtn時把輸入到oText中的內容追加到oLi中，在每個oLi中增加a標簽，點擊a標簽進行刪除該oLi ? oBtn.onclick = function() { ? /*
document.createElement(標簽名稱); 創建元素
*/ var oLi = document.createElement('li');//創建 oLi.innerHTML = oText.value;//設置li顯示內容 var oA = document.createElement('a'); oA.innerHTML = '刪除'; oA.href = 'javascript:;'; ? oA.onclick = function() { /* 父級.removeChild(要刪除的元素); 刪除元素 */ oUl.removeChild( this.parentNode );//把li刪除 } /* 父級.appendChild(要添加的元素) 方法 追加子元素 */ oLi.appendChild( oA );?//把a添加 li 中 /* 父級.insertBefore(新的元素，指定元素)?方法 在指定元素前面插入一個新元素 ? 在ie下如果第二個參數的節點不存在，會報錯 在其他標準瀏覽器下如果第二個參數的節點不存在，則會以appendChild的形式進行添加 */ //兼容IE判斷： if ( oUl.children[0] ) {//如果存在子節點 oUl.insertBefore( oLi, oUl.children[0] ); } else { oUl.appendChild( oLi ); } } ? /* 父級.replaceChild(新節點，被替換節點) 替換子節點 */ //document.body.replaceChild( oDiv, oP ); /* appendChild,insertBefore,replaceChild都可以操作動態創建出來的節點，也可以操作已有節點 */ //oP.appendChild( oDiv ); ? ? 12) 通過class獲取元素：getElementsByClassName(); ? document.getElementsByClassName("box");//獲取文檔所有的box var oUlid = document.getElementById("ul"); oUlid.getElementsByClassName("box");//獲取oUlid所有的box ? ? 13)寫一個addClass()和removeClass()方法： //addClass addClass(box,"xxxx"); function addClass(obj,className) { if(obj.className === ''){// 如果之前不存在class obj.className = className; }else {//如果存在class var arrClassName = obj.className.split(' '); var index = arrIndexOf(arrClassName,className); if(index == -1){//如果添加的class在原先的class中不存在 obj.className += ' ' + className; }//如果添加的class在原先的class中存在了,就不用添加了 } } //removeClass removeClass(dd,'b'); function removeClass(obj,className) { ? //如果原先存在class ? if(obj.className != ''){ ? var arrClassName = obj.className.split(' '); ? var index = arrIndexOf(arrClassName,className); ? //如果有匹配的 ? if(index != -1){ ? arrClassName.splice(index,1); ? obj.className = arrClassName.join(' '); ? } ? ? } ? } //判斷要添加的class與原先class進行比較是否相等 function arrIndexOf(arr,className) { for(var i = 0;i<arr.length;i++){ if(arr[i] == className){ return i; } } return -1; } ? ? 14) 表格操作： ? <table> ? <thead> ? <tr> <th>表頭</th> <th>表頭</th> <th>表頭</th> </tr> ? </thead> ? <tbody> ? <tr> <td>表內容</td> <td>表內容</td> <td>表內容</td> </tr> <tr> <td>表內容</td> <td>表內容</td> <td>表內容</td> </tr> <tr> <td>表內容</td> <td>表內容</td> <td>表內容</td> </tr> ? </tbody> ? </table> ? 獲取： ? tHead : 表格頭 tBodies : 表格正文 tFoot : 表格尾 rows : 行 cells : 列 ? ? 15) 表單 ? <form id="form1"> <input type="text" id="text1" name="username" value="" /> ? <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 ? <input type="checkbox" name="aihao" value="電影" />電影 <input type="checkbox" name="aihao" value="音樂" />音樂 <input type="checkbox" name="aihao" value="體育" />體育 ? <select name="city" value=""> <option>請選擇一個城市</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="廣州">廣州</option> <option value="深圳">深圳</option> </select> </form> ? 可以用name獲取表單中一個元素 表單.元素name：form1.username ? onchange?: 當表單值發生改變的時候觸發。 ? 文本： text : 當光標離開元素的時候再去判斷值是否發生了變化，如果發生了變化則觸發onchange事件 oForm.username.onchange = function() { alert('值變了'); } ? 單選、多選： name值要相同為一類，否則失效。 radio、checkbox: 標準下點擊的時候如果值變化了就會觸發on change 非標準下焦點離開的時候如果值變了會觸發 ? oForm.sex[0].onchange = function() { alert(this.value);//值 alert(this.checked);//是否被選中 } ? 下拉菜單： 選擇后就會觸發onchange事件。 oForm.city.onchange = function (){ alert(this.value ); } ? ? <form id="form1" action="http://www.baidu.com">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
onsubmit?: 事件 當表單被提交的時候觸發
oForm.submit(); 方法 提交表單
oForm.onsubmit = function() {
if (this.username.value == '') {
alert('請填寫用戶名');
return false;
}
}
onreset?: 當表單要重置的時候觸發
oForm.onreset = function() {
/*if ( confirm('你確定要重置？') ) {
return true;
} else {
return false;
}*/
return confirm('你確定要重置？');
} ? ?
2、BOM ? ? BOM : Browser Object Model 瀏覽器對象模型 ? 1) window.open() \ close()
open(地址默認是空白頁面，打開方式默認新窗口) 打開一個新窗口
aInput[0].onclick = function() {
window.open('http://www.baidu.com', '_self'); opener = window.open();//返回值 返回的新開頁面的window對象 opener.document.body.style.background = 'red'; ? window.close(); ff : 無法關閉 chrome : 直接關閉 ie : 詢問用戶 ? opener.close(); //可以通過關閉用window.open方法打開的新窗口 ? } ? 2）window.navigator.userAgent : 瀏覽器信息 ? alert( window.navigator.userAgent ) ? if ( window.navigator.userAgent.indexOf('MSIE') != -1 ) { alert('我是ie');// ie8的MSIE是8.0 ，7是7.0 .. } else { alert('我不是ie'); } ? ? 3）window.location : 地址 ? ? window.location.href = window.location內容 window.location.search = url?后面的內容 window.location.hash = url#后面的內容 ? ? 4)寬高 ? ? 可視區尺寸 alert( document.documentElement.clientHeight ); document.onclick = function() { //滾動距離 //alert( document.documentElement.scrollTop );//除去chrome //alert( document.body.scrollTop );//chrome //document.documentElement.scrollTop = 100 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //alert(scrollTop) var oDiv = document.getElementById('div1'); //scrollHeight : 內容實際寬高 alert(oDiv.scrollHeight); ? //offsetHeight //alert( document.body.offsetHeight ); //ie : 如果內容沒有可視區高，那么文檔高就是可視區 //alert( document.documentElement.offsetHeight ); ? } ? offsetTop :（left） 指 obj 距離body最上方或者定位父級的位置 ? clientHeight:（width） 大家對 clientHeight 都沒有什么異議，都認為是內容可視區域的高度，也就是說頁面瀏覽器中可以看到內容的這個區域的高度，一般是最后一個工具條以下到狀態欄以上的這個區域，與頁面內容無關。 ? offsetHeight:（width） IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。 NS、FF 認為 offsetHeight 是網頁內容實際高度，可以小于 clientHeight。 ? scrollHeight:（width） IE、Opera 認為 scrollHeight 是網頁內容實際高度，可以小于 clientHeight。 NS、FF 認為 scrollHeight 是網頁內容高度，不過最小值是 clientHeight ? 對某個HTML控件:（div...） offsetHeight（width）是自身元素的高度，scrollHeight（width）是 自身元素的高度+隱藏元素的高度。 ? ? ? onscroll事件 : 當滾動條滾動的時候觸發，在指定毫秒時間內觸發一次 ? onresize事件 : 當窗口大小發生變化的時候觸發 ? ? ?
3、Event ? 1）焦點事件 ? 焦點 : 使瀏覽器能夠區分用戶輸入的對象，當一個元素有焦點的時候，那么他就可以接收用戶的輸入。 我們可以通過一些方式給元素設置焦點 1.點擊 2.tab 3.js 不是所有元素都能夠接收焦點的.能夠響應用戶操作的元素才有焦點。比如文本輸入框、a標簽.. ? onfocus : 當元素獲取到焦點的時候觸發 ? onblur : 當元素失去焦點的時候觸發 ? oText.onfocus = function() { if ( this.value == '請輸入內容' ) { this.value = ''; } } oText.onblur = function() { if ( this.value == '' ) { this.value = '請輸入內容'; } } ? obj.focus() 給指定的元素設置焦點 obj.blur() 取消指定元素的焦點 obj.select() 選擇指定元素里面的文本內容，適用于具有焦點事件的元素。 ? ? 2）event事件對象、clientX、clientY ? event : 事件對象 , 當一個事件發生的時候，和當前這個對象發生的這個事件有關的一些詳細的信息都會被臨時保存到一個指定地方-event對象，供我們在需要的調用。飛機-黑匣子 ? 事件對象必須在一個事件調用的函數里面使用才有內容 事件函數：事件調用的函數，一個函數是不是事件函數，不在定義的決定，而是取決于這個調用的時候 ? 兼容： ie/chrome : event是一個內置全局對象 標準所有瀏覽器下 : 事件對象是通過事件函數的第一個參數傳入 獲取事件（Event）對象的兼容：ev = ev || window.event ? 如果一個函數是被事件調用的那么，這個函數定義的第一個參數就是事件對象 ? clientX、clientY : 當一個事件發生的時候，鼠標到頁面可視區的距離 ? ? alert( event ); //這里沒有事件 ? document.onclick = function() { alert(event); }; ? function fn1(ev) { //alert( event ); //alert( ev ); var ev = ev || event; //event對象的兼容 //alert(ev); /*for ( var attr in ev ) { // 把該事件對象的所有屬性都列出來 console.log( attr + ' = ' + ev[attr] ); }*/ alert(ev.clientX); } ? //fn1(); //不是事件調用的函數 document.onclick = fn1; //是事件調用的函數，所以event有內容 ? eg：紅色小方塊跟隨鼠標移動而移動： ? <body style="height: 2000px;"> <div id="div1"></div> </body> ? #div1 {width: 100px; height:100px; background: red; position: absolute;} ? window.onload = function() { //onmousemove : 當鼠標在一個元素上面移動的觸發 //觸發頻率不是像素，而是間隔時間，在一個指定時間內（很短），如果鼠標的位置和上一次的位置發生了變化，那么就會觸發一次 var oDiv = document.getElementById('div1'); document.onmousemove = function(ev) { var ev = ev || event; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //body有2000px高度，則需要用到滾動距離，可視區域高僅為2000px oDiv.style.left = ev.clientX + 'px'; oDiv.style.top = ev.clientY + scrollTop + 'px';//滾動條向下滾動后，鼠標到body頂部的距離就是clientY（鼠標到可視區頂部距離）+ scrollTop（滾動距離） } } ? ? 3）事件冒泡： ? ? 事件冒泡 : 當一個元素接收到事件的時候，會把他接收到的所有傳播給他的父級，一直到頂層window.事件冒泡機制 ? oDiv1.onclick = fn1; 給**加事件，給元素加事件處理函數，告訴div1，如果他接收到了一個點擊事件，那么他就去執行fn1 ? 如果oDiv1有父級元素設置了點擊事件，即使oDiv1沒有設置上一句點擊事件函數，但它也能接受到點擊事件，接受后將事件傳給父級元素。 ? 阻止冒泡 : 當前要阻止冒泡的事件函數中調用 event.cancelBubble = true; ? 例如：在一個頁面中，有很多元素，只有點擊oBtn按鈕才會顯示oDiv,點擊其他元素則隱藏。 ? oBtn.onclick = function(ev) { ? var ev = ev || event; ev.cancelBubble = true; //阻止當前對象的當前事件的冒泡，不會傳給父級（最后的父級為document） oDiv.style.display = 'block'; ? } document.onclick = function() { ? //點擊除了oBtn的其余所有元素都會產生事件冒泡，傳給document，執行oDiv消失 oDiv.style.display = 'none'; ? } ? 4)事件捕獲、綁定事件的形式、call ? 事件捕獲：捕獲階段是一個和冒泡階段完全相反的過程，即事件由祖先元素向子元素傳播，和一個石子兒從水面向水底下沉一樣，要說明的是在 IE，opera瀏覽器中，是不存在這個階段的。 ? 給一個對象綁定一個事件處理函數的第一種形式： obj.onclick = fn; 缺點： document.onclick = fn1; document.onclick = fn2; //會覆蓋前面綁定fn1 ? ? 給一個元素綁定事件函數的第二種形式： ? 給一個對象的同一個事件綁定多個不同的函數 ? ie：obj.attachEvent(事件名稱，事件函數); 1.沒有捕獲 2.事件名稱有on 3.事件函數執行的順序：標準ie->正序 非標準ie->倒序 4.函數中的this指向window 標準：obj.addEventListener(事件名稱，事件函數，是否捕獲); ? 1.有捕獲，第三個參數boolean值，就是決定注冊事件發生在捕獲階段還是冒泡階段: 默認是false，false:冒泡，true：捕獲 2.事件名稱沒有on 3.事件執行的順序是正序 4.函數中的this觸發該事件的對象obj ? call?：函數下的一個方法，call方法第一個參數可以改變函數執行過程中的內部this的指向，call方法從第二個參數開始都是原來函數的參數列表 ? function fn1() { alert(this); } document.attachEvent('onclick', function() { fn1.call(document); //把函數中this原來指向的window改成document }); ? ? ? function fn1(a, b) { alert(this); alert(a + b); } ? //fn1(); //window fn1.call(null, 10, 20); //調用函數 fn1() == fn1.call()；第一個參數為null，則不改變this 原來的指向 ? 事件綁定兼容寫法： ? function bind(obj, evname, fn) { if (obj.addEventListener) { obj.addEventListener(evname, fn, false); } else { obj.attachEvent('on' + evname, function() { fn.call(obj); }); } } ? 調用： bind(document, 'click', fn1); bind(document, 'click', fn2); ? ? 事件捕獲和事件冒泡例子： ? <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> ? eg1： ? false為冒泡，告訴div1\div2：如果有一個出去的事件觸發了你，你就去執行fn1這個函數。所以點擊div3的時候，執行順序div3-div2-div1 oDiv1.addEventListener('click', fn1, false); oDiv2.addEventListener('click', fn1, false); oDiv3.addEventListener('click', fn1, false); true為捕獲，告訴div1，如果有一個進去的事件觸發了你，你就去執行fn1這個函數。所以點擊div3的時候，執行順序div1-div2-div3 oDiv1.addEventListener('click', fn1, true); oDiv2.addEventListener('click', fn1, true); oDiv3.addEventListener('click', fn1, true); ? ? eg2： ? oDiv1.addEventListener('click', function() { alert(1); }, false);//冒泡，最后執行 oDiv1.addEventListener('click', function() { alert(3); }, true);//捕獲，點擊div3的時候先進入div1，首先執行 oDiv3.addEventListener('click', function() { alert(2); }, false);//冒泡，第二執行 ? 點擊div3的時候彈出的內容的先后順序為：3-2-1 ? ? 5)事件取消： ? 第一種事件綁定形式的取消: ? document.onclick = null; ? 第二種事件綁定形式的取消: ? ie : obj.detachEvent(事件名稱，事件函數); 標準 : obj.removeEventListener(事件名稱，事件函數，是否捕獲); ? document.addEventListener('click', fn1, false); ? document.removeEventListener('click', fn1, false); ? ? 6）鍵盤事件 ? onkeydown : 當鍵盤按鍵按下的時候觸發 onkeyup : 當鍵盤按鍵抬起的時候觸發 ? event.keyCode : 數字類型 鍵盤按鍵的值 鍵值 ctrlKey,shiftKey,altKey 布爾值 當一個事件發生的時候，如果ctrl || shift || alt 是按下的狀態，返回true，否則返回false document.onkeydown = function(ev) { var ev = ev || event; alert(ev.keyCode);//按下任意鍵，彈出該鍵的鍵值 ? } ? 同時按下回車和ctrl鍵：if (ev.keyCode == 13 && ev.ctrlKey) ? 不是所有元素都能夠接收鍵盤事件，能夠響應用戶輸入的元素，能夠接收焦點的元素就能夠接收鍵盤事件 onkeydown : 如果按下不抬起，那么會連續觸發 ? 7）時間默認行為 ? 事件默認行為：當一個事件發生的時候瀏覽器自己會默認做的事情 怎么阻止？ 當前這個行為是什么事件觸發的，然后在這個事件的處理函數中使用return false; return false阻止的是 obj.on事件名稱=fn 和attchEvent所觸發的默認行為，用addEventListener綁定的事件不能用這種方法阻止默認行為。addEventListener綁定的事件需要通過event下面的preventDefault(); ? 阻止菜單事件： ? document.onkeydown = function() { return false; } ? oncontextmenu : 瀏覽器右鍵菜單事件，當右鍵菜單（環境菜單）顯示出來的時候觸發 ? ? 8）拖拽 ? ? onmousedown : 選擇元素 onmousemove : 移動元素 onmouseup : 釋放元素 ? 元素限制范圍的拖拽封裝：drag() ： ? 拖拽的時候，如果有文字或圖片被選中，會產生問題 原因：當鼠標按下的時候，如果頁面中有文字或圖片被選中，那么會觸發瀏覽器默認拖拽的效果 解決： 標準：阻止默認行為 return false; 非標準ie：全局捕獲 obj.setCapture(); ? 全局捕獲 ： 當我們給一個元素設置全局捕獲以后，那么這個元素就會監聽后續發生的所有事件，當有事件發生的時候，事件會被全局捕獲元素所劫持，并觸發了全局捕獲元素含有的事件。 ie : 有，并且有效果 ff : 有，但是沒效果 chrome : 沒有 ? ? var oDiv = document.getElementById('div1'); var oImg = document.getElementById('img1'); drag(oImg); drag(oDiv); function drag(obj) { obj.onmousedown = function(ev) { ? var ev = ev || event; var disX = ev.clientX - this.offsetLeft;//此時方塊還沒動，求得鼠標位置距離方塊左邊的直線距離 var disY = ev.clientY - this.offsetTop; if ( obj.setCapture ) {//阻止IE瀏覽器的默認拖拽行為 obj.setCapture(); } document.onmousemove = function(ev) {//對全部文檔設置該事件，鼠標在文檔中移動不受其他元素影響 var ev = ev || event; ? var L = ev.clientX - disX; var T = ev.clientY - disY; if ( L < 0 ) { ? L = 0; //若left值小于0，則讓它等于0，限制在可視區范圍 //若if（L<100）{L=0;}，則在拖拽到100px位置時，會有磁性吸附效果，吸附到 L = 0 位置 ? } else if ( L > document.documentElement.clientWidth - obj.offsetWidth ) { ? L = document.documentElement.clientWidth - obj.offsetWidth; //若L大于瀏覽器可視區減去obj的寬度的值時，讓它等于該值，元素就不會拖拽出可視區 } if ( T < 0 ) { T = 0; } else if ( T > document.documentElement.clientHeight - obj.offsetHeight ) { T = document.documentElement.clientHeight - obj.offsetHeight; } obj.style.left = L + 'px'; //方塊跟隨鼠標位置移動 obj.style.top = T + 'px'; } document.onmouseup = function() { document.onmousemove = document.onmouseup = null; if ( obj.releaseCapture ) {//釋放全局捕獲 obj.releaseCapture(); } } return false; //阻止標準瀏覽器的默認拖拽行為 } } ? ? ? 9）鼠標滾輪事件 ? ie/chrome : onmousewheel 滾動值event.wheelDelta：上：120 下：-120 firefox : DOMMouseScroll 必須用addEventListener 滾動值event.detail：上：-3 下：3 return false阻止的是 obj.on事件名稱=fn 和attachEvent所觸發的默認行為 addEventListener綁定的事件需要通過event下面的preventDefault(); ? 滑輪控制方塊的高： ? var oDiv = document.getElementById('div1'); ? oDiv.onmousewheel = fn; if (oDiv.addEventListener) {//兼容FF oDiv.addEventListener('DOMMouseScroll', fn, false); } function fn(ev) { var ev = ev || event; var b = true; if (ev.wheelDelta) {//不同瀏覽器值的大小和正負不同，要統一起來 b = ev.wheelDelta > 0 ？true:false; } else { b = ev.detail < 0 ? true : false; } if ( b ) {//b為true是向上滾動，如果向上滾動 ? this.style.height = this.offsetHeight - 10 + 'px'; } else {//如果向下滾動 ? this.style.height = this.offsetHeight + 10 + 'px'; } if (ev.preventDefault) { //如果存在addEventListener，就取消默認行為 ev.preventDefault(); } return false; //取消默認行為 } ? 10）cookie ? cookie : 存儲數據，當用戶訪問了某個網站（網頁）的時候，我們就可以通過cookie來像訪問者電腦上存儲數據 ? 1.不同的瀏覽器存放的cookie位置不一樣，也是不能通用的 2.cookie的存儲是以域名形式進行區分的 3.cookie的數據可以設置名字的 4.一個域名下存放的cookie的個數是有限制的，不同的瀏覽器存放的個數不一樣 5.每個cookie存放的內容大小也是有限制的，不同的瀏覽器存放大小不一樣 ? 我們通過document.cookie來獲取當前網站下的cookie的時候，得到的字符串形式的值，他包含了當前網站下所有的cookie。他會把所有的cookie通過一個分號+空格的形式串聯起來 username=leo; age=32 ? 設置cookie： document.cookie = '名字=值'; document.cookie = 'username=leo'; document.cookie = 'age=32'; ? 如果我們想長時間存放一個cookie。需要在設置這個cookie的時候同時給他設置一個過期的字符串格式的時間。 ? cookie默認是臨時存儲的，當瀏覽器關閉進程的時候自動銷毀 ? 設置過期時間： ? document.cookie = '名稱=值;expires=' + 字符串格式的時間; ? var oDate = new Date();//是個時間對象，以毫秒為基礎 ? oDate.setDate( oDate.getDate() + 5 );//從現在時間到5天后，getDate()設置日期天數 ? 內容最好編碼存放,encodeURI： ? document.cookie = 'username='+ encodeURI('leo\n你好') +';expires=' + oDate.toGMTString(); //toGMTString()轉成字符方法 ? ? ? cookie函數封裝： ? 設置cookie： ? function setCookie(key, value, t) { var oDate = new Date(); oDate.setDate( oDate.getDate() + t ); document.cookie = key + '=' + encodeURI(value) + ';expires=' + oDate.toGMTString(); } ? ? 得到cookie： ? function getCookie(key) { var arr1 = document.cookie.split('; ');//username=leo; age=32 for (var i=0; i<arr1.length; i++) { var arr2 = arr1[i].split('=');//username=leo; age=32 if ( arr2[0] == key ) { return decodeURI(arr2[1]); } } } ? 移出cookie： ? function removeCookie(key) { setCookie(key, '', -1);//時間設為-1天，過期 } ? //setCookie('sex','男', 10); //alert( getCookie('sex') ); //removeCookie('sex'); ? ? ?
4、正則表達式 ? 正則 : 也叫做規則，讓計算機能夠讀懂人類的規則。正則都是操作字符串的。 ? 1）正則寫法：a是填寫的規則 ? var re = /a/; var re = new RegExp('a'); //在re作為參數的時候，只能用這種寫法 ? 2)轉義字符: ? \s : 空格 \S : 非空格 \d : 數字 \D : 非數字 \w : 字符 ( 字母 ，數字，下劃線_ ) \W : 非字符 ? ? . : 任意字符 \. : 真正的點 ? var str = 'a.c'; ? var re = /a\.c/; ? alert(re.test(str)); //true ? \b : 所處位置為獨立的部分 （ 起始，結束，空格 ） \B : 所處位置為非獨立的部分 ? ? var str = 'onetwo'; ? var re = /\bone/; ? alert( re.test(str) ); // true //\b所在位置為起始位置 ? ? var str = 'onetwo'; ? var re = /one\b/; ? alert( re.test(str) ); //false //\b所處位置有t ? ? \1 : 重復的第一個子項 \2 : 重復的第二個子項，以此類推 ? var str = 'abcb'; ? var re = /(a)(b)(c)\2/; ? alert( re.test(str) ); //true \2代表和第二項相同的值 ? var re = /(\w)\1/; //代表cc、99等兩個字符相等的 ? ? 3）正則常用方法： ? test : 正則去匹配字符串，如果匹配成功就返回真，如果匹配失敗就返回假 ? test的寫法 : 正則.test(字符串) ? var str = 'abcdef'; ? var re = /b/; ? alert( re.test(str) ); // true ? ? ? search : 正則去匹配字符串 , 如果匹配成功，就返回匹配成功的位置，如果匹配失敗就返回 -1 ? search的寫法 : 字符串.search(正則) ? 正則中默認是區分大小寫的.如果不區分大小寫的話，在正則的最后加標識 i ? var str = 'abcdef'; ? var re = /B/i; ? //var re = new RegExp('B','i'); ? alert( str.search(re) ); ? ? ? match : 正則去匹配字符串，如果匹配成功，就返回匹配成功的數組，如果匹配不成功，就返回null ? match的寫法 : 字符串.match(正則) ? 正則默認：正則匹配成功一次就會結束，不會繼續匹配 如果想全部查找，就要加標識 g (global全局匹配) ? 量詞 + : 至少出現一次 ? var str = 'haj123sdk54hask33dkhalsd879'; ? var re = /\d+/g; ? alert( str.match(re) ); //[123,54,33,879] ? ? ? ? replace : 正則去匹配字符串，匹配成功的字符去替換成新的字符串 ? replace的寫法 : 字符串.replace(正則,新的字符串) ? var str = 'aaa'; var re = /a+/g; ? str = str.replace(re,'b'); ? alert(str); // b ? ? ? ? | : 或的意思 ? replace : 第二個參數：可以是字符串，也可以是一個回調函數 ? eg:敏感詞過濾： ? HTML: ? 替換前<br /> <textarea> </textarea><br /> 替換后<br /> <textarea> </textarea><br /> <input type="button" value="確定" id="input1" /> ? JS: ? window.onload = function(){ var aT = document.getElementsByTagName('textarea'); var oInput = document.getElementById('input1'); var re = /菲稱|中國船|監視之下/g; oInput.onclick = function(){ //aT[1].value = aT[0].value.replace(re,'*'); //這樣只能把幾個漢字轉成一個* aT[1].value = aT[0].value.replace(re,function(str){?//函數的第一個參數：就是匹配成功的字符 var result = ''; for(var i=0;i<str.length;i++){ ? result += '*'; } return result; }); }; }; ? ? ? ? ? 4）匹配子項 : 小括號 () (還有另外一個意思，分組操作) ? 把正則的整體叫做（母親） 然后把左邊第一個小括號里面的正則，叫做這個第一個子項(母親的第一個孩子) 第二個小括號就是第二個孩子 ? var str = '2013-6-7'; ? var re = /(\d+)(-)/g; ? str = str.replace(re,function($0,$1,$2){ //第一個參數：$0（母親）,第二個參數 : $1(第一個孩子) //,第三個參數 : $1(第二個孩子) //alert( $2 ); // - //return $1 + '.'; return $0.substring(0,$0.length-1) + '.'; }); ? alert( str ); //2013.6.7 ? ? ? var str = 'abc'; ? var re = /(a)(b)(c)/; ? alert( str.match(re) ); //[abc,a,b,c](當match不加g的時候才可以獲取到子項的集合) ? ? 5）字符類： ? 字符類 : 一組相似的元素 [] 中括號的整體代表一個字符，[]中的內容都是或的關系 ? var str = 'abdc'; ? var re = /a[bde]c/; ? alert( re.test(str) ); //true ? ? 排除 : ^ 如果^寫在[]里面的話，就代表排除的意思 ? var str = 'abc'; ? var re = /a[^bde]c/; ? alert( re.test(str) ); // false ? ? 組合寫法：[a-z0-9A-Z]： ? var str = 'abc'; ? var re = /a[a-z0-9A-Z]c/; ? alert( re.test(str) );// true ? ? 6）量詞 : 代表前面的值出現的次數，{n,m}，至少出現n次，最多m次 ? {n,} 至少n次 * 任意次 {0,} ？ 零次或一次 {0,1} + 一次或任意次{1,} {n} 正好n次 ? eg： ? {4,7} : 最少出現4次，最多出現7次 {4,} : 最少出現4次 {4} : 正好出現4次 ? ? 7）正則收尾：^ 開始 $ 結束 ? ^ : 正則的最開始位置，就代筆起始的意思 $ : 正則的最后位置 , 就代筆結束的意思 ? eg:去掉前后空格 ? var str = ' hello '; ? alert( '('+trim(str)+')' ); // (hello) ? function trim(str){ var re = /^\s+|\s+$/g; return str.replace(re,''); } ? ? 8)正則與面向對象 ? 把方法包在一個JSON里 ? var re = { qq : /[1-9][0-9]{4,9}/, email : /^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/, number : /\d+/ }; ? 用的時候：re.email ? ? 9）常用正則例子： ? 匹配中文：[\u4e00-\u9fa5] 行首行尾空格：^\s*|\s*$ Email：^\w+@[a-z0-9]+(\.[a-z]+){1,3}$ 網址：[a-zA-z]+://[^\s]* QQ號：[1-9][0-9]{4,9} 郵政編碼：[1-9]\d{5} 身份證：[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x ?
2）children 推薦使用 ? 元素.children : 只讀 屬性 子節點列表集合 標準下：只包含元素類型的節點,，也會包含非法嵌套的子節點 //比如ul里的p標簽。 非標準下：只包含元素類型的節點，ie7以下不會包含非法嵌套子節點 ? 為ul每一個元素設置背景顏色 for (var i=0; i<oUl.children.length; i++) { oUl.children[i].style.background = 'red'; } ? ? 3) firstChild（不推薦使用）、firstElementChild ? 元素.firstChild : 只讀 屬性 第一個子節點 標準下：firstChild會包含文本類型的節點 非標準下：只包含元素節點 ? 元素.firstElementChild : 非標準不支持 只讀 屬性 標準下獲取第一個元素類型的子節點 ? if ( oUl.firstElementChild ) { oUl.firstElementChild.style.background = 'red'; //標準下 } else { oUl.firstChild.style.background = 'red'; //非標準下 } ? 簡寫：var oFirst = oUl.firstElementChild || oUl.firstChild; oFirst.style.background = 'red'; ? 如果含有空節點： ? if ( oUl.children[0] ) { oUl.children[0].style.background = 'red'; } else { alert( '沒有子節點可以設置' ); } ? ? 4) lastChild ? /* 元素.lastChild || 元素.lastElementChild 最后一個子節點 */ var oLast = oUl.lastElementChild || oUl.lastChild; oLast.style.background = 'yellow'; ? 5) nextSibling ? /* 元素.nextSibling || 元素.nextElementSibling 下一個兄弟節點 */ var oNext = oFirst.nextElementSibling || oFirst.nextSibling; oNext.style.background = 'blue'; ? 6) previousSibling ? /* 元素.previousSibling || 元素.previousElementSibling 上一個兄弟節點 */ var oPrev = oLast.previousElementSibling || oLast.previousSibling; oPrev.style.background = 'orange'; ? 7）parentNode ? 元素.parentNode : 只讀 屬性 當前節點的父級節點，只有一個，沒有兼容問題 ? 8）offsetParent、offsetLeft ? 元素.offsetParent : 只讀 屬性 離當前元素最近的一個有定位屬性的父節點 如果沒有定位父級，默認是body ie7以下，如果當前元素沒有定位默認是body，如果有定位則是html ie7以下，如果當前元素的某個父級觸發了layout，那么offsetParent就會被指向到這個觸發了layout特性的父節點上 ? 元素.offsetLeft[Top] : 只讀 屬性 當前元素到定位父級的距離（偏移值） 到當前元素的offsetParent的距離 ? 如果沒有定位父級 offsetParent -> body offsetLeft -> html 如果有定位父級 ie7以下：如果自己沒有定位，那么offsetLeft[Top]是到body的距離 如果自己有定位，那么就是到定位父級的距離 ? 其他瀏覽器：到定位父級的距離 ? ? 9）寬高 /* width height style.width : 樣式寬 clientWidth : 可視區寬 offsetWidth : 占位寬 */ <div id="div1" style="width: 100px; height: 100px; border: 1px solid red; padding: 10px; margin: 10px;"></div> alert( oDiv.style.width ); //100 alert( oDiv.clientWidth ); //樣式寬 + padding = 120 alert( oDiv.offsetWidth ); //樣式寬 + padding + border 可視區寬 + 邊框 = 122 ? ? 10）getPos（）；元素距瀏覽器最外部的絕對距離。 ? function getPos(obj) { var pos = {left:0, top:0}; while (obj) {//offsetLeft(Top)是到定位父級元素的距離 pos.left += obj.offsetLeft; pos.top += obj.offsetTop; obj = obj.offsetParent;//定位父級 } return pos; } ? 11）操作元素屬性的方法： ? oText.value = '222';//對其進行賦值 alert( oText.value );//對其進行讀取 oText['value'] = '222';//對其進行賦值 alert( oText['value'] );//對其進行讀取 對于變量必須用中括號 [] 形式 var name = 'value'; oText.name; 有問題 oText[name]; OK ? 元素.getAttribute(屬性名稱); 方法 獲取指定元素的指定屬性的值 ? //alert( oText.getAttribute('value') ); 元素.setAttribute(屬性名稱，屬性值); 方法 給指定元素指定的屬性設置值 ? //oText.setAttribute( 'value', 'hello' ); 元素.removeAttribute(屬性名稱); 方法 移除指定的元素的指定的屬性 ? //oText.removeAttribute( 'value' ); 用 . 和[]的形式無法操作元素的自定義屬性 getAttribute可以操作元素的自定義屬性 ? //alert( oText._name_ ); //undefined //alert( oText['_name_'] ); //undefined //alert( oText.getAttribute('_name_') ); //可以 ? var oImg = document.getElementById('img1'); 可以獲取元素屬性實際的值 ie7下還是會返回資源的絕對路徑 ? //alert( oImg.src ); 彈出內容有圖片所屬的絕對路徑 //alert( oImg['src'] );彈出內容有圖片所屬的絕對路徑 //alert( oImg.getAttribute('src') ); //alert( oImg.style.getAttribute('width') ); ? 11） 元素的動態創建： ? 在點擊oBtn時把輸入到oText中的內容追加到oLi中，在每個oLi中增加a標簽，點擊a標簽進行刪除該oLi ? oBtn.onclick = function() { ? /*
document.createElement(標簽名稱); 創建元素
*/ var oLi = document.createElement('li');//創建 oLi.innerHTML = oText.value;//設置li顯示內容 var oA = document.createElement('a'); oA.innerHTML = '刪除'; oA.href = 'javascript:;'; ? oA.onclick = function() { /* 父級.removeChild(要刪除的元素); 刪除元素 */ oUl.removeChild( this.parentNode );//把li刪除 } /* 父級.appendChild(要添加的元素) 方法 追加子元素 */ oLi.appendChild( oA );?//把a添加 li 中 /* 父級.insertBefore(新的元素，指定元素)?方法 在指定元素前面插入一個新元素 ? 在ie下如果第二個參數的節點不存在，會報錯 在其他標準瀏覽器下如果第二個參數的節點不存在，則會以appendChild的形式進行添加 */ //兼容IE判斷： if ( oUl.children[0] ) {//如果存在子節點 oUl.insertBefore( oLi, oUl.children[0] ); } else { oUl.appendChild( oLi ); } } ? /* 父級.replaceChild(新節點，被替換節點) 替換子節點 */ //document.body.replaceChild( oDiv, oP ); /* appendChild,insertBefore,replaceChild都可以操作動態創建出來的節點，也可以操作已有節點 */ //oP.appendChild( oDiv ); ? ? 12) 通過class獲取元素：getElementsByClassName(); ? document.getElementsByClassName("box");//獲取文檔所有的box var oUlid = document.getElementById("ul"); oUlid.getElementsByClassName("box");//獲取oUlid所有的box ? ? 13)寫一個addClass()和removeClass()方法： //addClass addClass(box,"xxxx"); function addClass(obj,className) { if(obj.className === ''){// 如果之前不存在class obj.className = className; }else {//如果存在class var arrClassName = obj.className.split(' '); var index = arrIndexOf(arrClassName,className); if(index == -1){//如果添加的class在原先的class中不存在 obj.className += ' ' + className; }//如果添加的class在原先的class中存在了,就不用添加了 } } //removeClass removeClass(dd,'b'); function removeClass(obj,className) { ? //如果原先存在class ? if(obj.className != ''){ ? var arrClassName = obj.className.split(' '); ? var index = arrIndexOf(arrClassName,className); ? //如果有匹配的 ? if(index != -1){ ? arrClassName.splice(index,1); ? obj.className = arrClassName.join(' '); ? } ? ? } ? } //判斷要添加的class與原先class進行比較是否相等 function arrIndexOf(arr,className) { for(var i = 0;i<arr.length;i++){ if(arr[i] == className){ return i; } } return -1; } ? ? 14) 表格操作： ? <table> ? <thead> ? <tr> <th>表頭</th> <th>表頭</th> <th>表頭</th> </tr> ? </thead> ? <tbody> ? <tr> <td>表內容</td> <td>表內容</td> <td>表內容</td> </tr> <tr> <td>表內容</td> <td>表內容</td> <td>表內容</td> </tr> <tr> <td>表內容</td> <td>表內容</td> <td>表內容</td> </tr> ? </tbody> ? </table> ? 獲取： ? tHead : 表格頭 tBodies : 表格正文 tFoot : 表格尾 rows : 行 cells : 列 ? ? 15) 表單 ? <form id="form1"> <input type="text" id="text1" name="username" value="" /> ? <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 ? <input type="checkbox" name="aihao" value="電影" />電影 <input type="checkbox" name="aihao" value="音樂" />音樂 <input type="checkbox" name="aihao" value="體育" />體育 ? <select name="city" value=""> <option>請選擇一個城市</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="廣州">廣州</option> <option value="深圳">深圳</option> </select> </form> ? 可以用name獲取表單中一個元素 表單.元素name：form1.username ? onchange?: 當表單值發生改變的時候觸發。 ? 文本： text : 當光標離開元素的時候再去判斷值是否發生了變化，如果發生了變化則觸發onchange事件 oForm.username.onchange = function() { alert('值變了'); } ? 單選、多選： name值要相同為一類，否則失效。 radio、checkbox: 標準下點擊的時候如果值變化了就會觸發on change 非標準下焦點離開的時候如果值變了會觸發 ? oForm.sex[0].onchange = function() { alert(this.value);//值 alert(this.checked);//是否被選中 } ? 下拉菜單： 選擇后就會觸發onchange事件。 oForm.city.onchange = function (){ alert(this.value ); } ? ? <form id="form1" action="http://www.baidu.com">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
onsubmit?: 事件 當表單被提交的時候觸發
oForm.submit(); 方法 提交表單
oForm.onsubmit = function() {
if (this.username.value == '') {
alert('請填寫用戶名');
return false;
}
}
onreset?: 當表單要重置的時候觸發
oForm.onreset = function() {
/*if ( confirm('你確定要重置？') ) {
return true;
} else {
return false;
}*/
return confirm('你確定要重置？');
} ? ?
2、BOM ? ? BOM : Browser Object Model 瀏覽器對象模型 ? 1) window.open() \ close()
open(地址默認是空白頁面，打開方式默認新窗口) 打開一個新窗口
aInput[0].onclick = function() {
window.open('http://www.baidu.com', '_self'); opener = window.open();//返回值 返回的新開頁面的window對象 opener.document.body.style.background = 'red'; ? window.close(); ff : 無法關閉 chrome : 直接關閉 ie : 詢問用戶 ? opener.close(); //可以通過關閉用window.open方法打開的新窗口 ? } ? 2）window.navigator.userAgent : 瀏覽器信息 ? alert( window.navigator.userAgent ) ? if ( window.navigator.userAgent.indexOf('MSIE') != -1 ) { alert('我是ie');// ie8的MSIE是8.0 ，7是7.0 .. } else { alert('我不是ie'); } ? ? 3）window.location : 地址 ? ? window.location.href = window.location內容 window.location.search = url?后面的內容 window.location.hash = url#后面的內容 ? ? 4)寬高 ? ? 可視區尺寸 alert( document.documentElement.clientHeight ); document.onclick = function() { //滾動距離 //alert( document.documentElement.scrollTop );//除去chrome //alert( document.body.scrollTop );//chrome //document.documentElement.scrollTop = 100 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //alert(scrollTop) var oDiv = document.getElementById('div1'); //scrollHeight : 內容實際寬高 alert(oDiv.scrollHeight); ? //offsetHeight //alert( document.body.offsetHeight ); //ie : 如果內容沒有可視區高，那么文檔高就是可視區 //alert( document.documentElement.offsetHeight ); ? } ? offsetTop :（left） 指 obj 距離body最上方或者定位父級的位置 ? clientHeight:（width） 大家對 clientHeight 都沒有什么異議，都認為是內容可視區域的高度，也就是說頁面瀏覽器中可以看到內容的這個區域的高度，一般是最后一個工具條以下到狀態欄以上的這個區域，與頁面內容無關。 ? offsetHeight:（width） IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。 NS、FF 認為 offsetHeight 是網頁內容實際高度，可以小于 clientHeight。 ? scrollHeight:（width） IE、Opera 認為 scrollHeight 是網頁內容實際高度，可以小于 clientHeight。 NS、FF 認為 scrollHeight 是網頁內容高度，不過最小值是 clientHeight ? 對某個HTML控件:（div...） offsetHeight（width）是自身元素的高度，scrollHeight（width）是 自身元素的高度+隱藏元素的高度。 ? ? ? onscroll事件 : 當滾動條滾動的時候觸發，在指定毫秒時間內觸發一次 ? onresize事件 : 當窗口大小發生變化的時候觸發 ? ? ?
3、Event ? 1）焦點事件 ? 焦點 : 使瀏覽器能夠區分用戶輸入的對象，當一個元素有焦點的時候，那么他就可以接收用戶的輸入。 我們可以通過一些方式給元素設置焦點 1.點擊 2.tab 3.js 不是所有元素都能夠接收焦點的.能夠響應用戶操作的元素才有焦點。比如文本輸入框、a標簽.. ? onfocus : 當元素獲取到焦點的時候觸發 ? onblur : 當元素失去焦點的時候觸發 ? oText.onfocus = function() { if ( this.value == '請輸入內容' ) { this.value = ''; } } oText.onblur = function() { if ( this.value == '' ) { this.value = '請輸入內容'; } } ? obj.focus() 給指定的元素設置焦點 obj.blur() 取消指定元素的焦點 obj.select() 選擇指定元素里面的文本內容，適用于具有焦點事件的元素。 ? ? 2）event事件對象、clientX、clientY ? event : 事件對象 , 當一個事件發生的時候，和當前這個對象發生的這個事件有關的一些詳細的信息都會被臨時保存到一個指定地方-event對象，供我們在需要的調用。飛機-黑匣子 ? 事件對象必須在一個事件調用的函數里面使用才有內容 事件函數：事件調用的函數，一個函數是不是事件函數，不在定義的決定，而是取決于這個調用的時候 ? 兼容： ie/chrome : event是一個內置全局對象 標準所有瀏覽器下 : 事件對象是通過事件函數的第一個參數傳入 獲取事件（Event）對象的兼容：ev = ev || window.event ? 如果一個函數是被事件調用的那么，這個函數定義的第一個參數就是事件對象 ? clientX、clientY : 當一個事件發生的時候，鼠標到頁面可視區的距離 ? ? alert( event ); //這里沒有事件 ? document.onclick = function() { alert(event); }; ? function fn1(ev) { //alert( event ); //alert( ev ); var ev = ev || event; //event對象的兼容 //alert(ev); /*for ( var attr in ev ) { // 把該事件對象的所有屬性都列出來 console.log( attr + ' = ' + ev[attr] ); }*/ alert(ev.clientX); } ? //fn1(); //不是事件調用的函數 document.onclick = fn1; //是事件調用的函數，所以event有內容 ? eg：紅色小方塊跟隨鼠標移動而移動： ? <body style="height: 2000px;"> <div id="div1"></div> </body> ? #div1 {width: 100px; height:100px; background: red; position: absolute;} ? window.onload = function() { //onmousemove : 當鼠標在一個元素上面移動的觸發 //觸發頻率不是像素，而是間隔時間，在一個指定時間內（很短），如果鼠標的位置和上一次的位置發生了變化，那么就會觸發一次 var oDiv = document.getElementById('div1'); document.onmousemove = function(ev) { var ev = ev || event; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //body有2000px高度，則需要用到滾動距離，可視區域高僅為2000px oDiv.style.left = ev.clientX + 'px'; oDiv.style.top = ev.clientY + scrollTop + 'px';//滾動條向下滾動后，鼠標到body頂部的距離就是clientY（鼠標到可視區頂部距離）+ scrollTop（滾動距離） } } ? ? 3）事件冒泡： ? ? 事件冒泡 : 當一個元素接收到事件的時候，會把他接收到的所有傳播給他的父級，一直到頂層window.事件冒泡機制 ? oDiv1.onclick = fn1; 給**加事件，給元素加事件處理函數，告訴div1，如果他接收到了一個點擊事件，那么他就去執行fn1 ? 如果oDiv1有父級元素設置了點擊事件，即使oDiv1沒有設置上一句點擊事件函數，但它也能接受到點擊事件，接受后將事件傳給父級元素。 ? 阻止冒泡 : 當前要阻止冒泡的事件函數中調用 event.cancelBubble = true; ? 例如：在一個頁面中，有很多元素，只有點擊oBtn按鈕才會顯示oDiv,點擊其他元素則隱藏。 ? oBtn.onclick = function(ev) { ? var ev = ev || event; ev.cancelBubble = true; //阻止當前對象的當前事件的冒泡，不會傳給父級（最后的父級為document） oDiv.style.display = 'block'; ? } document.onclick = function() { ? //點擊除了oBtn的其余所有元素都會產生事件冒泡，傳給document，執行oDiv消失 oDiv.style.display = 'none'; ? } ? 4)事件捕獲、綁定事件的形式、call ? 事件捕獲：捕獲階段是一個和冒泡階段完全相反的過程，即事件由祖先元素向子元素傳播，和一個石子兒從水面向水底下沉一樣，要說明的是在 IE，opera瀏覽器中，是不存在這個階段的。 ? 給一個對象綁定一個事件處理函數的第一種形式： obj.onclick = fn; 缺點： document.onclick = fn1; document.onclick = fn2; //會覆蓋前面綁定fn1 ? ? 給一個元素綁定事件函數的第二種形式： ? 給一個對象的同一個事件綁定多個不同的函數 ? ie：obj.attachEvent(事件名稱，事件函數); 1.沒有捕獲 2.事件名稱有on 3.事件函數執行的順序：標準ie->正序 非標準ie->倒序 4.函數中的this指向window 標準：obj.addEventListener(事件名稱，事件函數，是否捕獲); ? 1.有捕獲，第三個參數boolean值，就是決定注冊事件發生在捕獲階段還是冒泡階段: 默認是false，false:冒泡，true：捕獲 2.事件名稱沒有on 3.事件執行的順序是正序 4.函數中的this觸發該事件的對象obj ? call?：函數下的一個方法，call方法第一個參數可以改變函數執行過程中的內部this的指向，call方法從第二個參數開始都是原來函數的參數列表 ? function fn1() { alert(this); } document.attachEvent('onclick', function() { fn1.call(document); //把函數中this原來指向的window改成document }); ? ? ? function fn1(a, b) { alert(this); alert(a + b); } ? //fn1(); //window fn1.call(null, 10, 20); //調用函數 fn1() == fn1.call()；第一個參數為null，則不改變this 原來的指向 ? 事件綁定兼容寫法： ? function bind(obj, evname, fn) { if (obj.addEventListener) { obj.addEventListener(evname, fn, false); } else { obj.attachEvent('on' + evname, function() { fn.call(obj); }); } } ? 調用： bind(document, 'click', fn1); bind(document, 'click', fn2); ? ? 事件捕獲和事件冒泡例子： ? <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> ? eg1： ? false為冒泡，告訴div1\div2：如果有一個出去的事件觸發了你，你就去執行fn1這個函數。所以點擊div3的時候，執行順序div3-div2-div1 oDiv1.addEventListener('click', fn1, false); oDiv2.addEventListener('click', fn1, false); oDiv3.addEventListener('click', fn1, false); true為捕獲，告訴div1，如果有一個進去的事件觸發了你，你就去執行fn1這個函數。所以點擊div3的時候，執行順序div1-div2-div3 oDiv1.addEventListener('click', fn1, true); oDiv2.addEventListener('click', fn1, true); oDiv3.addEventListener('click', fn1, true); ? ? eg2： ? oDiv1.addEventListener('click', function() { alert(1); }, false);//冒泡，最后執行 oDiv1.addEventListener('click', function() { alert(3); }, true);//捕獲，點擊div3的時候先進入div1，首先執行 oDiv3.addEventListener('click', function() { alert(2); }, false);//冒泡，第二執行 ? 點擊div3的時候彈出的內容的先后順序為：3-2-1 ? ? 5)事件取消： ? 第一種事件綁定形式的取消: ? document.onclick = null; ? 第二種事件綁定形式的取消: ? ie : obj.detachEvent(事件名稱，事件函數); 標準 : obj.removeEventListener(事件名稱，事件函數，是否捕獲); ? document.addEventListener('click', fn1, false); ? document.removeEventListener('click', fn1, false); ? ? 6）鍵盤事件 ? onkeydown : 當鍵盤按鍵按下的時候觸發 onkeyup : 當鍵盤按鍵抬起的時候觸發 ? event.keyCode : 數字類型 鍵盤按鍵的值 鍵值 ctrlKey,shiftKey,altKey 布爾值 當一個事件發生的時候，如果ctrl || shift || alt 是按下的狀態，返回true，否則返回false document.onkeydown = function(ev) { var ev = ev || event; alert(ev.keyCode);//按下任意鍵，彈出該鍵的鍵值 ? } ? 同時按下回車和ctrl鍵：if (ev.keyCode == 13 && ev.ctrlKey) ? 不是所有元素都能夠接收鍵盤事件，能夠響應用戶輸入的元素，能夠接收焦點的元素就能夠接收鍵盤事件 onkeydown : 如果按下不抬起，那么會連續觸發 ? 7）時間默認行為 ? 事件默認行為：當一個事件發生的時候瀏覽器自己會默認做的事情 怎么阻止？ 當前這個行為是什么事件觸發的，然后在這個事件的處理函數中使用return false; return false阻止的是 obj.on事件名稱=fn 和attchEvent所觸發的默認行為，用addEventListener綁定的事件不能用這種方法阻止默認行為。addEventListener綁定的事件需要通過event下面的preventDefault(); ? 阻止菜單事件： ? document.onkeydown = function() { return false; } ? oncontextmenu : 瀏覽器右鍵菜單事件，當右鍵菜單（環境菜單）顯示出來的時候觸發 ? ? 8）拖拽 ? ? onmousedown : 選擇元素 onmousemove : 移動元素 onmouseup : 釋放元素 ? 元素限制范圍的拖拽封裝：drag() ： ? 拖拽的時候，如果有文字或圖片被選中，會產生問題 原因：當鼠標按下的時候，如果頁面中有文字或圖片被選中，那么會觸發瀏覽器默認拖拽的效果 解決： 標準：阻止默認行為 return false; 非標準ie：全局捕獲 obj.setCapture(); ? 全局捕獲 ： 當我們給一個元素設置全局捕獲以后，那么這個元素就會監聽后續發生的所有事件，當有事件發生的時候，事件會被全局捕獲元素所劫持，并觸發了全局捕獲元素含有的事件。 ie : 有，并且有效果 ff : 有，但是沒效果 chrome : 沒有 ? ? var oDiv = document.getElementById('div1'); var oImg = document.getElementById('img1'); drag(oImg); drag(oDiv); function drag(obj) { obj.onmousedown = function(ev) { ? var ev = ev || event; var disX = ev.clientX - this.offsetLeft;//此時方塊還沒動，求得鼠標位置距離方塊左邊的直線距離 var disY = ev.clientY - this.offsetTop; if ( obj.setCapture ) {//阻止IE瀏覽器的默認拖拽行為 obj.setCapture(); } document.onmousemove = function(ev) {//對全部文檔設置該事件，鼠標在文檔中移動不受其他元素影響 var ev = ev || event; ? var L = ev.clientX - disX; var T = ev.clientY - disY; if ( L < 0 ) { ? L = 0; //若left值小于0，則讓它等于0，限制在可視區范圍 //若if（L<100）{L=0;}，則在拖拽到100px位置時，會有磁性吸附效果，吸附到 L = 0 位置 ? } else if ( L > document.documentElement.clientWidth - obj.offsetWidth ) { ? L = document.documentElement.clientWidth - obj.offsetWidth; //若L大于瀏覽器可視區減去obj的寬度的值時，讓它等于該值，元素就不會拖拽出可視區 } if ( T < 0 ) { T = 0; } else if ( T > document.documentElement.clientHeight - obj.offsetHeight ) { T = document.documentElement.clientHeight - obj.offsetHeight; } obj.style.left = L + 'px'; //方塊跟隨鼠標位置移動 obj.style.top = T + 'px'; } document.onmouseup = function() { document.onmousemove = document.onmouseup = null; if ( obj.releaseCapture ) {//釋放全局捕獲 obj.releaseCapture(); } } return false; //阻止標準瀏覽器的默認拖拽行為 } } ? ? ? 9）鼠標滾輪事件 ? ie/chrome : onmousewheel 滾動值event.wheelDelta：上：120 下：-120 firefox : DOMMouseScroll 必須用addEventListener 滾動值event.detail：上：-3 下：3 return false阻止的是 obj.on事件名稱=fn 和attachEvent所觸發的默認行為 addEventListener綁定的事件需要通過event下面的preventDefault(); ? 滑輪控制方塊的高： ? var oDiv = document.getElementById('div1'); ? oDiv.onmousewheel = fn; if (oDiv.addEventListener) {//兼容FF oDiv.addEventListener('DOMMouseScroll', fn, false); } function fn(ev) { var ev = ev || event; var b = true; if (ev.wheelDelta) {//不同瀏覽器值的大小和正負不同，要統一起來 b = ev.wheelDelta > 0 ？true:false; } else { b = ev.detail < 0 ? true : false; } if ( b ) {//b為true是向上滾動，如果向上滾動 ? this.style.height = this.offsetHeight - 10 + 'px'; } else {//如果向下滾動 ? this.style.height = this.offsetHeight + 10 + 'px'; } if (ev.preventDefault) { //如果存在addEventListener，就取消默認行為 ev.preventDefault(); } return false; //取消默認行為 } ? 10）cookie ? cookie : 存儲數據，當用戶訪問了某個網站（網頁）的時候，我們就可以通過cookie來像訪問者電腦上存儲數據 ? 1.不同的瀏覽器存放的cookie位置不一樣，也是不能通用的 2.cookie的存儲是以域名形式進行區分的 3.cookie的數據可以設置名字的 4.一個域名下存放的cookie的個數是有限制的，不同的瀏覽器存放的個數不一樣 5.每個cookie存放的內容大小也是有限制的，不同的瀏覽器存放大小不一樣 ? 我們通過document.cookie來獲取當前網站下的cookie的時候，得到的字符串形式的值，他包含了當前網站下所有的cookie。他會把所有的cookie通過一個分號+空格的形式串聯起來 username=leo; age=32 ? 設置cookie： document.cookie = '名字=值'; document.cookie = 'username=leo'; document.cookie = 'age=32'; ? 如果我們想長時間存放一個cookie。需要在設置這個cookie的時候同時給他設置一個過期的字符串格式的時間。 ? cookie默認是臨時存儲的，當瀏覽器關閉進程的時候自動銷毀 ? 設置過期時間： ? document.cookie = '名稱=值;expires=' + 字符串格式的時間; ? var oDate = new Date();//是個時間對象，以毫秒為基礎 ? oDate.setDate( oDate.getDate() + 5 );//從現在時間到5天后，getDate()設置日期天數 ? 內容最好編碼存放,encodeURI： ? document.cookie = 'username='+ encodeURI('leo\n你好') +';expires=' + oDate.toGMTString(); //toGMTString()轉成字符方法 ? ? ? cookie函數封裝： ? 設置cookie： ? function setCookie(key, value, t) { var oDate = new Date(); oDate.setDate( oDate.getDate() + t ); document.cookie = key + '=' + encodeURI(value) + ';expires=' + oDate.toGMTString(); } ? ? 得到cookie： ? function getCookie(key) { var arr1 = document.cookie.split('; ');//username=leo; age=32 for (var i=0; i<arr1.length; i++) { var arr2 = arr1[i].split('=');//username=leo; age=32 if ( arr2[0] == key ) { return decodeURI(arr2[1]); } } } ? 移出cookie： ? function removeCookie(key) { setCookie(key, '', -1);//時間設為-1天，過期 } ? //setCookie('sex','男', 10); //alert( getCookie('sex') ); //removeCookie('sex'); ? ? ?
4、正則表達式 ? 正則 : 也叫做規則，讓計算機能夠讀懂人類的規則。正則都是操作字符串的。 ? 1）正則寫法：a是填寫的規則 ? var re = /a/; var re = new RegExp('a'); //在re作為參數的時候，只能用這種寫法 ? 2)轉義字符: ? \s : 空格 \S : 非空格 \d : 數字 \D : 非數字 \w : 字符 ( 字母 ，數字，下劃線_ ) \W : 非字符 ? ? . : 任意字符 \. : 真正的點 ? var str = 'a.c'; ? var re = /a\.c/; ? alert(re.test(str)); //true ? \b : 所處位置為獨立的部分 （ 起始，結束，空格 ） \B : 所處位置為非獨立的部分 ? ? var str = 'onetwo'; ? var re = /\bone/; ? alert( re.test(str) ); // true //\b所在位置為起始位置 ? ? var str = 'onetwo'; ? var re = /one\b/; ? alert( re.test(str) ); //false //\b所處位置有t ? ? \1 : 重復的第一個子項 \2 : 重復的第二個子項，以此類推 ? var str = 'abcb'; ? var re = /(a)(b)(c)\2/; ? alert( re.test(str) ); //true \2代表和第二項相同的值 ? var re = /(\w)\1/; //代表cc、99等兩個字符相等的 ? ? 3）正則常用方法： ? test : 正則去匹配字符串，如果匹配成功就返回真，如果匹配失敗就返回假 ? test的寫法 : 正則.test(字符串) ? var str = 'abcdef'; ? var re = /b/; ? alert( re.test(str) ); // true ? ? ? search : 正則去匹配字符串 , 如果匹配成功，就返回匹配成功的位置，如果匹配失敗就返回 -1 ? search的寫法 : 字符串.search(正則) ? 正則中默認是區分大小寫的.如果不區分大小寫的話，在正則的最后加標識 i ? var str = 'abcdef'; ? var re = /B/i; ? //var re = new RegExp('B','i'); ? alert( str.search(re) ); ? ? ? match : 正則去匹配字符串，如果匹配成功，就返回匹配成功的數組，如果匹配不成功，就返回null ? match的寫法 : 字符串.match(正則) ? 正則默認：正則匹配成功一次就會結束，不會繼續匹配 如果想全部查找，就要加標識 g (global全局匹配) ? 量詞 + : 至少出現一次 ? var str = 'haj123sdk54hask33dkhalsd879'; ? var re = /\d+/g; ? alert( str.match(re) ); //[123,54,33,879] ? ? ? ? replace : 正則去匹配字符串，匹配成功的字符去替換成新的字符串 ? replace的寫法 : 字符串.replace(正則,新的字符串) ? var str = 'aaa'; var re = /a+/g; ? str = str.replace(re,'b'); ? alert(str); // b ? ? ? ? | : 或的意思 ? replace : 第二個參數：可以是字符串，也可以是一個回調函數 ? eg:敏感詞過濾： ? HTML: ? 替換前<br /> <textarea> </textarea><br /> 替換后<br /> <textarea> </textarea><br /> <input type="button" value="確定" id="input1" /> ? JS: ? window.onload = function(){ var aT = document.getElementsByTagName('textarea'); var oInput = document.getElementById('input1'); var re = /菲稱|中國船|監視之下/g; oInput.onclick = function(){ //aT[1].value = aT[0].value.replace(re,'*'); //這樣只能把幾個漢字轉成一個* aT[1].value = aT[0].value.replace(re,function(str){?//函數的第一個參數：就是匹配成功的字符 var result = ''; for(var i=0;i<str.length;i++){ ? result += '*'; } return result; }); }; }; ? ? ? ? ? 4）匹配子項 : 小括號 () (還有另外一個意思，分組操作) ? 把正則的整體叫做（母親） 然后把左邊第一個小括號里面的正則，叫做這個第一個子項(母親的第一個孩子) 第二個小括號就是第二個孩子 ? var str = '2013-6-7'; ? var re = /(\d+)(-)/g; ? str = str.replace(re,function($0,$1,$2){ //第一個參數：$0（母親）,第二個參數 : $1(第一個孩子) //,第三個參數 : $1(第二個孩子) //alert( $2 ); // - //return $1 + '.'; return $0.substring(0,$0.length-1) + '.'; }); ? alert( str ); //2013.6.7 ? ? ? var str = 'abc'; ? var re = /(a)(b)(c)/; ? alert( str.match(re) ); //[abc,a,b,c](當match不加g的時候才可以獲取到子項的集合) ? ? 5）字符類： ? 字符類 : 一組相似的元素 [] 中括號的整體代表一個字符，[]中的內容都是或的關系 ? var str = 'abdc'; ? var re = /a[bde]c/; ? alert( re.test(str) ); //true ? ? 排除 : ^ 如果^寫在[]里面的話，就代表排除的意思 ? var str = 'abc'; ? var re = /a[^bde]c/; ? alert( re.test(str) ); // false ? ? 組合寫法：[a-z0-9A-Z]： ? var str = 'abc'; ? var re = /a[a-z0-9A-Z]c/; ? alert( re.test(str) );// true ? ? 6）量詞 : 代表前面的值出現的次數，{n,m}，至少出現n次，最多m次 ? {n,} 至少n次 * 任意次 {0,} ？ 零次或一次 {0,1} + 一次或任意次{1,} {n} 正好n次 ? eg： ? {4,7} : 最少出現4次，最多出現7次 {4,} : 最少出現4次 {4} : 正好出現4次 ? ? 7）正則收尾：^ 開始 $ 結束 ? ^ : 正則的最開始位置，就代筆起始的意思 $ : 正則的最后位置 , 就代筆結束的意思 ? eg:去掉前后空格 ? var str = ' hello '; ? alert( '('+trim(str)+')' ); // (hello) ? function trim(str){ var re = /^\s+|\s+$/g; return str.replace(re,''); } ? ? 8)正則與面向對象 ? 把方法包在一個JSON里 ? var re = { qq : /[1-9][0-9]{4,9}/, email : /^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/, number : /\d+/ }; ? 用的時候：re.email ? ? 9）常用正則例子： ? 匹配中文：[\u4e00-\u9fa5] 行首行尾空格：^\s*|\s*$ Email：^\w+@[a-z0-9]+(\.[a-z]+){1,3}$ 網址：[a-zA-z]+://[^\s]* QQ號：[1-9][0-9]{4,9} 郵政編碼：[1-9]\d{5} 身份證：[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x ?
轉載于:https://www.cnblogs.com/hello-web/p/7221465.html
總結
- 上一篇： lintcode-517-丑数
- 下一篇： JavaScript-作用域-预解析