children() 选择子元素的方法

本文通过一个简单的HTML页面示例介绍了如何使用CSS来设置基本样式,并利用jQuery来动态改变网页中特定元素的样式属性。示例展示了如何选择特定的子元素并更改其颜色和边框。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

官方文档:

<!DOCTYPE html>
<html>
<head>
<style>
.descendants *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").children("p.1").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (当前元素) 
  <p class="1">p (子)
    <span>span (孙)</span>     
  </p>
  <p class="2">p (子)
    <span>span (孙)</span>
  </p> 
</div>

</body>
</html>
jQuery 提供了非常方便的选择器功能,用于快速定位 HTML 文档中的特定元素。如果需要选择某个元素的**子元素**,可以使用 jQuery 的后代选择器或专门的 `.children()` 方法。 ### 使用后代选择器(`>`) 通过 `>` 符号可以直接选择指定父级下的直接子元素。 ```javascript // 示例:获取所有 <ul> 下的所有直接 <li> 子元素 $("ul > li").css("color", "red"); ``` #### 解释: - 这里的 `"ul > li"` 表示只选择 `<ul>` 元素下的一层子元素 `<li>`,而不是更深层嵌套的 `<li>`。 --- ### 使用 `.children()` 方法 `.children([selector])` 是一种方法形式的选择器,它会返回当前匹配集合中每个元素的直接子元素,并可以选择过滤条件。 ```javascript // 示例:选中第一个 <div> 中所有的直接子元素 span $("div:first").children("span").css("background-color", "yellow"); ``` #### 参数说明: - `[selector]`: 可选参数,用于进一步筛选符合条件的子元素。如果没有提供,则会选择所有直接子元素。 --- ### 区别与对比 | **特性** | 后代选择器 (`>`) | `.children()` 方法 | |--------------------|------------------------------------------|---------------------------------------| | 功能 | CSS 风格语法 | 更接近 JavaScript 编程风格 | | 性能差异 | 略微更快 | 差异通常很小 | | 是否支持动态查询 | 支持静态和简单表达式 | 可以结合更多复杂逻辑 | 无论哪种方式都可以完成任务,根据实际需求和个人习惯选用即可!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值