【皇家赌场手机版】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方法要处理浏览器包容以及此外部分事情。是的,作者一心扶助。写那篇作品并不是由于反对利用jQuery,但若是您针对的是现代浏览器,那么使用原生方法会使品质有十分的大的升官。

选择器 
jQuery的基本之一正是能非凡有利的取到DOM成分。大家只需输入CSS选用字符串,便能够博得匹配的因素。但在多数情状下,我们得以用简易的原生代码达到相同的法力。 

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

本文所在的页面藏匿了上边这么些代码:

<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>

【皇家赌场手机版】jQuery函数的等价原生函数代码,jQuery函数的等价原生函数代码示例。正是底下那样的展现(为了方便观望,笔者加了边框背景观和文字):

皇家赌场手机版 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

何以会那样?

率先个适合我们的明白,不解释。那下3个讲话,为啥重临的NodeList长度是3呢?

首先,遍历该NodeList会发现,查询的多少个dom成分为:div.lonelydiv.outerdiv.inner.

意想不到,奇怪,怎么会是二个吗?

jQuery中有个find()措施,我们很只怕遭到那些法子影响,导致出现了一些回味的题材:

JavaScript

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

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

即便运用find方法,则是1个门户大致;由于组织和作用类似,大家很当然疑问原生的querySelectorAll也是那么些套路。真是太错特错!!

要解释,为何NodeList长度是3,只要一句话就足以了,笔者特意加粗标红:

CSS采取器是单身于全部页面包车型地铁!

怎么样意思啊?比如说你在页面很深的3个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年二月底,最近大多就FireFox浏览器辅助,笔者测度,未来,会辅助愈来愈多的。为啥吧?

因为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的第3个成分—- 
/* 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的中央之一正是能12分有利于的取到DOM成分。大家只需输入CSS采纳字符串,便能够拿走匹配的要素。但在多数场所下,大家得以用简单的原生代码达到相同的效应。

选择器
jQuery的骨干之一就是能可怜有利于的取到DOM成分。大家只需输入CSS选拔字符串,便足以获取匹配的因素。但在半数以上情状下,我们得以用简短的原生代码达到平等的坚守。

翻译注:其实那里面是多少标题标,document.querySelectorAll和jQuery采用器照旧有分别的,前者重返的是3个NodeList,而后者重返的是1个类数组对象。 
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选用器依旧有分其他,前者重返的是3个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”;

Leave a Comment.