【必发88】jQuery函数的等价原生函数代码,jQuery函数的等价原生函数代码示例

by admin on 2019年2月10日

DOM元素querySelectorAll可能让你不意的性状表现

2015/11/07 · HTML5 ·
【必发88】jQuery函数的等价原生函数代码,jQuery函数的等价原生函数代码示例。DOM,
querySelectorAll

原稿出处:
张鑫旭   

选择器 
jQuery的着力之一就是能足够便宜的取到DOM元素。大家只需输入CSS采用字符串,便可以博得匹配的要素。但在多数情状下,大家得以用简易的原生代码达到平等的功能。 

 我们本着常用的jQuery方法以及其等价原生方法的属性做了一部分测试(1, 2,
3)。
本身了然你在想怎么着。原生方法显明要比jQuery方法快,因为jQuery方法要处理浏览器包容以及此外部分工作。是的,我完全赞同。写那篇小说并不是出于反对使用jQuery,但只要你针对的是当代浏览器,那么使用原生方法会使质量有很大的晋级。

大家本着常用的jQuery方法以及其等价原生方法的质量做了一些测试(1, 2,
3)。
本人了然您在想怎么样。原生方法肯定要比jQuery方法快,因为jQuery方法要处理浏览器包容以及其余部分事情。是的,我完全赞同。写那篇小说并不是出于反对接纳jQuery,但万一你针对的是当代浏览器,那么使用原生方法会使品质有很大的升官。

一、时间燃眉之急,废话少说

正文所在的页面藏匿了上边这几个代码:

<img id=”outside”> <div id=”my-id”> <img id=”inside”>
<div class=”lonely”></div> <div class=”outer”> <div
class=”inner”></div> </div> </div>

1
2
3
4
5
6
7
8
<img id="outside">
<div id="my-id">
    <img id="inside">
    <div class="lonely"></div>
    <div class="outer">
        <div class="inner"></div>
    </div>
</div>

就是下面那样的变现(为了便于观望,我加了边框背景象和文字):

必发88 1

率先说点大家都知情的热热身。

  • querySelectorquerySelectorAll IE8+浏览器支持。
  • querySelector归来的是单个DOM元素;querySelectorAll回来的是NodeList.
  • 大家一般用的多的是document.querySelectorAll,
    实际上,也支持dom.querySelectorAll.例如:
JavaScript

