1. 事件綁定$(el).bind

ie使用attachEvent，其它瀏覽器使用addEventListener，不同的是ie多了個(gè)on前綴，this綁定在window上，需要用call和apply修正this 的指向。

if (element.addEventListener) {
    element.addEventListener(type, handler, useCapture);
  } else {
    if (element.attachEvent) {
      element.attachEvent("on" + type, function(e){
         handler.call(element,e);
       });
    }
  }

2.獲取偏移量 $(el).position();

相對(duì)于包含塊的偏移量，直接取offsetLeft,offsetTop

{left: el.offsetLeft, top: el.offsetTop}

3.獲取相對(duì)于根元素的絕對(duì)位置$(el).offset()

調(diào)用dom元素的getBoundingClientRect方法，這個(gè)是鮮為人知的。

var rect = el.getBoundingClientRect();
{
 top: rect.top + document.body.scrollTop,
 left: rect.left + document.body.scrollLeft
}

4.修改css樣式 $(el).css({color:"red"})

style屬性是無法直接賦值的，但是給style.cssText屬性賦值，可以直接賦值到style屬性中，為了不覆蓋原有的style，我們?cè)谠械腸ssText后面追加字符

el.style.cssText+="background:red";

5.修改和獲取自定義屬性$(el).attr(name,val),

dom元素的getAttribute和setAttribute可以修改dom的自定義屬性，

el.getAttribute(name)

el.setAttribute(name,val);

另外，jquery還有一個(gè)prop方法在設(shè)置dom節(jié)點(diǎn)的固有屬性，例如checkbox，radio的checked屬性時(shí)，用attr可能設(shè)置不成功，這時(shí)需要用prop ，prop只能用來讀寫固有屬性，而attr是固有屬性和自定義都可以，但是有些特殊的固有屬性設(shè)置不成功時(shí)需要用prop

6.向上查找元素  $(el).parents(selector),$(el).closest(selector)

向上查找元素非常有用，原理是遍歷parentNode一直到根節(jié)點(diǎn)，判斷每一級(jí)父節(jié)點(diǎn)是否與選擇器相匹配,

高級(jí)瀏覽器通過matchesSelector 判斷一個(gè)dom元素是否匹配某個(gè)css 選擇器，不同的瀏覽器有不同的前綴，

var matchesSelector = element.webkitMatchesSelector || element.mozMatchesSelector ||
element.oMatchesSelector || element.matchesSelector

低版本的ie需要自己實(shí)現(xiàn)選擇器的判斷，為了簡(jiǎn)化問題，僅以id選擇器為例，其它選擇器雷同（判斷tagName,className,getAtrrbuite等）

var el=current,selector="#id1";
while(el.parentNode!=null){
if("#"+el.id==selector){ //el.webkitMatchesSelector(selector)
return el;
}
el=el.parentNode;
}

7.事件委托 $(selector).live("click",callback)

jQuery的live事件綁定機(jī)制非常強(qiáng)大，普通的bind只能在dom元素生成后才能綁定事件，而live則可以在任何時(shí)候，即使元素還沒有生成時(shí)就能綁定事件，使用起來相當(dāng)?shù)亩鄩K好省，live的原理自然是通過事件委托（事件代理）實(shí)現(xiàn)的，事件委托是指在父元素或根元素上綁定事件，事件委托可以提升性能，只需要一個(gè)點(diǎn)擊事件綁定就能處理所有元素的點(diǎn)擊事件。通過事件冒泡監(jiān)聽，判斷當(dāng)前點(diǎn)擊的元素event.target如果是要查找的目標(biāo)元素，則觸發(fā)事件回調(diào)函數(shù)，event.target只有一個(gè)，這會(huì)帶來一個(gè)問題，例如一個(gè)li元素包含一個(gè)a鏈接，我想在li元素上綁定事件監(jiān)聽a鏈接的點(diǎn)擊，直接通過event.target是不行的，需要查找父級(jí)元素，這就需要借助上一步封裝的parents或closest查找父級(jí)如果是匹配的目標(biāo)元素，也要觸發(fā)事件回調(diào)，示例代碼如下：

function live(selector,callback){
document.body.addEventListener("click",function(e){
var target=e.target || e.srcElement;
var list=closest(target,selector);//向上查找選擇器，需要借助上一步封裝的closest或parents函數(shù)
if(list.length>0){
callback.call(target,e);
}
});

}

8.判斷元素可見性 $(el).is(":visible")

這個(gè)是jquery特有的偽類:visible，只要當(dāng)前元素或其父節(jié)點(diǎn)不可見，就會(huì)返回false，和向上查找元素的原理一樣，一直向上查找到根節(jié)點(diǎn)，如果有style.display為none的，或style.visiblity為hidden的祖先元素則返回false，否則返回true，獲取style不能直接使用style屬性，因?yàn)橛行邮娇赡苁嵌x在css文件中的，使用window.getComputedStyle(element)可以得到一個(gè)dom元素的計(jì)算樣式，在ie8以下使用currentStyle獲取。

以上這篇jQuery原理系列-常用Dom操作詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論