jQuery选择器

jQuery选择器

1. 基本选择器

通配选择器：$('')

HTML 代码:
        
       
       

jQuery 代码:      $("");

结果:  [    ]

标签选择器:$(element)

HTML 代码:
       
       
       

jQuery 代码:  $("div");

结果:  [    ]         

id选择器:$('#id')

HTML 代码:

    
  
    
  

 jQuery 代码:$("#myDiv");

结果: [ 

class类选择器：$('.class')

 HTML 代码:

    
  
    
  
      

jQuery 代码:     $(".myClass");

结果:   [ 
  ]

分组选择器：$(selector1,selector2...)

HTML 代码:
    
    

    

    
 jQuery 代码:  $("div,span,p.myClass")；
     
结果:    [   ,  ]

2. 层级选择器

后代选择器:$('div p')

 HTML 代码:
  
  
  
  
    
  


 jQuery 代码:  
    $("form input")
  结果:
[    ]

子代选择器：$('divp')

 HTML 代码:

  
    
  
  
        
 
  
  
  

 jQuery 代码:  
    $("form  input")
  结果:
[   ]

毗邻选择器：$('div+p')

 HTML 代码:

  
    
  
  
        
        
 
  
  
  

 jQuery 代码:  
    $("label + input")；
  结果:
[    ]

后置兄弟选择器：$('div~p')

 HTML 代码:
  
    
    
  
  
        
        
 
  
  
  
 jQuery 代码:  
    $("form ~ input")；
  结果:
[    ]

3. 基本筛选器

第一个：$('p:first')

 HTML 代码:

  
      
      
      
      
      
  

 jQuery 代码:  
    $('li:first');
  结果:
[    ]

最后一个：$('p:last')

 HTML 代码:

  
      
      
      
      
      
  

 jQuery 代码:  
    $('li:last')；
  结果:
[    ]

索引偶数:$('li:even')

 HTML 代码:

  
    
    
  ]

索引奇数$('li:odd')

 HTML 代码:

   ]
索引大于:$('li:lt(index)')
 HTML 代码:

  
    
    
  

 jQuery 代码:  
    $("tr:gt(0)")；
  结果:
[    ]

指定索引：:$('li:ep(index)')

 HTML 代码:

  
    
    
  

 jQuery 代码:  
    $("tr:eq(1)")；
  结果:
[   ]

索引小于:$('li:gt(index)')

 HTML 代码:

       ]
移除:$('div:not(span)')
 HTML 代码:

  
  

 jQuery 代码:  
    $("input:not(:checked)")；
  结果:
[   ]
后代具有某个选择器的父元素：$('div:has(p)')
 HTML 代码:

      
      

 jQuery 代码:  
    $("div:has(p)").addClass("test");
  结果:
[ 
   ]
4. 属性选择器
属性选择器:$('[属性]')
 HTML 代码:

  
    
  
  

 jQuery 代码:  
    $("div[id]")；
  结果:
[ 
   ]
属性值选择器:$('[属性=属性值]')
 HTML 代码:

  
  
  

 jQuery 代码:  
    $("input[name='newsletter']").attr("checked", true);
  结果:
[   ,   ]
5. 表单筛选器
表单标签：$(':input')
 HTML 代码:

  
      

      
      
      

      
      
      

      
      
      

      

  

 jQuery 代码:  
    $(":input")；
  结果:    
[  ,
  , ,
  ,  ,  , ,   ,   ,  , ]
文本：$(':text')
 HTML 代码:

  
    
    
    
    
    
    
    
    
    
    
    
  

 jQuery 代码:  
    $(":text")；
  结果:
    [    ]
密码:$(':password')
 HTML 代码:

  
    
    
    
    
    
    
    
    
    
    
    
    
  

 jQuery 代码:  
$(":password")；
  结果:
[    ]
单选：$(':radio')
 HTML 代码:


    
  
        
        
        
        
        
        
        
        
        
        
        
        
      

 jQuery 代码:  
$(":radio")；
  结果:
    [   ]
多选：$(':checkbox')
 HTML 代码:

  
    
    
    
    
    
    
    
    
    
    
    
  ]
文件：$(':file')
 HTML 代码:

  
    
    
    
    
    
    
    
    
    
    
    
  

 jQuery 代码:  
    $(":file")；> 
  结果:
