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


Posted in Javascript onJanuary 19, 2017

一、创建元素节点

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");

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
微信小程序 开发之全局配置
May 05 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
vue请求数据的三种方式
Mar 04 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
原生js实现电商侧边导航效果
Jan 19 #Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 #Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 #Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 #Javascript
js实现漫天星星效果
Jan 19 #Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 #Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 #Javascript
You might like
德劲1103的维修打理经验
2021/03/02 无线电
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
9个比较实用的php代码片段
2016/03/15 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
国家助学金感谢信
2015/01/21 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL