jQuery选择器使用

jQuery是一个由john resig写js的类库。它就是把一些js的函数封装起来的框架，简化了js的使用，用最少的代码做更多的活。js还把前端最头痛的很多浏览器兼容问题解决了。jQuery的导入有两种方式：第一种就是用src导入，第二种就是用<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>导入。（线上的cdn方式：就是尽可能避开影响数据传输的稳定速率的瓶颈和环节，解决网络拥挤提高网络访问速度）jQuery的版本1.X是兼顾了IE678等低版本，2.X就放弃了IE678的用户。

  jQuery的优势：

1：采用css查找元素的机制

2：支持扩展，把一些不常用的工具当做插件。

3：简化了兼容的问题。

4：jQuery使用连缀的编程模式，（就是一个对象进行的大多数操作结果都会返回对象本身，为了进行下一次的操作）。

jQuery的选择器的使用

1：简单选择器的使用

 
 
选择器 
css模式
jq模式
描述
p
                                  
p{}                                        
$('p')                                       
标签                                 
Id
#id
$('id')
获取id元素
class
.class
$('class')
获取class元素

进阶选择器：

  
  
选择器 
css模式
jq模式
描述
群组选择器                                 
p,h{}
                                        
$('p,h')                                       
                                 
后代选择器
div p{}
$('div p')
 
通配
*{}
$('class')
 
层次选择器：

 
 

     
     

      
      选择器
     
     

     
     

      
      css模式
     
     

     
     

      
      jQuery模式
     
     

     
     

      
      描述
     
     

     
     

      
      后代选择器
     
     

     
     

      
      ul li a{}
     
     

     
     

      
      $('ul li a')
     
     

     
     

      
      获取追溯到的所有元素
     
     

     
     

      
      子选择器
     
     

     
     

      
      div>p{}
     
     

     
     

      
      $('div>p')
     
     

     
     

      
      只获取子类节点
     
     

     
     

      
      next选择器
     
     

     
     

      
      div+p{}
     
     

     
     

      
      $('div+p')
     
     

     
     

      
      只获取某节点后一个同级DOM元素
     
     

     
     

      
      nextAll选择器
     
     

     
     

      
      div~p{}
     
     

     
     

      
      $('div~p')
     
     

     
     

      
      获取某节点后所有同级DOM元素
     
     

属性选择器

 
 

     
     

      
      CSS模式
     
     

     
     

      
      jQuery模式
     
     

     
     

      
      描述
     
     

     
     

      
      input[name]
     
     

     
     

      
      $('input[name]')
     
     

     
     

      
      获取具有这个属性的DOM元素
     
     

     
     

      
      input[name=XXX]
     
     

     
     

      
      $('input[name=XXX]')
     
     

     
     

      
      获取具有属性且属性值为XXX的DOM元素
     
     

     
     

      
      input[value][name=XXX]
     
     

     
     

      
      $('input[button][name=XXX]')
     
     

     
     

      
      获取有
      
      value 
      
      属性且name为XXX的DOM元素
     
     

伪类选择器

 
 

     
     

      
      过滤器名
     
     

     
     

      
      jQuery语法
     
     

     
     

      
      说明
     
     

     
     

      
      返回
     
     

     
     

      
      :first
     
     

     
     

      
      $('li:first')
     
     

     
     

      
      选取第一个元素
     
     

     
     

      
      单个元素
     
     

     
     

      
      :last
     
     

     
     

      
      $('li:last')
     
     

     
     

      
      选取最后一个元素
     
     

     
     

      
      单个元素
     
     

     
     

      
      ：not()
     
     

     
     

      
      $('li:not(.red)')
     
     

     
     

      
      选取class不是red的元素
     
     

     
     

      
      一组元素
     
     

     
     

      
      :even
     
     

     
     

      
      $('li:even')
     
     

     
     

      
      选择偶数的所有元素
     
     

     
     

      
      一组元素
     
     

     
     

      
      :odd
     
     

     
     

      
      $('li:odd')
     
     

     
     

      
      选择所有奇数元素
     
     

     
     

      
      一组元素
     
     

     
     

      
      ：eq
     
     

     
     

      
      $('li:eq（1）')
     
     

     
     

      
      选择对应下表的元素
     
     

     
     

      
      单个元素
     
     

内容过滤器

 
 

  
  

 
 
 
 

     
     

      
      过滤器名
     
     

     
     

      
       
      
      jQuery语法
     
     

     
     

      
      说明
     
     

     
     

      
      返回
     
     

     
     

      
      :contains(text)
     
     

     
     

      
      $('li:contains(123456)')
     
     

     
     

      
      选择有123456文本的元素
     
     

     
     

      
      一组元素
     
     

     
     

      
      :empty
     
     

     
     

      
      $(li':empty')
     
     

     
     

      
      选取li中不包含子元素或空文本的元素
     
     

     
     

      
      一组元素
     
     

     
     

      
      ：has（选择器）
     
     

     
     

      
      $('ul:has(.red)')
     
     

     
     

      
      选择子元素含有类red的ul
     
     

     
     

      
      一组元素
     
     

可见性选择器

 
 

  
  

 
 
 
 

     
     

      
      过滤器名
     
     

     
     

      
      jQuery语法
     
     

     
     

      
      说明
     
     

     
     

      
      返回
     
     

     
     

      
      :hidden
     
     

     
     

      
      $(li:hidden)
     
     

     
     

      
      选取所有不可见元素
     
     

     
     

      
      集合元素
     
     

     
     

      
      :visible
     
     

     
     

      
      $('li:visible')
     
     

     
     

      
      选取所有可见元素
     
     

     
     

      
      集合元素
     
     

 
 

  
  

 
 
 
 

     
     

      
      方法名
     
     

     
     

      
      jQuery语法
     
     

     
     

      
      说明
     
     

     
     

      
      返回
     
     

     
     

      
      is()
     
     

     
     

      
      li.is('.red')
     
     

     
     

      
      传递选择器、DOM、jquery对象
     
     

     
     

      
      true||false
     
     

     
     

      
      hasClass()
     
     

     
     

      
      $('li').hasClass('red')
     
     

     
     

      
      就是is('.'+class)
     
     

     
     

      
      true||false