源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

原生JS和jQuery操作DOM对比总结

  • 时间:2020-03-10 14:08 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:原生JS和jQuery操作DOM对比总结
[b]一、创建元素节点[/b] [b]1.1 原生JS创建元素节点[/b]
document.createElement("p");
[b]1.2 jQuery创建元素节点[/b]
$('<p></p>');`
[b]二、创建并添加文本节点[/b] [b]2.1 原生JS创建文本节点[/b]
`document.createTextNode("Text Content");
通常创建文本节点和创建元素节点配合使用,比如:
var textEl = document.createTextNode("Hello World.");
var pEl = document.createElement("p");
pEl.appendChild(textEl);
[b]2.2 jQuery创建并添加文本节点:[/b]
var $p = $('<p>Hello World.</p>');
[b]三、复制节点[/b] [b]3.1 原生JS复制节点:[/b]
var newEl = pEl.cloneNode(true); `
true和false的区别: [list] [*]true :克隆整个'<p>Hello World.</p>'节点[/*] [*]false:只克隆'<p></p>' ,不克隆文本Hello World.' [/*] [/list] [b]3.2 jQuery复制节点[/b]
$newEl = $('#pEl').clone(true);
[b]注意:[/b]克隆节点要避免`ID重复 [b]四、 插入节点[/b] [b]4.1 原生JS向子节点列表的末尾添加新的子节点[/b]
El.appendChild(newNode);
原生JS在节点的已有子节点之前插入一个新的子节点:
El.insertBefore(newNode, targetNode);
[b]4.2 在jQuery中,插入节点的方法比原生JS多的多[/b] 在匹配元素子节点列表结尾添加内容
$('#El').append('<p>Hello World.</p>');
把匹配元素添加到目标元素子节点列表结尾
$('<p>Hello World.</p>').appendTo('#El');
在匹配元素子节点列表开头添加内容
$('#El').prepend('<p>Hello World.</p>');
把匹配元素添加到目标元素子节点列表开头
$('<p>Hello World.</p>').prependTo('#El');
在匹配元素之前添加目标内容
$('#El').before('<p>Hello World.</p>');
把匹配元素添加到目标元素之前
$('<p>Hello World.</p>').insertBefore('#El');
在匹配元素之后添加目标内容
$('#El').after('<p>Hello World.</p>');
把匹配元素添加到目标元素之后
$('<p>Hello World.</p>').insertAfter('#El');
[b]五、删除节点[/b] [b]5.1 原生JS删除节点[/b]
El.parentNode.removeChild(El);
[b]5.2 jQuery删除节点[/b]
$('#El').remove();
[b]六、替换节点[/b] [b]6.1 原生JS替换节点[/b]
El.repalceChild(newNode, oldNode);
[b]注意:[/b]oldNode必须是parentEl真实存在的一个子节点 [b]6.2 jQuery替换节点[/b]
$('p').replaceWith('<p>Hello World.</p>');
[b]七、设置属性/获取属性[/b] [b]7.1 原生JS设置属性/获取属性[/b]
imgEl.setAttribute("title", "logo");
imgEl.getAttribute("title");
checkboxEl.checked = true;
checkboxEl.checked;
[b]7.2 jQuery设置属性/获取属性:[/b]
$("#logo").attr({"title": "logo"});
$("#logo").attr("title");
$("#checkbox").prop({"checked": true});
$("#checkbox").prop("checked");
[b]总结[/b] 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部