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

我正在寻找一些关于jQuery选择器的信息，我对此有些模糊。任何帮助都将不胜感激

假设我想在点击按钮时将其变成蓝色，我可以这样写

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

暂时忘记使用css（）不好，我应该添加一个类来代替。
假设我想将类添加到button元素的父div。 我知道我可以爬上DOM到达它：

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

但是我必须用这个吗？ 这种方法会不会比这样选择id/类更重，并且会导致更多的浏览器计算：

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

---

编写函数时，它是否会自动从文档对象开始查找，并使用此方法将其定向到要在其上尝试函数的元素？

为什么要查找父类？您可以直接在按钮上添加类

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

---

是的，jQueryDOM遍历是昂贵的，因此在树上下移动时选择适当的元素是有代价的

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

浏览器可以帮助您访问某些元素

浏览器确实提供了一些帮助函数来访问某些类型的元素。例如，如果您希望获取id为header的DOM元素，则可以像这样使用document.getElementById函数

document.getElementById('header')

类似地，如果希望收集文档中的所有p元素，则可以使用以下代码

document.getElementsByTagName('p')

然而，如果你想要一些复杂的东西，比如下面给出的，那么浏览器并没有多大帮助。在树上来回走动是可能的，但是遍历树很困难，因为有两个原因：a）DOM规范不是很直观b）不是所有浏览器都以相同的方式实现DOM规范

jQuery('#header a')

Sizzle获取选择器字符串'.header a'。它将字符串分成两部分，并存储在名为parts的变量中

parts = ['.header', 'a']

下一步是将Sizzle与其他选择器引擎区分开来。Sizzle从最外层的选择器字符串开始，而不是先查找带有类头的元素，然后再查找

---

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

---

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

$('.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（）

已经足够快了