JavaScript操作DOM與jQuyer操作DOM的對比

標籤：性問題   相關   實現   order   get   element   並且   bsp   相容性   

1.通過jQuery方法封裝後的對象，是一個類數組對象。它與DOM對象完全不同，唯一相似的是它們都能操作DOM。

2.通過jQuery方法封裝後的對象，是一個類數組對象。它與DOM對象完全不同，唯一相似的是它們都能操作DOM。通過jQuery處理DOM的操作，可以讓開發人員更專註商務邏輯的開發，而不需要我們具體知道哪個DOM節點有那些方法，也不需要關心不同瀏覽器的相容性問題，我們通過jQuery提供的API進行開發，代碼也會更加精短。

3.jQuery是一個類數組對象，而DOM對象就是一個單獨的DOM元素。

4.數組的索引是從0開始的，也就是第一個元素下標是0

例子：

jQuery對象自身提供一個.get() 方法允許我們直接存取jQuery對象中相關的DOM節點，get方法中提供一個元素的索引：

var $div = $(‘div‘) //jQuery對象

var div = $div.get(0) //通過get方法，轉化成DOM對象

5.通過$(dom)方法將普通的dom對象加工成jQuery對象之後，我們就可以調用jQuery的方法了

 jQuery選取器：元素選取器   id選取器    類別選取器    *選取器  層級選取器  屬性選取器（子項目 後代元素 兄弟元素 相鄰元素）

注意：

1. IE會將注釋節點實現為元素，所以在IE中調用getElementsByTagName裡面會包含注釋節點，這個通常是不應該的
2. getElementById的參數在IE8及較低的版本不區分大小寫
3. IE7及較低的版本中，表單元素中，如果表單A的name屬性名稱用了另一個元素B的ID名並且A在B之前，那麼getElementById會選中A
4. IE8及較低的版本，瀏覽器不支援getElementsByClassName

原生擷取：

//擷取頁面中所有的元素
var elements1 = document.getElementsByTagName(‘*‘);

jq擷取：

//擷取頁面中所有的元素
var elements2 = $("*")? ;
//===表示資料和類型都相等
if(elements2.length === elements1.length){
　　elements2.css("border","1px solid red");
}

子選取器
$(‘div > p‘) 選擇所有div元素裡面的子項目P

後代選取器
$(‘div p‘) 選擇所有div元素裡面的p元素

相鄰兄弟選取器
$(".prev + div")選取prev後面的第一個的div兄弟節點

一般相鄰選取器
$(".prev ~ div")選取prev後面的所有的div兄弟節點

幾種方式可以隱藏一個元素：

1. CSS display的值是none。
2. type="hidden"的表單元素。
3. 寬度和高度都顯式設定為0。
4. 一個祖先元素是隱藏的，該元素是不會在頁面上顯示
5. CSS visibility的值是hidden
6. CSS opacity的指是0

1. :nth-child(index)從1開始的，而eq(index)是從0開始的
2. nth-child(n) 與 :nth-last-child(n) 的區別前者是從前往後計算，後者從後往前計算

操作特性的DOM方法主要有3個，getAttribute方法、setAttribute方法和removeAttribute方法

attr()有4個運算式

1. attr(傳入屬性名稱)：擷取屬性的值
2. attr(屬性名稱, 屬性值)：設定屬性的值
3. attr(屬性名稱,函數值)：設定屬性的函數值
4. attr(attributes)：給指定元素設定多個屬性值，即：{屬性名稱一: “屬性值一” , 屬性名稱二: “屬性值二” , … … }

removeAttr()刪除方法

.removeAttr( attributeName ) : 為匹配的元素集合中的每個元素中移除一個屬性（attribute）

優點：

attr、removeAttr都是jQuery為了屬性操作封裝的，直接在一個 jQuery 對象上調用該方法，很容易對屬性進行操作，也不需要去特意的理解瀏覽器的屬性名稱不同的問題

注意的問題：

dom中有個概念的區分：Attribute和Property翻譯出來都是“屬性”，《js進階程式設計》書中翻譯為“特性”和“屬性”。簡單理解，Attribute就是dom節點內建的屬性

擷取Attribute就需要用attr，擷取Property就需要用prop

JavaScript操作DOM與jQuyer操作DOM的對比