jquery选择器汇总

怼烎@ 2022-06-01 01:37 137阅读 0赞

jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法

(“\#myELement”)    选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素(“div”) 选择所有的div标签元素，返回div元素数组  
(“.*m**y**C**l**a**s**s*”)选择使用*m**y**C**l**a**s**s*类的*c**s**s*的所有元素("\*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$(“\#myELement,div,.myclass”)

层叠选择器：  
(“*f**o**r**m**i**n**p**u**t*”)选择所有的*f**o**r**m*元素中的*i**n**p**u**t*元素(“\#main > \*”) 选择id值为main的所有的子元素  
(“*l**a**b**e**l*\+*i**n**p**u**t*”)选择所有的*l**a**b**e**l*元素的下一个*i**n**p**u**t*元素节点，经测试选择器返回的是*l**a**b**e**l*标签后面直接跟一个*i**n**p**u**t*标签的所有*i**n**p**u**t*标签元素(“\#prev ~ div”) 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器：  
(“*t**r*:*f**i**r**s**t*”)选择所有*t**r*元素的第一个(“tr:last”) 选择所有tr元素的最后一个  
$(“input:not(:checked) + span”)

过滤掉：checked的选择器的所有的input元素

$(“tr:even”) 选择所有的tr元素的第0，2，4… …个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）

(“*t**r*:*o**d**d*”)选择所有的*t**r*元素的第1，3，5……个元素(“td:eq(2)”) 选择所有的td元素中序号为2的那个td元素  
(“*t**d*:*g**t*(4)”)选择*t**d*元素中序号大于4的所有*t**d*元素(“td:ll(4)”) 选择td元素中序号小于4的所有的td元素  
(“:*h**e**a**d**e**r*”)(“div:animated”)  
内容过滤选择器：

(“*d**i**v*:*c**o**n**t**a**i**n**s*(‘*J**o**h**n*′)”)选择所有*d**i**v*中含有*J**o**h**n*文本的元素(“td:empty”) 选择所有的为空（也不包括文本节点）的td元素的数组  
(“*d**i**v*:*h**a**s*(*p*)”)选择所有含有*p*标签的*d**i**v*元素(“td:parent”) 选择所有的以td为父节点的元素数组  
可视化过滤选择器：

(“*d**i**v*:*h**i**d**d**e**n*”)选择所有的被*h**i**d**d**e**n*的*d**i**v*元素(“div:visible”) 选择所有的可视化的div元素  
属性过滤选择器：

(“*d**i**v*\[*i**d*\]”)选择所有含有*i**d*属性的*d**i**v*元素(“input\[name=’newsletter’\]”) 选择所有的name属性等于’newsletter’的input元素

$(“input\[name!=’newsletter’\]”) 选择所有的name属性不等于’newsletter’的input元素

(“input\[name^=’news’\]”)         选择所有的name属性以’news’开头的input元素("input\[name=′*n**e**w**s*′\]”)选择所有的*n**a**m**e*属性以′*n**e**w**s*′结尾的*i**n**p**u**t*元素(“input\[name\*=’man’\]”) 选择所有的name属性包含’news’的input元素

("*i**n**p**u**t*\[*i**d*\]\[*n**a**m**e*=’man’\]”) 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

子元素过滤选择器：

("*u**l**l**i*:*n**t**h*−*c**h**i**l**d*(2)"),(“ul li:nth-child(odd)”),$(“ul li:nth-child(3n + 1)”)

(“*d**i**v**s**p**a**n*:*f**i**r**s**t*−*c**h**i**l**d*”)返回所有的*d**i**v*元素的第一个子节点的数组(“div span:last-child”) 返回所有的div元素的最后一个节点的数组  
$(“div button:only-child”) 返回所有的div中只有唯一一个子节点的所有子节点的数组

表单元素选择器：

$(“:input”) 选择所有的表单输入元素，包括input, textarea, select 和 button

(“:*t**e**x**t*”)选择所有的*t**e**x**t**i**n**p**u**t*元素(“:password”) 选择所有的password input元素  
(“:*r**a**d**i**o*”)选择所有的*r**a**d**i**o**i**n**p**u**t*元素(“:checkbox”) 选择所有的checkbox input元素  
(“:*s**u**b**m**i**t*”)选择所有的*s**u**b**m**i**t**i**n**p**u**t*元素(“:image”) 选择所有的image input元素  
(“:*r**e**s**e**t*”)选择所有的*r**e**s**e**t**i**n**p**u**t*元素(“:button”) 选择所有的button input元素  
(“:*f**i**l**e*”)选择所有的*f**i**l**e**i**n**p**u**t*元素(“:hidden”) 选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器：

(“:*e**n**a**b**l**e**d*”)选择所有的可操作的表单元素(“:disabled”) 选择所有的不可操作的表单元素  
(“:*c**h**e**c**k**e**d*”)选择所有的被*c**h**e**c**k**e**d*的表单元素(“select option:selected”) 选择所有的select 的子元素中被selected的元素

选取一个 name 为”S\_03\_22″的input text框的上一个td的text值  
$(”input\[@ name =S\_03\_22\]“).parent().prev().text()

名字以”S\_”开始，并且不是以”\_R”结尾的  
(”input\[@ name ^='S\_'\]“).not(”\[@ name=’\_R’\]“)

一个名为 radio\_01的radio所选的值  
$(”input\[@ name =radio\_01\]\[@checked\]“).val();

(“*A**B*”)查找*A*元素下面的所有子节点，包括非直接子节点(“A>B”) 查找A元素下面的直接子节点  
(“*A*\+*B*”)查找*A*元素后面的兄弟节点，包括非直接子节点(“A~B”) 查找A元素后面的兄弟节点，不包括非直接子节点

1.  $(“A B”) 查找A元素下面的所有子节点，包括非直接子节点

例子：找到表单中所有的 input 元素

HTML 代码:

Name: Newsletter:

jQuery 代码:

$(“form input”)  
结果:

\[ , \]

1.  $(“A>B”) 查找A元素下面的直接子节点  
    例子：匹配表单中所有的子级input元素。