【美高梅开户网址】jQuery函数的等价原生函数代码示例,jQuery函数的等价原生函数代码

DOM元素querySelectorAll可能让你想不到的特征表现

2015/11/07 · HTML5 ·
DOM,
querySelectorAll

初稿出处:
张鑫旭   

 我们针对常用的jQuery方法以及其等价原生方法的性质做了部分测试(1, 2,
3)。
本身明白你在想如何。原生方法明显要比jQuery方法快,因为jQuery方法要拍卖浏览器包容以及别的部分事情。是的,我一心协助。写这篇作品并不是由于反对使用jQuery,但一旦您针对的是现代浏览器,那么使用原生方法会使性能有很大的晋级。

选择器 
jQuery的骨干之一就是能相当便利的取到DOM元素。大家只需输入CSS选拔字符串,便得以收获匹配的要素。但在大部景观下,大家得以用简单的原生代码达到相同的效劳。 

咱俩本着常用的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>

就是下边那样的突显(为了便利观看,我加了边框背景象和文字):

美高梅开户网址 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,如下截图:
美高梅开户网址 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");

美高梅开户网址 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;

我们只要有疑点,可以在控制台测试下,下图就是自己自己测试的结果:

美高梅开户网址 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【美高梅开户网址】jQuery函数的等价原生函数代码示例,jQuery函数的等价原生函数代码。方法,则是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.lonelydiv.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");

包容性如下:

美高梅开户网址 5

我写此文时候是15年十一月中,近来大多就Fire福克斯浏览器接济,我估算,未来,会支撑越来越多的。为什么吧?

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

关于:scope当前协理尚浅,时机未到,我就没需求乱展开了,点到竣事。

翻译注:必要注意上面有些原生方法是HTML5引用的,部分浏览器可能否够使用。

//—-获得页面的享有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”) 

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

三、结语照旧要的

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

感谢阅读,欢迎纠错,欢迎沟通!

1 赞 1 收藏
评论

美高梅开户网址 6

选择器
jQuery的宗旨之一就是能万分便利的取到DOM元素。大家只需输入CSS接纳字符串,便足以获得匹配的因素。但在大部动静下,大家得以用简短的原生代码达到同等的效益。

翻译注:其实那其间是有些问题的,document.querySelectorAll和jQuery采纳器仍然有分其余,前者再次来到的是一个NodeList,而后人重临的是一个类数组对象。 
DOM操作 
jQuery还在DOM操作上翻来覆去使用,例如插入或者去除元素。大家也足以利用原生方法来进展那些操作,你会发现那亟需写额外的代码,当然也足以写自己的拉扯函数来让动用起来更便于。上面是局地将元素插入到页面中的例子。 

选择器
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”)

.代码如下:

复制代码 代码如下:

翻译注:其实那中间是有点题目标,document.querySelectorAll和jQuery选用器依旧有分其余,前者重返的是一个NodeList,而后人重返的是一个类数组对象。
DOM操作
jQuery还在DOM操作上反复利用,例如插入或者去除元素。大家也得以利用原生方法来开展这么些操作,你会意识那需求写额外的代码,当然也可以写自己的扶植函数来让动用起来更易于。上边是有的将元素插入到页面中的例子。

//—-插入元素—- 
/* 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); 

//—-拿到页面的保有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);

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

翻译注:其实那其间是有些问题的,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”; 

.代码如下:

复制代码 代码如下:

,
2, 3)。
我领会你在想怎么。原生方法分明要比jQuery方法快,因为jQuer…

// 获得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”);
//—-添加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地图