Jquery之表单过滤器之$("a b")--$("a>b")--$("a+b")--$("a~b")--（十六）




$( "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"  /> ]