jQuery选择器

jQuery选择器

1. 基本选择器

通配选择器：$('')

HTML 代码:
    <divDIV</div  >    
    <spanSPAN</span>   
     <pP</p>  

jQuery 代码:      $("");

结果:  [ <div>DIV</div>, <spanSPAN</span>, <p>P</p>   ]

标签选择器:$(element)

HTML 代码:
     <divDIV1</div>  
     <divDIV2</div>  
     <spanSPAN</span>  

jQuery 代码:  $("div");

结果:  [ <divDIV1</div>, <divDIV2</div>   ]         

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

HTML 代码:

    <div id="notMe"<p>id="notMe"</p</div>  
    <div id="myDiv"id="myDiv"</div>  

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

结果: [ <div id="myDiv"id="myDiv"</di>v ]

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

 HTML 代码:

    <div class="notMe"div class="notMe"</div>  
    <div class="myClass"div class="myClass"</div>  
    <span class="myClass"span class="myClass"</span>  

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

结果:   [ <div class="myClass"div class="myClass"</div, <span class="myClass"span class="myClass"</span >  ]

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

HTML 代码:
    <divdiv</div>
    <p class="myClass"><p> class="myClass"</p>
    <spanspan</span
    <p class="notMyClass"><p> class="notMyClass"</p>

    
 jQuery 代码:  $("div,span,p.myClass")；
     
结果:    [ <div>div</div>, <p class="myClass"><p> class="myClass"</p>  , <span>span</span> ]

2. 层级选择器

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

 HTML 代码:
  
<form>
<labelName:</label>  
<input name="name" />  
<fieldset>
  <labelNewsletter:</label>  
  <input name="newsletter" />  
</fieldset>
</for>
<input name="none" />  


 jQuery 代码:  
    $("form input")
  结果:
[ <input name="name" />, <input> name="newsletter" />   ]

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

 HTML 代码:

<form>
  <label>Name:</label>  
  <input name="name" />  
  <fieldset>
      <label>Newsletter:</label>  
      <input name="newsletter" />  
 </fieldset>  
</form>  
<input name="none" />  

 jQuery 代码:  
    $("form  input")
  结果:
[ <input name="name" / >  ]

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

 HTML 代码:

<form
  <label>Name:</label>  
  <input name="name" />  
  <fieldset>  
      <label>Newsletter:</label>  
      <input name="newsletter" />  
 </fieldset>  
</form>  
<input name="none" />  

 jQuery 代码:  
    $("label + input")；
  结果:
[ <input name="name" />, <input name="newsletter" />   ]

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

 HTML 代码:
<form>  
  <labelName:</label>  
  <input name="name" />  
  <fieldset>  
      <labelNewsletter:</label>  
      <input name="newsletter" />  
 </fieldset>  
</form>  
<input name="none" />  
 jQuery 代码:  
    $("form ~ input")；
  结果:
[ <input name="none" />   ]

3. 基本筛选器

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

 HTML 代码:

<ul>  
    <li>list item 1</li>  
    <li>list item 2</li>  
    <li>list item 3</li>  
    <li>list item 4</li>  
    <li>list item 5</li>  
</ul>  

 jQuery 代码:  
    $('li:first');
  结果:
[ <li>list item 1</li>   ]

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

 HTML 代码:

<ul>  
    <li>list item 1</li>  
    <li>list item 2</li>  
    <li>list item 3</li>  
    <li>list item 4</li>  
    <li>list item 5</li>  
</ul>  

 jQuery 代码:  
    $('li:last')；
  结果:
[ <li>list item 5</li>   ]

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

 HTML 代码:

<table>  
  <tr><td>Header 1</td</tr>  
  <tr><td>Value 1</td</tr>  
  <tr><td>Value 2</td</tr>  
</table>

 jQuery 代码:  
    $("tr:even")；
  结果:

[ <tr><td>Header 1</td></tr>, <tr><tdValue 2</td></tr >  ]

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

 HTML 代码:

<table>
  <tr<td>Header 1</td></tr>
  <tr<td>Value 1</td></tr>

<tr><td>Value 2</td></tr> </table>
 jQuery 代码: $("tr:odd")； 结果: [ <tr<td>Value 1</td</tr> ] 

索引大于:$('li:lt(index)')

 HTML 代码:

<table>  
  <tr><td>Header 1</td></tr>  
  <tr><td>Value 1</td></tr>  
  <tr><td>Value 2</td></tr>  
</table>  

 jQuery 代码:  
    $("tr:gt(0)")；
  结果:
[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr>   ]

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

 HTML 代码:

<table>  
  <tr<tdHeader 1</td</tr>  
  <tr<tdValue 1</td</tr>  
  <tr<tdValue 2</td</tr>  
