jQuery基础：prop（）与attr（）的区别

1、结论：

处理HTML本身的属性，使用prop（）
处理HTML自定义属性，使用attr（）

2、对待属性值为true 或者false类的元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" id="text" checked="true" />
</body>
<script src="libs/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        var btn = $("#text");
        var str = btn.attr("checked");
        var str2 = btn.prop("checked");
        console.log(str2); // true
        console.log(str);  //checked
    });
</script>
</html>

如上图所示、返回值不一样！

3、获取自定义属性？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box" name="bb">div</div>
</body>
<script src="libs/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        var btn = $("#box");
        var str1 = btn.attr("name");
        var str2 = btn.prop("name");
        console.log(str1); //bb
        console.log(str2); //undefined

        // 使用attr可以获取自定义属性
        // 使用prop无法获取自定义属性
    });
</script>
</html>

posted on 2016-10-05 19:31 花雨伞阅读(162) 评论(0) 收藏举报