08-jQuery属性节点与属性的定义、区别、操作（attr、removeAttr、prop、removeProp）、如何选择attr、removeAttr

最新推荐文章于 2024-08-02 07:55:38 发布

不及你笑靥如花

最新推荐文章于 2024-08-02 07:55:38 发布

阅读量838

点赞数 1

分类专栏： jquery 文章标签： html jquery

本文链接：https://blog.csdn.net/qq_43775721/article/details/112886661

版权

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

08-jQuery属性节点的操作与属性的操作

一、属性节点与属性的定义以及区别
二、attr、removeAttr对属性节点的操作
- (1)、attr对属性节点的操作
- (2)、removeAttr对属性节点的操作
三、prop、removeProp对属性节点以及属性的操作
四、如何选择attr、removeAttr

一、属性节点与属性的定义以及区别

属性：对象身上保存的变量就是属性，比如对象中的name，sex这些都是属性。
属性节点：在html标签中添加的属性就是属性节点。可以通过打开浏览器的控制台sources查看attribute里面的属性。
区别：属性可以任意定义，而属性节点则不可，属性节点只存在于DOM元素中

二、attr、removeAttr对属性节点的操作

(1)、attr对属性节点的操作

$(“selector”).attr(参数1, 参数2);

参数1（必选）：代表获取属性节点的值
参数2（可选）：代表设置属性节点的值
作用：获取或者设置属性节点的值

注意：1、获取：无找到多少个元素，只会返回第一个元素指定属性节点的值
2、设置：a、设置属性节点存在，无找到多少个元素，就设置多少元素
b、设置属性节点不存在，则创建新的属性节点
代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery的attr方法</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            console.log($("span").attr("class"));
            $("span").attr("class", "box");
        });
    </script>
</head>

<body>
    <span class="span1" name="span1"></span>
    <span class="span2" name="span2"></span>
</body>

</html>

在这里插入图片描述

(2)、removeAttr对属性节点的操作

$(“selector”).attr(参数1 参数2 参数3…);

参数：删除的属性节点
作用：会删除找到所有元素的属性节点

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery的attr方法</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            $("span").removeAttr("class name")
        });
    </script>
</head>

<body>
    <span class="span1" name="span1"></span>
    <span class="span2" name="span2"></span>
</body>

</html>

在这里插入图片描述

三、prop、removeProp对属性节点以及属性的操作

(1)、prop对属性节点以及属性的操作

用法一：获取属性节点或属性与attr类似

$(“selector”).prop(参数);

参数（必选）：代表获取属性节点或属性的值
作用：获取或者设置属性节点或属性的值
注意：1、获取：无找到多少个元素，只会返回第一个元素指定属性节点的值
代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery的prop方法</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            console.log($("span").prop("class"));
        });
    </script>
</head>

<body>
    <span class="span1" name="span1"></span>
    <span class="span2" name="span2"></span>
</body>

</html>

在这里插入图片描述

用法二：设置属性节点或属性

$(“selector”).eq(数字).prop(参数1，参数2);

参数1：代表获取属性节点或属性的值
参数2：代表设置属性节点或属性的值
eq(数字)：数字表示获取到的众多元素中的第几个元素，从0开始计算
作用：获取或者设置属性节点或属性的值

注意：设置属性节点或属性不存在，则创建新的属性节点或属性

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery的prop方法</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            $("span").eq(1).prop("demo", "123");
        });
    </script>
</head>

<body>
    <span class="span1" name="span1"></span>
    <span class="span2" name="span2"></span>
</body>

</html>

在这里插入图片描述

(2)、removeProp对属性的操作与attr类似

$(“selector”).removeProp(参数1 参数2 参数3…);

参数：删除的属性
作用：会删除找到所有元素的属性
注意：removeProp 只针对属性，不能操作属性节点
代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery的prop方法</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
           $("span").eq(1).prop("demo", "123");
            $("span").removeProp("demo");
        });
    </script>
</head>

<body>
    <span class="span1" name="span1"></span>
    <span class="span2" name="span2"></span>
</body>

</html>

四、如何选择attr、removeAttr

官方推荐在操作属性节点时具有true和false两个属性的属性节点，如checked, selected或者disabled 使用prop(),其他的使用attr()
代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery的attr与prop方法的选择</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            var attrResult = $("input").attr("checked");
            var propResult = $("input").prop("checked");
            console.log("attr:" + attrResult);
            console.log("prop:" + propResult);
        })
    </script>
</head>

<body>
    <input type="checkbox" checked ">
</body>
</html>