JavaScript及jQuery选择器(二)

1、选择指定ID元素

　　对于选择DOM元素，javascript提供了以下两个方法：

　　document.getElementById()；

　　document.getElementsByTagName()；

　　document.getElementById()方法返回单个DOM元素，而document.getElementsByTagName()方法则返回DOM元素集合。

　　javascript实现：

 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实现：

 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选择器执行效率：

 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选择器执行效率</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("执行时间 = " + (t2 - t1) + "毫秒");
24         }
25     </script>
26 </head>
27 <body>
28 </body>
29 </html>

　　jQuery ID选择器执行效率：

 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选择器执行效率</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("执行时间 = " + (t2 - t1) + "毫秒");
23         });
24 　　</script>
25 </head>
26 <body>
27 </body>
28 </html>

2、选择指定类型元素

　　javascript实现：

 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实现：

 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实现：

 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没有内置的类选择方法，可以编写扩展方法
 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实现：

 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实现：

 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实现：

 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>