这是我参与更文挑战的第4天，活动详情查看： 更文挑战
前言
这几天在翻我的笔记的时候，看到了一个很不起眼的知识点，html有几个属性值是布尔类型，这不禁让我想起了几年前犯的错误，当时还在使用jquery。
一个很简单的错误
当时我是这么写的
<input type="text" disabled="false" class="username">
页面访问的时候，这个输入框并没有如我所愿“取消被禁用”。但是我知道只要把disabled属性删掉就行了，但是我还是百思不得其解，为什么disabled设为false不起作用呢。在翻过资料之后才知道，其实存在这个属性即表示这个属性起作用，同样的属性还有readonly、checked、selected、autofocus
attribute与property
相信大家对这两个单词都不陌生，但是为什么要拿出来比较呢？他们两个都可以翻译成属性。在jquery1.6的时候，引进了$.prop()和$.attr()区分开来。对应的就是attribute与property的缩写。我们先来说说这两个方法的区别，很多教程都简单的说了一下：prop()方法应该用于检索属性值，如需检索 HTML 属性，请使用 attr()方法代替。
其实没有说清楚什么是属性值，什么是HTML属性
attr()与prop()
其实属性值就是js中对象中的属性值，这里的对象其实是DOM对象。在上面的错误例子中，我说过这几个属性是布尔类型，但是很显然在html属性中似乎体现不出来。但是用这两个方法就能看出区别
$('.username').attr('disabled') //disabled
$('.username').prop('disabled') //true
使用attr属性取这样布尔类型的属性的值是HTML文档字面量值，我们在来看一下另外一个例子
<a href="#" class="link"></a>
<script>
console.log($('.link').attr('href')) //#
console.log($('.link').prop('href')) //file:///C:/Users/immortal/Desktop/demo.html#
</script>
对于src属性，attr取得是也是HTML文档字面量值，而prop取得是实际的url地址
通过这些例子我们知道，其中使用上的区别，原因是因为最开始所说的prop取得是DOM对象的值吗，而attr取得是html的属性值。
修改或添加一个自定义属性
js或者jq都有方法修改一个属性，但是我们要注意标准的Dom对象的修改会修改html的属性，反之亦然，除value属性之外，它是单向的
<a href="#" class="link" value="test"></a>
$('.username').prop('value','1111')
$('.username').attr('value') //test
$('.username').attr('value','1111')
$('.username').prop('value') //1111
虽然可能取值不如你的预期，但是他们在页面上都会正确的显示为1111 这里都是用Jq来举例子 使用js操作DOM对象和设置HTML属性效果一样。
我们来看看新增一个非标准属性
毫无疑问，非标准的属性无论是操作DOM对象还是Html属性都无法互相映射，但是为了防止未来Html标准的更新，不让新增的非标准对象引起意料之外的问题。我们应该使用data-前缀来设置非标准属性,而且新增data-属性能加入DOM对象的dataset属性中
$('.username').attr('data-img','111')
$('.username').prop('dataset')//DOMString {img: "111"}
document.querySelector('.username').dataset //DOMString {img: "111"}
$('.username').data('img') //111 jq的data方法能轻松取到img
DOM对象和Html属性
我们来归纳一下他们的区别
- 在文章开头的错误中我们知道了Html属性只能为字符串或者null(没有该属性)，而DOM对象的值可以为任何类型
- DOM对象或者Html属性都可以自由增加或删减，但是要注意标准属性中value单向的，非标准属性使用data-前缀，可以加入dataset属性中
