jQuery（三）常规选择器

第三章、常规选择器

  jQuery最核心的组成部分就是：选择器引擎。它继承了css的语法，可以对DOM元素的标签名、属性名、状态等进行快速准确的选择，并且不必担心浏览器的兼容性。jQuery选择器实现了css1~css3的大部分规则之外，还实现了协议自定义的选择器，用于各种状态的选择。

  一、简单选择器
  在使用jQuery选择器时，我们首先必须使用“$()”函数来包装我们的css规则。而css规则作为参数传递到jQuery对象内部后，在你返回包含页面中对应元素的jQuery对象。随后，我们就可以对这个获取到的DOM节点进行行为操作了。
    #box{color:red}
  在jQuery选择器里，我们使用如下的方式来获取同样的结果：
    $('#box').css('color','red')//获取DOM节点对象，添加行为;
  除了ID选择器之外，还有两种基本的选择器，分别为：元素标签名和类（class）

  

选择器	css模式	jQuery模式	描述
元素名	div{}	$('div')	获取所有元素的DOM对象
ID	#box{}	$('#box'）	获取一个ID为box元素的DOM对象
类(class)	.box{}	$('.box')	获取所有class为box的所有DOM对象

    $('div').css('color','red')；
    $('#box').css('color','red')；
    $(.div).css('color','red');
  为了证明ID返回的是单个元素，而元素标签名和类返回的是多个，我们可以采用jQuery核心自带的一个属性length或size()方法来查看返回元素的个数。
  说明：ID在页面只允许出现一次，我们一般都是要求开发者要遵守和保持这个规则。但如果你在页面中出现三次，并且在css使用 样式，那么这三个袁术还会执行效果。但如果你在jQuery中这么去做，那么就会遇到失明的问题。所以，开发者必须养成良好的习惯，在一个页面只使用一个ID。
   jQuery选择器的写法和css选择器十分类似，只不过他们的功能不同。css找到元素后添加的是单一样式，而jQuery则添加的是动作行为。最重要的一点是：css在添加样式的时候，高级选择器会对部分浏览器不兼容，而jQuery选择器在添加css样式的时候却不必为此烦恼。
   #box>p{        //css子选择器，IE6不支持
           color:red;
   } 
   $('#box>p').css('color','red');//jQuery子选择器，兼容了IE6
   jQuery选择器支持css1、css2的全部规则，同时它还有少量独有的规则。所以，对于已经掌握了的开发人员，学习jQuery选择器几乎是零成本。而jQuery选择器在获取节点对象的时候不但简介，还内置了容错功能，这样避免像javascript那样每次对节点的获取需要进行有效判断。
   $('#pox').css('color','red');//不存在ID 为pox的元素，也不报错
   document.getElementById('pox').style.color='red';//报错了
   因为jQuery内部进行了判断，而原生的DOM节点获取方法并没有进行判断，所以导致了一个错误，原生方法可以这么判断解决这个问题：
    if(document.getElementById('pox')){//先判断是否存在这个对象
            document.getElementById('pox').style.color='red';
    }
   那么对于缺失不存在的元素，我们使用jQuery调用的话，怎么去判断是否存在呢？因为本身返回的是jQUery对象可能导致不存在的元素存在与否，都会返回true。 
   if($('#pox').length>0){//判断元素包含数量即可
          $('#pox').css('color','red');
   }
    除了这种方式之外，还可以转换为DOM对象的方式来判断，例如：
    if($('#pox').get(0)){}或if($('#pox')[0]){}    //通过数组下标也可以获取DOM对象
二、进阶选择器
  在简单选择器中，我们了解的 最基本的三种选择器：元素标签名、ID和类(class)。那么在基础选择器外，还有一些进阶和高级的选择器方便我们更精准的选择元素。

选择器	css模式	jQuery模式	描述
群组选择器	span，em，box{}	$("span,em,box")	获取多个选择器DOM对象
后代选择器	ul  li  a{}	$("ul  li  a")	获取追溯到的多个DOM对象
通配选择器	*{}	$("*")	获取所有元素标签DOM对象

  //群组选择器
  span,em,box{
      color:red;     //多种选择器添加红色字体
  } 
  //后代选择器
  ul  li  a{
      color:red;     //层层追溯到的元素添加红色字体
  }
  //通配选择器
  *{                    //页面所有元素都添加红色字体
    color：red； 
  }
  目前介绍的这6种选择器，在实际应用中，我们可以灵活的搭配，是的选择器更加的精准和快速：
   $('#box p,ul li *').css('color','red');        //组合了多种选择器
  警告：在实际的应用中，通配选择器一般用的并不多，尤其是在大通配上，比如：$('*')，这种使用方法效率比较低，影响性能，建议尽可能少用。
  还有一种选择器，可以在ID和类(class)中指明元素前缀，比如：
    $('div.box';)            //限定必须是.box元素获取必须是div
    $('p#box div.side');//同上
  类(class)有一个特殊的模式，就是同一个DOM节点可以声明多个类(class)。那么对于这种格式，我们有多class选择器可以使用，但要注意和css群组选择器的区别。 
  多class选择器是必须一个DOM节点同时有多个class，用这个class进行精确限定。而群组class选择器，只不过是多个class进行选择而已。
  警告：在构造选择器是，有一个通用的优化原则：只追求必要的确定性。当选择器筛选月复杂，jQuery内部的选择器引擎出力字符串的时间就越长。比如：
    $('div#box  ul  li  a#link');             //让jQuery内处理了不必要的字符串
    $('#link');                                       //ID是唯一性的，准确度不变，性能提升