document.querySelector("\#my-id").querySelectorAll("img")

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f2fbc48034065158916-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f2fbc48034065158916-1" class="crayon-line">
document.querySelector(&quot;#my-id&quot;).querySelectorAll(&quot;img&quot;)
</div>
</div></td>
</tr>
</tbody>
</table>

选料的就是内部这些妹子。例如,我在支配台出口该接纳NodeList的长短和id,如下截图:
必发88 2

好了,上边都是众所周知的,好,上边初步显得点有意思的。

大家看下上面2行简单的查询语句:

JavaScript

document.querySelectorAll(“#my-id div div”);

1
document.querySelectorAll("#my-id div div");

JavaScript

document.querySelector(“#my-id”).querySelectorAll(“div div”);

1
document.querySelector("#my-id").querySelectorAll("div div");

必发88 3

咨询:上边七个语句重返的NodeList的情节是不是是一样的?

给大家1分钟的光阴考虑下。

//zxx: 即使1分钟已经过去了

好了,答案是:不同的。估摸不少人跟自身同一,会觉得是均等的。

实际上:

JavaScript

document.querySelectorAll(“#my-id div div”).length === 1;

1
document.querySelectorAll("#my-id div div").length === 1;

JavaScript

document.querySelector(“#my-id”).querySelectorAll(“div div”).length ===
3;

1
document.querySelector("#my-id").querySelectorAll("div div").length === 3;

大家假如有疑点,可以在控制台测试下,下图就是我自己测试的结果:

必发88 4

缘何会如此?

先是个符合大家的接头,不解释。那下一个讲话,为啥再次来到的NodeList长度是3呢?

首先,遍历该NodeList会意识,查询的多个dom元素为:div.lonelydiv.outerdiv.inner.

殊不知,奇怪,怎么会是3个吗?

jQuery中有个find()艺术,大家很可能面临那些措施影响,导致出现了部分回味的题材:

JavaScript

$(“#my-id”).find(“div div”).length === 1;

1
$("#my-id").find("div div").length === 1;

假诺利用find方法,则是1个卓殊;由于协会和功用类似,我们很自然疑问原生的querySelectorAll也是其一套路。真是太错特错!!

要解释,为何NodeList长度是3,只要一句话就足以了,我专门加粗标红:

CSS采取器是单身于漫天页面的!

哪些意思吧?比如说你在页面很深的一个DOM里面写上:

<style> div div { } </style>

1
2
3
<style>
div div { }
</style>

 

全套网页,包涵父级,只假若知足div div父子关系的元素,全体会被选中,对吗,那个大家应该都晓得的。

这里的querySelectorAll内部的采纳器也一如既往是那也全局特性。document.querySelector("#my-id").querySelectorAll("div div")翻译成白话文就是:查询#my-id的子元素,同时满足总体页面下div div采取器条件的DOM元素们。

咱俩页面往上滚动看看原始的HTML结构,会意识,在全局视野下,div.lonely【必发88】jQuery函数的等价原生函数代码,jQuery函数的等价原生函数代码示例。, div.outerdiv.inner全总都满足div div那一个接纳器条件,于是,最后回到的尺寸为3.

.代码如下:

不少开发者没有发觉到多数他们运用的jQuery方法可以采用原生方法,或者更轻量级的办法来取代。下边是有的代码示例,显示一些常用的jQuery方法,以及其等价原生方法。

重重开发者没有发现到多数他们利用的jQuery方法可以选拔原生方法,或者更轻量级的方法来顶替。上边是一对代码示例,浮现一些常用的jQuery方法,以及其等价原生方法。

二、:scope与区域选用范围

其实,要想querySelectorAll前面接纳器不受全局影响,也是有点子的,就是接纳近年来还地处试验阶段的:scope伪类,其效果就是让CSS是在某一限量内拔取。此伪类在CSS中采用是元宝,然则也足以在querySelectorAll语句中接纳:

JavaScript

document.querySelector(“#my-id”).querySelectorAll(“:scope div div”);

1
document.querySelector("#my-id").querySelectorAll(":scope div div");

包容性如下:

必发88 5

自身写此文时候是15年十月中,如今大约就FireFox浏览器匡助,我推断,未来,会辅助越多的。为何吧?

因为Web
Components要求它,可以落成真正独立包装,不会受外界影响的HTML组件。

关于:scope如今协助尚浅,时机未到,我就没需要乱展开了,点到截至。

//—-得到页面的享有div——— 
/* jQuery */ 
$(“div”) 
/* 原生 */ 
document.getElementsByTagName(“div”) 
//—-获得所有指定class的因素——— 
/* jQuery */ 
$(“.my-class”) 
/* 原生 */ 
document.querySelectorAll(“.my-class”) 
/* 更快的原生方法 */ 
document.getElementsByClassName(“my-class”) 
//—-通过CSS拔取得到元素———- 
/* jQuery */ 
$(“.my-class li:first-child”) 
/* 原生 */ 
document.querySelectorAll(“.my-class li:first-child”) 
//—-得到指定clsss的第三个因素—- 
/* jQuery */ 
$(“.my-class”).get(0) 
/* 原生 *必发88,/ 
document.querySelector(“.my-class”) 

翻译注:必要小心上面有些原生方法是HTML5引用的,部分浏览器可能无法应用。

翻译注:须求注意上边有些原生方法是HTML5引用的,部分浏览器可能或不能够动用。

三、结语依然要的

参考作品:querySelectorAll from an element probably doesn’t do what you
think it
does

感谢阅读,欢迎纠错,欢迎调换!

1 赞 1 收藏
评论

必发88 6

翻译注:其实那其中是稍稍难点的,document.querySelectorAll和jQuery选拔器依然有分别的,前者再次回到的是一个NodeList,而后人重临的是一个类数组对象。 
DOM操作 
jQuery还在DOM操作上频仍使用,例如插入或者去除元素。大家也可以选用原生方法来拓展这个操作,你会发现那须求写额外的代码,当然也足以写自己的助手函数来让使用起来更易于。上边是有些将元素插入到页面中的例子。 

选择器
jQuery的要旨之一就是能卓殊便于的取到DOM元素。大家只需输入CSS选取字符串,便足以得到匹配的元素。但在大部动静下,我们得以用简短的原生代码达到同等的职能。

选择器
jQuery的大旨之一就是能格外有利于的取到DOM元素。我们只需输入CSS选择字符串,便足以博得匹配的元素。但在多数动静下,大家可以用简单的原生代码达到同等的意义。

.代码如下:

复制代码 代码如下:
//—-得到页面的持有div———
/* jQuery */
$(“div”)
/* 原生 */
document.getElementsByTagName(“div”)
//—-获得所有指定class的因素———
/* jQuery */
$(“.my-class”)
/* 原生 */
document.querySelectorAll(“.my-class”)
/* 更快的原生方法 */
document.getElementsByClassName(“my-class”)
//—-通过CSS选取得到元素———-
/* jQuery */
$(“.my-class li:first-child”)
/* 原生 */
document.querySelectorAll(“.my-class li:first-child”)
//—-得到指定clsss的首先个因素—-
/* jQuery */
$(“.my-class”).get(0)
/* 原生 */
document.querySelector(“.my-class”)

复制代码 代码如下:

//—-插入元素—- 
/* jQuery */ 
$(document.body).append(“<div id=’myDiv’><img
src=’im.gif’/></div>”); 
/* 蹩脚的原生方法 */ 
document.body.innerHTML += “<div id=’myDiv’><img
src=’im.gif’/></div>”; 
/* 更好的原生方法 */ 
var frag = document.createDocumentFragment(); 
var myDiv = document.createElement(“div”); 
myDiv.id = “myDiv”; 
var im = document.createElement(“img”); 
im.src = “im.gif”; 
myDiv.appendChild(im); 
frag.appendChild(myDiv); 
document.body.appendChild(frag); 
//—-前置元素—- 
// 除了最终一行 
document.body.insertBefore(frag, document.body.firstChild); 

翻译注:其实这些中是多少标题的,document.querySelectorAll和jQuery选拔器依然有分其余,前者再次回到的是一个NodeList,而后人重返的是一个类数组对象。
DOM操作
jQuery还在DOM操作上数十次使用,例如插入或者去除元素。大家也得以应用原生方法来开展那么些操作,你会意识那要求写额外的代码,当然也可以写自己的接济函数来让使用起来更便于。下边是一些将元素插入到页面中的例子。

//—-得到页面的有着div———
/* jQuery */
$(“div”)
/* 原生 */
document.getElementsByTagName(“div”)
//—-得到所有指定class的元素———
/* jQuery */
$(“.my-class”)
/* 原生 */
document.querySelectorAll(“.my-class”)
/* 更快的原生方法 */
document.getElementsByClassName(“my-class”)
//—-通过CSS接纳得到元素———-
/* jQuery */
$(“.my-class li:first-child”)
/* 原生 */
document.querySelectorAll(“.my-class li:first-child”)
//—-获得指定clsss的第三个元素—-
/* jQuery */
$(“.my-class”).get(0)
/* 原生 */
document.querySelector(“.my-class”)

CSS classes 
在jQuery中,大家得以很简单对DOM元素添加、删除、检查它的CSS
class。幸运的是,利用原生方法也足以简简单单的办到。 

复制代码 代码如下:
//—-插入元素—-
/* jQuery */
$(document.body).append(“<div id=’myDiv’><img
src=’im.gif’/></div>”);
/* 蹩脚的原生方法 */
document.body.innerHTML += “<div id=’myDiv’><img
src=’im.gif’/></div>”;
/* 更好的原生方法 */
var frag = document.createDocumentFragment();
var myDiv = document.createElement(“div”);
myDiv.id = “myDiv”;
var im = document.createElement(“img”);
im.src = “im.gif”;
myDiv.appendChild(im);
frag.appendChild(myDiv);
document.body.appendChild(frag);
//—-前置元素—-
// 除了最终一行
document.body.insertBefore(frag, document.body.firstChild);

翻译注:其实这里面是有些难题的,document.querySelectorAll和jQuery选用器如故有分其他,前者重返的是一个NodeList,而后者重临的是一个类数组对象。
DOM操作
jQuery还在DOM操作上往往利用,例如插入或者去除元素。大家也可以使用原生方法来进行那一个操作,你会发现那需求写额外的代码,当然也可以写自己的扶持函数来让动用起来更易于。上边是一对将元素插入到页面中的例子。

.代码如下:

CSS classes
在jQuery中,大家得以很不难对DOM元素添加、删除、检查它的CSS
class。幸运的是,利用原生方法也可以概括的办到。

复制代码 代码如下:

// 得到DOM元素的引用 
var el = document.querySelector(“.main-content”); 
//—-添加class—— 
/* jQuery */ 
$(el).addClass(“someClass”); 
/* 原生方法 */ 
el.classList.add(“someClass”); 
//—-删除class—– 
/* jQuery */ 
$(el).removeClass(“someClass”); 
/* 原生方法 */ 
el.classList.remove(“someClass”); 
//—-是不是是该class— 
/* jQuery */ 
if($(el).hasClass(“someClass”)) 
/* 原生方法 */ 
if(el.classList.contains(“someClass”)) 

复制代码 代码如下:
// 得到DOM元素的引用
var el = document.querySelector(“.main-content”);
//—-添加class——
/* jQuery */
$(el).addClass(“someClass”);
/* 原生方法 */
el.classList.add(“someClass”);
//—-删除class—–
/* jQuery */
$(el).removeClass(“someClass”);
/* 原生方法 */
el.classList.remove(“someClass”);
//—-是还是不是是该class—
/* jQuery */
if($(el).hasClass(“someClass”))
/* 原生方法 */
if(el.classList.contains(“someClass”))

//—-插入元素—-
/* jQuery */
$(document.body).append(“<div id=’myDiv’><img
src=’im.gif’/></div>”);
/* 蹩脚的原生方法 */
document.body.innerHTML += “<div id=’myDiv’><img
src=’im.gif’/></div>”;
/* 更好的原生方法 */
var frag = document.createDocumentFragment();
var myDiv = document.createElement(“div”);
myDiv.id = “myDiv”;
var im = document.createElement(“img”);
im.src = “im.gif”;
myDiv.appendChild(im);
frag.appendChild(myDiv);
document.body.appendChild(frag);
//—-前置元素—-
// 除了最终一行
document.body.insertBefore(frag, document.body.firstChild);

修改CSS属性 
老是通过Javascript修改和寻找CSS属性,那样会比选择jQuery
CSS函数越发简明高效,并且没有其他不要求的代码。 

修改CSS属性
总是通过Javascript修改和查找CSS属性,那样会比使用jQuery
CSS函数尤其简明快捷,并且没有任何不要求的代码。

CSS classes
在jQuery中,大家得以很不难对DOM元素添加、删除、检查它的CSS
class。幸运的是,利用原生方法也足以简单的办到。

.代码如下:

复制代码 代码如下:
// 获得DOM元素引用
var el = document.querySelector(“.main-content”);
//—-设置CSS属性—-
/* jQuery */
$(el).css({
background: “#FF0000”,
“box-shadow”: “1px 1px 5px 5px red”,
width: “100px”,
height: “100px”,
display: “block”
});
/* 原生 */
el.style.background = “#FF0000”;
el.style.width = “100px”;
el.style.height = “100px”;
el.style.display = “block”;
el.style.boxShadow = “1px 1px 5px 5px red”; 

复制代码 代码如下:

// 得到DOM元素引用 
var el = document.querySelector(“.main-content”); 
//—-设置CSS属性—- 
/* jQuery */ 
$(el).css({ 
background: “#FF0000”, 
“box-shadow”: “1px 1px 5px 5px red”, 
width: “100px”, 
height: “100px”, 
display: “block” 
}); 
/* 原生 */ 
el.style.background = “#FF0000”; 
el.style.width = “100px”; 
el.style.height = “100px”; 
el.style.display = “block”; 
el.style.boxShadow = “1px 1px 5px 5px red”; 

,
2, 3)。
我知道您在想什么。原生方法明显要比jQuery方法快,因为jQuer…

// 获得DOM元素的引用
var el = document.querySelector(“.main-content”);
//—-添加class——
/* jQuery */
$(el).addClass(“someClass”);
/* 原生方法 */
el.classList.add(“someClass”);
//—-删除class—–
/* jQuery */
$(el).removeClass(“someClass”);
/* 原生方法 */
el.classList.remove(“someClass”);
//—-是不是是该class—
/* jQuery */
if($(el).hasClass(“someClass”))
/* 原生方法 */
if(el.classList.contains(“someClass”))

修改CSS属性
连日来通过Javascript修改和搜索CSS属性,那样会比接纳jQuery
CSS函数越发简便易行神速,并且没有其余不必要的代码。

复制代码 代码如下:

// 获得DOM元素引用
var el = document.querySelector(“.main-content”);
//—-设置CSS属性—-
/* jQuery */
$(el).css({
background: “#FF0000”,
“box-shadow”: “1px 1px 5px 5px red”,
width: “100px”,
height: “100px”,
display: “block”
});
/* 原生 */
el.style.background = “#FF0000”;
el.style.width = “100px”;
el.style.height = “100px”;
el.style.display = “block”;
el.style.boxShadow = “1px 1px 5px 5px red”;

,
2, 3)。
我清楚你在想什么。原生方法分明要比jQuery方法快,因为jQuery方…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图