jQuery 选择器的特点

• jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合，因此 jQuery 选择器允许对 HTML 的单个或多个元素进行操作。
• jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素，并且所有选择器都以美元符号开头：$()。
• jQuery 中除了基于已经存在的 CSS 选择器，它还有一些自定义的选择器。

---

jQuery 基本选择器

选择器	描述
$("*")	选择全部
$(this)	选择当前
$("#id")	ID选择器
$("div")	元素选择器，基于元素名选取元素
$(".classname") $("p.classname")	类选择器，通过指定的 class 查找元素
$(".classname,.classname1,#id1")	组合选择器

$("p").hide()：选择标签为<p>的元素，并隐藏。

$("*").hide()：隐藏 HTML 页面所有元素。

$(this).hide()：隐藏当前的元素。

                    
这是一个段落。
    
这是另外一个段落。
    btn  
    

$(".head_firstpage").animate({height:"100px"}) 一个简易的下拉列表

            
                                            
    
            
                 
     
      首页：渐变打开，渐变关闭                
      
门户
                
      
论坛
                
      
内网
            
     
            
     
      特色商品：瞬间打开，瞬间关闭                
      
论坛活动
                
      
节日礼物
                
      
积分兑换
            
     
            
     
      最新上架：瞬间打开，渐变关闭                
      
总部出品
                
      
联合出品
            
     
        
    
        

$("p.intro").hide()：隐藏class为 intro 的 <p> 元素。

    
这是一个标题
    
这是一个段落
 
        
这是另一个段落
    点我

$("#stop").click(function(){div.clearQueue();});动画的手动播放与暂停

        
                              
queue() 方法允许你创建一个队列功能区执行被选中的元素。 
    
dequeue() 方法顺序执行它们。 
    
开始动画停止动画
    
    
    
    
    
    
    

jQuery 过滤选择器

下标索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。

