jquery获取子元素属性

原创

mob64ca12f8a724 2023-09-03 18:34:33 ©著作权

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

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

jQuery获取子元素属性

在使用jQuery进行前端开发的过程中，经常会遇到需要获取子元素属性的情况。jQuery提供了一系列便捷的方法来获取子元素的属性，以满足开发者的需求。本文将介绍如何使用jQuery获取子元素的属性，并提供一些代码示例。

1. 获取子元素的属性

要获取子元素的属性，首先需要通过选择器选取到对应的子元素。jQuery提供了多种选择器，如id选择器、class选择器、标签选择器等。下面是一些常用的选择器示例：

1.1 id选择器

使用id选择器可以选取具有指定id的子元素。例如，对于以下HTML代码：

<div id="parent">
    <span id="child">子元素</span>
</div>

可以使用以下代码选取到具有id为child的子元素：

var child = $("#child");

1.2 class选择器

使用class选择器可以选取具有指定class的子元素。例如，对于以下HTML代码：

<div class="parent">
    <span class="child">子元素</span>
</div>

可以使用以下代码选取到具有class为child的子元素：

var child = $(".child");

1.3 标签选择器

使用标签选择器可以选取指定标签的子元素。例如，对于以下HTML代码：

<div>
    <span>子元素</span>
</div>

可以使用以下代码选取到所有的span子元素：

var child = $("span");

2. 获取子元素的属性值

选取到子元素后，可以使用jQuery提供的方法来获取子元素的属性值。下面是一些常用的方法示例：

2.1 attr()方法

使用attr()方法可以获取子元素的指定属性值。例如，对于以下HTML代码：

<div id="parent">
    <span id="child" data-name="John">子元素</span>
</div>

可以使用以下代码获取子元素的data-name属性值：

var name = $("#child").attr("data-name");

2.2 prop()方法

使用prop()方法可以获取子元素的指定属性值。与attr()方法不同的是，prop()方法获取的是DOM属性值，而不是HTML属性值。例如，对于以下HTML代码：

<input type="checkbox" checked="checked">

可以使用以下代码获取checkbox的checked属性值：

var checked = $("input[type='checkbox']").prop("checked");

2.3 val()方法

使用val()方法可以获取子元素的值。例如，对于以下HTML代码：

<input type="text" value="Hello World">

可以使用以下代码获取input的值：

var value = $("input[type='text']").val();

3. 示例代码

下面是一个完整的示例代码，演示了如何使用jQuery获取子元素的属性：

<!DOCTYPE html>
<html>
<head>
    <script src="
</head>
<body>
    <div id="parent">
        <span id="child" data-name="John">子元素</span>
    </div>

    <script>
        // 使用attr()方法获取子元素的属性值
        var name = $("#child").attr("data-name");
        console.log(name);  // 输出：John

        // 使用prop()方法获取子元素的属性值
        var checked = $("input[type='checkbox']").prop("checked");
        console.log(checked);  // 输出：true

        // 使用val()方法获取子元素的值
        var value = $("input[type='text']").val();
        console.log(value);  // 输出：Hello World
    </script>
</body>
</html>