原生JS與jQuery操作DOM對比

1.1 原生js建立元素節點

document.createelement("p");

1.2jquery建立元素節點

$('

');`

2.1 原生js建立文字節點

document.createtextnode("text content");

通常建立文字節點和建立元素節點配合使用，比如：

var textel = document.createtextnode("hello world.");

var pel = document.createelement("p");

2.2jquery建立並新增文字節點：

var $p = $('hello world.

');

3.1 原生js複製節點:

var newel = pel.clonenode(true);  `

3.2jquery複製節點

$newel = $('#pel').clone(true);

4.1 原生js向子節點列表的末尾新增新的子節點

原生js在節點的已有子節點之前插入乙個新的子節點：

el.insertbefore(newnode, targetnode);

4.2 在jquery中，插入節點的方法比原生js多的多

在匹配元素子節點列表結尾新增內容

把匹配元素新增到目標元素子節點列表結尾

在匹配元素子節點列表開頭新增內容

$('#el').prepend('hello world.

');

把匹配元素新增到目標元素子節點列表開頭

$('hello world.

').prependto('#el');

在匹配元素之前新增目標內容

$('#el').before('hello world.

');

把匹配元素新增到目標元素之前

$('hello world.

').insertbefore('#el');

在匹配元素之後新增目標內容

$('#el').after('hello world.

');

把匹配元素新增到目標元素之後

$('hello world.

').insertafter('#el');

5.1 原生js刪除節點

el.parentnode.removechild(el);

5.2 jquery刪除節點

$('#el').remove();

6.1 原生js替換節點

el.repalcechild(newnode, oldnode);

6.2 jquery替換節點

$('p').replacewith('hello world.

');

7.1 原生js設定屬性/獲取屬性

imgel.setattribute("title", "logo");

imgel.getattribute("title");
checkboxel.checked = true
;checkboxel.checked;

7.2 jquery設定屬性/獲取屬性:

$("#logo").attr();

$("#logo").attr("title");
$("#checkbox").prop();
$("#checkbox").prop("checked");

原生JS與jQuery操作DOM對比

1.1 原生js建立元素節點 1 document.createelement p 1.2jquery建立元素節點 1 2.1 原生js建立文字節點 1 document.createtextnode text content 1 2 3 var textel document.createtext...

原生JS與jQuery操作DOM對比

1.1 原生js建立元素節點 1document.createelement p 1.2jquery建立元素節點 1 2.1 原生js建立文字節點 1 document.createtextnode text content 12 3var textel document.createtextnod...

jquery與原生js比較

以選擇符為例，類似於這種 class 方式，在ie裡面，肯定比 id 低很多，而對於chrome和firefox，則因為提供了getelementsbyclassname 介面，所以速度不會特別慢，不需要遍歷所有元素檢視class，所以考慮乙個綜合的方案，應優先使用id選擇符。測試方法 對於一次處理...