首页 > Web开发 > 详细

jQuery基础:prop()与attr()的区别

时间:2016-10-05 21:43:24      阅读:127      评论:0      收藏:0      [点我收藏+]

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>

 

jQuery基础:prop()与attr()的区别

原文:http://www.cnblogs.com/gao-xiong/p/5932686.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!