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

ie使用attachEvent，其它瀏覽器使用addEventListener，不同的是ie多了個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();

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

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

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

調用dom元素的getBoundingClientRect方法，這個是鮮為人知的。

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，我們在原有的cssText后面追加字符

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

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

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

el.getAttribute(name)

el.setAttribute(name,val);

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

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

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

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

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

低版本的ie需要自己實現選擇器的判斷，為了簡化問題，僅以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事件綁定機制非常強大，普通的bind只能在dom元素生成后才能綁定事件，而live則可以在任何時候，即使元素還沒有生成時就能綁定事件，使用起來相當的多塊好省，live的原理自然是通過事件委托（事件代理）實現的，事件委托是指在父元素或根元素上綁定事件，事件委托可以提升性能，只需要一個點擊事件綁定就能處理所有元素的點擊事件。通過事件冒泡監聽，判斷當前點擊的元素event.target如果是要查找的目標元素，則觸發事件回調函數，event.target只有一個，這會帶來一個問題，例如一個li元素包含一個a鏈接，我想在li元素上綁定事件監聽a鏈接的點擊，直接通過event.target是不行的，需要查找父級元素，這就需要借助上一步封裝的parents或closest查找父級如果是匹配的目標元素，也要觸發事件回調，示例代碼如下：

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

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

這個是jquery特有的偽類:visible，只要當前元素或其父節點不可見，就會返回false，和向上查找元素的原理一樣，一直向上查找到根節點，如果有style.display為none的，或style.visiblity為hidden的祖先元素則返回false，否則返回true，獲取style不能直接使用style屬性，因為有些樣式可能是定義在css文件中的，使用window.getComputedStyle(element)可以得到一個dom元素的計算樣式，在ie8以下使用currentStyle獲取。

以上這篇jQuery原理系列-常用Dom操作詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。