jquery的attr()与prop()方法的区别

最新推荐文章于 2022-06-13 09:48:50 发布

xcmercy

最新推荐文章于 2022-06-13 09:48:50 发布

阅读量378

点赞数 1

分类专栏： JavaScript 文章标签： attr prop

本文链接：https://blog.csdn.net/cccmercy/article/details/81660440

版权

JavaScript 专栏收录该内容

39 篇文章 6 订阅

订阅专栏

结论

对于HTML元素本身就带有的固有属性，处理时使用prop方法。
对于HTML元素自定义属性，处理时使用attr方法。

固有属性指的是HTML标签原生支持的属性，如a标签原生支持的属性有：download、href、hreflang、media、rel、target、type，这些属性是W3C组织确定的，可通过W3School查询.
自定义属性指的是自己为HTML标签定义的属性，如：<a href="#" data-event="delete">删除</a>中的data-event即为自定义属性

使用场景

<body>
    <form>
        <input type="checkbox" name="hobby" value="movie" /> 电影
        <input type="checkbox" name="hobby" value="music" checked="checked" /> 音乐
        <select name="主食">
            <option value="rice">米饭</option>
            <option value="noodles" selected="selected">面条</option>
        </select>
    </form>
    <button id="btn1">测试attr</button>
    <button id="btn2">测试prop</button>

    <script type="text/javascript" src="js/jquery.min.js" ></script>
    // 上述js请改为你本地的
    <script>
        $('#btn1').click(function(){
            console.log($('[value="movie"]').attr('checked')); // undefined
            console.log($('[value="music"]').attr('checked')); // checked
            console.log($('[value="rice"]').attr('selected')); // undefined
            console.log($('[value="noodles"]').attr('selected')); // selected
        });
        $('#btn2').click(function(){
            console.log($('[value="movie"]').prop('checked')); // false
            console.log($('[value="music"]').prop('checked')); // true
            console.log($('[value="rice"]').prop('selected')); // false
            console.log($('[value="noodles"]').prop('selected')); // true
        });
    </script>
</body>

对于checked或者selected属性，请使用prop方法，他返回的是选中状态：true或者false，使用attr方法，返回的是checked或者selected属性的属性值，如果没有添加该属性，返回undefined，如上面的例子。

xcmercy

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery的attr()与prop()方法的区别

使用情景对于HTML元素本身就带有的固有属性，处理时使用prop方法。对于HTML元素自定义属性，处理时使用attr方法。固有属性指的是HTML标签原生支持的属性，如a标签原生支持的属性有：download、href、hreflang、media、rel、target、type，这些属性是W3C组织确定的，可通过W3School查询自定义属性指的是自己未HTML标签定义的属性，如...
复制链接

扫一扫

专栏目录