</table>  

 jQuery 代码:  
    $("tr:eq(1)")；
  结果:
[ <tr<tdValue 1</td</tr >  ]

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

 HTML 代码:

    <table
      <tr<tdHeader 1</td</tr
      <tr<tdValue 1</td</tr
      <tr<tdValue 2</td</tr
    </table
    
 jQuery 代码:  
    $("tr:lt(2)")；
  结果:
[ <tr<tdHeader 1</td</tr, <tr<tdValue 1</td</tr>   ]

移除:$('div:not(span)')

 HTML 代码:

<input name="apple" />  
<input name="flower" checked="checked" />  

 jQuery 代码:  
    $("input:not(:checked)")；
  结果:
[ <input name="apple" / >  ]

后代具有某个选择器的父元素：$('div:has(p)')

 HTML 代码:

    <div<pHello</p</div>  
    <divHello again!</div>  

 jQuery 代码:  
    $("div:has(p)").addClass("test");
  结果:
[ <div class="test"<pHello</p</div>   ]

4. 属性选择器

属性选择器:$('[属性]')

 HTML 代码:

<div>  
  <pHello!</p>  
</div>  
<div id="test2"</div>  

 jQuery 代码:  
    $("div[id]")；
  结果:
[ <div id="test2"</div>   ]

属性值选择器:$('[属性=属性值]')

 HTML 代码:

<input type="checkbox" name="newsletter" value="Hot Fuzz" />  
<input type="checkbox" name="newsletter" value="Cold   Fusion" />  
<input type="checkbox" name="accept" value="Evil Plans" />  

 jQuery 代码:  
    $("input[name='newsletter']").attr("checked", true);
  结果:
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />  , <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" / >  ]

5. 表单筛选器

表单标签：$(':input')

 HTML 代码:

<form
    <input type="button" value="Input Button"/>  
    <input type="checkbox" />  

    <input type="file" />  
    <input type="hidden" />  
    <input type="image" />  

    <input type="password" />  
    <input type="radio" />  
    <input type="reset" />  

    <input type="submit" />  
    <input type="text" />  
    <select<optionOption</option</select>  

    <textarea</textarea
    <buttonButton</button>  

</form>  

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

[ <input type="button" value="Input Button"/, <input type="checkbox" /> ,
<input type="file" /> ,<input type="hidden" /,<input type="image" /> ,
<input type="password" /> , <input type="radio" /,<input type="reset" /> , <input type="submit" /> ,<input type="text" /> , <selectoptionOption</option> </select> , <textarea> </textarea> , <buttonButton</button> , ]

文本：$(':text')

 HTML 代码:

<form
  <input type="text" />  
  <input type="checkbox" />  
  <input type="radio" />  
  <input type="image" />  
  <input type="file" />  
  <input type="submit" />  
  <input type="reset" />  
  <input type="password" />  
  <input type="button" />  
  <select<option/</select>  
  <textarea</textarea>  
  <button</button>  
</form>  

 jQuery 代码:  
    $(":text")；
  结果:
    [ <input type="text" />   ]

密码:$(':password')

 HTML 代码:

<form>  
  <input type="text" />  
  <input type="checkbox" />  
  <input type="radio" />  
  <input type="image" />  
  <input type="file" />  
  <input type="submit" />  
  <input type="reset" />  
  <input type="password" />  
  <input type="button" />  
  <select<option/</select>  
  <textarea</textarea>  
  <button</button>  
</form>  

 jQuery 代码:  
$(":password")；
  结果:
[ <input type="password" />   ]

单选：$(':radio')

 HTML 代码:


    <form>  
      <input type="text" />  
      <input type="checkbox" />  
      <input type="radio" />  
      <input type="image" />  
      <input type="file" />  
      <input type="submit" />  
      <input type="reset" />  
      <input type="password" />  
      <input type="button" />  
      <select<option/</select>  
      <textarea</textarea>  
      <button</button>  
    </form>  

 jQuery 代码:  
$(":radio")；
  结果:
    [ <input type="radio" / >  ]

多选：$(':checkbox')

 HTML 代码:

<form>  
  <input type="text" />  
  <input type="checkbox" />  
  <input type="radio" />  
  <input type="image" />  
  <input type="file" />  
  <input type="submit" />  
  <input type="reset" />  
  <input type="password" /
  <input type="button" />  
  <select<option/</select>  
  <textarea</textarea>  
  <button</button>  
</form

 jQuery 代码:  
$(":checkbox")；
  结果:
[ <input type="checkbox" / >  ]

文件：$(':file')

 HTML 代码:

<form>  
  <input type="text" />  
  <input type="checkbox" /
  <input type="radio" />  
  <input type="image" />  
  <input type="file" />  
  <input type="submit" />  
  <input type="reset" />  
  <input type="password" />  
  <input type="button" />  
  <select<option/</select>  
  <textarea</textarea>  
  <button</button>  
