$("selection")和$("selection"，$(this))的区别是什么？

Question

我在函数中见过$(this)和understand的用法，在选择器中也见过，但无法理解它何时或是否有价值。这里有两个我可以使用并开始工作的例子，但我真的做了什么有价值的事情吗？

这里我在选择器中添加了$(this)

(function($) {
    $(".deliver").on('mouseenter',function(){
        $(this).css({'width':'600px'});
        $(".form_jquery",$(this)).fadeIn(1000).css({'display':'block'});
        $(".componentheading",$(this)).css({'display':'none'});
    }); ...

这是我的原始脚本

(function($) {
    $(".deliver").on('mouseenter',function(){
        $(this).css({'width':'600px'});
        $(".form_jquery").fadeIn(1000).css({'display':'block'});
        $(".componentheading").css({'display':'none'});
    });

我在两者中都保留了( this )的标准用法，并注意到我在一个匿名函数中使用，以防出现这种情况。

Answer 1

$(".componentheading",$(this))

只搜索当前$(this)元素下的.componentheading元素(在本例中是您输入鼠标的.deliver )，而

$(".componentheading")

在整个文档中搜索它们。

http://api.jquery.com/jQuery/#jQuery1

Answer 2

向jQuery函数提供第二个参数会缩小选定内容的范围。默认情况下，上下文是整个文档。

在使用$(this)作为上下文的情况下，您只需在触发mouseenter处理程序的元素内查找具有form_jquery或componentheading类的元素。

提供上下文来缩小选择器搜索的范围是提高选择器性能的好方法，只要您知道您要查找的元素确实可以在该上下文中找到。

Answer 3

$( selector, context )

jQuery的实际函数类似于这个jQuery( selector, context )，如果您为上下文值提供了一个元素，当jQuery尝试jQuery.find您的元素时，它将从您提供的元素开始。

在许多情况下，这可以提供性能提升！

为了向jQuery函数提供元素，许多人使用一种名为DOM caching的方法，在该方法中将元素存储在变量中，并将其作为引用上下文传递给jQuery函数。