Jquery选择器全面总结(实例)

发布时间:2019-09-22编辑:脚本学堂
本文详细介绍了jquery选择器的用法,包括层叠选择器、基本过滤选择器、内容过滤选择器、属性过滤选择器等,有需要的朋友参考下。
本节是 Jquery选择器全面总结(实例) 部分的内容。
8,表单元素过滤选择器: 
 

复制代码 代码示例:
$(":enabled") 选择所有的可操作的表单元素 
$(":disabled")            选择所有的不可操作的表单元素 
$(":checked")            选择所有的被checked的表单元素 
$("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 代码: 
<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" /> ]