一.Js原生对象和jQuery实例对象的相互转化:
(1).原生JS对象转JQ对象:
- $(DOM对象);
(2). JQ对象转原生JS对象:
- $(DOM对象).get(index); //注意区分eq(index)是jQuery实例对象;
- 直接下标访问, $(DOM对象)[index];
二.两者操作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的方法,必须利用上面模块一列举的,把JS原生对象转成jQuery对象. 反过来也是.
原生JS和jQuery操作DOM的区别小结的更多相关文章
-
原生JS与jQuery操作DOM对比
一.创建元素节点 1.1 原生JS创建元素节点 document.createElement("p"); 1.2 jQuery创建元素节点 $('<p></p&g ...
-
原生js与jquery操作iframe
1 原生js获取iframe的window对象 //方法1 document.getElementById('iframeId').contentWindow; //方法2 window.frame ...
-
原生js 与 jQuery对比
1.原生JS与jQuery操作DOM对比 : https://www.cnblogs.com/QianBoy/p/7868379.html 2.比较jQuery与JavaScript的不同功能实 ...
-
原生js替换jQuery各种方法-中文版
原文https://github.com/nefe/You-D... 原生JS与jQuery操作DOM对比 You Don't Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好 ...
-
onload事件与ready事件的区别,原生js与jquery的区别
onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document ...
-
原生JS和JQuery的区别
1.原生js和jQuery的入口函数加载模式不同 原生js等页面dom加载完成并且图片等资源也加载完成之后才会执行: jQuery则是等页面dom加载完成执行,不会等图片等资源也加载完成: (也就是说 ...
-
【前端性能】必须要掌握的原生JS实现JQuery
很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...
-
jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
-
*jquery操作DOM总结 (原创:最全、最系统、实例展示)
jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...
随机推荐
-
sql server 2008 不允许保存更改,您所做的更改要求删除并重新创建以下表 的解决办法
启动SQL Server 2008 Management Studio 工具菜单----选项----Designers(设计器)----阻止保存要求重新创建表的更改 取消勾选即可.
-
elixir 高可用系列(四) Task
概述 之前学习的 Agent,GenSever以及GenEvent,都是用来管理状态或者处理消息的. 但是在很多时候,我们需要的是执行某个任务,这时如果使用 GenSever 或者 GenEvent, ...
-
Android中ScrollView嵌套GridView,解决GridView显示不全的问题
/** * 自定义gridview,解决ScrollView中嵌套gridview显示不正常的问题(1行半) * */ public class MyGridView extends GridView ...
-
Swift 简单的通讯录
Swift 通讯录实战 1.功能需求 整个项目由三个界面构成:首页面(全部联系人),添加联系人界面和联系人详情界面 整个项目使用纯代码编程 数据处理方面使用一个工具类,处理所有数据的增删改查. 首页由 ...
-
【转】Loss Function View
感谢原文作者!原文地址:http://eletva.com/tower/?p=186 一.Loss Function 什么是Loss Function?wiki上有一句解释我觉得很到位,引用一下:Th ...
-
【经验分享(续篇)】Trachtenberg system(特拉亨伯格速算系统)
之前有篇文章简单地介绍了Trachtenberg系统的乘法计算方法,地址在这里.针对一些特定的数字,Trachtenberg还发展出了更快的计算方法. 先来介绍乘数为11的速算方法.它的计算规则我们可 ...
-
Socket网络编程(三)
TCP协议网络通讯案例(http协议) 1.创建TcpServer(tcp服务端) package com.cppdy.tcp; import java.io.IOException; import ...
-
解决 Excel2013打开提示 文件格式和扩展名不匹配。文件可能已损坏或不安全
有的时候打开xls文档时,会提示“文件格式和扩展名不匹配.文件可能已损坏或不安全.除非您信任其来源,否则请勿打开.是否仍要打开它?” 遇到这种情况,我们需要 1.win键+R键,打开“运行“,输入re ...
-
HDU 4280 Island Transport(网络流,最大流)
HDU 4280 Island Transport(网络流,最大流) Description In the vast waters far far away, there are many islan ...
-
从Github上轻松安装R包—githubinstall包--转载
1.综述 越来越多的R包正在由世界上不同的人所创建,其中一部分原因是devtools包使得开发R包1变得更加简单.devtools包不仅让开发R包变得简单,而且用于分发R包. 当开发者发布一个R包的时 ...