jQuery属性操作与区别

本文主要是说明jQuery 三个属性prop()、attr()、data()的用法与区别
这三个属性都可以用来获取普通的属性，区别：
1.prop（）更适用于操作表单属性，attr（）更适合操作自定义属性；
2.prop（）获取地址是绝对路径，需要解码，prop（）不能获取自定义属性。
具体演示如下：

<div title="天气"></div>
    <input type="checkbox" checked="checked">
    <img src="images/01.jpg" alt="">
    <div class="box" data-a = '1'></div>
    <script>
        console.log($('div').prop('title'))  //天气
        console.log($('div').attr('title')) //天气
        console.log($('div').data('title')) // undefined

        console.log($('input').prop('checked'))  //true
        console.log($('input').attr('checked')) //checked
        console.log($('input').data('checked')) // undefined

        console.log($('img').prop('src'))  // 得到乱码，需要解码 file:///D:/%E7%BB%83%E4%B9%A0/02Javascript/%E7%BB%83%E4%B9%A0/11.27jQuery%20%E5%BE%AE%E5%8D%9A%E6%A1%88%E4%BE%8B/images/01.jpg
        console.log($('img').attr('src')) //images/01.jpg
        console.log($('img').data('src')) // undefined

        var a = $('img').prop('src') // 解码过程
        c = encodeURI(a)
        d = decodeURI(decodeURI(c))
        console.log(d)  //prop().html:29 file:///D:/练习/02Javascript/练习/11.27jQuery 微博案例/images/01.jpg

        console.log($('.box').prop('data-a'))  //undefined
        console.log($('.box').attr('data-a')) //1
        console.log($('.box').data('data-a')) // undefined
        
        $('div').data('name', 'zs')  //用data临时存数据，不会改变DOM结构，但是能获取数值
        console.log($('div').data('name'))
    </script>