jquery几个层级的总结

最新推荐文章于 2021-07-04 20:30:18 发布

原创最新推荐文章于 2021-07-04 20:30:18 发布 · 503 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #input #api

本文详细介绍了JQuery中四种常用的选择器：$(forminput)选取form下的所有input元素；$(form~input)选取form之后的所有input元素；$(form>input)选取form下直接子元素中的input；$(label+input)选取紧跟在label元素后的第一个input元素。

Jquery API种关于层级介绍一共有四个。觉得挺有用的。下面就总结一下各自的区别：

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none1" />

1、$("form input") ： form下的所有input，包括它的儿子和孙子

结果： <input name="name" />和 <input name="newsletter" />
2、$("form ~ input") ：form标签后的所有input，不管有几个，都包括
结果：<input name="none1" /> <input name="none2" /> <input name="none3" />

3、$("form >input")：fom下的一级input，也就是只包括他的儿子

结果：<input name="name" />

4、$("label + input")：紧接着label 的元素后的第一个input.比如：

     <form>
<label>Name:</label>
<input name="name" />
   <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter1" />

</fieldset>
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter2" />

</fieldset>
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter3" />

</fieldset>
</form>

结果：<input name="name" />