Jquery选择子控件">"和" "区别

最新推荐文章于 2023-05-24 20:36:29 发布

原创最新推荐文章于 2023-05-24 20:36:29 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

.NET 专栏收录该内容

201 篇文章

订阅专栏

本文详细介绍了jQuery中两种选择子控件的方法：'parent > child'和'ancestor descendant'。'parent > child'用于选取父元素下的直接子元素，而'ancestor descendant'则可以选取祖先元素的所有后代元素。通过示例代码和HTML结构，展示了这两种选择器在实际应用中的区别和使用场景。

parent > child

概述

在给定的父元素下匹配所有的子元素

参数

parentSelector

任何有效选择器

childSelector

用以匹配元素的选择器，并且它是第一个选择器的子元素

示例

描述:

匹配表单中所有的子级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" /> ]

ancestor descendant

概述

在给定的祖先元素下匹配所有的后代元素

参数

ancestorSelector

任何有效选择器

descendantSelector

用以匹配元素的选择器，并且它是第一个选择器的后代元素

示例

描述:

找到表单中所有的 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" /> ]