原生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.createtextnode(
"hello world.");
var pel = 
document.createelement(
"p");

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

1

var $p = $(

'hello world.
'); 

3.1 原生js複製節點:

1

var newel = pel.clonenode(

true); 
`

3.2jquery複製節點

1

$newel = $(

'#pel').clone(
true);

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

1

1

el.insertbefore(newnode, targetnode);

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

1

$(

'hello world.
'); 

1

$(

'#el');

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刪除節點

1

el.parentnode.removechild(el);

5.2 jquery刪除節點

1

$(

'#el').remove();

6.1 原生js替換節點

1

el.repalcechild(newnode, oldnode);

6.2 jquery替換節點

1

$(

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

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

1

2 
3 
4 

imgel.setattribute(

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

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

1

2 
3 
4 

$(

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

原生JS與jQuery操作DOM對比

1.1 原生js建立元素節點 document.createelement p 1.2jquery建立元素節點 2.1 原生js建立文字節點 document.createtextnode text content 通常建立文字節點和建立元素節點配合使用，比如 var textel document...

原生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選擇符。測試方法 對於一次處理...