关于javascript：jQuery选择器重用最佳实践

jQuery selector re-use best practice

将DOM对象存储为变量时，这是该变量的最佳实践用法：

1
2
3
4
5
6
7
8
9
10

// Option 1

var myElement1 = $(".container").find('ul li:eq(1)');
$(myElement1).css('background', 'red');

// Option 2

var myElement2 = $(".container").find('ul li:eq(2)');
myElement2.css('background', 'blue');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

看起来我已经两种方式都看到了，正如你所看到的，他们都做到了。选项1对我来说似乎有点多余，但我只想在将选项2提交给我的个人风格之前进行检查。

相关讨论

第二种选择是完全有效和良好的做法，但第一种选择毫无意义。您正在尝试jQueryify一个已经jQueryified的对象。它基本上就像$($("body"))。

另请注意，最好将$添加到包含jQuery对象的变量中。您的代码应如下所示：

1 2	var $myElement2 = $(".container").find('ul li:eq(2)'); $myElement2.css('background', 'blue');

正如@Terry所写，最优化的方式是：

1 2	var $c = $(".container ul li"); var $second = $c.eq(2);

你是对的，第一种情况是多余的，实际上需要更长的时间来执行(虽然不是很多)

您可以在此处的代码段中看到此内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var s = window.performance.now();

var myElement1 = $(".container").find('ul li:eq(1)');
$(myElement1).css('background', 'red');

var e = window.performance.now();
console.log(e - s);

s = window.performance.now();

var myElement2 = $(".container").find('ul li:eq(2)');
myElement2.css('background', 'blue');

e = window.performance.now();
console.log(e - s);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

它给了我大约2到3毫秒的速度差异。

我坚持第二种选择，因为它更清洁，更快。