Question

寻找关于jQuery选择器的一些事情我对它有点模糊。任何帮助将不胜感激。

让我们说当我点击它时我想要一个蓝色按钮，我可以写一些类似

的东西

$('.button').on('click', function(){
$(this).css('color', 'blue');
}

暂时忘记使用css（）是坏的，我应该添加一个类假设我想将addClass改为该按钮元素的父div。我知道我可以通过爬上DOM来达到它：

$('.button').on('click', function(){
$(this).parent('#theParentDiv').addClass('make-it-blue');
}

但我必须要使用它吗？这种方法不会更重，并且导致更多的浏览器计算，而不仅仅是选择id / class：

$('#theParentDiv).addClass('make-it-blue');

当你编写一个函数时，它会自动从文档对象开始查找，使用它只是将它指向你正在尝试该函数的元素吗？

Answer 1

你为什么要找父母班？您可以直接在按钮上添加类。

$(ths).addClass('make-it-blue');

Answer 2

是的，jQuery DOM遍历的代价很高，因此当您在树上上下移动时，选择合适的元素会付出代价。

要回答关于编写函数时会发生什么的问题，这实际上取决于您选择的内容。

浏览器可帮助您获取某些元素

浏览器确实提供了一些辅助函数来获取某些类型的元素。例如，如果你想获得带有id头的DOM元素，那么可以像这样使用document.getElementById函数
document.getElementById('header')
同样，如果您想收集文档中的所有p元素，那么您可以使用以下代码。
document.getElementsByTagName('p')
但是如果你想要像下面给出的那样复杂的东西，那么浏览器就没什么用了。可以在树上走来走去，但是由于两个原因，遍历树是很棘手的：a）DOM规范不是很直观b）并非所有浏览器都以相同的方式实现DOM规范。
jQuery('#header a')
...

Sizzle获取选择器字符串'.header a'。它将字符串分成两部分并存储在变量中称为部分。
parts = ['.header', 'a']
下一步是将Sizzle与其他选择器引擎区分开来的步骤。 Sizzle首先从最外层的选择器字符串开始，而不是首先查找具有类头的元素然后向下。

How jQuery selects elements using Sizzle - http://blog.bigbinary.com/2010/02/15/how-jquery-selects-elements-using-sizzle.html

Answer 3

我已经为您创建了一个性能测试，可以看到ID直接定位比使用.parent（）查找ID更快。你可以在这里看到结果：

http://jsperf.com/jquery-id-selector-vs-parent-selector

Answer 4

这基本上是懒惰和表现之间的权衡。

$('.button').on('click', function() {
  $('#buttonParent').addClass('blue');
});

比

快

$('.button').on('click', function() {
  $(this).parent().addClass('blue');
});

但想象一下，如果有多个按钮，每个按钮都有自己的父母。

而不是写

$('#buttonParentOne .button').on('click', function() {
  $('#buttonParentOne').addClass('blue');
});

$('#buttonParentTwo .button').on('click', function() {
  $('#buttonParentTwo').addClass('blue');
});

你可以写一个针对任何按钮的父母。

然后想象按钮及其父项是动态生成的，这需要为每个按钮生成唯一的ID。然后想象在同一页面上使用多种类型的按钮，因此每个块都需要彼此生成不同的ID。

您可以采取一些措施来优化代码以提高性能，但在大多数情况下，使用.parent()的速度非常快。

将$（this）用于基于事件的函数

4 个答案: