jquery学习（3）--高级选择器

自己手写的学习笔记。常规选择器：

/****************学习--高级选择器（1）****************/
---高级选择器：ie7+

层次选择器：

后代选择器     ul li a    $('ul li a')    获取追溯到的多个dom对象            ie6+=
子选择器     div>p        $('div p')    只获取子类节点的多个dom对象            ie7+
next选择器     div+p{}    $('div+p')    只获取某节点后的同一个同级对象        ie7+
nextAll选择器     div~p{}    $('div~p')    获取某节点后面的所有同级的dom对象    ie7+

    在层次选择其中，除了后代选择器外。其他的三种高级选择器不支持ie6的,jquery却是兼容ie6的、

//1.后代选择器--》全兼容
$('#box p').css('color','#666');

    //jquery为后代选择器提供了一个等价的find()方法
    $('#box').find('p').css('color','#666');


//2.子选择器,孙子级失效。只支持一层子级（儿子级）。
#box>p{ color:red;}//css代码，不支持ie6
$('#box>p').css('color','orange');//jquery兼容ie6

    //jquery为子选择器提供了一个等价children()方法。
    $('#box').children('p').css('color','orange');//和子选择器等价

//3.next选择器（下一个同级节点）

#box+p{ color:red;}//css代码，不支持ie6

$('#box+p').css('color','#bbb');

    //jquery为next选择器（下一个同级节点），提供了一个等价next()方法。
    $('#box').next('p').css('color','#bbb');

//4.nextAll选择器（后面的所有同级节点）
#box~p{ color:red;}//css代码，不支持ie6
$('#box~p').css('color','red');//jquery兼容ie6

    //jquery为nextAll选择器（后面的所有同级节点）,提供了一个等价nextAll()方法。
    $('#box').nextAll('p').css('color','orange');//和子选择器等价

    注意：层次选择器对节点的层次都是有要求的，比如子节点才能被选择到，孙子节点和重孙子节点都无法选择到。
    next和nextAll选择器，必须是同一个层次的后一个和后N个，不在同一个层次就无法选取到了。


    &&&&&：理论上，jquery提供的find()、children()、next()、 nextAll()运行速度要快于高级选择器。因为他们实现的算法不同，高级选择器是通过“sizzle引擎”解析字符串来获取节点对象。jquery提 供的方法则是通过querySelectorAll()操作直接得到的（ie6/7不支持）。这种快慢差异，对于客户端脚本来说没有太大的实用性，并且速 度差异还要取决于浏览器和选择的元素内容。

    在find()、children()、next()、nextAll()这四个方法中，如果不传参数，就相当于传递的是'*'，即任何节点，不推荐这 样，这样做不但是会影响性能，而且由于精准度不佳，在复杂的html结构中可能会产生怪异的结果(不是我们想要的效果).

    //若'*'在某个环境里有所浪费，那么建议是尽量不要用、
        $('#box').next();相当于$('#box').next('*');



    为了补充高级选择器的这三种模式，jquery提供了丰富的方法来选择元素。
        $('#box').prev('p').css('color','orange');//同级上一个元素
        $('#box').prevAll('p').css('color','orange');//同级所有上面的元素

nextUntil()和prevUnitl()方法是选定同级下面或上面的所有节点，选定非指定的所有元素，一旦遇到制定元素就停止选定。
    $('#box').nextUntil('p').css('color','orange');//同级上非指定元素选定，遇到则停止
    $('#box').prevUnitl('p').css('color','orange');//同级下非指定元素选定，遇到则停止

siblings()方法正好集成了prevAll()和nextAll()两个功能的效果，及上线相邻的所有元素进行选定。
    $('#box').siblings('p').css('color','orange');//同级下下所有元素选定。
    //等价于:
    $('box').prevAll('p').css('color','orange');//同级上所有元素选定
    $('box').nextAll('p').css('color','orange');//同级下所有元素选定