</form>  

 jQuery 代码:  
    $(":file")；> 
  结果:
[ <input type="file" / ]

隐藏：$(':hidden')

 HTML 代码:查找隐藏的 tr


   <table
  <tr style="display:none"<tdValue 1</td</tr>  
  <tr<tdValue 2</td</tr>  
</table>  

 jQuery 代码:  
    $("tr:hidden")；
  结果:
[ <tr style="display:none"<tdValue 1</td</tr>   ]
  HTML 代码:匹配type为hidden的元素

<form
  <input type="text" name="email" />  
  <input type="hidden" name="id" />  
</form>  

 jQuery 代码:  
 $("input:hidden")；
  结果:
    [ <input type="hidden" name="id" />   ]

提交：$(':submit')

 HTML 代码:

        <form>  
      <input type="text" />  
      <input type="checkbox" />  
      <input type="radio" />  
      <input type="image" />  
      <input type="file" />  
      <input type="submit" />  
      <input type="reset" />  
      <input type="password" />  
      <input type="button" />  
      <select<option/</select>  
      <textarea</textarea>  
      <button</button>  
    </form>  

 jQuery 代码:  
    $(":submit")；
  结果:
    [ <input type="submit" />   ]

重置:$(':reset')

 HTML 代码:

    <form
      <input type="text" />  
      <input type="checkbox" />  
      <input type="radio" />  
      <input type="image" />  
      <input type="file" />  
      <input type="submit" />  
      <input type="reset" />  
      <input type="password" />  
      <input type="button" />  
      <select<option/</select>  
      <textarea</textarea>  
      <button</button>  
</form

 jQuery 代码:  
    $(":reset")；
  结果:
[ <input type="reset" / ]

按钮:$(':button')

 HTML 代码:

   <form
      <input type="text" />  
      <input type="checkbox" />  
      <input type="radio" />  
      <input type="image" />  
      <input type="file" />  
      <input type="submit" />  
      <input type="reset" />  
      <input type="password" />  
      <input type="button" />  
      <select<option/</select>  
      <textarea</textarea>  
      <button</button>  
</form>  

 jQuery 代码:  
    $(":button")；
  结果:
[ <input type="button" /,<button</button>   ]

6. 表单对象属性选择器

可用:$(':enabled')

 HTML 代码:

<form>  
  <input name="email" disabled="disabled" />  
  <input name="id" />  
</form>  

 jQuery 代码:  
    $("input:enabled")；
  结果:
    [ <input name="id" / ]

禁用:$(':disabled')

 HTML 代码:

<form>  
  <input name="email" disabled="disabled" />  
  <input name="id" />  
</form

 jQuery 代码:  
    $("input:disabled")；
  结果:
    [ <input name="email" disabled="disabled" / >  ]

选定:$(':checked')

 HTML 代码:

<form>  
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />  
  <input type="checkbox" name="newsletter" value="Weekly" />  
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />  
</form

 jQuery 代码:  
    $("input:checked")；
  结果:
[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" /, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" / >  ]

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

 HTML 代码:


<select
  <option value="1"Flowers</option>  
  <option value="2" selected="selected"Gardens</option>  
  <option value="3"Trees</option>  
</select>  

 jQuery 代码:  
    $("select option:selected")；
  结果:
[ <option value="2" selected="selected"Gardens</option>   ]

7. 筛选器方法

祖先

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

 HTML 代码:查找每个段落的父元素   
    <div<pHello</p<pHello</p</div>  

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

结果: [ <div<pHello</p<pHello</p</div>  ]

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

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

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

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

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

后代

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

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

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

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

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

同胞

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

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

返回 <h2 的所有同胞元素：
$(document).ready(function(){ $("h2").siblings(); });

返回属于 <h2 的同胞元素的所有 <p 元素：    
$(document).ready(function(){ $("h2").siblings("p"); });

前边

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

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

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

后边

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

next() 方法返回被选元素的下一个同胞元素。
      
返回 <h2 的下一个同胞元素：
        $(document).ready(function(){      $("h2").next();    });

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

  nextAll() 方法返回被选元素的所有跟随的同胞元素
      
 返回 <h2 的所有跟随的同胞元素：
       $(document).ready(function(){  $("h2").nextAll();});

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

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

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

过滤

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

 first() 方法返回被选元素的首个元素
      
选取首个 <div 元素内部的第一个 <p 元素：
   $(document).ready(function(){  $("div p").first();});

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

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

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

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

 eq() 方法返回被选元素中带有指定索引号的元素
      
 选取第二个 <p 元素（索引号 1）：
  (document).ready(function(){  $("p").eq(1);});

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

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

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

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

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