jquery 如何选择 before jquery选择器方法

要用好jQuery首先要用好选择器，连元素都获取不了的话，就谈不上什么特效什么插件了，而且jQuery的选择器用法简单全部学会也不会花你多少时间的，不过有一点还是需要注意的：

通过jQuery的选择器获得的是jQuery对象集合，不能直接使用dom对象的方法，如果要使用dom的方法要取出其中意向，比如：$('#msg')[0].innerHTML或$('#msg')[0].value。jQuery对象有自己的方法比直接调用dom方法更方便。

1、基本选择器

1、$('#msg')  ：选中id为msg的元素
2、$('div')        ：所有div
3、$('*')           ：所有对象
4、$('p,div,a') ：p或div或a标签都被选出来

2、层次选择

1、$('p div ul li')：p标签下的div标签下的ul标签下的li......
2、$('p>div')：所有父节点为p的div
3、$('p+div')：所有与p节点同层并且紧邻其后的div，比如 <p></p><div id="1"></div>< id="2"div></div>，用了$('p+div')之后会取到id为2的div
4、$('p~div')：所有与p节点同层并且尾随其后的所有div，还是上面那个例子，这次使用了$('p~div')会得到id为1和2的两个div的集合
需要注意的一点是：

> + ~ 这三个层次运算符是可以连着用的。举个例子：

< 
  ul 
  > 
  
     
  < 
  li 
  > 
  
         
  < 
  span  
  class 
  ="text" 
  ></ 
  span 
  > 
  
         
  < 
  ul 
  > 
  
               
  < 
  li> 
  
                     
  < 
  ul 
  > 
  
                            
  < 
  li 
  > 
  aaa 
  </ 
  li 
  > 
  
                     
  </ 
  ul 
  >  </li>   
           </ 
  ul 
  > 
  
           < 
  ul 
  > 
  
               < 
  li 
  > 
  
                   < 
  ul 
  > 
  
                       < 
  li 
  > 
  bbb 
  </ 
  li 
  > 
  
                   </ 
  ul 
  > 
  
               </ 
  li 
  > 
  
           </ 
  ul 
  > 
  
       </ 
  li 
  > 
  
   </ 
  ul 
  > 
  
   < 
  script 
  > 
  ... 
  
alert($('.text+ul~ul>li>ul>li')[0].innerHTML);
   </ 
  script 
  > 
会打印出来的内容是：bbb

3、基本滤镜

基本滤镜的使用我举个例子，接下来的就套这个例子就好理解了

比如：

<   ul   > 
  
         <   li 
  > 
  aaa 
  </ 
  li 
  > 
  
   </   ul 
  > 
  
   <   script 
  > 
  ... 
  
$('ul:first')   //会获得<li>aaa</li>对象
   </   script 
  > 
 
:first
返回: <jQuery对象>
匹配第一个元素
:last
返回: <jQuery对象>
匹配最后一个元素
:not(selector)
返回: <jQuery对象> 数组
匹配不满足selector的元素
:has(selector)
返回: <jQuery对象> 数组
匹配包含满足selector的元素。此选择器为1.2新增
:even
返回: <jQuery对象> 数组
从匹配的元素集中取序数为偶数的元素。
:odd
返回: <jQuery对象> 数组
从匹配的元素集中取序数为奇数的元素。
:eq(index)
返回: <jQuery对象> 数组
从匹配的元素集中取第index个元素
:gt(index)
返回: <jQuery对象> 数组
从匹配的元素中取序数大于index的元素
:lt(index)
返回: <jQuery对象> 数组
从匹配的元素中取序数小于index的元素
:header
返回: <jQuery对象> 数组
匹配所有的标题元素，例如h1，h2，h3……hN。此选择器为1.2新增
:animated
返回: <jQuery对象> 数组
匹配正在执行动画的元素。此选择器为1.2新增
:empty
返回: <jQuery对象> 数组
匹配所有没有子元素（包括文本内容）的元素
:parent
返回: <jQuery对象> 数组
匹配包含子元素（包含文本内容）的所有元素
:contains(text)
返回: <jQuery对象> 数组
匹配所有含有text的元素
:hidden
返回: <jQuery对象> 数组
匹配所有隐藏的元素，包含属性type值为hidden的元素
:visible
返回: <jQuery对象> 数组
匹配所有非隐藏的元素

:first	返回: <jQuery对象>
匹配第一个元素
:last	返回: <jQuery对象>
匹配最后一个元素
:not(selector)	返回: <jQuery对象> 数组
匹配不满足selector的元素
:has(selector)	返回: <jQuery对象> 数组
匹配包含满足selector的元素。此选择器为1.2新增
:even	返回: <jQuery对象> 数组
从匹配的元素集中取序数为偶数的元素。
:odd	返回: <jQuery对象> 数组
从匹配的元素集中取序数为奇数的元素。
:eq(index)	返回: <jQuery对象> 数组
从匹配的元素集中取第index个元素
:gt(index)	返回: <jQuery对象> 数组
从匹配的元素中取序数大于index的元素
:lt(index)	返回: <jQuery对象> 数组
从匹配的元素中取序数小于index的元素
:header	返回: <jQuery对象> 数组
匹配所有的标题元素，例如h1，h2，h3……hN。此选择器为1.2新增
:animated	返回: <jQuery对象> 数组
匹配正在执行动画的元素。此选择器为1.2新增
:empty	返回: <jQuery对象> 数组
匹配所有没有子元素（包括文本内容）的元素
:parent	返回: <jQuery对象> 数组
匹配包含子元素（包含文本内容）的所有元素
:contains(text)	返回: <jQuery对象> 数组
匹配所有含有text的元素
:hidden	返回: <jQuery对象> 数组
匹配所有隐藏的元素，包含属性type值为hidden的元素
:visible	返回: <jQuery对象> 数组
匹配所有非隐藏的元素

