jQuery 选择器div下div

原创

mob64ca12df9869 2024-08-15 07:23:49 ©著作权

文章标签 jQuery 选择器 HTML 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12df9869的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery选择器：如何选择div下的div

在前端开发中，jQuery是一个非常流行的JavaScript库，可以简化DOM操作。对于刚入行的小白来说，理解 jQuery 选择器非常重要。本篇文章将通过一个简单的流程和详细的步骤，来教会你如何用 jQuery 选择 div 下的 div。

流程概述

我们可以通过以下步骤实现这个目标：

步骤	动作	描述
1	引入 jQuery	在 HTML 文件中引入 jQuery 库
2	编写 HTML 结构	创建包含 div 的 HTML 结构
3	编写 jQuery 代码	使用 jQuery 选择器查找 div 下的 div
4	测试代码	检查选择器是否正确

第一步：引入 jQuery

在你的 HTML 文件的 <head> 中加入 jQuery 库，这样你就能在整个文档中使用 jQuery 的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery选择器示例</title>
    <!-- 引入 jQuery 库 -->
    <script src="
</head>
<body>

第二步：编写 HTML 结构

我们需要一些 HTML 元素，以便能够选择到“div 中的 div”。下面是一个简单的示例：

    <div id="parent">
        <div class="child">子 div 1</div>
        <div class="child">子 div 2</div>
        <div class="child">子 div 3</div>
    </div>
</body>
</html>

在这个示例中，#parent 是一个父 div，它包含三个子 div，它们都具有相同的类名 child。

第三步：编写 jQuery 代码

现在，让我们编写 jQuery 代码来选择父 div 下的子 div。我们将使用 $(selector) 来选择元素。

<script>
    $(document).ready(function() {
        // 选择父 div
        var parentDiv = $('#parent'); // 根据 ID 选择父 div
        // 选择父 div 下的所有子 div
        var childDivs = parentDiv.children('.child'); // .children() 获取所有直接子元素

        // 给每个子 div 设置背景颜色
        childDivs.css('background-color', 'lightblue'); // 使用 .css() 设置样式
    });
</script>

在这段代码中：

$(document).ready(function() {...}); 确保 DOM 完全加载后执行代码。
$('#parent') 选择 ID 为 parent 的 div。
parentDiv.children('.child') 获取父 div 下所有带有类 child 的直接子 div。
childDivs.css('background-color', 'lightblue'); 将所有子 div 的背景颜色 Changed 为淡蓝色。