jQuery | 父 > 子选择器

在jQuery中，我们可以使用父子选择器来定位某个元素的直接子元素。

父子选择器由父元素和子元素组成，中间用>符号分隔，例如：

$( "parent > child" )

这样就可以选取所有parent元素的直接子元素child。

举个例子，在下面这个HTML结构中：

<ul class="parent">
  <li>子元素1</li>
  <li>子元素2</li>
  <li>子元素3</li>
  <li>子元素4</li>
</ul>

如果我们想获取ul元素下面的所有li元素，可以使用以下代码：

$( "ul.parent > li" )

其中的>符号表示选取ul.parent元素下的直接子元素li，这样就可以避免选取到更深层次的子元素。

更多示例代码：

// 选取所有class为parent下的直接子元素a
$( ".parent > a" )

// 选取所有id为container下的直接子元素div
$( "#container > div" )

// 选取所有class为parent下的直接子元素span，并设置它们的样式
$( ".parent > span" ).css( "color", "red" );

总之，父子选择器在jQuery中是非常常见和实用的一种选择器，可以快速定位某个元素的直接子元素，减少代码中不必要的循环和判断。