原生JS和jQuery操做DOM的區別小結

一.Js原生對象和jQuery實例對象的相互轉化:

(1).原生JS對象轉JQ對象:

•  $(DOM對象);

(2). JQ對象轉原生JS對象:

• $(DOM對象).get(index); //注意區分eq(index)是jQuery實例對象;
• 直接下標訪問, $(DOM對象)[index];

 

二.二者操做DOM的對比

1、建立元素節點

1.1 原生JS建立元素/文本節點

1 document.createElement("p");

1.2 jQuery建立元素/文本節點

1 $('<p></p>');

 

 

2、建立並添加文本節點

2.1 原生JS建立文本節點

1 `document.createTextNode("Text Content");

一般建立文本節點和建立元素節點配合使用，好比：

1 var textEl = document.createTextNode("Hello World.");
2 var pEl = document.createElement("p");
3 pEl.appendChild(textEl);

2.2 jQuery建立並添加文本節點：

1 var $p = $('<p>Hello World.</p>');

3、複製節點

3.1 原生JS複製節點:

1 var newEl = pEl.cloneNode(true); `
2 
3 true和false的區別：
   true ：克隆整個'<p>Hello World.</p>'節點
   false：只克隆'<p></p>' ，不克隆文本Hello World.'

3.2 jQuery複製節點

1 $newEl = $('#pEl').clone(true);

注意：克隆節點要避免`ID重複

 

 

4、插入節點

4.1 原生JS向子節點列表的末尾添加新的子節點

1 El.appendChild(newNode);

原生JS在節點的已有子節點以前插入一個新的子節點：

1 El.insertBefore(newNode, targetNode);

4.2 在jQuery中，插入節點的方法比原生JS多的多

在匹配元素子節點列表結尾添加內容

1 $('#El').append('<p>Hello World.</p>');

把匹配元素添加到目標元素子節點列表結尾

1 $('<p>Hello World.</p>').appendTo('#El');

在匹配元素子節點列表開頭添加內容

1 $('#El').prepend('<p>Hello World.</p>');

把匹配元素添加到目標元素子節點列表開頭

1 $('<p>Hello World.</p>').prependTo('#El');

在匹配元素以前添加目標內容

1 $('#El').before('<p>Hello World.</p>');

把匹配元素添加到目標元素以前

1 $('<p>Hello World.</p>').insertBefore('#El');

在匹配元素以後添加目標內容

1 $('#El').after('<p>Hello World.</p>');

把匹配元素添加到目標元素以後

1 $('<p>Hello World.</p>').insertAfter('#El');

5、刪除節點

5.1 原生JS刪除節點

1 El.parentNode.removeChild(El);

5.2 jQuery刪除節點

1 $('#El').remove();

 

6、替換節點

6.1 原生JS替換節點

1 El.repalceChild(newNode, oldNode);

注意：oldNode必須是parentEl真實存在的一個子節點

6.2 jQuery替換節點

1 $('p').replaceWith('<p>Hello World.</p>');

 

 

 

7、設置屬性/獲取屬性

7.1 原生JS設置屬性/獲取屬性

1 imgEl.setAttribute("title", "logo");
2 imgEl.getAttribute("title");
3 checkboxEl.checked = true;
4 checkboxEl.checked;

7.2 jQuery設置屬性/獲取屬性:

1 $("#logo").attr({"title": "logo"});
2 $("#logo").attr("title");
3 $("#checkbox").prop({"checked": true});
4 $("#checkbox").prop("checked");

注意: 若是原生的JS想利用jQuery操做DOM的方法,必須利用上面模塊一列舉的,把JS原生對象轉成jQuery對象. 反過來也是.