原生JS與jQuery操作DOM對比

1.1 原生js建立元素節點

1document.createelement("p");

1.2jquery建立元素節點

1$('

');`

2.1 原生js建立文字節點

1`document.createtextnode("text content");12

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

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

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

1var $p = $('hello world.

');3.1 原生js複製節點:

1var newel = pel.clonenode(true); `

3.2jquery複製節點

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

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

el.insertbefore(newnode, targetnode);

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

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

');1

$('hello world.

').prependto('#el');

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

');1

$('hello world.

').insertbefore('#el');

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

');1

$('hello world.

').insertafter('#el');

5.1 原生js刪除節點

1el.parentnode.removechild(el);

5.2 jquery刪除節點

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

6.1 原生js替換節點

1el.repalcechild(newnode, oldnode);

6.2 jquery替換節點

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

');7.1 原生js設定屬性/獲取屬性12

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

imgel.getattribute("title");

checkboxel.checked = true;

checkboxel.checked;

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

34$("#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建立元素節點 document.createelement p 1.2jquery建立元素節點 2.1 原生js建立文字節點 document.createtextnode text content 通常建立文字節點和建立元素節點配合使用，比如 var textel document...

jquery與原生js比較

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