當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

JavaScript及jQuery选择器(二)

發(fā)布時(shí)間：2024/4/14 javascript 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript及jQuery选择器(二) 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1、選擇指定ID元素

　　對(duì)于選擇DOM元素，javascript提供了以下兩個(gè)方法：

　　document.getElementById()；

　　document.getElementsByTagName()；

　　document.getElementById()方法返回單個(gè)DOM元素，而document.getElementsByTagName()方法則返回DOM元素集合。

　　javascript實(shí)現(xiàn)：

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head runat="server">
5 <title>JavaScript ID選擇器</title>
6 <script type="text/javascript">
7 window.onload = function () {
8 　　　　　　 var el = document.getElementById("demo");
9 el.style.background = "red";
10 }
11 </script>
12 </head>
13 <body>
14 <div id="demo"></div>
15 </body>
16 </html>

　　jQuery實(shí)現(xiàn)：

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head runat="server">
5 <title>jQuery ID選擇器</title>
6 <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 $(function () {
9 $("#demo").css("background", "red");
10 });
11 </script>
12 </head>
13 <body>
14 <div id="demo"></div>
15 </body>
16 </html>

　　javascript ID選擇器執(zhí)行效率：

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>JavaScript ID選擇器執(zhí)行效率</title>
5 <script type="text/javascript">
6 window.onload = function () {
7 　　　　　　　for (var i = 0; i < 1000; i++) {
8 　　　　　　　　　 var span = document.createElement("span");
9 span.setAttribute("id", "span" + i);
10 document.getElementsByTagName("body")[0].appendChild(span);
11 }
12 }
13 </script>
14 <script type="text/javascript">
15 window.onload = function () {
16 　　　　　　　var a = [];
17 　　　　　　　var t1 = new Date();
18 　　　　　　　for (var i = 0; i < 1000; i++) {
19 　　　　　　　　　var b = document.getElementById("span" + i);
20 a.push(b);
21 }
22 var t2 = new Date();
23 alert("執(zhí)行時(shí)間 = " + (t2 - t1) + "毫秒");
24 }
25 </script>
26 </head>
27 <body>
28 </body>
29 </html>

　　jQuery ID選擇器執(zhí)行效率：

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>jQuery ID選擇器執(zhí)行效率</title>
5 <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
6 <script type="text/javascript">
7 $(function () {
8 　　　　　　　for (var i = 0; i < 1000; i++) {
9 $("body").append("<span id='" + "span" + i + "'></span>");
10 }
11 });
12 　　</script>
13 <script type="text/javascript">
14 $(function () {
15 　　　　　　　var a = [];
16 　　　　　　　var t1 = new Date();
17 　　　　　　　for (var i = 0; i < 1000; i++) {
18 　　　　　　　　　var b = $("span" + i);
19 a.push(b);
20 }
21 　　　　　　　var t2 = new Date();
22 alert("執(zhí)行時(shí)間 = " + (t2 - t1) + "毫秒");
23 });
24 　　</script>
25 </head>
26 <body>
27 </body>
28 </html>

2、選擇指定類型元素

　　javascript實(shí)現(xiàn)：

　　jQuery實(shí)現(xiàn)：

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>jQuery 類型選擇器</title>
5 <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
6 <script type="text/javascript">
7 $(function () {
8 　　　　　　 for (var i = 0; i < 1000; i++) {
9 $("body").append("<span id='" + "span" + i + "'></span>");
10 }
11 });
12 　　 </script>
13 <script type="text/javascript">
14 $(function () {
15 $("span").css("color", "red");
16 });
17 </script>
18 </head>
19 <body>
20 </body>
21 </html>

3、選擇指定類元素

　　javascript實(shí)現(xiàn)：

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>JavaScript指定類選擇器</title>
5 <script type="text/javascript">
6 　　　　 // javascript沒(méi)有內(nèi)置的類選擇方法，可以編寫擴(kuò)展方法
7 document.getElementsByClassName = function (className) {
8 　　　　　　　var el = [],
9 _el = document.getElementsByTagName("*"); // 獲取所有的元素
10 　　　　　　　for (var i = 0; i < _el.length; i++) { // 遍歷元素集合
11 　　　　　　　　　if (_el[i].className == className) { // 獲取相同類名的元素
12 el[el.length] = _el[i];
13 }
14 }
15 　　　　　　 return el;
16 }
17
18 window.onload = function () {
19 　　　　 var body = document.getElementsByTagName("body")[0];
20 　　　　 for (var i = 0; i < 1000; i++) {
21 　　　　 var span = document.createElement("span");
22 span.setAttribute("id", "span" + i);
23 span.setAttribute("class", "red");
24 body.appendChild(span);
25 }
26
27 　　　　 var spans = document.getElementsByClassName("red");
28
29 　　　　 for (var i = 0; i < spans.length; i++) {
30 spans[i].style.color = "red";
31 }
32 }
33 　　</script>
34 </head>
35 <body>
36 </body>
37 </html>

　　jQuery實(shí)現(xiàn)：

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>jQuery 類選擇器</title>
5 <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
6 <script type="text/javascript">
7 $(function () {
8 　　　　　　 for (var i = 0; i < 1000; i++) {
9 $("body").append("<span class='red'></span>");
10 }
11 });
12 　　 </script>
13 <script type="text/javascript">
14 $(function () {
15 $(".red").css("color", "red");
16 });
17 　　 </script>
18 </head>
19 <body>
20 </body>
21 </html>

4、選擇所有元素

　　javascript實(shí)現(xiàn)：

　　jQuery實(shí)現(xiàn)：

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>jQuery選擇所有元素</title>
5 <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
6 <script type="text/javascript">
7 $(function () {
8 $("body *").css("color", "red");
9 });
10 </script>
11 </head>
12 <body>
13 </body>
14 </html>

轉(zhuǎn)載于:https://www.cnblogs.com/libingql/archive/2012/03/12/2392670.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript及jQuery选择器(二)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：思科快速转发机制(CEF-Cisco E
下一篇：戴尔新鲜空气制冷的研究：在数据中心里面，