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

Love The Way You Lie 2022-06-16 08:39 220阅读 0赞

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

获取：
        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()获取动态节点的和静态节点的差异是一样的。