1、DOM： ? DOM : Document Object Model 文檔對(duì)象模型 文檔：html頁(yè)面 文檔對(duì)象：頁(yè)面中元素 文檔對(duì)象模型：定義 為了能夠讓程序(js)去操作頁(yè)面中的元素 ? DOM會(huì)把文檔看作是一棵樹(shù)，同時(shí)定義了很多方法來(lái)操作這棵數(shù)中的每一個(gè)元素（節(jié)點(diǎn)）DOM節(jié)點(diǎn)（document-html-（head、body）..） ? getElementById getElementByTagName document document.body ? 1）childNodes 不推薦使用 ? 元素.childNodes : 只讀 屬性 子節(jié)點(diǎn)列表集合 childNodes只包含一級(jí)子節(jié)點(diǎn)，不包含后輩孫級(jí)以下的節(jié)點(diǎn) ? 標(biāo)準(zhǔn)瀏覽器下：包含了文本和元素類型的節(jié)點(diǎn)，也會(huì)包含非法嵌套的子節(jié)點(diǎn) //比如ul里的p標(biāo)簽。 非標(biāo)準(zhǔn)瀏覽器下：只包含元素類型的節(jié)點(diǎn)，ie7以下不會(huì)包含非法嵌套子節(jié)點(diǎn) 元素.nodeType : 只讀 屬性 當(dāng)前元素的節(jié)點(diǎn)類型 DOM節(jié)點(diǎn)的類型有12種 常見(jiàn)的如下： 元素節(jié)點(diǎn) : 1 屬性節(jié)點(diǎn) : 2 文本節(jié)點(diǎn) : 3 // 比如ul和第一個(gè)li的回車，也算一個(gè)空文本節(jié)點(diǎn) ? 為ul每一個(gè)元素設(shè)置背景顏色 for (var i=0; i<oUl.childNodes.length; i++) { if ( oUl.childNodes[i].nodeType == 1 ) { //通過(guò)判斷nodetype是不是元素節(jié)點(diǎn)來(lái)兼容標(biāo)準(zhǔn)和不標(biāo)準(zhǔn)瀏覽器 oUl.childNodes[i].style.background = 'red'; } ? ? 元素.attributes : 只讀 屬性 屬性列表集合 ? oUl.attributes.length //標(biāo)簽含有的屬性，比如 id style class 等 oUl.attributes[0].name // 第一個(gè)屬性的名稱 oUl.attributes[0].value // 第一個(gè)屬性的值
2）children 推薦使用 ? 元素.children : 只讀 屬性 子節(jié)點(diǎn)列表集合 標(biāo)準(zhǔn)下：只包含元素類型的節(jié)點(diǎn),，也會(huì)包含非法嵌套的子節(jié)點(diǎn) //比如ul里的p標(biāo)簽。 非標(biāo)準(zhǔn)下：只包含元素類型的節(jié)點(diǎn)，ie7以下不會(huì)包含非法嵌套子節(jié)點(diǎn) ? 為ul每一個(gè)元素設(shè)置背景顏色 for (var i=0; i<oUl.children.length; i++) { oUl.children[i].style.background = 'red'; } ? ? 3) firstChild（不推薦使用）、firstElementChild ? 元素.firstChild : 只讀 屬性 第一個(gè)子節(jié)點(diǎn) 標(biāo)準(zhǔn)下：firstChild會(huì)包含文本類型的節(jié)點(diǎn) 非標(biāo)準(zhǔn)下：只包含元素節(jié)點(diǎn) ? 元素.firstElementChild : 非標(biāo)準(zhǔn)不支持 只讀 屬性 標(biāo)準(zhǔn)下獲取第一個(gè)元素類型的子節(jié)點(diǎn) ? if ( oUl.firstElementChild ) { oUl.firstElementChild.style.background = 'red'; //標(biāo)準(zhǔn)下 } else { oUl.firstChild.style.background = 'red'; //非標(biāo)準(zhǔn)下 } ? 簡(jiǎn)寫：var oFirst = oUl.firstElementChild || oUl.firstChild; oFirst.style.background = 'red'; ? 如果含有空節(jié)點(diǎn)： ? if ( oUl.children[0] ) { oUl.children[0].style.background = 'red'; } else { alert( '沒(méi)有子節(jié)點(diǎn)可以設(shè)置' ); } ? ? 4) lastChild ? /* 元素.lastChild || 元素.lastElementChild 最后一個(gè)子節(jié)點(diǎn) */ var oLast = oUl.lastElementChild || oUl.lastChild; oLast.style.background = 'yellow'; ? 5) nextSibling ? /* 元素.nextSibling || 元素.nextElementSibling 下一個(gè)兄弟節(jié)點(diǎn) */ var oNext = oFirst.nextElementSibling || oFirst.nextSibling; oNext.style.background = 'blue'; ? 6) previousSibling ? /* 元素.previousSibling || 元素.previousElementSibling 上一個(gè)兄弟節(jié)點(diǎn) */ var oPrev = oLast.previousElementSibling || oLast.previousSibling; oPrev.style.background = 'orange'; ? 7）parentNode ? 元素.parentNode : 只讀 屬性 當(dāng)前節(jié)點(diǎn)的父級(jí)節(jié)點(diǎn)，只有一個(gè)，沒(méi)有兼容問(wèn)題 ? 8）offsetParent、offsetLeft ? 元素.offsetParent : 只讀 屬性 離當(dāng)前元素最近的一個(gè)有定位屬性的父節(jié)點(diǎn) 如果沒(méi)有定位父級(jí)，默認(rèn)是body ie7以下，如果當(dāng)前元素沒(méi)有定位默認(rèn)是body，如果有定位則是html ie7以下，如果當(dāng)前元素的某個(gè)父級(jí)觸發(fā)了layout，那么offsetParent就會(huì)被指向到這個(gè)觸發(fā)了layout特性的父節(jié)點(diǎn)上 ? 元素.offsetLeft[Top] : 只讀 屬性 當(dāng)前元素到定位父級(jí)的距離（偏移值） 到當(dāng)前元素的offsetParent的距離 ? 如果沒(méi)有定位父級(jí) offsetParent -> body offsetLeft -> html 如果有定位父級(jí) ie7以下：如果自己沒(méi)有定位，那么offsetLeft[Top]是到body的距離 如果自己有定位，那么就是到定位父級(jí)的距離 ? 其他瀏覽器：到定位父級(jí)的距離 ? ? 9）寬高 /* width height style.width : 樣式寬 clientWidth : 可視區(qū)寬 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 可視區(qū)寬 + 邊框 = 122 ? ? 10）getPos（）；元素距瀏覽器最外部的絕對(duì)距離。 ? function getPos(obj) { var pos = {left:0, top:0}; while (obj) {//offsetLeft(Top)是到定位父級(jí)元素的距離 pos.left += obj.offsetLeft; pos.top += obj.offsetTop; obj = obj.offsetParent;//定位父級(jí) } return pos; } ? 11）操作元素屬性的方法： ? oText.value = '222';//對(duì)其進(jìn)行賦值 alert( oText.value );//對(duì)其進(jìn)行讀取 oText['value'] = '222';//對(duì)其進(jìn)行賦值 alert( oText['value'] );//對(duì)其進(jìn)行讀取 對(duì)于變量必須用中括號(hào) [] 形式 var name = 'value'; oText.name; 有問(wèn)題 oText[name]; OK ? 元素.getAttribute(屬性名稱); 方法 獲取指定元素的指定屬性的值 ? //alert( oText.getAttribute('value') ); 元素.setAttribute(屬性名稱，屬性值); 方法 給指定元素指定的屬性設(shè)置值 ? //oText.setAttribute( 'value', 'hello' ); 元素.removeAttribute(屬性名稱); 方法 移除指定的元素的指定的屬性 ? //oText.removeAttribute( 'value' ); 用 . 和[]的形式無(wú)法操作元素的自定義屬性 getAttribute可以操作元素的自定義屬性 ? //alert( oText._name_ ); //undefined //alert( oText['_name_'] ); //undefined //alert( oText.getAttribute('_name_') ); //可以 ? var oImg = document.getElementById('img1'); 可以獲取元素屬性實(shí)際的值 ie7下還是會(huì)返回資源的絕對(duì)路徑 ? //alert( oImg.src ); 彈出內(nèi)容有圖片所屬的絕對(duì)路徑 //alert( oImg['src'] );彈出內(nèi)容有圖片所屬的絕對(duì)路徑 //alert( oImg.getAttribute('src') ); //alert( oImg.style.getAttribute('width') ); ? 11） 元素的動(dòng)態(tài)創(chuàng)建： ? 在點(diǎn)擊oBtn時(shí)把輸入到oText中的內(nèi)容追加到oLi中，在每個(gè)oLi中增加a標(biāo)簽，點(diǎn)擊a標(biāo)簽進(jìn)行刪除該oLi ? oBtn.onclick = function() { ? /*
document.createElement(標(biāo)簽名稱); 創(chuàng)建元素
*/ var oLi = document.createElement('li');//創(chuàng)建 oLi.innerHTML = oText.value;//設(shè)置li顯示內(nèi)容 var oA = document.createElement('a'); oA.innerHTML = '刪除'; oA.href = 'javascript:;'; ? oA.onclick = function() { /* 父級(jí).removeChild(要?jiǎng)h除的元素); 刪除元素 */ oUl.removeChild( this.parentNode );//把li刪除 } /* 父級(jí).appendChild(要添加的元素) 方法 追加子元素 */ oLi.appendChild( oA );?//把a(bǔ)添加 li 中 /* 父級(jí).insertBefore(新的元素，指定元素)?方法 在指定元素前面插入一個(gè)新元素 ? 在ie下如果第二個(gè)參數(shù)的節(jié)點(diǎn)不存在，會(huì)報(bào)錯(cuò) 在其他標(biāo)準(zhǔn)瀏覽器下如果第二個(gè)參數(shù)的節(jié)點(diǎn)不存在，則會(huì)以appendChild的形式進(jìn)行添加 */ //兼容IE判斷： if ( oUl.children[0] ) {//如果存在子節(jié)點(diǎn) oUl.insertBefore( oLi, oUl.children[0] ); } else { oUl.appendChild( oLi ); } } ? /* 父級(jí).replaceChild(新節(jié)點(diǎn)，被替換節(jié)點(diǎn)) 替換子節(jié)點(diǎn) */ //document.body.replaceChild( oDiv, oP ); /* appendChild,insertBefore,replaceChild都可以操作動(dòng)態(tài)創(chuàng)建出來(lái)的節(jié)點(diǎn)，也可以操作已有節(jié)點(diǎn) */ //oP.appendChild( oDiv ); ? ? 12) 通過(guò)class獲取元素：getElementsByClassName(); ? document.getElementsByClassName("box");//獲取文檔所有的box var oUlid = document.getElementById("ul"); oUlid.getElementsByClassName("box");//獲取oUlid所有的box ? ? 13)寫一個(gè)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進(jìn)行比較是否相等 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>表內(nèi)容</td> <td>表內(nèi)容</td> <td>表內(nèi)容</td> </tr> <tr> <td>表內(nèi)容</td> <td>表內(nèi)容</td> <td>表內(nèi)容</td> </tr> <tr> <td>表內(nèi)容</td> <td>表內(nèi)容</td> <td>表內(nèi)容</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="音樂(lè)" />音樂(lè) <input type="checkbox" name="aihao" value="體育" />體育 ? <select name="city" value=""> <option>請(qǐng)選擇一個(gè)城市</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="廣州">廣州</option> <option value="深圳">深圳</option> </select> </form> ? 可以用name獲取表單中一個(gè)元素 表單.元素name：form1.username ? onchange?: 當(dāng)表單值發(fā)生改變的時(shí)候觸發(fā)。 ? 文本： text : 當(dāng)光標(biāo)離開(kāi)元素的時(shí)候再去判斷值是否發(fā)生了變化，如果發(fā)生了變化則觸發(fā)onchange事件 oForm.username.onchange = function() { alert('值變了'); } ? 單選、多選： name值要相同為一類，否則失效。 radio、checkbox: 標(biāo)準(zhǔn)下點(diǎn)擊的時(shí)候如果值變化了就會(huì)觸發(fā)on change 非標(biāo)準(zhǔn)下焦點(diǎn)離開(kāi)的時(shí)候如果值變了會(huì)觸發(fā) ? oForm.sex[0].onchange = function() { alert(this.value);//值 alert(this.checked);//是否被選中 } ? 下拉菜單： 選擇后就會(huì)觸發(fā)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?: 事件 當(dāng)表單被提交的時(shí)候觸發(fā)
oForm.submit(); 方法 提交表單

