Jquery使用小结-prop与attr的区别

官方的定义

1、attr() 方法设置或返回被选元素的属性和值。

2、prop() 方法设置或返回被选元素的属性和值。

区别

1、对象不同

prop() 方法用于DOM 属性(JS对象，Element类型)； attr() 方法用于Html属性(DOM元素所对应的文档节点上的属性)。

简单点说就是prop()只能用在dom本来就有的属性，attr()可以用在自定义属性上

<a id="a-test" class="test" data="go"></a>

$("#a-test").prop("class")//test
$("#a-test").prop("data")//undefined
$("#a-test").attr("class")//test
$("#a-test").attr("data")//test

2、属性值不同

attr()设置属性值为字符串；prop() 可以为任意类型

    <button>按钮</button>
    <input type="checkbox" name="" id="" checked="checked">

    $('input').attr('checked')// "checked"
    $('input').prop('checked')  // true
     $('button').on('click',function(){
            console.log(11)
            if ($('input').prop('checked')) {
                $('input').prop('checked',false);
            }else{
                $('input').prop('checked',true);
            }
        })