jQuery元素查找方式
Posted 八颗
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery元素查找方式相关的知识,希望对你有一定的参考价值。
jQuery常用的元素查找方法总结
$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div") 选择所有的div标签元素,返回div元素数组
$(".myClass") 选择使用myClass类的css的所有元素
$("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")
选取一个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 代码:
<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" /> ]
2. $("A>B") 查找A元素下面的直接子节点
例子:匹配表单中所有的子级input元素。
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. $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
例子:匹配所有跟在 label 后面的 input 元素
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" /> ]
4. $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点
例子:找到所有与表单同辈的 input 元素
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" /> ]
以上是关于jQuery元素查找方式的主要内容,如果未能解决你的问题,请参考以下文章