attr与prop的正确打开方式

prop()

prop()是 jQuery 1.6 开始新增了一个方法，官方建议具有 true 和 false 两个属性值的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。

prop()与attr()的区别

• 两者相同点：
  1、获取标签的属性；
  2、给指定标签添加属性；
• 区别：
  1、获取属性是标签自带的属性值时，使用prop()方法；
  2、获取自定义的属性时，只能使用attr()方法；
• 什么时候使用prop()与attr()?
  例子1：获取button标签的自带属性、自定义属性

  <button goodsid="531" class="addShopping">＋</button>
  

  goodsid属性是自定义的属性，在使用attr()方法时：

  > $('.addShopping').attr("goodsid")
  "531"
  

  而使用prop()方法时：

  > $('.addShopping').prop("goodsid")
  undefined
  

  calss是button标签自带的属性，但使用attr()、prop()方法获取属性值时：

  > $('.addShopping').prop("class")
  "addShopping"
  
  > $('.addShopping').attr("class")
  "addShopping"
  

  例子2：获取input标签的checked、disabled、selected属性：

  <!--复选框-->
  <input type="checkbox" checked id="12">
  
  <!--输入框-->
  <input type="text" disabled id="23">
  
  <!--下拉选择框-->
  <select id="34">
      <option>aaa</option>
      <option selected="">bbb</option>
  </select>
  

  查询结果：

  //复选框
  > $('#12').attr('checked')
  "checked"
  > $('#12').prop('checked')
  false
  
  //输入框
  > $('#23').attr('disabled')
  "disabled"
  > $('#23').prop('disabled')
  true
  
  //下拉选择框
  > $('#34').find('option').attr('selected')
  "selected"
  > $('#34').find('option').prop('selected')
  false
  

  例子2中使用attr()查询属性值为true与false的属性，查询结果不方便使用；但是使用prop()查询结果为true与false。

总结

1、获取标签中自带的属性时，使用 prop()、attr()均可以；
2、获取自定义属性时，建议使用attr()；
3、获取属性的属性值为true或false时，如：属性为disabled、checked、selected时，建议使用 prop()。