oForm.onsubmit = function() {

if (this.username.value == '') {
alert('請(qǐng)?zhí)顚懹脩裘?#39;);
return false;
}

}

onreset?: 當(dāng)表單要重置的時(shí)候觸發(fā)
oForm.onreset = function() {

/*if ( confirm('你確定要重置？') ) {
return true;
} else {
return false;
}*/

return confirm('你確定要重置？');

} ? ?

---

2、BOM ? ? BOM : Browser Object Model 瀏覽器對(duì)象模型 ? 1) window.open() \ close()
open(地址默認(rèn)是空白頁(yè)面，打開(kāi)方式默認(rèn)新窗口) 打開(kāi)一個(gè)新窗口
aInput[0].onclick = function() {
window.open('http://www.baidu.com', '_self'); opener = window.open();//返回值 返回的新開(kāi)頁(yè)面的window對(duì)象 opener.document.body.style.background = 'red'; ? window.close(); ff : 無(wú)法關(guān)閉 chrome : 直接關(guān)閉 ie : 詢問(wèn)用戶 ? opener.close(); //可以通過(guò)關(guān)閉用window.open方法打開(kāi)的新窗口 ? } ? 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內(nèi)容 window.location.search = url?后面的內(nèi)容 window.location.hash = url#后面的內(nèi)容 ? ? 4)寬高 ? ? 可視區(qū)尺寸 alert( document.documentElement.clientHeight ); document.onclick = function() { //滾動(dòng)距離 //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 : 內(nèi)容實(shí)際寬高 alert(oDiv.scrollHeight); ? //offsetHeight //alert( document.body.offsetHeight ); //ie : 如果內(nèi)容沒(méi)有可視區(qū)高，那么文檔高就是可視區(qū) //alert( document.documentElement.offsetHeight ); ? } ? offsetTop :（left） 指 obj 距離body最上方或者定位父級(jí)的位置 ? clientHeight:（width） 大家對(duì) clientHeight 都沒(méi)有什么異議，都認(rèn)為是內(nèi)容可視區(qū)域的高度，也就是說(shuō)頁(yè)面瀏覽器中可以看到內(nèi)容的這個(gè)區(qū)域的高度，一般是最后一個(gè)工具條以下到狀態(tài)欄以上的這個(gè)區(qū)域，與頁(yè)面內(nèi)容無(wú)關(guān)。 ? offsetHeight:（width） IE、Opera 認(rèn)為 offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。 NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁(yè)內(nèi)容實(shí)際高度，可以小于 clientHeight。 ? scrollHeight:（width） IE、Opera 認(rèn)為 scrollHeight 是網(wǎng)頁(yè)內(nèi)容實(shí)際高度，可以小于 clientHeight。 NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁(yè)內(nèi)容高度，不過(guò)最小值是 clientHeight ? 對(duì)某個(gè)HTML控件:（div...） offsetHeight（width）是自身元素的高度，scrollHeight（width）是 自身元素的高度+隱藏元素的高度。 ? ? ? onscroll事件 : 當(dāng)滾動(dòng)條滾動(dòng)的時(shí)候觸發(fā)，在指定毫秒時(shí)間內(nèi)觸發(fā)一次 ? onresize事件 : 當(dāng)窗口大小發(fā)生變化的時(shí)候觸發(fā) ? ? ?

---

3、Event ? 1）焦點(diǎn)事件 ? 焦點(diǎn) : 使瀏覽器能夠區(qū)分用戶輸入的對(duì)象，當(dāng)一個(gè)元素有焦點(diǎn)的時(shí)候，那么他就可以接收用戶的輸入。 我們可以通過(guò)一些方式給元素設(shè)置焦點(diǎn) 1.點(diǎn)擊 2.tab 3.js 不是所有元素都能夠接收焦點(diǎn)的.能夠響應(yīng)用戶操作的元素才有焦點(diǎn)。比如文本輸入框、a標(biāo)簽.. ? onfocus : 當(dāng)元素獲取到焦點(diǎn)的時(shí)候觸發(fā) ? onblur : 當(dāng)元素失去焦點(diǎn)的時(shí)候觸發(fā) ? oText.onfocus = function() { if ( this.value == '請(qǐng)輸入內(nèi)容' ) { this.value = ''; } } oText.onblur = function() { if ( this.value == '' ) { this.value = '請(qǐng)輸入內(nèi)容'; } } ? obj.focus() 給指定的元素設(shè)置焦點(diǎn) obj.blur() 取消指定元素的焦點(diǎn) obj.select() 選擇指定元素里面的文本內(nèi)容，適用于具有焦點(diǎn)事件的元素。 ? ? 2）event事件對(duì)象、clientX、clientY ? event : 事件對(duì)象 , 當(dāng)一個(gè)事件發(fā)生的時(shí)候，和當(dāng)前這個(gè)對(duì)象發(fā)生的這個(gè)事件有關(guān)的一些詳細(xì)的信息都會(huì)被臨時(shí)保存到一個(gè)指定地方-event對(duì)象，供我們?cè)谛枰恼{(diào)用。飛機(jī)-黑匣子 ? 事件對(duì)象必須在一個(gè)事件調(diào)用的函數(shù)里面使用才有內(nèi)容 事件函數(shù)：事件調(diào)用的函數(shù)，一個(gè)函數(shù)是不是事件函數(shù)，不在定義的決定，而是取決于這個(gè)調(diào)用的時(shí)候 ? 兼容： ie/chrome : event是一個(gè)內(nèi)置全局對(duì)象 標(biāo)準(zhǔn)所有瀏覽器下 : 事件對(duì)象是通過(guò)事件函數(shù)的第一個(gè)參數(shù)傳入 獲取事件（Event）對(duì)象的兼容：ev = ev || window.event ? 如果一個(gè)函數(shù)是被事件調(diào)用的那么，這個(gè)函數(shù)定義的第一個(gè)參數(shù)就是事件對(duì)象 ? clientX、clientY : 當(dāng)一個(gè)事件發(fā)生的時(shí)候，鼠標(biāo)到頁(yè)面可視區(qū)的距離 ? ? alert( event ); //這里沒(méi)有事件 ? document.onclick = function() { alert(event); }; ? function fn1(ev) { //alert( event ); //alert( ev ); var ev = ev || event; //event對(duì)象的兼容 //alert(ev); /*for ( var attr in ev ) { // 把該事件對(duì)象的所有屬性都列出來(lái) console.log( attr + ' = ' + ev[attr] ); }*/ alert(ev.clientX); } ? //fn1(); //不是事件調(diào)用的函數(shù) document.onclick = fn1; //是事件調(diào)用的函數(shù)，所以event有內(nèi)容 ? eg：紅色小方塊跟隨鼠標(biāo)移動(dòng)而移動(dòng)： ? <body style="height: 2000px;"> <div id="div1"></div> </body> ? #div1 {width: 100px; height:100px; background: red; position: absolute;} ? window.onload = function() { //onmousemove : 當(dāng)鼠標(biāo)在一個(gè)元素上面移動(dòng)的觸發(fā) //觸發(fā)頻率不是像素，而是間隔時(shí)間，在一個(gè)指定時(shí)間內(nèi)（很短），如果鼠標(biāo)的位置和上一次的位置發(fā)生了變化，那么就會(huì)觸發(fā)一次 var oDiv = document.getElementById('div1'); document.onmousemove = function(ev) { var ev = ev || event; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //body有2000px高度，則需要用到滾動(dòng)距離，可視區(qū)域高僅為2000px oDiv.style.left = ev.clientX + 'px'; oDiv.style.top = ev.clientY + scrollTop + 'px';//滾動(dòng)條向下滾動(dòng)后，鼠標(biāo)到body頂部的距離就是clientY（鼠標(biāo)到可視區(qū)頂部距離）+ scrollTop（滾動(dòng)距離） } } ? ? 3）事件冒泡： ? ? 事件冒泡 : 當(dāng)一個(gè)元素接收到事件的時(shí)候，會(huì)把他接收到的所有傳播給他的父級(jí)，一直到頂層window.事件冒泡機(jī)制 ? oDiv1.onclick = fn1; 給**加事件，給元素加事件處理函數(shù)，告訴div1，如果他接收到了一個(gè)點(diǎn)擊事件，那么他就去執(zhí)行fn1 ? 如果oDiv1有父級(jí)元素設(shè)置了點(diǎn)擊事件，即使oDiv1沒(méi)有設(shè)置上一句點(diǎn)擊事件函數(shù)，但它也能接受到點(diǎn)擊事件，接受后將事件傳給父級(jí)元素。 ? 阻止冒泡 : 當(dāng)前要阻止冒泡的事件函數(shù)中調(diào)用 event.cancelBubble = true; ? 例如：在一個(gè)頁(yè)面中，有很多元素，只有點(diǎn)擊oBtn按鈕才會(huì)顯示oDiv,點(diǎn)擊其他元素則隱藏。 ? oBtn.onclick = function(ev) { ? var ev = ev || event; ev.cancelBubble = true; //阻止當(dāng)前對(duì)象的當(dāng)前事件的冒泡，不會(huì)傳給父級(jí)（最后的父級(jí)為document） oDiv.style.display = 'block'; ? } document.onclick = function() { ? //點(diǎn)擊除了oBtn的其余所有元素都會(huì)產(chǎn)生事件冒泡，傳給document，執(zhí)行oDiv消失 oDiv.style.display = 'none'; ? } ? 4)事件捕獲、綁定事件的形式、call ? 事件捕獲：捕獲階段是一個(gè)和冒泡階段完全相反的過(guò)程，即事件由祖先元素向子元素傳播，和一個(gè)石子兒從水面向水底下沉一樣，要說(shuō)明的是在 IE，opera瀏覽器中，是不存在這個(gè)階段的。 ? 給一個(gè)對(duì)象綁定一個(gè)事件處理函數(shù)的第一種形式： obj.onclick = fn; 缺點(diǎn)： document.onclick = fn1; document.onclick = fn2; //會(huì)覆蓋前面綁定fn1 ? ? 給一個(gè)元素綁定事件函數(shù)的第二種形式： ? 給一個(gè)對(duì)象的同一個(gè)事件綁定多個(gè)不同的函數(shù) ? ie：obj.attachEvent(事件名稱，事件函數(shù)); 1.沒(méi)有捕獲 2.事件名稱有on 3.事件函數(shù)執(zhí)行的順序：標(biāo)準(zhǔn)ie->正序 非標(biāo)準(zhǔn)ie->倒序 4.函數(shù)中的this指向window 標(biāo)準(zhǔn)：obj.addEventListener(事件名稱，事件函數(shù)，是否捕獲); ? 1.有捕獲，第三個(gè)參數(shù)boolean值，就是決定注冊(cè)事件發(fā)生在捕獲階段還是冒泡階段: 默認(rèn)是false，false:冒泡，true：捕獲 2.事件名稱沒(méi)有on 3.事件執(zhí)行的順序是正序 4.函數(shù)中的this觸發(fā)該事件的對(duì)象obj ? call?：函數(shù)下的一個(gè)方法，call方法第一個(gè)參數(shù)可以改變函數(shù)執(zhí)行過(guò)程中的內(nèi)部this的指向，call方法從第二個(gè)參數(shù)開(kāi)始都是原來(lái)函數(shù)的參數(shù)列表 ? function fn1() { alert(this); } document.attachEvent('onclick', function() { fn1.call(document); //把函數(shù)中this原來(lái)指向的window改成document }); ? ? ? function fn1(a, b) { alert(this); alert(a + b); } ? //fn1(); //window fn1.call(null, 10, 20); //調(diào)用函數(shù) fn1() == fn1.call()；第一個(gè)參數(shù)為null，則不改變this 原來(lái)的指向 ? 事件綁定兼容寫法： ? function bind(obj, evname, fn) { if (obj.addEventListener) { obj.addEventListener(evname, fn, false); } else { obj.attachEvent('on' + evname, function() { fn.call(obj); }); } } ? 調(diào)用： bind(document, 'click', fn1); bind(document, 'click', fn2); ? ? 事件捕獲和事件冒泡例子： ? <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> ? eg1： ? false為冒泡，告訴div1\div2：如果有一個(gè)出去的事件觸發(fā)了你，你就去執(zhí)行fn1這個(gè)函數(shù)。所以點(diǎn)擊div3的時(shí)候，執(zhí)行順序div3-div2-div1 oDiv1.addEventListener('click', fn1, false); oDiv2.addEventListener('click', fn1, false); oDiv3.addEventListener('click', fn1, false); true為捕獲，告訴div1，如果有一個(gè)進(jìn)去的事件觸發(fā)了你，你就去執(zhí)行fn1這個(gè)函數(shù)。所以點(diǎn)擊div3的時(shí)候，執(zhí)行順序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);//冒泡，最后執(zhí)行 oDiv1.addEventListener('click', function() { alert(3); }, true);//捕獲，點(diǎn)擊div3的時(shí)候先進(jìn)入div1，首先執(zhí)行 oDiv3.addEventListener('click', function() { alert(2); }, false);//冒泡，第二執(zhí)行 ? 點(diǎn)擊div3的時(shí)候彈出的內(nèi)容的先后順序?yàn)?#xff1a;3-2-1 ? ? 5)事件取消： ? 第一種事件綁定形式的取消: ? document.onclick = null; ? 第二種事件綁定形式的取消: ? ie : obj.detachEvent(事件名稱，事件函數(shù)); 標(biāo)準(zhǔn) : obj.removeEventListener(事件名稱，事件函數(shù)，是否捕獲); ? document.addEventListener('click', fn1, false); ? document.removeEventListener('click', fn1, false); ? ? 6）鍵盤事件 ? onkeydown : 當(dāng)鍵盤按鍵按下的時(shí)候觸發(fā) onkeyup : 當(dāng)鍵盤按鍵抬起的時(shí)候觸發(fā) ? event.keyCode : 數(shù)字類型 鍵盤按鍵的值 鍵值 ctrlKey,shiftKey,altKey 布爾值 當(dāng)一個(gè)事件發(fā)生的時(shí)候，如果ctrl || shift || alt 是按下的狀態(tài)，返回true，否則返回false document.onkeydown = function(ev) { var ev = ev || event; alert(ev.keyCode);//按下任意鍵，彈出該鍵的鍵值 ? } ? 同時(shí)按下回車和ctrl鍵：if (ev.keyCode == 13 && ev.ctrlKey) ? 不是所有元素都能夠接收鍵盤事件，能夠響應(yīng)用戶輸入的元素，能夠接收焦點(diǎn)的元素就能夠接收鍵盤事件 onkeydown : 如果按下不抬起，那么會(huì)連續(xù)觸發(fā) ? 7）時(shí)間默認(rèn)行為 ? 事件默認(rèn)行為：當(dāng)一個(gè)事件發(fā)生的時(shí)候?yàn)g覽器自己會(huì)默認(rèn)做的事情 怎么阻止？ 當(dāng)前這個(gè)行為是什么事件觸發(fā)的，然后在這個(gè)事件的處理函數(shù)中使用return false; return false阻止的是 obj.on事件名稱=fn 和attchEvent所觸發(fā)的默認(rèn)行為，用addEventListener綁定的事件不能用這種方法阻止默認(rèn)行為。addEventListener綁定的事件需要通過(guò)event下面的preventDefault(); ? 阻止菜單事件： ? document.onkeydown = function() { return false; } ? oncontextmenu : 瀏覽器右鍵菜單事件，當(dāng)右鍵菜單（環(huán)境菜單）顯示出來(lái)的時(shí)候觸發(fā) ? ? 8）拖拽 ? ? onmousedown : 選擇元素 onmousemove : 移動(dòng)元素 onmouseup : 釋放元素 ? 元素限制范圍的拖拽封裝：drag() ： ? 拖拽的時(shí)候，如果有文字或圖片被選中，會(huì)產(chǎn)生問(wèn)題 原因：當(dāng)鼠標(biāo)按下的時(shí)候，如果頁(yè)面中有文字或圖片被選中，那么會(huì)觸發(fā)瀏覽器默認(rèn)拖拽的效果 解決： 標(biāo)準(zhǔn)：阻止默認(rèn)行為 return false; 非標(biāo)準(zhǔn)ie：全局捕獲 obj.setCapture(); ? 全局捕獲 ： 當(dāng)我們給一個(gè)元素設(shè)置全局捕獲以后，那么這個(gè)元素就會(huì)監(jiān)聽(tīng)后續(xù)發(fā)生的所有事件，當(dāng)有事件發(fā)生的時(shí)候，事件會(huì)被全局捕獲元素所劫持，并觸發(fā)了全局捕獲元素含有的事件。 ie : 有，并且有效果 ff : 有，但是沒(méi)效果 chrome : 沒(méi)有 ? ? 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;//此時(shí)方塊還沒(méi)動(dòng)，求得鼠標(biāo)位置距離方塊左邊的直線距離 var disY = ev.clientY - this.offsetTop; if ( obj.setCapture ) {//阻止IE瀏覽器的默認(rèn)拖拽行為 obj.setCapture(); } document.onmousemove = function(ev) {//對(duì)全部文檔設(shè)置該事件，鼠標(biāo)在文檔中移動(dòng)不受其他元素影響 var ev = ev || event; ? var L = ev.clientX - disX; var T = ev.clientY - disY; if ( L < 0 ) { ? L = 0; //若left值小于0，則讓它等于0，限制在可視區(qū)范圍 //若if（L<100）{L=0;}，則在拖拽到100px位置時(shí)，會(huì)有磁性吸附效果，吸附到 L = 0 位置 ? } else if ( L > document.documentElement.clientWidth - obj.offsetWidth ) { ? L = document.documentElement.clientWidth - obj.offsetWidth; //若L大于瀏覽器可視區(qū)減去obj的寬度的值時(shí)，讓它等于該值，元素就不會(huì)拖拽出可視區(qū) } if ( T < 0 ) { T = 0; } else if ( T > document.documentElement.clientHeight - obj.offsetHeight ) { T = document.documentElement.clientHeight - obj.offsetHeight; } obj.style.left = L + 'px'; //方塊跟隨鼠標(biāo)位置移動(dòng) obj.style.top = T + 'px'; } document.onmouseup = function() { document.onmousemove = document.onmouseup = null; if ( obj.releaseCapture ) {//釋放全局捕獲 obj.releaseCapture(); } } return false; //阻止標(biāo)準(zhǔn)瀏覽器的默認(rèn)拖拽行為 } } ? ? ? 9）鼠標(biāo)滾輪事件 ? ie/chrome : onmousewheel 滾動(dòng)值event.wheelDelta：上：120 下：-120 firefox : DOMMouseScroll 必須用addEventListener 滾動(dòng)值event.detail：上：-3 下：3 return false阻止的是 obj.on事件名稱=fn 和attachEvent所觸發(fā)的默認(rèn)行為 addEventListener綁定的事件需要通過(guò)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) {//不同瀏覽器值的大小和正負(fù)不同，要統(tǒng)一起來(lái) b = ev.wheelDelta > 0 ？true:false; } else { b = ev.detail < 0 ? true : false; } if ( b ) {//b為true是向上滾動(dòng)，如果向上滾動(dòng) ? this.style.height = this.offsetHeight - 10 + 'px'; } else {//如果向下滾動(dòng) ? this.style.height = this.offsetHeight + 10 + 'px'; } if (ev.preventDefault) { //如果存在addEventListener，就取消默認(rèn)行為 ev.preventDefault(); } return false; //取消默認(rèn)行為 } ? 10）cookie ? cookie : 存儲(chǔ)數(shù)據(jù)，當(dāng)用戶訪問(wèn)了某個(gè)網(wǎng)站（網(wǎng)頁(yè)）的時(shí)候，我們就可以通過(guò)cookie來(lái)像訪問(wèn)者電腦上存儲(chǔ)數(shù)據(jù) ? 1.不同的瀏覽器存放的cookie位置不一樣，也是不能通用的 2.cookie的存儲(chǔ)是以域名形式進(jìn)行區(qū)分的 3.cookie的數(shù)據(jù)可以設(shè)置名字的 4.一個(gè)域名下存放的cookie的個(gè)數(shù)是有限制的，不同的瀏覽器存放的個(gè)數(shù)不一樣 5.每個(gè)cookie存放的內(nèi)容大小也是有限制的，不同的瀏覽器存放大小不一樣 ? 我們通過(guò)document.cookie來(lái)獲取當(dāng)前網(wǎng)站下的cookie的時(shí)候，得到的字符串形式的值，他包含了當(dāng)前網(wǎng)站下所有的cookie。他會(huì)把所有的cookie通過(guò)一個(gè)分號(hào)+空格的形式串聯(lián)起來(lái) username=leo; age=32 ? 設(shè)置cookie： document.cookie = '名字=值'; document.cookie = 'username=leo'; document.cookie = 'age=32'; ? 如果我們想長(zhǎng)時(shí)間存放一個(gè)cookie。需要在設(shè)置這個(gè)cookie的時(shí)候同時(shí)給他設(shè)置一個(gè)過(guò)期的字符串格式的時(shí)間。 ? cookie默認(rèn)是臨時(shí)存儲(chǔ)的，當(dāng)瀏覽器關(guān)閉進(jìn)程的時(shí)候自動(dòng)銷毀 ? 設(shè)置過(guò)期時(shí)間： ? document.cookie = '名稱=值;expires=' + 字符串格式的時(shí)間; ? var oDate = new Date();//是個(gè)時(shí)間對(duì)象，以毫秒為基礎(chǔ) ? oDate.setDate( oDate.getDate() + 5 );//從現(xiàn)在時(shí)間到5天后，getDate()設(shè)置日期天數(shù) ? 內(nèi)容最好編碼存放,encodeURI： ? document.cookie = 'username='+ encodeURI('leo\n你好') +';expires=' + oDate.toGMTString(); //toGMTString()轉(zhuǎn)成字符方法 ? ? ? cookie函數(shù)封裝： ? 設(shè)置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);//時(shí)間設(shè)為-1天，過(guò)期 } ? //setCookie('sex','男', 10); //alert( getCookie('sex') ); //removeCookie('sex'); ? ? ?

---

4、正則表達(dá)式 ? 正則 : 也叫做規(guī)則，讓計(jì)算機(jī)能夠讀懂人類的規(guī)則。正則都是操作字符串的。 ? 1）正則寫法：a是填寫的規(guī)則 ? var re = /a/; var re = new RegExp('a'); //在re作為參數(shù)的時(shí)候，只能用這種寫法 ? 2)轉(zhuǎn)義字符: ? \s : 空格 \S : 非空格 \d : 數(shù)字 \D : 非數(shù)字 \w : 字符 ( 字母 ，數(shù)字，下劃線_ ) \W : 非字符 ? ? . : 任意字符 \. : 真正的點(diǎn) ? var str = 'a.c'; ? var re = /a\.c/; ? alert(re.test(str)); //true ? \b : 所處位置為獨(dú)立的部分 （ 起始，結(jié)束，空格 ） \B : 所處位置為非獨(dú)立的部分 ? ? 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 : 重復(fù)的第一個(gè)子項(xiàng) \2 : 重復(fù)的第二個(gè)子項(xiàng)，以此類推 ? var str = 'abcb'; ? var re = /(a)(b)(c)\2/; ? alert( re.test(str) ); //true \2代表和第二項(xiàng)相同的值 ? var re = /(\w)\1/; //代表cc、99等兩個(gè)字符相等的 ? ? 3）正則常用方法： ? test : 正則去匹配字符串，如果匹配成功就返回真，如果匹配失敗就返回假 ? test的寫法 : 正則.test(字符串) ? var str = 'abcdef'; ? var re = /b/; ? alert( re.test(str) ); // true ? ? ? search : 正則去匹配字符串 , 如果匹配成功，就返回匹配成功的位置，如果匹配失敗就返回 -1 ? search的寫法 : 字符串.search(正則) ? 正則中默認(rèn)是區(qū)分大小寫的.如果不區(qū)分大小寫的話，在正則的最后加標(biāo)識(shí) i ? var str = 'abcdef'; ? var re = /B/i; ? //var re = new RegExp('B','i'); ? alert( str.search(re) ); ? ? ? match : 正則去匹配字符串，如果匹配成功，就返回匹配成功的數(shù)組，如果匹配不成功，就返回null ? match的寫法 : 字符串.match(正則) ? 正則默認(rèn)：正則匹配成功一次就會(huì)結(jié)束，不會(huì)繼續(xù)匹配 如果想全部查找，就要加標(biāo)識(shí) g (global全局匹配) ? 量詞 + : 至少出現(xiàn)一次 ? 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 : 第二個(gè)參數(shù)：可以是字符串，也可以是一個(gè)回調(diào)函數(shù) ? eg:敏感詞過(guò)濾： ? 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 = /菲稱|中國(guó)船|監(jiān)視之下/g; oInput.onclick = function(){ //aT[1].value = aT[0].value.replace(re,'*'); //這樣只能把幾個(gè)漢字轉(zhuǎn)成一個(gè)* aT[1].value = aT[0].value.replace(re,function(str){?//函數(shù)的第一個(gè)參數(shù)：就是匹配成功的字符 var result = ''; for(var i=0;i<str.length;i++){ ? result += '*'; } return result; }); }; }; ? ? ? ? ? 4）匹配子項(xiàng) : 小括號(hào) () (還有另外一個(gè)意思，分組操作) ? 把正則的整體叫做（母親） 然后把左邊第一個(gè)小括號(hào)里面的正則，叫做這個(gè)第一個(gè)子項(xiàng)(母親的第一個(gè)孩子) 第二個(gè)小括號(hào)就是第二個(gè)孩子 ? var str = '2013-6-7'; ? var re = /(\d+)(-)/g; ? str = str.replace(re,function($0,$1,$2){ //第一個(gè)參數(shù)：$0（母親）,第二個(gè)參數(shù) : $1(第一個(gè)孩子) //,第三個(gè)參數(shù) : $1(第二個(gè)孩子) //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](當(dāng)match不加g的時(shí)候才可以獲取到子項(xiàng)的集合) ? ? 5）字符類： ? 字符類 : 一組相似的元素 [] 中括號(hào)的整體代表一個(gè)字符，[]中的內(nèi)容都是或的關(guān)系 ? 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）量詞 : 代表前面的值出現(xiàn)的次數(shù)，{n,m}，至少出現(xiàn)n次，最多m次 ? {n,} 至少n次 * 任意次 {0,} ？ 零次或一次 {0,1} + 一次或任意次{1,} {n} 正好n次 ? eg： ? {4,7} : 最少出現(xiàn)4次，最多出現(xiàn)7次 {4,} : 最少出現(xiàn)4次 {4} : 正好出現(xiàn)4次 ? ? 7）正則收尾：^ 開(kāi)始 $ 結(jié)束 ? ^ : 正則的最開(kāi)始位置，就代筆起始的意思 $ : 正則的最后位置 , 就代筆結(jié)束的意思 ? eg:去掉前后空格 ? var str = ' hello '; ? alert( '('+trim(str)+')' ); // (hello) ? function trim(str){ var re = /^\s+|\s+$/g; return str.replace(re,''); } ? ? 8)正則與面向?qū)ο?/span> ? 把方法包在一個(gè)JSON里 ? var re = { qq : /[1-9][0-9]{4,9}/, email : /^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/, number : /\d+/ }; ? 用的時(shí)候：re.email ? ? 9）常用正則例子： ? 匹配中文：[\u4e00-\u9fa5] 行首行尾空格：^\s*|\s*$ Email：^\w+@[a-z0-9]+(\.[a-z]+){1,3}$ 網(wǎng)址：[a-zA-z]+://[^\s]* QQ號(hào)：[1-9][0-9]{4,9} 郵政編碼：[1-9]\d{5} 身份證：[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x ?

轉(zhuǎn)載于:https://www.cnblogs.com/hello-web/p/7221465.html

總結(jié)

以上是生活随笔為你收集整理的JS笔记-强化版2的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。