三、高级选择器

  一般来说通过这六种选择器基本上可以解决所有DOM节点对象选择的问题。但在很多特殊的元素上，比如父子关系的元素，兄弟关系的元素，特殊属性的元素等等。在早期css的使用上，由于IE6等低版本浏览器不支持，所以这些高级选择器的使用不具备普遍性，但随着jQuery兼容，这些选择器的使用频率也越来越高。

                                                 层次选择器

选择器         css模式     jQuery模式         描述
后代选择器     ul li a{}   $('ul li a')      获取追溯到多个DOM对象
子选择器       div>p{}     $('div p')        只获取子类的多个DOM对象
next选择器     div+p{}     $('div+p')        只获取某节点后一个同级DOM对象
nextAll选择器  div~p{}     $('div~p')        获取某节点后面所有同级DOM对象
 

在层次选择器中，除了后代选择器之外，其他的三种高级选择器是不支持IE6的，而jQuery却是兼容IE6的。

     //后代选择器
     $('#box').find('p').css('color','red')             //全兼
     jQuery为后代选择器提供了一个等价find()方法
     $('#box').find('p').css('color','red')             //和后代选择器等价
     //子选择器，孙子后失明
       #box>p{        //IE6不支持
           color:red;
       }
       $('#box>p').css('color','red');  //兼容IE6 
       //next选择器（下一个同级节点）
       #box+p{
           color:red;
       }
       $('#box+p').css('color','red');//兼容IE6
    jQuery为next选择器提供了一个等价的方法next():
       $('#box').next('p').css('color','red');     //和next选择器等价
    //nextAll选择器（后面所有同级节点）
      #box~p{//IE6不支持
           color:red;
      }
      $('#box~p').css('color','red');//兼容IE6
    jQuery为nextAll选择器提供了一个等价的方法nextAll()方法：
    $('#box').nextAll('p').css('color','red');     //和nextAll选择器等价
  层次选择器对节点的层次都是由要求的。比如子选择器，只有子节点才可以被选择到，孙子节点和重孙子节点都无法选择到。next和nextAll选择器，必须是同一个层次的后一个和后N个，不再同一个层次就无法选取了。
  理论上来讲，jQuery提供的方法find()、next()、nextAll()和children()运行速度要快于使用高级选择器。因为他们实现的算法有所不同，高级选择器是通过“Sizzle引擎”解析字符串来获取节点对象，而jQuery提供的方法则是通过querySelectAll()操作直接得到的。但这种快慢的差异，对于客户端脚本来说是没有太大的实用性，而且速度的差异还要取决于浏览器和选择的元素内容。
  在find()、next()、nextAll()和children()这四个方法中，如果不传递参数，就相当于传递了“*”，即任何节点，我们不建议这么做，不但影响性能，而且由于精准度不佳可能在负责的HTML结构时产生怪异的结果。
    $('#box').next();
  为了补充高级选择器的这三种模式，jQuery还提供更加丰富的方法来选择元素：
     $('#box').prev('p').css('color','red')//同级上一个元素
     $('#box')。prevAll('p').css('color','red');//同级所有上面的元素
   nextUntil()和prevUntil()方法时选定同级的下面或上面的所有节点，选定非指定的所有元素，一旦遇到指定的元素就听停止选定。
     $('#box').prevUtil('p').css('color','red');//同级上非指定元素选定，遇到则停止
     $('#box').nextUtil('p').css('color','red');//同级下非指定元素选定，遇到则停止
  siblings()方法正好集成了prevAll()和nextAll()两个功能的效果，及上下相邻的所有元素进行选定：
     $('#box').siblings('p').css('color','red');//同级上下所有元素选定
                                         属性选择器
 css模式             jQuery模式             描述
a[title]                 $('a[title]')               获取具有这个属性的DOM对象
a[title^=num1]    $('a[title^=num1]')   获取具有这个属性=这个属性的DOM对象
a[title^=num]      $('a[title^=num]')     获取具有这个属性且开头属性值匹配的DOM对象
a[title|=num]      $('a[tite|=num]')     获取具有这个属性且等于属性值或开头属性值匹配后面跟一个“_”号的DOM对象
a[title$=num]     $('a[title$=num]')    获取具有这个属性且结尾属性值匹配的DOM对象
a[title!=num]      $('a[title!=num]')    获取具有这个属性且结尾属性值匹配的DOM对象
a[title~=num]     $('a[title~=num]')  获取具有这个属性且属性值时一个以空格分割的列表，其中包含属性值的DOM对象
a[title*=num]     $(['title*=num]')        获取具有这个属性且属性值含有一个指定字串的DOM对象
a[bbb][title=num1]   $('a[bbb][title]=num1]')    获取具有这个属性且属性值匹配的DOM对象
  属性选择器也不支持IE6，所以在css界如果要兼容低版本，那么也是非主流。但是jQuery却不必要考虑这个问题。
  //选定这个属性
  a[title]{           //IE6不支持
      color:red;
  }
  $('a[title]').css('color','red')//兼容了IE6
  //选定具有这个属性=这个属性值的
  a[title=num1]{//IE6不支持
      color:red; 
  }
  $('a[title=num1]').css('color','red');//兼容了IE6
 //选定具有在属性且开头属性值匹配的
  a[title^=num]{//不支持IE6
      color:red;
  }
  $('a[title=^num]').css('color','red')//兼容了IE6