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");});
