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>