原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化:
(1).原生JS对象转JQ对象:
- $(DOM对象);
(2). JQ对象转原生JS对象:
- $(DOM对象).get(index); //注意区分eq(index)是jQuery实例对象;
- 直接下标访问, $(DOM对象)[index];
二.两者操作DOM的对比
一、创建元素节点
1.1 原生JS创建元素/文本节点
1 document.createElement("p");
1.2 jQuery创建元素/文本节点
1 $('<p></p>');
二、创建并添加文本节点
2.1 原生JS创建文本节点
1 `document.createTextNode("Text Content");
通常创建文本节点和创建元素节点配合使用,比如:
1 var textEl = document.createTextNode("Hello World."); 2 var pEl = document.createElement("p"); 3 pEl.appendChild(textEl);
2.2 jQuery创建并添加文本节点:
1 var $p = $('<p>Hello World.</p>');
三、复制节点
3.1 原生JS复制节点:
1 var newEl = pEl.cloneNode(true); ` 2 3 true和false的区别: true :克隆整个'<p>Hello World.</p>'节点 false:只克隆'<p></p>' ,不克隆文本Hello World.'
3.2 jQuery复制节点
1 $newEl = $('#pEl').clone(true);
注意:克隆节点要避免`ID重复
四、插入节点
4.1 原生JS向子节点列表的末尾添加新的子节点
1 El.appendChild(newNode);
原生JS在节点的已有子节点之前插入一个新的子节点:
1 El.insertBefore(newNode, targetNode);
4.2 在jQuery中,插入节点的方法比原生JS多的多
在匹配元素子节点列表结尾添加内容
1 $('#El').append('<p>Hello World.</p>');
把匹配元素添加到目标元素子节点列表结尾
1 $('<p>Hello World.</p>').appendTo('#El');
在匹配元素子节点列表开头添加内容
1 $('#El').prepend('<p>Hello World.</p>');
把匹配元素添加到目标元素子节点列表开头
1 $('<p>Hello World.</p>').prependTo('#El');
在匹配元素之前添加目标内容
1 $('#El').before('<p>Hello World.</p>');
把匹配元素添加到目标元素之前
1 $('<p>Hello World.</p>').insertBefore('#El');
在匹配元素之后添加目标内容
1 $('#El').after('<p>Hello World.</p>');
把匹配元素添加到目标元素之后
1 $('<p>Hello World.</p>').insertAfter('#El');
五、删除节点
5.1 原生JS删除节点
1 El.parentNode.removeChild(El);
5.2 jQuery删除节点
1 $('#El').remove();
六、替换节点
6.1 原生JS替换节点
1 El.repalceChild(newNode, oldNode);
注意:oldNode必须是parentEl真实存在的一个子节点
6.2 jQuery替换节点
1 $('p').replaceWith('<p>Hello World.</p>');
七、设置属性/获取属性
7.1 原生JS设置属性/获取属性
1 imgEl.setAttribute("title", "logo"); 2 imgEl.getAttribute("title"); 3 checkboxEl.checked = true; 4 checkboxEl.checked;
7.2 jQuery设置属性/获取属性:
1 $("#logo").attr({"title": "logo"}); 2 $("#logo").attr("title"); 3 $("#checkbox").prop({"checked": true}); 4 $("#checkbox").prop("checked");
注意: 如果原生的JS想利用jQuery操作DOM的方法,必须利用上面模块一列举的,把JS原生对象转成jQuery对象. 反过来也是.
转载于:https://www.cnblogs.com/hollyZ/p/7598588.html
原生JS和jQuery操作DOM的区别小结相关推荐
- html——原生js与jquery创建元素节点区别
学习完静态样式之后开始学习动态创建添加html元素,总结了下原生js与jquery生成元素区别. 1.javascript创建元素 创建select var select = document.cre ...
- 原生js和jquery常用的DOM操作
前言 将原生JS和jquery里面的DOM操作进行了一下整理,方便以后温习. 创建元素节点 1.原生: document.createElement("div") 2.jquery ...
- 原生js与jquery的区别
原生js与jquery的区别 1.选择器: js: $('.car_img_con img')[0]; var jsObj = document.getElementsByClassName('sel ...
- 原生js和jquery 遍历数组区别(forEach和each区别)
原生js和jquery 遍历数组区别(forEach和each区别) <script>var arr=[1,3,6,8,4];var obj={0:1,1:3,2:6,3:8,4:4};a ...
- html 对勾单选框,利用原生js和jQuery实现单选框的勾选和取消操作的方法
根据以下的Demo,大概就可以看的明白 Demo: window.onload = function(){ var dom_a = document.getElementById('a1'); var ...
- jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
jQuery创建元素节点或文本节点或属性节点.jQuery插入节点.jQuery删除节点.jQuery复制节点.jQuery替换节点.jQuery包裹节点.jQuery属性操作.jQuery样式操作. ...
- 原生js来实现对dom元素class的操作方法
jQuery操作class的方式非常强大 写了一个利用原生js来实现对dom元素class的操作方法 1.addClass:为指定的dom元素添加样式 2.removeClass:删除指定dom元素的 ...
- jq ajax请求php原声,原生JS与jQuery对AJAX的实现
原生JS与jQuery对AJAX的实现 一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ...
- 飞机大战html游戏全代码js、jquery操作
飞机大战html游戏全代码 博主的话 运行图片 目录路径 飞机大战.html style.css 进行下一个游戏的开发! 注意事项 博主的话 当时博主只会html,css和原生JavaScript,假 ...
最新文章
- 如何利用K-Means将文件夹中图像进行分类?
- 物流企业信息化 准确定位应该如何做
- “95后”曹原又双叒叕发Nature了!1个月2篇,已经第6篇了……
- AI还原宋明清三朝皇帝,还找到了最匹配的明星脸,网友:四大美女安排上
- 小米自动化运维平台演进设计思路
- Linux常用软件和安装方法,Linux软件安装与卸载常用方法(转)
- 业务专题篇:渠道流量分析
- UOJ#449. 【集训队作业2018】喂鸽子 min-max容斥,FFT
- c 字符串转数字_C语言实现十进制转216进制、十六进制转十进制
- .NET6下周发布真的香,可不少人却只会.NET Framework!
- access制作封装软件_用Access开发《社工服务管理系统》
- java新人面试经历_分享近两周以来的真实面试经历
- MarkdownPad2
- Com uma forca, com uma forca
- 对称式加密与非对称式加密的对比
- C++学习(一零九)Resource Hacker工具介绍
- Mybatis事务管理机制<transactionManager>
- 【coq】函数语言设计 笔记 02 - induction
- python绘制直方图显示数字_Python | 数据可视化汇总
- udp:远程主机强迫关闭了一个现有的连接
热门文章
- java代码写jsp读取,Java IO学习基础之读写文本文件-JSP教程,Java技巧及代码
- goahead如何使用cgi服务_北斗导航系统现已提供全球服务!你知道如何使用这个服务吗?...
- mysql累加某字段到达临界值,获取另一个字段的值
- wangEditor编辑器中解析html图文信息问题(三)
- TCP的三次握手、四次挥手,含泪整理面经
- 零基础基于U-Net网络实战眼底图像血管提取
- python【力扣LeetCode算法题库】11-盛最多水的容器
- python【蓝桥杯vip练习题库】ALGO-106 6-3判定字符位置
- python【数据结构与算法】Python语法查询大宝剑(全)
- 并查集详解(从引入到代码)