JQuery属性操作之attr()和prop()的区别

代码示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>attr() 和 prop()区别</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            //获取第一个input
            var input_first = $("input").first();
            //undefined 因为attr是获取的这个对象属性节点的值， 而词视没有这个属性节点， 所以输出undefined
            console.log(input_first.attr("style"));
            //输出CSSStyleDeclaration对象， 对于一个DOM对象， 是具有原生的style对象属性的，所以输出了style对象 
            console.log(input_first.prop("style"));
            console.log(document.getElementById("test1").style);

            $("button").click(function () {
                alert(input_first.prop("checked")? "男": "女");
            })
        })
    </script>
</head>
<body>
    <input type="radio" id="test1" name="sex" checked>男
    <input type="radio" id="test2" name="sex">女
    <button>提交</button>
</body>
</html>

什么时候使用attr()， 什么时候使用prop()?

(1). 当只有true或者false时， 使用prop();

(2). 其他则使用attr()

posted @ 2018-08-20 18:47  _杨魏  阅读(269)  评论(0)    收藏  举报