选择器	描述
$("li:first")	第一个li
$("li:last") `	最后一个li
$("li:even")	挑选下标为偶数的li
$("li:odd")	挑选下标为奇数的li
$("li:eq(4)")	下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")	下标大于 2 的li
$("li:lt(2)")	下标小于 2 的li
$("li:not(#runoob)")	挑选除 id="runoob" 以外的所有li
$("li:has(.runoob)")	挑选包含 class="runoob" 所有li
$("p:first-child")	在body内的元素中查找，选择子元素顺序是第一个的，且元素类型是 <p>的 元素
$("p:first-of-type")	某个父元素的，指定是 <p> 元素列的第一个 <p> 元素
$("div:contains('sex')")	包含 sex 文本的 <div> 元素
$("td:empty")	不包含子元素或者内容为空的 <td> 元素
$("td:parent")	选取所有带有子元素或包含文本的 <td> 元素
可见性
$("input:hidden")	选中被隐藏的<input>元素，或type为hidden的input元素
$("input:visible")	选中可见的<input>元素
状态过滤
$("input:enabled")	匹配可用的 input
$("input:disabled")	匹配不可用的 input
$("input:checked")	匹配选中的 input
$("option:selected")	匹配选中的 option
属性过滤
$("div[id]")	所有含有 id 属性的 div 元素
$("div[id='num']")	选择 id 属性为 num 的 div 元素
$("div[id!='num']")	选择 id 属性不是 num 的 div 元素
$("div[id^='head']")	选择 id 属性以 head 开头的 div 元素
$("div[id$='ctx']")	选择 id 以 ctx 结尾的 div 元素
$("div[id*='apt']")	选择 id 值包含 apt 的 div 元素
$("input[id][name$='man']")	含有 id 属性且 name 值以 man结尾的元素

$("p:first-child") 选取属于某个的父元素中的第一个子元素，且具体元素是 <p> 标签的元素

                            
            
The first paragraph in body.
         
    
          
                 
     
The first paragraph in div.
           
                 
     
The last paragraph in div.
         
    
        
    
            
     This is a span element.          
                 
     
The first paragraph in another div.
           
                 
     
The last paragraph in another div.
         
    
        
            
The last paragraph in body.
     

$("p:first-of-type") 某个父元素的，指定是 <p> 元素列的第一个 <p> 元素

$("p:first").hide()：隐藏第一个 <p> 元素。

$("td:parent") 选取所有带有子元素或包含文本的 <td> 元素

        
                         
    
           
      
        
序号
             
站点名
               
网址
             
            
        
1
              
Google
            
                   
            
        
2
              
Runoob
            
runoob.com
            
            
        
3
              
Taobao
            
taobao.com
            
            
        
4
              
                  
baidu.com
            
            
        
5
              
Sina
              
sina.com.cn
            
            
        
6
              
Facebook
          
            
            
        
7
              
twitter
           
twitter.com
            
     
    

jQuery 层级选择器

选择器	描述
$("#id>.classname ")	子元素选择器
$("#id .classname ")	后代元素选择器
$("div+p")	选择紧邻 div 元素的，且就是 div 元素下一个的，标签为 <p> 的元素
$("#id ~ .classname ")	兄弟元素选择器

子元素选择器 $("div ul li ul")与后代元素选择器 $("div>ul>li>ul") 的区别

• $("div>ul") 只选择 div 下一级里面的 ul 元素
• $("div ul") 选择 div 内所包含的所有 ul 元素
• $("div>ul") 比 $("div ul") 限定更严格，必须后面的元素只比前面的低一个级别

$("div+p") 选择紧邻 div 元素的 p 元素，非子元素

     
                
$("div+p") 会选取什么元素?
    
    
     这个是 div 元素
    
    
这个 p 元素是 div 的下一个元素
    
这是另外一个 p 元素
    
    
        
     
这是在 div 中的 p 元素
    
    
    
这是 在 div 元素后的标题
    
这是一个 p 元素(这个 p 元素不会被选取，因为以上的 h2 元素是 div 的下一个元素)。

$("div~p") 选取与 <div> 元素同级的所有 <p> 元素

     
                            
$("div~p") 会选取什么?
        
这是一个 p 元素 (不会被选取)。
        
    
     这是一个 div 元素
    
        
这是一个 p 元素
        
这是另外一个 p 元素
        
    
            
     
这个 p 元素在 div 内(不会被选取).
        
    
        
这是一个标题
        
这是一个 p 元素
    

jQuery 表单选择器

选择器	描述
$(":input")	所有 input 元素
$(":text")	所有带有 type="text" 的 input 元素
$(":password")	所有带有 type="password" 的 input 元素
$(":radio")	所有带有 type="radio" 的 input 元素
$(":checkbox")	所有带有 type="checkbox" 的 input 元素
$(":submit")	所有带有 type="submit" 的 input 元素
$(":reset")	所有带有 type="reset" 的 input 元素
$(":button")	所有带有 type="button" 的 input 元素
$(":image")	所有带有 type="image" 的 input 元素
$(":file")	所有带有 type="file" 的 input 元素
$(":enabled")	所有启用的元素
$(":disabled")	所有禁用的元素
$(":selected")	所有选定的下拉列表元素
$(":checked")	所有选中的复选框选项

$(":enable") 选择所有可以使用的表单元素，如果不能设置此属性，则无效，例如 p 标签无效

     
                        
    
             用户名: 
     
     
        ID:
             年龄:        
                 20-30            30-50            50+                
         
    
    
红色是可以使用的部分，白色是禁用的部分

$(":button") 和 $("button") 的区别

$(":button") 为 jQuery 中表单选择器，旨在选择所有的按钮，所以会找到 <input>、<button> 元素；而 $("button") 则为基本选择器，旨在选择为 <button> 的标签。

            
                    
                            
标题
        
第一行内容
        
第二行内容
        
第三行内容
        press                

---

Reference