菜单

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

2019年3月14日 - 金沙前端

壹 、时间急迫,废话少说

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

<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

第2说点大家都知晓的热热身。

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

为啥会如此?

首先个符合大家的通晓,不表明。那下1个说话,为啥再次回到的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选拔器是单身于任何页面包车型地铁!

哪些意思呢?比如说你在页面很深的贰个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.

//—-得到页面包车型客车装有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的基本之一正是能11分便宜的取到DOM成分。我们只需输入CSS选取字符串,便足以拿走匹配的成分。但在大部情状下,大家能够用简单的原生代码达到同等的效能。

//—-插入成分—- 
/* 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); 

③ 、结语依然要的

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

多谢阅读,欢迎纠错,欢迎交换!

1 赞 1 收藏
评论

澳门金沙国际 5

复制代码 代码如下:

复制代码 代码如下:
//—-插入成分—-
/* 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);

.代码如下:

二 、:scope与区域选择范围

其实,要想querySelectorAll后边选取器不受全局影响,也是有措施的,就是采用近年来还地处试验阶段的:scope伪类,其作用正是让CSS是在某一限制内使用。此伪类在CSS中运用是元宝,可是也足以在querySelectorAll语句中应用:

JavaScript

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

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

兼容性如下:

澳门金沙国际 6

自家写此文时候是15年3月尾,近年来基本上就FireFox浏览器补助,笔者估量,现在,会支撑更多的。为啥吧?

因为Web
Components需求它,能够完结真正独立包装,不会受外界影响的HTML组件。

关于:scope眼前帮忙尚浅,时机未到,我就没要求乱展开了,点到告竣。

CSS classes
在jQuery中,我们得以很不难对DOM成分添加、删除、检查它的CSS
class。幸运的是,利用原生方法也足以大致的办到。

多多开发者没有意识到多数他们运用的jQuery方法能够运用原生方法,大概更轻量级的章程来代替。上面是局地代码示例,显示一些常用的jQuery方法,以及其等价原生方法。

// 获得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成分querySelectorAll大概让您意外的特色表现

2015/11/07 · HTML5 ·
DOM,
querySelectorAll

初稿出处:
张鑫旭   

翻译注:其实那当中是稍微难题的,document.querySelectorAll和jQuery采用器照旧有分别的,前者重回的是四个NodeList,而后人重临的是3个类数组对象。
DOM操作
jQuery还在DOM操作上屡次利用,例如插入或然去除成分。大家也足以应用原生方法来进展这个操作,你会发觉那须求写额外的代码,当然也得以写自身的帮手函数来让动用起来更易于。下边是部分将成分插入到页面中的例子。

修改CSS属性
老是通过Javascript修改和摸索CSS属性,那样会比使用jQuery
CSS函数特别简约高效,并且没有别的不需求的代码。

修改CSS属性 
连天通过Javascript修改和查找CSS属性,那样会比选用jQuery
CSS函数尤其简约神速,并且没有别的不供给的代码。 

相关文章

发表评论

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

网站地图xml地图