jQuery attr() 和 jQuery prop()

1、jQuery attr()

.attr()方法

获取 匹配元素集合中的 第一个元素 的属性的值或设置每一个匹配元素 的一个或多个属性的值。

要获取每个单独的元素的属性值， 需要依靠jQuery的 .each()或者.map()方法循环。

各种用法：

$(selector).attr(attribute);         //返回被选元素的属性值（第一个）.
$(selector).attr(attribute, value);   //设置被选元素的属性和值（每一个）。
$(selector).attr(attribute, function(index, oldvalue));  //使用函数来设置属性/值
$(selector).attr({attribute:value, attribute:value ...})；  //设置多个属性/值对

使用函数来设置属性/值

$(selector).attr ( attribute, function (index, oldvalue) );

function(index, oldvalue)
规定返回属性值的函数。
该函数可接收并使用选择器的 index 值和当前属性值。

e.g.

$("#attr2 div").attr("id", function (i) {
    return "divId" + i;
}).each(function () {
    $("span", this).html('ID = "<b>' + this.id + '</b>"');
});

设置多个属性/值对

$(selector).attr({attribute:value, attribute:value …});

e.g.

var $link = $(".link");
$link.attr({
    "alt": "Si chuan brush seller",
    "class": "123"
});

顺便看了下 setAttribute()

element.setAttribute(attributeName, attributeValue)

var t = document.getElementById('customizedAttr');
t.id = "#test2";
t.setAttribute('class', 'active');
t.setAttribute('customizedAttr', 'customized');

1、setAttribute() 方法添加指定的属性，并为其赋指定的值。
2、如果这个指定的属性已存在，则仅设置/更改值。
3、Internet Explorer 8 以及更早的版本不支持此方法。
4、无返回值。

2、.removeAttr( attributeName )

返回: jQuery

描述: 为匹配的元素集合中的每个元素中移除一个属性（attribute）。

添加的版本: 1.0

attributeName 类型: String 要移除的属性名,

从1.7版本开始，它可以是一个空格分隔的属性列表。

.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法，并且它 解决了跨浏览器的属性名不同的问题。

注意: Internet Explorer 6， 7 ，或8中，使用.removeAttr()删除一个内联onclick 事件处理程序没有实现，为了避免潜在的问题，使用 .prop()代替：

$element.prop("onclick", null);
console.log("onclick property: ", $element[0].onclick);

3、jQuery prop()

各种用法：

.prop( propertyName );           //获取第一个匹配元素的propertyName对应的值.
.prop( propertyName, value );    //给匹配的元素设置一个或多个属性的值
.prop( properties );             //An object of property-value pairs to set.
.prop( propertyName, function ); //A function returning the value to set.

1、获取匹配的元素集中第一个元素的属性（property）值；

2、如果元素上没有该属性，或者如果没有匹配的元素。那么该方法会返回undefined值。

3、若要取得每个匹配元素的属性值（property），请使用循环结构，如jQuery .each()或.map()方法。

jQuery 1.6之前 ，.attr()方法在取某些 attribute 的值时，会返回 property 的值，这就导致了结果的不一致。从 jQuery 1.6 开始， .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。

e.g. selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 应使用.prop() 方法进行取值或赋值。 在jQuery1.6之前，这些属性使用.attr()方法取得，但是这并不是元素的attr属性。他们没有相应的属性（attributes），只有特性(property)。

elem.checked                            true (Boolean) 将随着复选框状态的改变而改变
$( elem ).prop( "checked" )                true (Boolean) 将随着复选框状态的改变而改变
elem.getAttribute( "checked" )          "checked" (String) 复选框的初始状态;不会改变
$( elem ).attr( "checked" ) (1.6)      "checked" (String) 复选框的初始状态;不会改变
$( elem ).attr( "checked" ) (1.6.1+)   "checked" (String) 将随着复选框状态的改变而改变
$( elem ).attr( "checked" ) (pre-1.6)  true (Boolean) 将随着复选框状态的改变而改变

要记住的最重要的概念是checked特性（property）不是checked属性（attribute）。属性（attribute）实际对应的是defaultChecked特性（property），而且仅用于设置复选框最初的值。checked属性（attribute）值不会因为复选框的状态而改变，而checked特性（property）会因为复选框的状态而改变。因此，跨浏览器兼容的方法来确定一个复选框是否被选中，是使用该特性（property）：

if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )

The same is true for other dynamic attributes, such as selected 、disabled、value.

<script>

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
  return !val;
});


$("input").change(function() {
  var $input = $(this);

  $("p").html(".attr('checked'): <b>" + $input.attr('checked') + "</b><br>"
              + ".prop('checked'): <b>" + $input.prop('checked') + "</b><br>"
              + ".is(':checked'): <b>" + $input.is(':checked') ) + "</b>";
}).change();

</script>

.prop(‘checked’) 和.is(‘:checked’) 获取的值会随元素的状态变化，.attr(‘checked’)只获取初始的值。

根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()；

4、.removeProp( propertyName )

返回: jQuery

描述: 为集合中匹配的元素删除一个属性（property）。

添加的版本: 1.6

propertyName 类型: String 要移除属性的名称.

.removeProp()方法用来删除由.prop()方法设置的属性集。

若尝试移除 DOM 元素或 window 对象上一些 内建 的特性（ property ） ，浏览器可能会产生错误。如果真的那么做了，那么 jQuery 首先会将 特性（ property ） 设置成 undefined ，然后忽略任何浏览器产生的错误。一般来说, 只需要 移除自定义 的特性（ property ） ，而不是移除内建的（原生的）特性（ property ）。

注意: 不要使用此方法来删除原生的属性（ property ），比如checked, disabled, 或者 selected。这将完全移除该属性，一旦移除，不能再次被添加到元素上。使用.prop()来设置这些属性设置为false代替。