$（'＃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行，因此它们被视为“奇数”。 然而，第二张表的第二行是整个集合的第五行，因此被视为“偶数”并且被粗体显示。
