将 $(this) 用于基于事件的函数

Question

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

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

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

暂时忘记使用 css() 是不好的，我应该添加一个 class。
可以说我想 addClass 而不是该按钮元素的父级 div 。我知道我可以爬上 DOM:

到达它

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

但是我真的必须使用它吗？与像这样选择 id/class 相比，这种方法会不会更重，并导致更多的浏览器计算：

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

当您编写一个函数时，它是否会自动从文档对象开始查找并使用它只是将其定向到您尝试执行该函数的元素的方法？

Answer 1

为什么要找家长class？您可以直接在按钮上添加class。

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

Answer 2

是的，jQuery DOM 遍历非常昂贵，因此在树上上下移动时选择合适的元素是有代价的。

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

Browsers help you to get to certain elements

Browsers do provide some helper functions to get to certain types of elements. For example if you want to get DOM element with id header then document.getElementById function can be used like this
document.getElementById('header')
Similarly if you want to collect all the p elements in a document then you could use following code .
document.getElementsByTagName('p')
However if you want something complex like the one given below then browsers were not much help. It was possible to walk up and down the tree however traversing the tree was tricky because of two reasons: a) DOM spec is not very intuitive b) Not all the browsers implemented DOM spec in same way.
jQuery('#header a')
....

Sizzle gets the selector string ‘.header a’. It splits the string into two parts and stores in variable called parts.
parts = ['.header', 'a']
Next step is the one which sets Sizzle apart from other selector engines. Instead of first looking for elements with class header and then going down, Sizzle starts with the outer most selector string.

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

基本上是懒惰和性能之间的trade-off。

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

比

快

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

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

而不是写作

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

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

您可以编写一个针对任何按钮自身的按钮 parent。

然后假设按钮及其 parent 是动态生成的，这需要为每个按钮生成唯一的 ID。然后假设在同一个页面上使用了多种类型的按钮，那么每个块都需要生成不同的 ID。

您当然可以做一些事情来优化您的代码以提高性能，但在大多数情况下，使用 .parent() 已经足够快了。

将 $(this) 用于基于事件的函数

using $(this) for event based functions

jquery

this