Jquery属性获取——attr()与prop()

今天在项目中使用<select></select>下拉菜单时，使用juery操做，使页面加载完菜单默认选中的值为2,我一开始的操做以下：

<!--html部分-->
<select>
   <option value="1">1</option>
   <option value="2" id="second">2</option>
   <option value="3">3</option>
</select>

/**js部分**/
$("#second").attr("selected","selected");

咋一看好完美，木问题，可是我发如今Safari浏览器中，根本不起做用！！仔细查看一番发现,在Safari浏览器中，属性确实是设置成功了，既value=2的那一项确实是<option value="2" selected="selected">2</option>。那问题出在哪呢？冷静，不要方，万能的stack说只要把attr改为prop就好了，卧槽还真行了，这是啥诡异事件。好吧，咱们须要来研究研究了,不用想，确定是须要祭出官方文档了。

1. attr() ： 获取匹配的元素集合中的第一个元素的属性的值 或 设置每个匹配元素的一个或多个属性。
   • .attr( attributeName )
     • .attr( attributeName )
   • .attr( attributeName, value )
     • .attr( attributeName, value )
     • .attr( attributes )
     • .attr( attributeName, function(index, attr) )
2. prop() ： 获取匹配的元素集中第一个元素的属性（property）值或设置每个匹配元素的一个或多个属性。
   • .prop( propertyName )
     • .prop( propertyName )
   • .prop( propertyName, value )
     • .prop( propertyName, value )
     • .prop( properties )
     • .prop( propertyName, function(index, oldPropertyValue) )

看出区别了吗，没错，是参数有区别，attr()传入的是attributeName，而prop()传入的是propertyName,如今咱们的问题转移了，咱们须要研究的是attributeName和propertyName之间的区别了。

Attributes vs. Properties

在这里，咱们能够将attribute理解为“特性”，property理解为“属性”从而来区分俩者的差别。
若是把DOM元素当作是一个普通的Object对象，这个对象在其定义时就具备一些属性（property），好比把select的option当作一个对象：

var option = {
    selected:false，
    disabled:false，
    attributes:NamedNodeMap,
    ...
}

如今，咱们一目了然了，attribute是一个特性节点，每一个DOM元素都有一个对应的attributes属性来存放全部的attribute节点，它是一个叫作NameNodeMap的对象。attributes的每一个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。而property就是一个属性，是一个以名值对(name=”value”)的形式存放在Object中的属性。

上例中<option value='2' selected>2</option>的property为{0: value, 1: selected, length: 2}

回到一开始的问题，根据W3C的表单规范 ，在selected属性（property）是一个布尔属性， 这意味着,若是这个特性（attribute）存在， 即便该特性没有对应的值，或者被设置为空字符串值，或甚至是"false"，相应的属性（property）都仍是为true。 selected特性（attribute）值不会由于复选框的状态而改变，而selected属性（property）会由于复选框的状态而改变。所以，跨浏览器兼容的检索和更改DOM属性,好比元素的checked, selected, 或 disabled状态，请使用.prop()方法。

为何会搞混？

之因此attribute和property容易混倄在一块儿的缘由是，不少attribute节点还有一个相对应的property属性，好比DOM元素的id和class既是attribute，也有对应的property，无论使用哪一种方法均可以访问和修改。