jQuery选择器及用法大全

$("input[id][name$='usr']")获取同时含有id属性和属性值以usr结尾的name属性的元素

[attr*=value]

[attr~=value]

[attr1][attr2]...[attrN]

获取同时拥有多个属性的元素

4.子元素选择器

利用子元素选择器可以对子元素进行筛选，常用的如表4所示。

表4子元素选择器

选择器

功能描述

2 :nth-child(index/even/o/公式)

:first-child

:last-child

:only-child

索引index默认从1始，匹配指定index索引、偶数、奇数、或符合指定公式（如2n，n默认从0始）的子元素

获取个子元素

获取最后一个子元素

如果当前元素的子元素，则匹3 :nth-last-child(index/even/o/公式)

:nth-of-type(index/even/o/公式))

:first-of-type

配

选择所有它们父元素的第n个子元素。计数从最后一个元素始到个

选择同属于一个父元素之下，并且标签名相同的子元素中的第n个子元素

选择所有相同的元素名称的个子4 :last-of-type

:only-of-type

:nth-last-of-type(index/even/o/公式)

元素

选择所有相同的元素名称的最后一个子元素

选择所有没有兄弟元素，且具有相同的元素名称的元素

选择属于父元素的特定类型的第n个子元素，计数从最后一个元素到个

5 5.表单选择器

jQuery还了针对表单元素的选择器，用来方便表单发，如表5所示。

表5表单选择器

选择器

:input

:text

:radio

:submit

:reset

:image

:button

:file

:hien

:enabled

:disabled

:checked

:selected

功能描述

