jQuery选择器完全总结 超、凢脫俗 2022-06-15 07:37 181阅读 0赞 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头:$()。 本文对jQuery选择器作一个总结。 ## 1、说明 ## 通用语法: $('具体的选择字符串'); > 选择结果可能是单个或多个对象。 > > 下面涉及到索引的,多是从0开始计数。 > > 如果选择器中包含特殊字符,可以用两个斜杠转义。 ## 2、基本的选择器 ## ### 2.1、元素选择器(element) ### html: <div>DIV1</div> <div>DIV2</div> Jquery: $("div"); 结果:\[<div>DIV1</div>,<div>DIV2</div>\] ### 2.2、ID选择器(\#id) ### html: <div id="div1"></div> Jquery: $("#div1"); ### 2.3、类选择器(.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>\] ### 2.4、匹配所有元素,通常用于结合上下文搜索(\*) ### html: <div>DIV</div> <span>SPAN</span> <p>P</p> Jquery: $("*") 结果:\[<div>DIV</div>,<span>SPAN</span>,<p>P</p>\] ### 2.5、根据多个规则获取元素(selector1,selector2,selectorN) ### 将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。 html: <div>div</div> <p class="myClass">p class="myClass"</p> <span>span</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>\] ## 3、层次结构中选取 ## ### 3.1、选取指定元素内所有匹配的元素(ancestor descendant) ### 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" />,<input name="newsletter" />\] ### 3.2、选择指定父元素下匹配的子元素(parent > child) ### 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" />\] ### 3.3、选择所有紧接在指定元素后指定的匹配元素(prev + next) ### 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" />\] ### 3.4、选择指定元素之后的所有指定的匹配元素(prev ~ siblings) ### 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="none" />\] ## 4、更近一步 ## ### 4.1、获取第一个元素(: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>\] ### 4.2、获取最后个元素(: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>\] ### 4.3、去除所有与给定选择器匹配的元素(:not(selector)) ### 在jQuery 1.3中,已经支持复杂选择器了(例如:not(div a) 和 :not(div,a))。 html: <input name="apple" /> <input name="flower" checked="checked" /> Jquery: $("input:not(:checked)") 结果:\[<input name="apple" />\] ### 4.4、匹配所有索引值为偶数的元素 ### 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><td>Value 2</td></tr>\] ### 4.5、匹配所有索引值为奇数的元素 ### 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>\] ### 4.6、匹配一个给定索引值的元素(:eq(index)) ### html: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> Jquery: $("tr:eq(1)") 结果:\[<tr><td>Value 1</td></tr>\] ### 4.7、匹配所有大于给定索引值的元素(:gt(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>\] ### 4.8、匹配所有小于给定索引值的元素(:lt(index)) ### 返回值:Array<Element(s)> html: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> Jquery: $("tr:lt(2)") 结果:\[<tr><td>Header 1</td></tr>,<tr><td>Value 1</td></tr>\] ### 4.9、选择指定语言的所有元素(:lang(language)) ### :lang选择器,匹配有一个语言值等于所提供的语言代码,或以提供的语言代码开始,后面马上跟一个“ - ”的元素。例如,选择器$("div:lang(en)")将匹配<div lang="en"> and <div lang="en-us">(和他们的后代<div>),但不包括<div lang="fr"> 对于HTML元素,语言值由lang属性决定,也可能由来自meta元素或HTTP头信息决定。 如,选择所有<P> 的语言属性: $("p:lang(it)") ### 4.10、匹配如 h1, h2, h3之类的标题元素(:header) ### 返回值:Array<Element(s)> html: <h1>Header 1</h1> <p>Contents 1</p> <h2>Header 2</h2> <p>Contents 2</p> Jquery: $(":header") 结果:\[<h1>Header 1</h1>,<h2>Header 2</h2>\] ### 4.11、匹配所有正在执行动画效果的元素(:animated) ### 返回值:Array<Element(s)> ### 4.12、匹配当前获取焦点的元素(:focus) ### 如同其他伪类选择器(那些以":"开始),建议:focus前面用标记名称或其他选择;否则,通用选择("\*")是不言而喻的。换句话说,$(':focus')等同为$('\*:focus')。如果你正在寻找当前的焦点元素,$( document.activeElement )将检索,而不必搜索整个DOM树。 添加一个"focused"的类名给那些有focus方法的元素: css: .focused { background: #abcdef;} html: <div id="content"> <input tabIndex="1"> <input tabIndex="2"> <select tabIndex="3"> <option>select menu</option> </select> <div tabIndex="4"> a div </div> </div> Jquery: $( "#content" ).delegate( "*", "focus blur", function( event ) { var elem = $( this ); setTimeout(function() { elem.toggleClass( "focused", elem.is( ":focus" ) ); }, 0); }); ### 4.13、选择该文档的根元素(:root) ### 在HTML中,文档的根元素,和$(":root")选择的元素一样, 永远是<html>元素。 ### 4.14、选择由文档URI的格式化识别码表示的目标元素(:target) ### 如果文档的URI包含一个格式化的标识符,或hash(哈希), 然后:target选择器将匹配ID和标识符相匹配的元素。 例如,给定的URI http://example.com/\#foo, $( "p:target" ),将选择<p id="foo">元素。 ### 4.15、匹配包含给定文本的元素(:contains(text)) ### html: <div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn</div> Jquery: $("div:contains('John')") 结果:\[<div>John Resig</div>,<div>Malcom John Sinclair</div>\] ### 4.16、匹配所有不包含子元素或者文本的空元素(:empty) ### html: <table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table> Jquery: $("td:empty") 结果:\[<td></td>,<td></td>\] ### 4.17、匹配含有选择器所匹配的元素的元素(:has(selector)) ### html: <div><p>Hello</p></div> <div>Hello again!</div> Jquery: $("div:has(p)"); 结果:\[<div><p>Hello</p></div>\] ### 4.18、匹配含有子元素或者文本的元素(:parent) ### html: <table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table> Jquery: $("td:parent") 结果:\[<td>Value 1</td>,<td>Value 2</td>\] ### 4.19、匹配所有不可见元素,或者type为hidden的元素(:hidden) ### 查找隐藏的 tr: html: <table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> Jquery: $("tr:hidden") 结果:\[<tr style="display:none"><td>Value 1</td></tr>\] 匹配type为hidden的元素: html: <form> <input type="text" name="email" /> <input type="hidden" name="id" /> </form> Jquery: $("input:hidden") 结果:\[<input type="hidden" name="id" />\] ### 4.20、匹配所有的可见元素(:visible) ### html: <table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> Jquery: $("tr:visible") 结果:\[<tr><td>Value 2</td></tr>\] ### 4.21、匹配包含给定属性的元素(\[attribute\]) ### 注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可。 html: <div> <p>Hello!</p> </div> <div id="test2"></div> Jquery: $("div[id]") 结果:\[<div id="test2"></div>\] ### 4.22、匹配给定的属性是某个特定值的元素(\[attribute=value\]) ### 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']") 结果:\[<input type="checkbox" name="newsletter" value="Hot Fuzz" />,<input type="checkbox" name="newsletter" value="Cold Fusion" />\] ### 4.23、匹配所有不含有指定的属性或属性不等于特定值的元素(\[attribute!=value\]) ### 此选择器等价于:not(\[attr=value\])。 要匹配含有特定属性但不等于特定值的元素,请使用\[attr\]:not(\[attr=value\])。 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']") 结果:\[<input type="checkbox" name="accept" value="Evil Plans" /> \] ### 4.24、匹配给定的属性是以某些值开始的元素(\[attribute^=value\]) ### html: <input name="newsletter" /> <input name="milkman" /> <input name="newsboy" /> Jquery: $("input[name^='news']") 结果:\[<input name="newsletter" />,<input name="newsboy" />\] ### 4.25、匹配给定的属性是以某些值结尾的元素(\[attribute$=value\]) ### html: <input name="newsletter" /> <input name="milkman" /> <input name="jobletter" /> Jquery: $("input[name$='letter']") 结果:\[<input name="newsletter" />,<input name="jobletter" />\] ### 4.26、匹配给定的属性是以包含某些值的元素(\[attribute\*=value\]) ### html: <input name="man-news" /> <input name="milkman" /> <input name="letterman2" /> <input name="newmilk" /> Jquery: $("input[name*='man']") 结果:\[<input name="man-news" />,<input name="milkman" />,<input name="letterman2" />\] ### 4.27、复合属性选择器,需要同时满足多个条件时使用(\[selector1\]\[selector2\]\[selectorN\]) ### html: <input id="man-news" name="man-news" /> <input name="milkman" /> <input id="letterman" name="new-letterman" /> <input name="newmilk" /> Jquery: $("input[id][name$='man']") 结果:\[<input id="letterman" name="new-letterman" />\] ### 4.28、匹配第一个子元素(:first-child) ### html: <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> Jquery: $("ul li:first-child") 结果:\[<li>John</li>,<li>Glen</li>\] ### 4.29、选择所有相同的元素名称的第一个兄弟元素(:first-of-type) ### :first-of-type 选择器匹配元素,在文档树中,相同的父元素并且在其他相同的元素名称之前。 ### 4.30、匹配最后一个子元素(:last-child) ### html: <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> Jquery: $("ul li:last-child") 结果:\[<li>Brandon</li>,<li>Ralph</li>\] ### 4.31、选择的所有元素之间具有相同元素名称的最后一个兄弟元素(:last-of-type) ### :last-of-type 选择器匹配在文档树中具有相同的父元素并且相同的元素名称,后面没有任何其他元素 的元素。 ### 4.32、匹配其父元素下的第N个子或奇偶元素(:nth-child) ### ':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!可以使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2) html: <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> Jquery: $("ul li:nth-child(2)") 结果:\[<li>Karl</li>,<li>Tane</li>\] ### 4.33、选择所有他们父元素的第n个(计数从最后一个元素开始到第一个)子元素(:nth-last-child(n|even|odd|formula))v1.9 ### 因为jQuery的实现:nth-child(n)是严格来自CSS规范,所以n值是“1索引”,也就是说,从1开始计数。对于所有其他选择器表达式,jQuery遵循JavaScript的“0索引”的计数。因此,给定一个单一<ul>包含两个<li>, $('li:nth-child(1)')选择第一个<li>,而$('li:eq(1)')选择第二个。 比如下面选择倒数第二个: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> $("ul li:nth-last-child(2)"); ### 4.34、选择的所有他们的父级元素的第n个(计数从最后一个元素到第一个)子元素(:nth-last-of-type(n|even|odd|formula)) ### 因为jQuery的实现:nth-是严格来自CSS规范,n值是“1-indexed”,也就是说,从1开始计数。 对于所有其他选择器表达式比如:eq() 或 :even ,jQuery遵循JavaScript的“0索引”的计数。因此,给定一个单一<ul>包含3个<li>,$('li:nth-last-of-type(1)')选择第3个,也就是最后一个<li>。 选择倒数第二个: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> $("ul li:nth-last-of-type(2)"); ### 4.35、选择同属于一个父元素之下,并且标签名相同的子元素中的第n个(:nth-of-type(n|even|odd|formula)) ### 因为jQuery的实现:nth-是严格来自CSS规范,n值是“1-indexed”,也就是说,从1开始计数。对于所有其他选择器表达式比如:eq() 或 :even ,jQuery遵循JavaScript的“0索引”的计数。 查找每个span,这个 span 是 其所有兄弟span元素中的第二个元素: <div> <span>John</span> <b>Kim</b> <span>Adam</span> <b>Rafael</b> <span>Oleg</span> </div> <div> <b>Dave</b> <span>Ann</span> </div> <div> <i><span>Maurice</span></i> <span>Richard</span> <span>Ralph</span> <span>Jason</span> </div> $("span:nth-of-type(2)"); ### 4.36、如果某个元素是父元素中唯一的子元素,那将会被匹配(:only-child) ### 如果父元素中含有其他元素,那将不会被匹配。 html: <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> </ul> Jquery: $("ul li:only-child") 结果:\[<li>Glen</li>\] ### 4.37、选择所有没有兄弟元素,且具有相同的元素名称的元素(:nth-last-of-type) ### 如果父元素有相同的元素名称的其他子元素,那么没有元素会被匹配。 改变每一个按钮的文字,并且加一个边框,这些按钮的父元素只有这个按钮子元素: <div> <button>Sibling!</button> <button>Sibling!</button> </div> <div> <button>Sibling!</button> </div> <div> None</div> <div> <button>Sibling!</button> <span>Sibling!</span> <span>Sibling!</span> </div> <div> <button>Sibling!</button> </div> $("button:only-of-type").text("Alone").css("border", "2px blue solid"); ### 4.37、匹配所有 input, textarea, select 和 button 元素(: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><option>Option</option></select> <textarea></textarea> <button>Button</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" />, <select><option>Option</option></select>, <textarea></textarea>, <button>Button</button>, ] ### 4.38、匹配所有的单行文本框(: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" />\] ### 4.39、匹配所有密码框(: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" />\] ### 4.40、匹配所有单选按钮(: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" />\] ### 4.41、匹配所有复选框(: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" />\] ### 4.42、匹配所有提交按钮(: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" />\] ### 4.43、匹配所有图像域(:image) ### 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: $(":image") 结果:\[<input type="image" />\] ### 4.44、匹配所有重置按钮(: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" />\] ### 4.45、匹配所有按钮(: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> \] ### 4.46、匹配所有文件域(: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" /> \] ### 4.47、匹配所有可用元素(:enabled) ### html: <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> Jquery: $("input:enabled") 结果:\[ <input name="id" /> \] ### 4.48、匹配所有不可用元素(:disabled) ### html: <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> Jquery: $("input:disabled") 结果:\[ <input name="email" disabled="disabled" /> \] ### 4.49、匹配所有选中的被选中元素(:checked) ### 复选框、单选框等,不包括select中的option。 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" /> \] ### 4.50、匹配所有选中的option元素(: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> \] 原文地址:[http://blog.csdn.net/anxpp/article/details/51485899][http_blog.csdn.net_anxpp_article_details_51485899] [http_blog.csdn.net_anxpp_article_details_51485899]: http://blog.csdn.net/anxpp/article/details/51485899
还没有评论,来说两句吧...