$('#tabs a')和$('#tabs')之间的区别find('a')

我有以下结构

<ul id="tabs" class="nav nav-tabs"> <li><a href="#aaa" hashval="aaa">AAA</a></li> <li><a href="#bbb" hashval="bbb">BBB</a></li> <li><a href="#ccc" hashval="ccc">CCC</a></li> <li><a href="#ddd" hashval="ddd">DDD</a></li> </ul> 

现在我正在通过下面的代码在锚标记上运行,哪个工作正常。

 $('#tabs a[href="#ddd"]').tab('show'); 

我正在使用pycharm,通过说“带有IDselect器的前言”来为该行添加警告。 当我点击它,pycharm更改为以下

 $('#tabs').find('a[href="#ddd"]').tab('show'); 

两者都工作正常,但我不明白的区别。

两者或两者之间有什么区别,特别是$('#tabs a[href="#ddd"]')$('#tabs').find('a[href="#ddd"]')之间的区别是什么, $('#tabs').find('a[href="#ddd"]')

$("#tabs a") 从右到左计算 – 这是Sizzleselect器引擎和querySelectorAll的本机方向 – 即首先find页面中的所有锚元素,然后将其缩小到#tabs下的元素。

$("#tabs").find("a") 从左到右评估 – 更直观 – 即先find#tabs ,然后find它下面的锚点元素。

显然后者会有较好的performance ,但只会累积起来, 也就是说,如果您运行数千个查询。 否则,差异是微不足道的。

如“从左至右增加特异性”所述 :

jQueryselect器引擎的一些知识是有用的。 它从最后一个select器开始工作,因此,在较旧的浏览器中,查询如下:

 $("p#intro em"); 

将每个em元素加载到一个数组中。 然后,它会处理每个节点的父节点,并拒绝那些找不到p#intro的节点。 如果页面上有数百个电子标签,查询效率将会非常低。

根据您的文档,可以通过首先检索最合适的select器来优化查询。 它可以被用来作为孩子select的起点,例如

 $("em", $("p#intro")); // or $("p#intro").find("em"); 

但是testing用例说$("#tabs > a")最快的

第二个更快。 原因是jQuery的select器enginge Sizzle , 从右遍历select,而不是相反。

这意味着select器

 $('#tabs a[href="#ddd"]') 

首先查询DOM文档中的标签,其中包含属性 href设置为#ddd 。 然后筛选出所有这些,以获得每个<a>标签。 最后,遍历每个节点的DOM树,试图find一个父节点#tabs

设想一个带有1.000个标签的站点,这个速度会非常慢。

然后。

pycharm提出的另一个变体是首先定位一个元素#tabs 。 这是超快的,因为jQuery可以使用本地浏览器方法getElementById() 。 有了这个节点,它可以遍历下来find所有匹配的标签。 通过这样做,并不是all tags in the whole DOM-tree需要被检查。 只有那些实际上在#tabs

有关更多信息,请参阅文档中的此页面 。

效果是一样的:find具有值#ddd作为href并且是#tabs的后代的锚。 区别在于如何实现这一点。

第一个解决schemefind锚点,然后检查它们是否是#tabs的后代。

第二个解决schemefind#tabs ,然后find锚点。 当然,这应该更快。

.find()比你的第一个select器更好的性能

 $('#tabs a[href="#ddd"]').tab('show'); 

这就是为什么pycharm使用.find()将其更改为select器的.find()

 $('#tabs').find('a[href="#ddd"]').tab('show'); 

http://vaughnroyko.com/the-real-scoop-on-jquery-find-performance/

不同之处在于find()允许你根据你已经做的select过滤一组元素,返回元素数组(如果是这样的话)。

 $('#tabs').find('a[href=“#ddd”]'); 

这是一个更具体的search元素的方式,因为你在说“嗨,去#tabs ,在那里find我所有a[href=“#ddd”] ,而不是你说:”嘿,find我所有这些家伙$('#tabs a[href=“#ddd”]')在我拥有的所有代码中。

虽然在大多数情况下,性能是唯一的差异,但方法的差异也会影响代码的结果,具体取决于您使用的是哪种select器。

例如, $("table").find("tr:even").addClass("even"); 会将“偶数”类添加到每个返回的单独表中的每一行中。 因此,如果“偶数”类使行中的文本为粗体,并且您有两个表,每个表都有3行,则会得到以下结果:


这是表1第一行

这是表1第2行

这是表一,第3行


这是表二,第一行

这是表2第2行

这是表二,第三行


在这两种情况下,每个表格的第1行和第3行(即“偶数”行…都不会让我开始使用JQuery的evenfilter,select奇数行…)是粗体显示的。

另一方面, $("table tr:even").addClass("even"); 会将“偶数”类添加到组合的所有表中的整个行组中的每一行中。


这是表1第一行

这是表1第2行

这是表一,第3行


这是表二,第一行

这是表2第2行

这是表二,第三行


在这种情况下,第二表的第一行和第三行实际上是整个<tr>元素组的第4行和第6行,因此它们被视为“奇数”。 然而,第二张表的第二行是整个集合的第五行,因此被视为“偶数”并且被粗体显示。