jQuery学习笔记之.attr()

本文目标

1. 了解attr()的作用及其四种写法
2. 了解attr()的使用场景及注意事项

学习资料

官方描述文档：http://api.jquery.com/attr/

官方描述

Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

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

四种用法

1. attr(attributeName)
2. attr(attributeName,value)
3. attr(attributes)
4. attr(attributeName,function)

.attr(attributeName)

Get the value of an attribute for the first element in the set of matched elements.

获取匹配元素集合中第一个元素的属性值
attributeName为要获取的属性名，类型为字符串
这个方法仅获取匹配元素集合中第一个元素的属性值，为了能够单独的获取每一个元素的属性值，需要利用循环结构，例如jQuery中的each()或map()

利用jQuery的attr()去获取一个元素的属性值有两个主要的益处
a、便利性(convenience):能直接被一个jQuery对象调用并链式调用其它的jQuery方法
b、跨浏览器一致性(cross-browser consistency):在跨浏览器时有些属性值是不一致的，甚至在同一个浏览器的不同版本上也会出现这样的情况，attr()则约束了这种不一致性

自jQuery1.6以后，当属性还未被设置时，attr()将返回undefined，为了检索(retrieve)或改变(change)元素的DOM属性如checked、selected、disabled的状态，需要利用prop()

attributes和properties这两者间的区别在一些特殊情况下是非常重要的。在jQuery1.6以前，attr()有时在检索某些特性(attribute)时，会将属性(property)值也考虑进去，从而引发不一致行为。自jQuery1.6开始，prop()提供了一种途径可以明确的获取属性(property)值，而attr()检索特性值

例如：selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked、defaultSelected 应该利用prop()来进行检索或设置

关于布尔类型的特性值，考虑到一个DOM元素通过HTML标签<input type="checkbox" checked="checked"/>来定义，并假设它在javascript中的变量名为elem

操作 说明 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+) “checked”(String)将随着复选框状态的改变而改变 $(elem).attr(“checked”)(pre-1.6) true(Boolean)将随着复选框状态的改变而改变

如果一个特性存在即使没有被设置值或者被设置为空字符串甚至是”false”，其对应的属性值仍为true，且同样适用于全部的布尔特性。

需要记住的是checked特性并不对应checked属性的，而是对应defaultChecked属性且应该仅用于设置checkedbox的初始值
checked的特性值不随着checkedbox的状态改变而改变，而checked属性值随着checkedbox的状态改变而改变
因此在跨浏览器一致性的时候判断复选框是否被选中需要利用属性

.attr(attributeName,value)

Set one or more attributes for the set of matched elements

为匹配的元素集合设置一个或多个属性
attributeName：需要设置的属性名称
value：带设置的属性值，类型可以为字符串、数字、null，当为null时一些特殊的属性将被移除

.attr(attributes)

attributes：待设置的键值对
当设置多个属性时，属性名可以不用引号包裹，但设置class属性时，总是需要使用引号包裹

.attr(attributeName,function)

attributeName：待设置的属性名
function：Function(Integer index,String attr) => 返回值为字符串或数字
函数的返回值为待设置属性的值，在函数中this代表当前元素，函数接收当前元素在集合中的下标位置和该属性旧的属性值作为参数
attr()对于设置属性值是一种方便的途径，尤其是要设置多个属性值或利用函数的返回值来设置属性值时。

在IE8或更早的版本中尝试修改input、button的type特性(attribute)值，将抛出一个异常