随笔 - 11  文章 - 2  评论 - 1

jquery选择器的使用 

  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>

 

posted @ 2015-12-26 10:57  Double405  阅读(223)  评论(0)    收藏  举报