这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要给大家介绍了原生 JS 和 jQuery 操作 DOM 的一些对比总结,文中总结了很多的对比,相信对大家的学习或者工作能带来一定的帮助,需要的朋友可以参考借鉴,下面来一起看看吧。
一、创建元素节点
1.1 原生 JS 创建元素节点
- document.createElement("p");
1.2 jQuery 创建元素节点
- $('<p></p>');`
二、创建并添加文本节点
2.1 原生 JS 创建文本节点
- `document.createTextNode("Text Content");
通常创建文本节点和创建元素节点配合使用,比如:
- var textEl = document.createTextNode("Hello World.");
- var pEl = document.createElement("p");
- pEl.appendChild(textEl);
2.2 jQuery 创建并添加文本节点:
- var $p = $('<p>Hello World.</p>');
三、复制节点
3.1 原生 JS 复制节点:
- var newEl = pEl.cloneNode(true); `
true 和 false 的区别:
3.2 jQuery 复制节点
- $newEl = $('#pEl').clone(true);
注意:克隆节点要避免 `ID 重复
四、 插入节点
4.1 原生 JS 向子节点列表的末尾添加新的子节点
- El.appendChild(newNode);
原生 JS 在节点的已有子节点之前插入一个新的子节点:
- El.insertBefore(newNode, targetNode);
4.2 在 jQuery 中,插入节点的方法比原生 JS 多的多
在匹配元素子节点列表结尾添加内容
- $('#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');
五、删除节点
5.1 原生 JS 删除节点
- El.parentNode.removeChild(El);
5.2 jQuery 删除节点
- $('#El').remove();
六、替换节点
6.1 原生 JS 替换节点
- El.repalceChild(newNode, oldNode);
注意:oldNode 必须是 parentEl 真实存在的一个子节点
6.2 jQuery 替换节点
- $('p').replaceWith('<p>Hello World.</p>');
七、设置属性 / 获取属性
7.1 原生 JS 设置属性 / 获取属性
- imgEl.setAttribute("title", "logo");
- imgEl.getAttribute("title");
- checkboxEl.checked = true;
- checkboxEl.checked;
7.2 jQuery 设置属性 / 获取属性:
- $("#logo").attr({
- "title": "logo"
- });
- $("#logo").attr("title");
- $("#checkbox").prop({
- "checked": true
- });
- $("#checkbox").prop("checked");
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0507/328333.html