javascript - 将 jQuery 限制为特定 DOM 节点的快捷方式

Question

我想将 jQuery 限制为特定的命名空间或 DOM 节点。目前我所做的每一行都是这样的

$('a' , $node).addClass();
$('li' , $node).removeAttr();
$('div#q' , $node).hide();

等等.. 有没有我可以指定的快捷方式/方法，之后 jQuery 对象的范围将被限制为$node.

Answer 1

您可以直接更改 $ 方法。

将 $ 分配给返回 $node.find() 的函数，您就完成了。

    jQuery(function($){
        var $node = $('div');
        var _$ = $;

        $ = function(selector){
            return $node.find(selector);
        };

        $('p:first').fadeOut();

        // Return $ to its previous owner
        $ = _$;
    });

jsfiddle：http: //jsfiddle.net/pmYRw/1/

Answer 2

您可以链接您的方法，这样您只需编写一次选择器：

$('a' , $node).addClass('aclass').removeAttr('rel').hide();

或者也将引用保存在变量中以供重用：

var a = $('a' , $node);
a.addClass('aclass');
a.removeAttr('rel');
a.hide();

Answer 3

$('a' , $node).addClass();
$('a' , $node).removeAttr();
$('a' , $node).hide();

而不是绑定 $('a' , $node) 几次，你可以缓存这个变量并像下面一样使用它。这也会提高你的表现。

var node  = $('a' , $node);
node.addClass();
node.removeAttr();
node.hide();

我们可以通过像下面这样链接它们来进一步改进这段代码

var node  = $('a' , $node);
node.addClass().removeAttr().hide();

重用变量和链接 jquery 将对您的代码产生巨大影响。

Answer 4

而不是 $node （我假设它是一个已经实例化的 jquery 对象），你可以把它写成一个字符串：

$('a', '#main') #≠> all anchor tags under element with main as id

$('a', '#main li') #≠> all anchor tags al li's under element with main as id

您也可以先实例化主元素，然后在其子范围内搜索：

var main = $('#main');
main.find('a');
main.find('li a');

这将更加高效。