获取页面中的所有表单元素，包含以及元素 </p><p>选取页面中的所有文本框 </p><p>选取所有的单选按钮 </p><p>获取submit提交按钮 </p><p>获取reset重置按钮 </p><p>获取type="image"的图像域 </p><p>获取button按钮，包括<button></button>和type="button" </p><p>获取type="file"的文件域 </p><p>获取隐藏表单项 </p><p>获取所有可用表单元素 </p><p>获取所有不可用表单元素 </p><p>获取所有选中的表单元素，主要针对radio和checkbox </p><p>获取所有选中的表单元素，主要针对select </p><p>:password </p><p>选取所有的密码框 </p><p>:checkbox </p><p>选取所有的复选框 </p><p>需要注意的，$("input")与$(":input")虽然都可以获取表单项，但它们表达的含义有一定的区别，前者仅能获取表单标签<input>的控件，后者则可以同时获取页面中所有的表单控件，包括表单标签<select>以及<textarea>的控件。 </p><p> 6 </p><p><p></p></img></p><p>2023年6月21日发(作者：)</p><p></p><p></img></p><p>jQuery中的选择器非常多，对于初学者来说，并没有必要全部掌握，只记住常用的选择器即可。当需要使用其他不熟悉的选择器时，可以通过查阅文档查看具体的解释。为了方便读者查阅，接下来简单介绍一些其他在发中可能会用到的选择器。 </p><p>1.获取同级元素 </p><p>选择器 </p><p>prev+next </p><p>功能描述 </p><p>获取当前元素紧邻的下一个同级元素 </p><p>示例 </p><p>$("div+.title")获取紧邻<div>的下一个class名为title的兄弟节 </p><p>$(".bar~li")获取class名为bar的元素后的所有同级元素节<li> </p><p>prev~siblings </p><p>获取当前元素后的所有同级元素 </p><p>2.筛选元素 </p><p>在jQuery中还有一些选择器可以筛选元素，如表2所示。 </p><p>表2筛选元素 </p><p>选择器 </p><p>:gt(index) </p><p>:lt(index) </p><p>:not(seletor) </p><p>:focus </p><p>:animated </p><p>:target </p><p>功能描述 示例 </p><p>获取索引于index的$("li:gt(3)")获取索引于3的所有<li>元素 </p><p>元素 </p><p>获取索引小于index的元素 </p><p>获取除指定的选择器外的其他元素 </p><p>匹配当前获取焦的元素 </p><p>匹配所有正在执行动画的元素 </p><p>选择由文档URI的格式化识别码表示的目标元素 </p><p>$("li:lt(3)")获取索引小于3的所有<li>元素 </p><p>$("li:not(li:eq(3))")获取除索引为3外的所有<li>元素 </p><p>$("input:focus")匹配当前获取焦的<input>元素 </p><p>$("div:not(:animated)")匹配当前没有执行动画的<div>元素 </p><p>若URI为example./#foo，则$("div:target")将获取<divid="foo">元素 </p><p>$("li:contains('js')")获取内容中含“js”的<li>元素 </p><p>$("li:empty")获取内容为空的<li>元素 </p><p>$("li:has('a')")获取内容中含<a>元素的所有<li>元素 </p><p>$("li:parent")选取带有子元素或包含文本的li元素 </p><p>1 </p><p>:contains(text) </p><p>获取内容包含text文本的元素 </p><p>:empty </p><p>:has(selector) </p><p>:parent </p><p>获取内容为空的元素 </p><p>获取内容包含指定选择器的元素 </p><p>选取带有子元素或包含文本的元素 </p><p> :hien </p><p>:visible </p><p>3.属性选择器 </p><p>获取所有隐藏元素 </p><p>获取所有可见元素 </p><p>$("li:hien")获取所有隐藏的<li>元素 </p><p>$("li:visible")获取所有可见的<li>元素 </p><p>jQuery中还了根据元素的属性获取指定元素的。例如，含有class属性值为current的<div>元素。常用的属性选择器如表3所示。 </p><p>表3属性选择器。 </p><p>选择器 </p><p>[attr] </p><p>[attr=value] </p><p>功能描述 </p><p>获取具有指定属性的元素 </p><p>获取属性值等于value的元素 </p><p>获取属性值不等于value的元素 </p><p>示例 </p><p>$("div[class]")获取含有class属性的所有<div>元素 </p><p>$("div[class='current']")获取class等于current的所有<div>元素 </p><p>$("div[class!='current']")获取class不等于current的所有<div>元素 </p><p>[attr!=value] </p><p>[attr^=value] </p><p>[attr$=value] </p><p>获取属性值以$("div[class^='box']")获取class属性值以value始的元素 box始的所有<div>元素 </p><p>获取属性值以value结尾的元素 </p><p>获取属性值包含value的元素 </p><p>获取元素的属性值包含一个value，以空格分隔 </p><p>$("div[class$='er']")获取class属性值以er结尾的所有<div>元素 </p><p>$("div[class*='-']")获取class属性值中含有“-”符号的所有<div>元素 </p><p>$("div[class~='box']")获取class属性值等于“box”或通过空格分隔并含有box的<div>元素，如“tbox” </p><p>$("input[id][name$='usr']")获取同时含有id属性和属性值以usr结尾的name属性的<input>元素 </p><p>[attr*=value] </p><p>[attr~=value] </p><p>[attr1][attr2]...[attrN] </p><p>获取同时拥有多个属性的元素 </p><p>4.子元素选择器 </p><p>利用子元素选择器可以对子元素进行筛选，常用的如表4所示。 </p><p>表4子元素选择器 </p><p>选择器 </p><p> </p><p>功能描述 </p><p>2 :nth-child(index/even/o/公式) </p><p>:first-child </p><p>:last-child </p><p>:only-child </p><p> </p><p>索引index默认从1始，匹配指定index索引、偶数、奇数、或符合指定公式（如2n，n默认从0始）的子元素 </p><p>获取个子元素 </p><p>获取最后一个子元素 </p><p>如果当前元素的子元素，则匹3 :nth-last-child(index/even/o/公式) </p><p>:nth-of-type(index/even/o/公式)) </p><p>:first-of-type </p><p> </p><p>配 </p><p>选择所有它们父元素的第n个子元素。计数从最后一个元素始到个 </p><p>选择同属于一个父元素之下，并且标签名相同的子元素中的第n个子元素 </p><p>选择所有相同的元素名称的个子4 :last-of-type </p><p>:only-of-type </p><p>:nth-last-of-type(index/even/o/公式) </p><p> </p><p>元素 </p><p>选择所有相同的元素名称的最后一个子元素 </p><p>选择所有没有兄弟元素，且具有相同的元素名称的元素 </p><p>选择属于父元素的特定类型的第n个子元素，计数从最后一个元素到个 </p><p>5 5.表单选择器 </p><p>jQuery还了针对表单元素的选择器，用来方便表单发，如表5所示。 </p><p>表5表单选择器 </p><p>选择器 </p><p>:input </p><p>:text </p><p>:radio </p><p>:submit </p><p>:reset </p><p>:image </p><p>:button </p><p>:file </p><p>:hien </p><p>:enabled </p><p>:disabled </p><p>:checked </p><p>:selected </p><p>功能描述 </p><p>获取页面中的所有表单元素，包含<select>以及<textarea>元素 </p><p>选取页面中的所有文本框 </p><p>选取所有的单选按钮 </p><p>获取submit提交按钮 </p><p>获取reset重置按钮 </p><p>获取type="image"的图像域 </p><p>获取button按钮，包括<button></button>和type="button" </p><p>获取type="file"的文件域 </p><p>获取隐藏表单项 </p><p>获取所有可用表单元素 </p><p>获取所有不可用表单元素 </p><p>获取所有选中的表单元素，主要针对radio和checkbox </p><p>获取所有选中的表单元素，主要针对select </p><p>:password </p><p>选取所有的密码框 </p><p>:checkbox </p><p>选取所有的复选框 </p><p>需要注意的，$("input")与$(":input")虽然都可以获取表单项，但它们表达的含义有一定的区别，前者仅能获取表单标签<input>的控件，后者则可以同时获取页面中所有的表单控件，包括表单标签<select>以及<textarea>的控件。 </p><p> 6 </p><p><p></p></img></p></div></article></div><div class="torson info"><div><span>本文发布于:2023-06-21，感谢您对本站的认可！</span></div><div><span>本文链接:</span><a href="http://torson.com.cn/chengxu/1687319607a1855.html" title="jQuery选择器及用法大全">http://torson.com.cn/chengxu/1687319607a1855.html</a></div><div><span>版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。</span></div></div><span class="tag"><i class="iconfont icon-discount" style="font-size:12px;font-weight:bold;opacity:.7;">本文标签：</i><a href="/tag/12.html" target="_blank">jquery表单验证</a></span></div><div class="torson post_comments" id="comments"><div id="comt-respond" class="commentpost"><h4>发布评论 <span><a rel="nofollow" id="cancel-reply" href="#comment" style="display:none;"><small>取消回复</small></a></span></h4><form action="/comment/create/1855.html?safe_token=A8tpYm7fXTSHdOFe_2FFSxV_2BBBTPpouMPuqSvns6OUG2NXhD76zqq0fGGuwILq_2BNcPvXQTkaP4hTPBHcDV9Q1hRw_3D_3D" method="post" name="saypl" id="frmSumbit"><input type="hidden" name="doctype" value="1" /><input type="hidden" name="quotepid" value="0" /><div id="comment-tools"><div class="torson tools_text"><textarea placeholder="请在这里留言..." name="message" id="txaArticle" class="text input-block-level comt-area" cols="50" rows="4" tabindex="5">