1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>使用jQuery</title>
6 <script type="text/javascript" src="jquery-1.10.1.js"></script>
7 </head>
8 <body>
9 <div>空白div</div>
10 <p>aaa</p>
11 <p>bbb</p>
12 <p>ccc</p>
13 <p>ddd</p>
14 <div id="box"class="box">测试div
15 <p>aaa</p>
16 <p>bbb</p>
17 <p>ccc</p>
18 <p>ddd</p>
19 </div>
20 <p>aaa</p>
21 <p>bbb</p>
22 <p>ccc</p>
23 <p>ddd</p>
24 <div id="box"class="box">测试div
25 <p>aaa</p>
26 <p>bbb</p>
27 <p>ccc</p>
28 <p>ddd</p>
29 </div>
30 <div id="box"class="box">测试div</div>
31 <p>aaa</p>
32 <p>bbb</p>
33 <p>ccc</p>
34 <p>ddd</p>
35 <script type="text/javascript">
36 /*$('#box').click(function(){
37 alert("ok!");
38 }).css('color' , 'red').css('margin', '100px');*/
39
40 // alert($);
41 // alert($());
42 // alert($('#box'));
43
44 // alert(document.getElementById('box'));
45 //alert($('#box').get(0));
46 //alert($(document.getElementById('box')));
47 // $('#box').css('color', 'red');
48 // $('div').css('color', 'red');
49 // alert($('div').size());
50 //alert($('#box').size());
51 //alert($('.box').size());
52 // alert($('.box').length);
53 // alert($('#box').length);
54 // $('#box > p').css('color', 'blue');
55 // $('*').css('color', 'red');
56 // $('#box').find('p').css('color', 'red');
57 // $('.box').children('p').css('color', 'red');
58 // $('.box').find('p').css('color', 'red');
59 // $('#box+p').css('color', 'red');
60 // $('#box').next('p').css('color', 'red');
61 // $('#box~p').css('color', 'red');
62 // $('#box').nextAll('p').css('color', 'red');
63 /*next 和nextAll 选择器，必须是同一个层次的后一个
64 和后N 个，不在同一个层次就无法选取到了。*/
65 /*在find()、next()、nextAll()和children()这四个方法中，如果不传递参数，就相当于传递
66 了“*”，即任何节点，我们不建议这么做，不但影响性能，而且由于精准度不佳可能在复杂的HTML 结构时产生怪异的结果。*/
67 // $('#box').next().css('color', 'red');
68 // $('#box').prev('p').css('color', 'red');
69 // $('#box').prevAll('p').css('color', 'red');
70 //$('#box').prevUntil('p').css('color', 'red');
71 // $('#box').nextUntil('p').css('color', 'red');
72 // $('#box').siblings('p').css('color', 'red');
73 /*警告：切不可写成“$('#box').prevAll('p').nextAll('p').css('color', 'red');”这种形式，因为
74 prevAll('p')返回的是已经上方所有指定元素，然后再nextAll('p')选定下方所有指定元素，这
75 样必然出现错误。*/
76 /*选择器快慢分析：
77 //这条最快，会使用原生的getElementById、ByName、ByTagName 和querySelectorAll()
78 $('#box').find('p');
79 //jQuery 会自动把这条语句转成$('#box').find('p')，这会导致一定的性能损失。它比最快
80 的形式慢了5%-10%
81 $('p', '#box');
82 //这条语句在jQuery 内部，会使用$.sibling()和javascript 的nextSibling()方法，一个个遍
83 历节点。它比最快的形式大约慢50%
84 $('#box').children('p');
85 //jQuery 内部使用Sizzle 引擎，处理各种选择器。Sizzle 引擎的选择顺序是从右到左，
86 所以这条语句是先选p，然后再一个个过滤出父元素#box，这导致它比最快的形式大约慢
87 70%
88 $('#box > p');
89 //这条语句与上一条是同样的情况。但是，上一条只选择直接的子元素，这一条可以于
90 选择多级子元素，所以它的速度更慢，大概比最快的形式慢了77%。
91 $('#box p');
92 ////jQuery 内部会将这条语句转成$('#box').find('p')，比最快的形式慢了23%。
93 $('p', $('#parent'));
94 综上所属，最快的是find()方法，最慢的是$('#box p')这种高级选择器。如果一开始将
95 $('#box')进行赋值，那么jQuery 就对其变量进行缓存，那么速度会进一步提高。
96 var box = $('#box');
97 var p = box.find('p');
98 注意：我们应该推荐使用哪种方案呢？其实，使用哪种都差不多。这里，我们推荐使用
99 jQuery 提供的方法。因为不但方法的速度比高级选择器运行的更快，并且它的灵活性和扩展
100 性要高于高级选择器。使用“+”或“~”从字面上没有next 和nextAll 更加语义化，更加清
101 晰，jQuery 的方法更加丰富，提供了相对的prev 和prevAll。毕竟jQuery 是编程语言，需要能够灵活的拆分和组合选择器，而使用CSS 模式过于死板。所以，如果jQuery 提供了独立
102 的方法来代替某些选择器的功能，我们还是推荐优先使用独立的方法。
103 */
104
105 </script>
106 </body>
107 </html>
