极客教程jQuery中最快/最慢的选择器是什么
jQuery选择器是用来选择和操作HTML元素的。
在jQuery中，主要有三个选择器。
- ID 选择器
- Class 选择器
- Element 选择器
在前进之前，首先，让我们简单地看看这些选择器是如何使用的。
元素选择器： jQuery元素选择器根据它们的名字来选择元素。
语法:
$(''element")
示例:
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
<style>
p {
font-size: 25px;
}
</style>
</head>
<body>
<p>GeeksForGeeks</p>
<script>
// Element selector
$("p").css("color", "red");
</script>
</body>
</html>
输出:
ID选择器： jQuery #id选择器根据HTML标签的ID属性来选择元素。
这个选择器基本上是在我们必须对单个元素进行处理时使用的，因为一个ID在一个网页中应该是唯一的。
语法:
$("#ID")
示例:
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
<style>
p {
font-size: 25px;
}
</style>
</head>
<body>
<p>GeeksForGeeks</p>
<p id="first">Hello Geeks</p>
<script>
// ID selector
$("#first").css("color", "red");
</script>
</body>
</html>
输出:
ID selector
类选择器： jQuery .class选择器选择元素或其类匹配的元素集合。不同的HTML元素可以使用相同的类名。
语法:
$(".class")
示例:
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script
src="https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<p class="first">GeeksForGeeks</p>
<p class="first">Hello Geeks</p>
<script>
// Class selector
$(".first").css("color","blue")
</script>
</body>
</html>
输出:
class selector
让我们写一些代码，看看这些选择器的实际速度如何？
例子：我们将写一个程序，使用不同的选择器来执行相同的任务，让我们看看它们花了多少时间。
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<p id="test">Hello</p>
<p class="test">Hello</p>
<h3>Hello</h3>
<script>
// ID Selector
let id_time = Date.now();
let id_t = 0;
for (let i = 0; i < 100000; i++) {
if (("#test").css('background-color') == 'yellow')
("#test").css('background-color', 'red');
else
("#test").css("background-color", "yellow");
}
id_t = Date.now() - id_time;
console.log(' ID Selector : ' + id_t + ' milliseconds');
/*-------------------------------------------------------*/
// Class Selector
let cl_time = Date.now();
let cl_t = 0;
for (i = 0; i<100000; i++) {
if ((".test").css('background-color') == 'yellow')
(".test").css('background-color', 'red');
else
(".test").css("background-color", "yellow");
}
cl_t = Date.now() - cl_time;
console.log(' Class Selector :' + cl_t + ' milliseconds');
/*----------------------------------------------------------*/
// Element Selector
let el_time = Date.now();
let el_t = 0;
for (i = 0; i < 100000; i++) {
if (("h3").css('background-color') == 'yellow')
("h3").css('background-color', 'red');
else
$("h3").css("background-color", "yellow");
}
el_t = Date.now() - el_time;
console.log('Element Selector : ' + el_t + ' milliseconds');
</script>
</body>
</html>
输出:
ID Selector : 597 milliseconds
Class Selector :751 milliseconds
Element Selector : 741 milliseconds
在看到上述代码的结果后，很明显，ID选择器是最快的。类和元素选择器的时间几乎相同。
**jQuery中最快/最慢的选择器是什么？
在所有三个选择器中，ID选择器是最快的选择器，因为任何HTML元素的ID在网页中都是唯一的，当网页加载时，浏览器将开始搜索具有指定ID的元素，而ID是唯一的，所以当浏览器找到具有指定ID的元素时，它将停止搜索。
但在类选择器中，多个元素可以有相同的类名，因此，浏览器必须遍历整个DOM，找出每个有指定类名的元素。由于这个原因，类选择器被认为是最慢的选择器。
如果你在网页上有很多事情要做，而且不可能每次都使用ID选择器，那么最好的方法就是缓存。获取一次选择器，并将其存储起来，以便进一步使用。
注意：如果我们考虑今天的现代浏览器，那么这些选择器同样快速，因为在现代浏览器中，类名是内部散列的，我们有.getElementsByClassName()，而在旧的浏览器中，没有类似于.getElementsByClassName()的功能，这就是.class名称被内部解析给jQuery的原因，然后DOM的每个元素被遍历并检查类名的原因。