子元素选择器 (“parent > child”)| jqueryAPI 2.2 中文手册- AspRain.cn 致力于Web开发技术翻译整理

jQuery API 2.2.0

子元素选择器 (“parent > child”)

分类:选择器 > 层次结构选择器

child selector

描述:选择用“parent”指定的元素下面所有的用“child”指定的直接子元素。

加入于: 1.0
jQuery( "parent > child" )

parent: 任何有效的选择器。

child: 一个用来过滤子元素的选择器。

作为一个CSS选择器,子元素组合器受所有的现代web浏览器支持,包括Safari、Firefox、Opera、Chrome以及Internet Explorer 7以之后的版本,但是不受Internet Explorer 6及以前的版本支持。然而,在jQuery中,该选择器(以及别的选择器)能够跨所有支持的浏览器起作用,包括IE6。

该子元素组合器(E > F)可以被想象成一个特殊的形式的后代元素组合器(E F),它只选择第一级的后代元素。

示例

给所有的作为<ul class="topnav">的子元素的列表项目加个边框。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>child demo</title>
  <style>
  body {
    font-size: 14px;
  }
  	</style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<ul class="topnav">
  <li>Item 1</li>
  <li>Item 2
    <ul>
    <li>Nested item 1</li>
    <li>Nested item 2</li>
    <li>Nested item 3</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>
 
<script>
$( "ul.topnav > li" ).css( "border", "3px double red" );
</script>
 
</body>
</html>

演示结果

如果网页上不能运行示例,请点击http://www.asprain.cn/jQueryAPI/child-selector.htm查看示例。

如果你觉得本文档对你有用,欢迎给翻译作者支付宝打赏,支持翻译作者源源不断翻译更多有用的技术文档。