jQuery函数的等价原生函数代码示例,jQuery函数的等价原生函数代码示例

DOM元素querySelectorAll可能让您意外的性状表现

2015/11/07 · HTML5 ·
DOM,
querySelectorAll

初稿出处:
张鑫旭   

我们本着常用的jQuery方法以及其等价原生方法的特性做了有的测试(1,
2,
3)。
自家了解你在想怎样。原生方法肯定要比jQuery方法快,因为jQuery方法要拍卖浏览器包容以及其余一些作业。是的,我一心赞同。写那篇作品并不是由于反对选择jQuery,但如果您针对的是现代浏览器,那么使用原生方法会使性能有很大的进步。

 大家针对常用的jQuery方法以及其等价原生方法的特性做了有的测试(1, 2,
3)。
本身通晓您在想什么。原生方法鲜明要比jQuery方法快,因为jQuery方法要拍卖浏览器包容以及其余一些政工。是的,我一心接济。写那篇小说并不是由于反对动用jQuery,但一旦您针对的是当代浏览器,那么使用原生方法会使性能有很大的升级。

选择器 
jQuery的中坚之一就是能万分有利的取到DOM元素。大家只需输入CSS选用字符串,便可以拿走匹配的因素。但在大部气象下,咱们能够用简短的原生代码达到平等的效果。 

一、时间急迫,废话少说

正文所在的页面藏匿了上边那些代码:

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方法,则是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是在某一限制内利(内尔(Nell)y)用。此伪类在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引用的,部分浏览器可能不可能利用。

翻译注:要求留意上面有些原生方法是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”) 

三、结语仍然要的

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

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

1 赞 1 收藏
评论

亚洲必赢官网 6

选择器
jQuery的骨干之一就是能极度便宜的取到DOM元素。大家只需输入CSS选拔字符串,便可以博得匹配的要素。但在大部气象下,大家可以用简易的原生代码达到平等的效率。

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

翻译注:其实那其间是有点题目的,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”)

.代码如下:

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

翻译注:其实那中间是稍稍题目的,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);

CSS classes 
在jQuery中,大家得以很不难对DOM元素添加、删除、检查它的CSS
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);

复制代码 代码如下:
// 获得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”)) 

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

修改CSS属性
连接通过Javascript修改和寻找CSS属性,那样会比拔取jQuery
CSS函数尤其简约便捷,并且没有任何不要求的代码。

修改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”; 

.代码如下:

// 获得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”))

,
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”; 

修改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”;

网站地图xml地图