【转】 原生JS与jQuery操作DOM对比
来源:互联网 发布:sql数据库开发教程 编辑:程序博客网 时间:2024/05/29 15:30
【转】 原生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的区别:
true :克隆整个'<p>Hello World.</p>'节点false:只克隆'<p></p>' ,不克隆文本Hello World.'
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");
注意:原文地址原生JS与jQuery操作DOM对比。
阅读全文
0 0
- 原生JS与jQuery操作DOM对比
- 原生JS与jQuery操作DOM对比
- 原生JS与jQuery操作DOM对比
- 【转】 原生JS与jQuery操作DOM对比
- JS-JS 与 jQuery 操作DOM 对比
- 浅谈原生JS和jQuery操作DOM
- 常用原生js与jQuery对比总结
- 原生js dom操作
- js原生dom操作
- 原生js操作dom
- 原生js 操作dom
- 原生js和jQuery的DOM操作函数速度比较
- jQuery对象与原生JS dom对象间的转换
- jQuery对象与JS原生dom对象之间的转换
- 原生js操作DOM元素
- js,jquery 操作 dom
- 原生JS操作DOM的一些常用方法集合【转】
- 原生JS操作DOM的一些常用方法集合【转】
- 0802 Java面向对象基础:类和对象
- KahaDB持久化性能
- 人脸检测中的AdaBoost算法
- python opencv入门 轮廓(17)
- Flask-Login的使用
- 【转】 原生JS与jQuery操作DOM对比
- Nicescroll滚动条插件的用法
- Java反射机制及实例
- 线程安全的tomicInteger
- 我对CSS vertical-align的一些理解与认识(一)
- linux screen 命令详解(转载)
- ASP.NET – DataList 控件
- World Break II
- 百练noi 20:反反复复