当前位置:首页 > Web开发 > 正文

jQuery选择器

2024-03-31 Web开发

标签:

选择器实例拔取
*   $("*")   所有元素  
#id   $("#lastname")   id="lastname" 的元素  
.class   $(".intro")   class="intro" 的所有元素  
.class,.class   $(".intro,.demo")   class 为 "intro" 或 "demo" 的所有元素  
element   $("p")   所有 <p> 元素  
el1,el2,el3   $("h1,div,p")   所有 <h1>、<div> 和 <p> 元素  
           
:first   $("p:first")   第一个 <p> 元素  
:last   $("p:last")   最后一个 <p> 元素  
:even   $("tr:even")   所有偶数 <tr> 元素,索引值从 0 开始,第一个元素是偶数 (0),第二个元素是奇数 (1),以此类推。  
:odd   $("tr:odd")   所有奇数 <tr> 元素,索引值从 0 开始,第一个元素是偶数 (0),,第二个元素是奇数 (1),以此类推。  
           
:first-child   $("p:first-child")   属于其父元素的第一个子元素的所有 <p> 元素  
:first-of-type   $("p:first-of-type")   属于其父元素的第一个 <p> 元素的所有 <p> 元素  
:last-child   $("p:last-child")   属于其父元素的最后一个子元素的所有 <p> 元素  
:last-of-type   $("p:last-of-type")   属于其父元素的最后一个 <p> 元素的所有 <p> 元素  
:nth-child(n)   $("p:nth-child(2)")   属于其父元素的第二个子元素的所有 <p> 元素  
:nth-last-child(n)   $("p:nth-last-child(2)")   属于其父元素的第二个子元素的所有 <p> 元素,从最后一个子元素开始计数  
:nth-of-type(n)   $("p:nth-of-type(2)")   属于其父元素的第二个 <p> 元素的所有 <p> 元素  
:nth-last-of-type(n)   $("p:nth-last-of-type(2)")   属于其父元素的第二个 <p> 元素的所有 <p> 元素,从最后一个子元素开始计数  
:only-child   $("p:only-child")   属于其父元素的独一子元素的所有 <p> 元素  
:only-of-type   $("p:only-of-type")   属于其父元素的特定类型的独一子元素的所有 <p> 元素  
           
parent > child   $("div > p")   <div> 元素的直接子元素的所有 <p> 元素  
parent descendant   $("div p")   <div> 元素的儿女的所有 <p> 元素  
element + next   $("div + p")   每个 <div> 元素相邻的下一个 <p> 元素  
element ~ siblings   $("div ~ p")   <div> 元素同级的所有 <p> 元素  
           
:eq(index)   $("ul li:eq(3)")   列表中的第四个元素(index 值从 0 开始)  
:gt(no)   $("ul li:gt(3)")   列举 index 大于 3 的元素  
:lt(no)   $("ul li:lt(3)")   列举 index 小于 3 的元素  
:not(selector)   $("input:not(:empty)")   所有不为空的输入元素  
           
:header   $(":header")   所有标题元素 <h1>, <h2> ...  
:animated   $(":animated")   所有动画元素  
:focus   $(":focus")   当前具有焦点的元素  
:contains(text)   $(":contains(‘Hello‘)")   所有包罗文本 "Hello" 的元素  
:has(selector)   $("div:has(p)")   所有包罗有 <p> 元素在其内的 <div> 元素  
:empty   $(":empty")   所有空元素  
:parent   $(":parent")   匹配所有含有子元素或者文本的父元素。  
:hidden   $("p:hidden")   所有隐藏的 <p> 元素  
:visible   $("table:visible")   所有可见的表格  
:root   $(":root")   文档的根元素  
:lang(language)   $("p:lang(de)")   所有 lang 属性值为 "de" 的 <p> 元素  
           
[attribute]   $("[href]")   所有带有 href 属性的元素  
[attribute=value]   $("[href=‘default.htm‘]")   所有带有 href 属性且值即是 "default.htm" 的元素  
[attribute!=value]   $("[href!=‘default.htm‘]")   所有带有 href 属性且值不即是 "default.htm" 的元素  
[attribute$=value]   $("[href$=‘.jpg‘]")   所有带有 href 属性且值以 ".jpg" 结尾的元素  
[attribute|=value]   $("[title|=‘Tomorrow‘]")   所有带有 title 属性且值即是 ‘Tomorrow‘ 或者以 ‘Tomorrow‘ 后跟连接符作为开头的字符串  
[attribute^=value]   $("[title^=‘Tom‘]")   所有带有 title 属性且值以 "Tom" 开头的元素  
[attribute~=value]   $("[title~=‘hello‘]")   所有带有 title 属性且值包罗单词 "hello" 的元素  
[attribute*=value]   $("[title*=‘hello‘]")   所有带有 title 属性且值包罗字符串 "hello" 的元素  
[name=value][name2=value2]   $( "input[id][name$=‘man‘]" )   带有 id 属性,并且 name 属性以 man 结尾的输入框  
           
:input   $(":input")   所有 input 元素  
:text   $(":text")   所有带有 type="text" 的 input 元素  
:password   $(":password")   所有带有 type="password" 的 input 元素  
:radio   $(":radio")   所有带有 type="radio" 的 input 元素  
:checkbox   $(":checkbox")   所有带有 type="checkbox" 的 input 元素  
:submit   $(":submit")   所有带有 type="submit" 的 input 元素  
:reset   $(":reset")   所有带有 type="reset" 的 input 元素  
:button   $(":button")   所有带有 type="button" 的 input 元素  
:image   $(":image")   所有带有 type="image" 的 input 元素  
:file   $(":file")   所有带有 type="file" 的 input 元素  
:enabled   $(":enabled")   所有启用的元素  
:disabled   $(":disabled")   所有禁用的元素  
:selected   $(":selected")   所有选定的下拉列表元素  
:checked   $(":checked")   所有选中的复选框选项  
.selector   $(selector).selector   在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器  
:target   $( "p:target" )   选择器将选中ID和URI中一个格局化的标识符相匹配的<p>元素  

转载:https://www.runoob.com/jquery/jquery-ref-selectors.html

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/30119.html