一、前言

  相比于JS这条直达终点、满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁、易用给了它辉煌的地位。然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优势了。

  原生JS虽然没有jquery那么的好用、便捷,或者说没有jquery那样让我们使用的如此顺手,甚至是无法舍弃的依赖。可是我们依然不得不扔掉手中这根陪伴我们多年的拐杖,我们不是瘸子,我们不曾腐朽,我们还可以独立前行。

二、正文

1. jquery和原生JS获取节点的比较

//这是HTML代码,提供节点用于获取
<div id="divId" class="divClass">
<input type="text" name="nickname" placeholder="请输入用户名">
<input type="password" name="pwd" placeholder="请输入密码">
</div>
//jquery 通过$/jquery获取节点,也就是css选择器
$("#divId")
$(".divClass")
$("input[name='nickname']")
//原生JS,通过id和classname,tagname,name获取节点
document.getElementById("divId")
document.getElementsByClassName("divClass")
document.getElementsByTagName("div")
document.getElementsByName("nickname")//此项必须在节点上本身就有name属性,才可以获取 //IE8以后也有通过CSS选择器来获取的节点的
document.querySelector("#divId input")
document.querySelectorAll("div")

几点说明和注意:

  • 注意getElementById中的“Element”没有复数,这是因为在id唯一的前提下,通过id获取的节点也是唯一的,所以没有复数
  • 相对于通过id获取节点,通过className、tagName、name获取节点的“Element”都有复数,也就是说获取的节点存储在数组之中,无论是否唯一,所以使用节点对象时必须使用数组的下标,例如:document.getElementsByClassName("divClass")[0]
  • document.querySelector("div")也是通过CSS选择器来获取节点,类似于jquery,但是当满足条件的有多个节点时,只获取第一个;
  • document.querySelectorAll("div")可以获取满足条件的节点集合,无论是否唯一都是节点集合(NodeList);
  • 而$("div")能够获取所有满足条件的节点,并且无须使用数组下标即可对所有满足的节点对象进行操作,而document.querySelectorAll("div")必须使用下标。
  • 相对于使用document.querySelector,使用getElementById的性能要好些,所以在选择节点相对简单时,使用后者可以提升性能(找到节点更迅速)。

2. jquery和原生JS节点对象的使用比较

//jquery  添加和删除className
$(selector).addClass("active");
$(selector).removeClass("active"); //原生JS 添加和删除className //为 <div> 元素添加 class:
document.getElementById("myDIV").classList.add("mystyle");
//为 <div> 元素添加多个类:
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
//为 <div> 元素移除一个类:
document.getElementById("myDIV").classList.remove("mystyle");
//为 <div> 元素移除多个类:
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");
//检查是否含有某个CSS类
myDiv.classList.contains('myCssClass'); //return true or false

链接:如何用原生JS删除标签中的类名和添加类名?

//jquery attr的使用 修改和添加属性
$(selector).attr("name", "nickname");//添加并设置name属性
$(selector).attr("name");//获取name属性值 //原生JS 修改和获取属性值
document.querySelector("input[type='text']").setAttribute("name", "account");
document.querySelector("input[type='text']").getAttribute("name");
//jquery 修改和获取css属性
$(selector).css("display", "none");//添加或设置CSS得display
$(selector).css("display");//获取当前的地上play的值 //原生JS 修改和获取CSS属性值
document.querySelector("input[type='text']").style.backgroundColor= "red";
;document.querySelector("input[type='text']").style.backgroundColor; //还可以通过修改className的方式来达到修改css的目的

3.jquery和原生JS添加节点和删除节点

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

//原生JS添加节点

document.querySelector("body").appendChild('<div>添加一个div</div>');

执行上面的代码就会报红色文字的错误,这是因为你想当然的认为jquery和原生JS的添加节点一样导致的。在原生JS中,appendChild不可以直接添加字符串,只能添加节点。

后插入节点:append()  和 appendChild

//Jquery添加节点
$("body").append('<div>添加一个div节点</div>'); //原生JS添加节点,相对要麻烦一些
var para=document.createElement("div");
var node=document.createTextNode("添加一个div节点");
para.innerHTML = "<span>这是一个span</span>"
para.appendChild(node);
para.className = "...";
document.querySelector("body").appendChild(para); //当然,你也可以这样;这样做弊端很大,body里面其他节点会被覆盖掉 document.querySelector("body").innerHTML = '<div>添加一个div节点</div>';

这也是jquery的append和原生JS的appendChild的根本区别所在,appendChild不可以直接添加字符串,只能添加节点。

前插入节点:prepend()  和 insertBefore(newChildNode, childNode)

//Jquery添加节点,前插入,也就是在所有子节点的前面添加这个节点
$("body").prepend('<div>添加一个div节点</div>'); //原生JS添加节点,前插入insertBefore,插入在第二个参数节点的前面,此处childNode为body中的子节点。
var para=document.createElement("div");
//...
document.querySelector("body").insertBefore(para, childNode);

jquery的prepend和原生JS的insertBefore的区别就很大,

prepend插入节点到所有子节点的前面,prepend(newChildNode);

而insertBefore可以插入节点到任何子节点的前面,这也是比较方便的地方,但需要提供第二个参数,insertBefore(newChildNode, childNode);

当然,prepend可以添加字符串,而insertBefore的参数必须是节点。

删除节点:remove()  和 removeChild(childNode)