4、子元素滤镜

E:nth-child(index/even/odd/equation)	返回: <jQuery对象> 数组
匹配所有E在其父元素下满足（index/even/odd/equation）条件的集合。注：下标从1开始
E:first-child	返回: <jQuery对象> 数组
匹配所有E在其父元素下是第一个子元素的集合。例如：HTML（<div><p id="p1"></p></div><div><p id="p2"></p><p id="p3"></p></div>"），使用$("p:first-child")，选取：<p id="p1"></p><p id="p2"></p>
E:last-child	返回: <jQuery对象> 数组
匹配所有E在其父元素下是最后一个子元素的集合。例如：同上的HTML，使用$("p:last-child")，选取：<p id="p1"></p><p id="p3"></p>
E:only-child	返回: <jQuery对象> 数组
匹配所有E是其父元素的唯一子元素的集合。例如：同上的HTML，使用$("p:only-child")，选取：<p id="p1"></p>

5、表单滤镜

:input	返回: <jQuery对象> 数组
匹配所有的input、textarea、select、button
:text	返回: <jQuery对象> 数组
匹配文本域。注：在IE浏览器下，选择的对象是所有type属性为text的元素，在非IE浏览器下，选择的对象是input元素type属性为text的元素
:password	返回: <jQuery对象> 数组
匹配密码域。注：在IE浏览器下，选择的对象是所有type属性为password的元素，在非IE浏览器下，选择的对象是input元素type属性为password的元素
:radio	返回: <jQuery对象> 数组
匹配单选按钮。注：在IE浏览器下，选择的对象是所有type属性为radio的元素，在非IE浏览器下，选择的对象是input元素type属性为radio的元素
:checkbox	返回: <jQuery对象> 数组
匹配复选框。注：在IE浏览器下，选择的对象是所有type属性为checkbox的元素，在非IE浏览器下，选择的对象是input元素type属性为checkbox的元素
:submit	返回: <jQuery对象> 数组
匹配提交按钮。注：在IE浏览器下，选择的对象是所有type属性为submit的元素，在非IE浏览器下，选择的对象是input元素type属性为submit的元素和button元素type属性为空或为submit的元素
:image	返回: <jQuery对象> 数组
匹配图像域。注：在IE浏览器下，选择的对象是所有type属性为image的元素，在非IE浏览器下，选择的对象是input元素type属性为image的元素
:reset	返回: <jQuery对象> 数组
匹配重置按钮。注：在IE浏览器下，选择的对象是所有type属性为reset的元素，在非IE浏览器下，选择的对象是input或button元素type属性为reset的元素
:button	返回: <jQuery对象> 数组
匹配按钮。注：在IE浏览器下，选择的对象是所有type属性为button的元素和元素名为button的元素，在非IE浏览器下，选择的对象是input元素type属性为button的元素和元素名为button的元素
:file	返回: <jQuery对象> 数组
匹配文件域。注：在IE浏览器下，选择的对象是所有type属性为file的元素，在非IE浏览器下，选择的对象是input元素type属性为file的元素
:enabled	返回: <jQuery对象> 数组
匹配所有可用的元素。注：即:not(:disabled)，参考:disabled的注释
:disabled	返回: <jQuery对象> 数组
匹配所有禁用的元素。注：在非IE浏览器下，选择的对象是禁用的表单元素
:checked	返回: <jQuery对象> 数组
匹配所有被选中的表单。注：在IE浏览器下，选择的对象是含有checked属性的所有元素
:selected	返回: <jQuery对象> 数组
匹配所有选择的表单。注：在IE浏览器下，选择的对象是含有selected属性的所有元素

5、属性滤镜

[attribute]	返回: <jQuery对象> 数组
匹配拥有attribute属性的元素
[attribute=value]	返回: <jQuery对象> 数组
匹配属性attribute为value的元素
[attribute!=value]	返回: <jQuery对象> 数组
匹配属性attribute不为value的元素
[attribute^=value]	返回: <jQuery对象> 数组
匹配属性attribute的值以value开始的元素
[attribute$=value]	返回: <jQuery对象> 数组
匹配属性attribute的值以value结尾的元素
[attribute*=value]	返回: <jQuery对象> 数组
匹配属性attribute的值包含value的元素
[selector1][selector2][selectorN]	返回: <jQuery对象> 数组
匹配满足属性选择器selector1、selector2、selectorN的元素

属性滤镜我举个例子：

<   div    id   ='1'  
  rel 
  ='mydiv' 
  ></ 
  div 
  > 
  
   <   div    id 
  ='2'  
  rel 
  ='mydiv' 
  ></ 
  div 
  > 
  
   <   div    id 
  ='3'  
  rel 
  ='mydiv' 
  ></ 
  div 
  > 
  
   <   div    id 
  ='4'  
  rel 
  ='mydiv' 
  ></ 
  div 
  > 
  
   <   div    id 
  ='5'  
  rel 
  ='mydiv' 
  ></ 
  div 
  > 
  
   <   script   > 
  ... 
  
  $('div[@rel*=mydiv]')      //获得所有rel属性为mydiv的div
   </   script   >