juqery 学习之三 选择器 层级 基本(2)

Matches all child elements specified by child of elements specified by parent.

返回值

Array<Element>

参数

parent (Selector) : 任何有效选择器

child (Selector) : 用以匹配元素的选择器,并且它是第一个选择器的子元素

示例

匹配表单中所有的子级input元素。

HTML 代码:

<form>
  <label>Name:</label>
  <input />
  <fieldset>
      <label>Newsletter:</label>
      <input />
 </fieldset>
</form>
<input />

jQuery 代码:

$("form > input")

结果:

[ <input /> ]


---------------------------------------------------------------------------------------
prev + next

匹配所有紧接在 prev 元素后的 next 元素

Matches all next elements specified by next that are next to elements specified by prev.

返回值

Array<Element>

参数

prev (Selector) : 任何有效选择器

next (Selector) :一个有效选择器并且紧接着第一个选择器

示例

匹配所有跟在 label 后面的 input 元素

HTML 代码:

<form>
  <label>Name:</label>
  <input />
  <fieldset>
      <label>Newsletter:</label>
      <input />
 </fieldset>
</form>
<input />

jQuery 代码:

$("label + input")

结果:

[ <input />, <input /> ]


---------------------------------------------------------------------------------------
prev ~ siblings

匹配 prev 元素之后的所有 siblings 元素

Matches all sibling elements after the "prev" element that match the filtering "siblings" selector.

返回值

Array<Element>

参数

prev (Selector) : 任何有效选择器

siblings (Selector) : 一个选择器,并且它作为第一个选择器的同辈

示例

找到所有与表单同辈的 input 元素

HTML 代码:

<form>
  <label>Name:</label>
  <input />
  <fieldset>
      <label>Newsletter:</label>
      <input />
 </fieldset>
</form>
<input />

jQuery 代码:

$("form ~ input")

结果:

[ <input /> ]

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdfpgj.html