Jquery操作元素属性方法总结（attr()、prop()）

最新推荐文章于 2022-10-21 13:01:51 发布

xinghuo0007

最新推荐文章于 2022-10-21 13:01:51 发布

阅读量718

点赞数

分类专栏： jquery笔记文章标签： jquery

本文链接：https://blog.csdn.net/xinghuo0007/article/details/71598184

版权

jquery笔记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

知识点一：获得、设置元素的属性

获取：
    attr("属性名") 获得属性名对应的属性值，都可以使用
    prop("属性名") 获得属性名对应的属性值，一般使用在获取属性值为两种的情况，另外也
    可以用在获取新建节点的属性值
设置：
    attr("属性名","属性值") 设置属性名对应的属性值，都可以使用
    prop("属性名","属性值") 设置属性名对应的属性值，

注意：这attr和prop是有区别的,下面使用案例来说明：

测试一：



<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.2.1.js"></script>
</head>
<body>
    <input id="test" type="checkbox" checked="checked" name="我是复选框"/>
    <br/>
    <script>
        var input = $("#test");
        //使用attr()获得属性
        var $attr_checked =input .attr("checked");
        var $attr_name=input.attr("name");

        //使用prop()获得属性
        var $prop_checked =input .prop("checked");
        var $prop_name=input.prop("name");

        //下面输出：
        document.write("$attr_checked="+$attr_checked +"..."+"$attr_name="+$attr_name+"<br/>");
        document.write("$prop_checked="+$prop_checked +"..."+"$prop_name="+$prop_name+"<br/>");
    </script>
</body>
</html>

结果为：

$attr_checked=checked...$attr_name=我是复选框
$prop_checked=true...$prop_name=我是复选框

结论一：

  1.使用attr()和prop()都能获取到元素节点的属性值。
  2.使用attr()和prop()获得name属性的值都是一样的。
  3.使用pror()获得checked属性的true，而使用attr()获得使用checked；

猜想：如果不设置input的checked属性，获得attr()和prop()会获取什么呢？

我们删除input标签的checked属性，并且增加了使用prop()获得value属性值，代码如下：

说明：这里input并没有设置value属性；

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.2.1.js"></script>
</head>
<body>
    <input id="test" type="checkbox"  name="我是复选框"/>
    <br/>
    <script>
        var input = $("#test");
        //使用attr()获得属性
        var $attr_checked =input .attr("checked");
        var $attr_name=input.attr("name");

        //使用prop()获得属性
        var $prop_checked =input .prop("checked");
        var $prop_name=input.prop("name");
        var $prop_value=input.prop("value");

        //下面输出：
        document.write("$attr_checked="+$attr_checked +"..."+"$attr_name="+$attr_name+"<br/>");
        document.write("$prop_checked="+$prop_checked +"..."+"$prop_name="+$prop_name+"....$prop_value="+$prop_value+"<br/>");
    </script>
</body>
</html>

结果为：

$attr_checked=undefined...$attr_name=我是复选框
$prop_checked=false...$prop_name=我是复选框....$prop_value=on

总结二：

1.我们可以看出attr()获得没有设置checked属性值的结果为undefined，而prop()获得的是false;这样我么可以总结，当attr()获得没有设置属性值的属性是，我们将会得到undefined，而使用prop获取没有定义的属性且属性值只有一种情况的时候，得到的值为false

2.使用prop()获取普通属性值（属性值可以是很多个的属性），得到的是on

测试二：我们动态使用jquery创建节点，使用attr()、prop()获取其属性

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.2.1.js"></script>
</head>
<body>


    <script>
            //jQuery创建节点
            var input = $("<input type='checkbox' value='测试' name='我们复选框' checked='checked'/>");
            //使用attr()获取节点属性
            var $attr_name = input.attr("name");
            var $attr_value=input.attr("value");
            var $attr_checked = input.attr("checked");
            //使用prop()获取节点属性
            var $prop_name = input.prop("name");
            var $prop_value=input.prop("value");
            var $prop_checked = input.prop("checked");

            //下面输出：
            document.write("$attr_checked="+$attr_checked +"..."+"$attr_name="+$attr_name+"...$attr_value="+$attr_value+"<br/>");
            document.write("$prop_checked="+$prop_checked +"..."+"$prop_name="+$prop_name+"....$prop_value="+$prop_value+"<br/>");
    </script>
</body>
</html>

结果为：

$attr_checked=checked...$attr_name=我们复选框...$attr_value=测试
$prop_checked=true...$prop_name=我们复选框....$prop_value=测试

总结三：

1.我们可以看出使用attr()和prop()都可以获取动态创建节点的属性
2.attr()和prop()获取动态节点的和静态节点的差异是一样的。

xinghuo0007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery操作元素属性方法总结（attr()、prop()）

知识点一：获得、设置元素的属性获取： attr("属性名") 获得属性名对应的属性值，都可以使用 prop("属性名") 获得属性名对应的属性值，一般使用在获取属性值为两种的情况，另外也可以用在获取新建节点的属性值设置： attr("属性名","属性值") 设置属性名对应的属性值，都可以使用 prop("属性名","属性值") 设置属性名对应的属性值，注
复制链接

扫一扫

专栏目录