當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript及jQuery选择器(二)
生活随笔
收集整理的這篇文章主要介紹了
JavaScript及jQuery选择器(二)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1、選擇指定ID元素
對于選擇DOM元素，javascript提供了以下兩個方法：
document.getElementById()；
document.getElementsByTagName()；
document.getElementById()方法返回單個DOM元素，而document.getElementsByTagName()方法則返回DOM元素集合。
?
javascript實現(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實現(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í)行時間 = " + (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í)行時間 = " + (t2 - t1) + "毫秒");
23 });
24 </script>
25 </head>
26 <body>
27 </body>
28 </html>
?
2、選擇指定類型元素
javascript實現(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 window.onload = function () {
7 var body = document.getElementsByTagName("body")[0];
8 for (var i = 0; i < 1000; i++) {
9 var span = document.createElement("span");
10 span.setAttribute("id", "span" + i);
11 body.appendChild(span);
12 }
13
14 var spans = document.getElementsByTagName("span");
15 for (var i = 0; i < spans.length; i++) {
16 spans[i].style.color = "red";
17 }
18 }
19 </script>
20 </head>
21 <body>
22 </body>
23 </html>
jQuery實現(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實現(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沒有內(nèi)置的類選擇方法，可以編寫擴展方法
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實現(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實現(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 window.onload = function () {
7 var all = document.getElementsByTagName("*");
8
9 for (var i = 0; i < all.length; i++) {
10 all[i].style.color = "red";
11 }
12 }
13 </script>
14 </head>
15 <body>
16 </body>
17 </html>
jQuery實現(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选择器(二)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 思科快速转发机制(CEF-Cisco E
- 下一篇： javascript-按圆形排列DIV元