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>