/****************学习--高级选择器（2）****************/

    理论上，jquery提供的find()、children()、next()、nextAll()运行速度要快于高级选择器。因为他们实现的算法不 同，高级选择器是通过“sizzle引擎”解析字符串来获取节点对象。jquery提供的方法则是通过querySelectorAll()操作直接得到 的（ie6/7不支持）。这种快慢差异，对于客户端脚本来说没有太大的实用性，并且速度差异还要取决于浏览器和选择的元素内容。

    在find()、children()、next()、nextAll()这四个方法中，如果不传参数，就相当于传递的是'*'，即任何节点，不推荐这 样，这样做不但是会影响性能，而且由于精准度不佳，在复杂的html结构中可能会产生怪异的结果(不是我们想要的效果).

    //若'*'在某个环境里有所浪费，那么建议是尽量不要用、
        $('#box').next();相当于$('#box').next('*');

选择器快慢的分析：
原生的getElementById、ByName、ByTagName和jquerySelectorAll()
//这条最快，会使用
$('#box').find('p').css('color','red');

//jquery会自动把下面这条语句转化成$('#box').find('p')這会导致性能损失，它比最快的形式慢了5%-10%。
$('p','#box').css('color','red');

//jquery内部会使用这条语句转成$('#box').find('p'),比最快慢了23%
$('p',$('#parent'));
$('p',$('box')).css('color','red');

//下面这条语句在jquery内部，会使用$.sibling()和javascript的nextSibling()方法，一个个遍历节点。它的形式比最快的大约慢了50%。
$('#box').children('p').css('color','red');

//下面这条语句在jquery内部使用sizzle引擎，处理各种选择器。sizzle引擎的选择顺序是从右到左，所以这条语句是先选P，然后再一个个的过滤出父元素#box，这导致比最快的大约慢70%。
$('#box>p').css('color','red');

//下面的这条语句和上面的是相同的情况，但是，上面的语句$('#box>p');只选择直接的子元素，而下面的這一条语句可以选择多级子元素，所以它的速度更慢，大概比最快的形式慢了77%。
$('#box p').css('color','red');


综上总结：最快的是find()方法，最慢的$('#box p')这中高级选择器。如果一开始将$('#box')进行赋值，那么jquery就对其变量进行缓存，那么速度会进一步提高。
var box = $('#box');
var p = box.find('p);

注 意：推荐使用的哪种呢？其实，都差不多。推荐使用的是jquery提供的方法。因为不但方法速度比高级选择器更快，并且它的灵活性和扩展性要高于高级选择 器。使用'+'或'~'从字面上没有next和nextAll更加语义化，更加清晰，jquery的方法更加丰富，提供了相对的prev和 prevAll。毕竟jquery是编程语言，需要能够灵活的拆分和组合选择器，而css则过于死板。所以，如果jquery提供了独立的方法来代替某些 选择器
功能，我们还是优先推荐使用独立的方法。


/************属性选择器****************/
 css模式            jquery模式                描述
a[title]         $('a[title]')            获取具有这个属性的DOM对象
a[title=num1]     $('a[title=num1]')        获取具有这个属性=这个属性值的DOM对象
a[title^=num]     $('a[title^=numl]')    获取具有这个属性且开头属性值匹配的DOM对象    
a[title|=num]     $('a[title|=numl]')    获取具有这个属性且等于属性值或者开头属性值匹配后面跟一个'-'号的DOM对象    
a[title$=num]     $('a[title$=numl]')    获取具有这个属性且结尾属性值匹配的DOM对象    
a[title!=num]     $('a[title!=numl]')    获取具有这个属性且不等于属性值的DOM对象    
a[title~=num]     $('a[title~=numl]')    获取具有这个属性且属性值是一个空格符分割的列表，其中包含属性值的DOM对象    
a[title*=num]     $('a[title*=numl]')    获取具有这个属性且属性值是一个指定字符串的DOM对象    
a[b][title=num1] $('a[b][title=num1]')获取具有这个属性且属性值匹配的DOM对象    


属性选择器也不支持ie6，所以在css界如果要兼容低版本，那么也是非主流。但是jquery却不必考虑这个问题，jquery兼容了ie6.
a[title]{color:red;}        //不支持ie6        
$('a[title]').css('color','red');    //兼容ie6

....

<a bbb='aaa' title="num1">num</a><!--html的写法-->
a[bbb][title=num1]{color:red;}        //不支持ie6    
$('a[bbb][title=num1]').css('color','red');//兼容ie6

posted @