[ 
隐藏：$(':hidden')
 HTML 代码:查找隐藏的 tr


   
  
  

 jQuery 代码:  
    $("tr:hidden")；
  结果:
[    ]
  HTML 代码:匹配type为hidden的元素

  
    
  

 jQuery 代码:  
 $("input:hidden")；
  结果:
    [    ]

提交：$(':submit')

 HTML 代码:

        
  
        
        
        
        
        
        
        
        
        
        
        
        
      

 jQuery 代码:  
    $(":submit")；
  结果:
    [    ]

重置:$(':reset')

 HTML 代码:

    
  
        
        
        
        
        
        
        
        
        
        
        

按钮:$(':button')

 HTML 代码:

   
  
        
        
        
        
        
        
        
        
        
        
        
  

 jQuery 代码:  
    $(":button")；
  结果:
[    ]

6. 表单对象属性选择器

可用:$(':enabled')

 HTML 代码:

  
    
    
  

 jQuery 代码:  
    $("input:enabled")；
  结果:
    [ 

禁用:$(':disabled')

 HTML 代码:

  
    
    
  ]

选定:$(':checked')

 HTML 代码:

  
    
    
    
  ]

下拉选定:$(':selected')

 HTML 代码:


  
    
    
  

 jQuery 代码:  
    $("select option:selected")；
  结果:
[    ]

7. 筛选器方法

祖先

父级:$(selector).parent(selector)

 HTML 代码:查找每个段落的父元素   
      

 jQuery 代码:  $("p").parent()

结果: [   ]

HTML 代码:查找段落的父元素中每个类名为selected的父元素
    HelloAgain  
 jQuery 代码:  
            $("p").parent(".selected")
结果:
       [ 
  ]

祖宗:$(selector).parents(selector)

arents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (  )。
      
返回所有    元素的所有祖先，并且它是 
  元素：
   $(document).ready(function(){  $("span").parents("ul");});

祖宗范围:$(selector).parentsUntil(selector)

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
      
返回介于   与 
  元素之间的所有祖先元素：
   $(document).ready(function(){  $("span").parentsUntil("div");});

后代

子代：$(selector).children(selector)

  children() 方法返回被选元素的所有直接子元素
      
返回每个 
  元素，并且它们是 
  的直接子元素：
  $(document).ready(function(){  $("div").children("p.1");});

后代：$(selector).find(selector)

 cfind() 方法返回被选元素的后代元素，一路向下直到最后一个后代

返回属于 
  后代的所有    元素：
  $(document).ready(function(){  $("div").find("span");});

同胞

同胞：$(selector).siblings(selector)

 siblings() 方法返回被选元素的所有同胞元素
  
 jQuery 代码:  

返回 

前边

前一个:$(selector).prev(selector)

前所有：$(selector).prevAll(selector)

前范围：$(selector).prevUntil(selector)

后边

后一个:$(selector).next(selector)

next() 方法返回被选元素的下一个同胞元素。
      
返回 

后所有：$(selector).nextAll(selector)

  nextAll() 方法返回被选元素的所有跟随的同胞元素
      
 返回 

后范围：$(selector).nextUntil(selector)

  nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素      

 返回介于 
  与 
  元素之间的所有同胞元素：
   $(document).ready(function(){  $("h2").nextUntil("h6");});

过滤

第一个：$(selector).first(selector)

 first() 方法返回被选元素的首个元素
      
选取首个 

最后一个：$(selector).last(selector)

last() 方法返回被选元素的最后一个元素      

选择最后一个 
  元素中的最后一个 
  元素：
      $(document).ready(function(){  $("div p").last();});

指定索引：$(selector).eq(index)

 eq() 方法返回被选元素中带有指定索引号的元素
      
 选取第二个 

移除：$(selector).not(selector)

not() 方法返回不匹配标准的所有元素
      
返回不带有类名 "url" 的所有 
  元素：
  $(document).ready(function(){  $("p").not(".url");});

特定有某个值后代元素：$(selector).has(selector)

筛选：$(selector).filter(selector)

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
     
返回带有类名 "url" 的所有 
  元素：
  $(document).ready(function(){  $("p").filter(".url");});