<div id="parent">
<div class="first">a</div>
<div class="second">b</div>
<div class="third">c</div>
</div>
//Jquery的删除节点
$(selector).remove(); //没有参数即删除所有符合条件的节点
$(selector).remove(".first");   //有参数表示删除id为first的节点 //原生JS的删除节点,需要参数,参数表示想要删除的节点
var thisNode=document.getElementsByClassName("first");
thisNode.parentNode.removeNode(thisNode);

问题是:这样的原生JS不能够批量删除节点,怎么办?

//可以使用循环进行删除
var parent = document.getElementById("parent");
var childs = parent .childNodes;
for(var i = 0; i < childs.length; i++) {
alert(childs[i].nodeName);
parent .removeChild(childs[i]);
}

但是,在Firefox和IE中有问题,火狐会把空白部分算作节点,这样循环删除就不一定能够删除所有的节点。另外,删除节点后,索引会发生变化,导致删除出现错误。可以通过倒序删除来解决这些问题。

//原生JS循环删除节点
var parent = document.getElementById("parent");
var childs = parent .childNodes;
for(var i = childs.length - 1; i >= 0; i--) {
alert(childs[i].nodeName);
childs .removeChild(childs[i]);
}

三、结语

  先到这里,有补充继续。

原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较的更多相关文章

  1. 封装常用的js(Base.js)——【01】理解库,获取节点,连缀,

    封装常用的js(Base.js)——[01]理解库,获取节点,连缀,  youjobit07 2014-10-10 15:32:59 前言:       现如今有太多优秀的开源javascript库, ...

  2. JS DOM中getElement系列和querySelector系列获取节点

    节点查找方法 document.getElementById() 前面必须是document document.getElementsByName()  前面必须是document ele.getEl ...

  3. JS里点击事件判断是否 触发了节点 和给标签添加class属性

    $("#activityType").click(function(e){ if(e.target==$("#bb")[0]){ var bb=document ...

  4. 原生的js操作实现通过对URL的监控获取参数

    原生的js操作实现通过对URL的监控获取用户的操作信息 优化网站的时候,因为列表是用vue组件进行循环渲染,就出现了一个问题,单击跳转的问题,想了很多方案,使用js函数的方式面对这种情况并不乐观,想到 ...

  5. (转)jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)也可以做纯文本轮播

    ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...

  6. JS和jQuery获取节点的兄弟,父级,子级元素

    原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的 ...

  7. 前端(十七)—— jQuery基础:jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图

    jQuery的基本使用.JQ功能概括.JS对象与JQ对象转换.Ajax简单应用.轮播图 一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 j ...

  8. jquery的height()和javascript的height总结,js获取屏幕高度

    jquery的height()和javascript的height总结,js获取屏幕高度 2014年9月18日 15048次浏览 引子 今天是九一八事变八十三周年,大家勿忘国耻!加油学习!经济和技术等 ...

  9. jQuery中设置form表单中action值与js有什么不同。。。。

    jQuery中设置form表单中action值与js有什么不同.... HTML代码如下: <form action="" method="post" i ...

随机推荐

  1. InnoSetup 打包Winform程序

    在VS2012之前,我们做安装包一般都是使用VS自带的安装包制作工具来创建安装包的,VS2012.VS2013以后,微软把这个去掉,集成使用了InstallShield进行安装包的制作了,虽然思路差不 ...

  2. Java变量类型之间的转换

    int i; String s="134"; 1)String转换成int i=Integer.parseInt(s); 2)int转换成String(其他类型转String,都可 ...

  3. 微信开发 api 需要 https 服务器

    微信开发 api 需要 https 服务器 先建一个环境,本地的 https 服务器. 以下这篇不错,很完整. https://zhuanlan.zhihu.com/p/23640321

  4. 使用Navicat for Oracle新建表空间、用户及权限赋予 (转)

    Navicat for Oracle是有关Oracle数据库的客户端工具.通过这个客户端,我们可以图形方式对Oracle数据库进行操作. 说明我们此次试验的Oracle数据库版本是Oracle 10G ...

  5. Linq 分组(group by)后列变行

    表一: 表二: 已知表一的List,想得到表二的结果: var query = from c in t.AsEnumerable() group c by new { pingming = c.Fie ...

  6. Mac环境下终端(Terminal)用ssh 连接服务器问题 Received disconnect from 120.55.x.x: 2: Too many authentication failures for root

    由于这台Mac配置git生成公钥后,ssh连接就出现来这个问题 Received disconnect from 120.55.x.x: 2: Too many authentication fail ...

  7. 历届试题 小数第n位(小技巧)

    问题描述 我们知道,整数做除法时,有时得到有限小数,有时得到无限循环小数. 如果我们把有限小数的末尾加上无限多个0,它们就有了统一的形式. 本题的任务是:在上面的约定下,求整数除法小数点后的第n位开始 ...

  8. configure: error: mcrypt.h not found. Please reinstall libmcrypt.

    编译出现错误: configure: error: mcrypt.h not found. Please reinstall libmcrypt. 解决方法: yum install -y libmc ...

  9. 支付宝吱口令自动复制脚本,自动复制 JavaScript 代码介绍

    本文转自:http://www.sojson.com/blog/262.html 最近支付宝#吱口令#的信息随处可见,可谓是铺天盖地,群里发这样的信息给被踢了不少.我开始还在鄙视这些人,有几个小钱?然 ...

  10. python学习(二十七) 元组

    # 元组是不可变的,不能改变元素的值,也不能增加.减少元素my_tuple = (1, 2, 3, 3)print(my_tuple) # 查找元素位置print(my_tuple.index(2)) ...