用jQuery让页面生动起来——操作元素属性和特性

1.1操作元素属性和特性

提到DOM 元素，我们可以操作的最基本部分是指派到元素的属性和特性。这些属性和特性作为解析页面HML标记的结果，初始化时被指派到DOM元素，并且可以在脚本控制下动态地修改。

为了正确理解术语和概念，考虑以下图像元素的HTML标记。

<img id="myImage" src="image.gif" alt="An image" class ="someclass" title="This is an image">

在这个元素标记里，标签名称为image，而标记id、src、alt、class和title表示原始的特性，每个特性均由名称和值所组成。浏览器读取并解释这个元素标记，创建在DOM里表示这个元素的JavaScript对象。除存储特性以外，这个对象还拥有多个属性，包括一些表示标记特性值的属性（甚至有一个属性用于保持特性列表）。如下图显示这个过程的简化概括。



HTML 标记由浏览器解释成为表示图像的DOM元素，创建节点列表对象NodeList（DOM定义的容器类型之一），并且指派给名为attributes的元素属性。特性和它的对应属性（我们称它为特性属性（是指DOM 元素中能够和HTML元素中的某个特性对应得上的属性））之间存在动态关联。

1.1.1操作元素属性

jQuery 没有用于获取或元素属性的具体命令。但是我们可以利用原生JavaScript表示法，存取属性和属性值。

查看或修改包装集组成元素的最简便办法是利用each()命令。该命令语法如下：

each(iterator)：遍历包装集里所有元素，为各元素分别调用传入的迭代器函数。

参数：一个函数，为匹配集中的各元素分别调用一次，传递到函数的参数被设置为包装集里当前元素的下标（从0开始），而当前元素可通过函数this属性来访问。

通过这个命令可以轻松地把属性值设置到匹配集里的所有元素上。例如：

$('img').each(function (n){
this.alt='This is image ['+n+'] with an id of  ' + this.id;
});

这个语句为页面上每个图像元素分别调用内联函数，利用元素下标和id值修改元素alt属性。请注意，因为这是特性属性，而特性属性与同名特性动态关联，所以alt特性也被间接的更新。

类似地，可以利用each()方法来将特定属性的所有值收集到一个数组里，如下所示：

var allAlts = new Array();
$('img').each(function (){
allAlts.push(this.alt);
});

如果只想获取单个元素的属性值（请记住匹配集可以当成JavaScript数组来处理），就可以通过如下语句获取属性：

var altValue = $("#myImage")[0].alt;

与处理属性相比，用JavaScript处理特性不是那么直接，所以jQuery提供处理特性的辅助手段。

1.1.2获取特性值

就像许多其他jQuery命令那样，attr()命令也可以用来进行读操作或者写操作。相同的jQuery命令能够执行这样迥异的操作，是因为传给命令的参数的个数和类型决定了采用命令的那个重载变体（类似于Java中方法的重载）。

attr(name)：获取指派到包装集里第一个元素指定特性的值。

参数（字符串）：特性的名称，该特性的值将被获取。

返回：包装集里第一个元素指定特性的值，如果包装集为空，或第一个元素没有该特性，则返回undefined。

即使通常认为特性是由HTML预定义的，但是对于通过JavaScript或HTML标记设置的自定义特性，也可以利用attr()方法。例如：

<img id="myImage" src="image.gif" alt="An image" class="someclass"
title="This is an image" custom="some value">

请注意，我们已经添加了自定义特性，并命名为custom，如下语句可以获取custom的特性值，就像标准特性那样：

$("#myImage").attr("custom");

警告：使用非标准的特性名称虽然是常见手法，却会导致标记被认为是非法的——它会导致有效性测试失败。这可能影响可存取行，还可能影响程序解析，因为那些程序指望你的网站是用有效的HTML或者XHTML编写的。

在HTML里，特性名称是不区分大小写的。不管特性在标记里怎么声明，都可以存取或设置，通过利用任何大小写变体，或任何其他等效组合来完成。即使在XHTML标记里特性名称必须小写，也依然可以利用任何大小写变体来获取特性值。

jQuery的attr()命令不仅仅是JavaScript的getAttribute()和setAttribute()方法的包装。出允许存取元素特性集以外，jQuery 也允许存储常用属性。

规范化存取名称如下表：

规范化名称	源名称
class	className
cssFloat	ie用styleFloat，其他浏览器用cssFloat（当和.css一起使用时）
float	ie用styleFloat，其他浏览器用cssFloat（当和.css一起使用时）
for	htmlFor
maxlength	maxLength
readonly	readOnly
styleFloat	ie用styleFloat，其他浏览器用cssFloat（当和.css一起使用时）

除了这些有用的快捷方式以外，用于写操作的attr()重载变体还提供了便利的功能。

1.1.3设置特性值

用jQuery把特性值设置到包装集元素上，有两种办法。极为直接的办法是：允许一次设置一个特性。语法如下：

attr(name,value)：为包装集里所有元素的name特性设置传进来的值。

参数name（字符串）：将被设置的特性的名称。

参数value（字符串|对象|函数）：指定特性的值。可以是有返回值的任何JavaScript表达式，或是一个函数，

返回一个包装集。

这个attr的重载方法，乍看起来也许觉得简单，其实它的操作是相当复杂的。

attr的最基本的形式是，当value参数是任何有返回值（可以是数组）的JavaScript表达式时，把表达式的已计算值设置为特性值。

当value参数是一个函数引用时，事情变得更加有趣，在这种情况下，为包装集各元素分别调用函数，把函数返回值作为特性值。每次调用函数时，传递一个参数，表示元素在包装集里从0开始的下标。另外建立当前元素作为this 变量，用于函数调用以便函数为各个特定元素调整处理方式——这就是以这种方式来调用函数的主要力量所在。

考虑如下语句：

$('*').attr('title',function(index){
return  'I am element '+index +'and my name is '+
(this.id?this.id:'unset');
});

这个命令将作用于页面上的所有元素，设置各个元素的title特性为一个字符串，即由DOM中元素下标和各个特定元素id特性值所组成的字符串。

我们会采用这个办法来制定特性值，只要那个值依赖于元素其他特性值，而不依赖于无关值。

用于写操作的attr()第二个重载方法允许一次性指定多个特性。

attr(attributes)：把已传递对象制定的特性和值设置到包装集的所有元素上。

参数attributes：一个对象，对象属性被作为特性而复制到包装集里所有元素上。

这种格式是设置多个特性到包装集里所有元素的快速简便的方式。传递的参数可以是任何对象引用，但通常是对象字面量（可以理解为字面上的对象，格式为{key1:value1,key2:value2.... }）。如下：

$('input').attr({value:'',title:'Please enter a value'});

这个语句把所有<input>元素的value设置为空字符串，同时把title设置为字符串please enter a value。

请注意，如果传递进来的对象（作为value的参数）的属性值是一个函数的引用，则它的操作方式类似于前面的attr()格式——为匹配集里各元素分别调用函数。

警告 ： ie浏览器不允许<input> 元素的name特性被修改，如果你想修改ie浏览器里<input>元素的name特性，就必须用拥有目标名称的新元素取代旧元素。

1.1.4删除特性

为了从DOM 元素中删除特性，jQuery提供了removeattr()命令。语法如下：

removeattr(name)：从每个已匹配元素删除指定的特性。

参数name（字符串）：将要删除的特性的名称。

返回一个包装集。

请注意，删除一个特性不会从JavaScript DOM元素删除任何对应的属性，尽管可能导致属性值的改变。例如，从一个元素删除readonly特性，会导致元素readonly特性值从true变为false，但是属性本身不会从元素中删除。

1.4.5特性带来的快乐

假定我们想要在新窗口里打开网站上指向外部域名的所有链接。如果由我们全盘掌握整个标记的话，这个任务就非常简单，如下所示：

<a href="http://external.com" target="_blank">some External Site </a>

那当然好，但如果我们运行CMS（Content Management System,内容管理系统）或维基网站，在那儿终端用户能够添加内容，但不能添加target="_blank" 到所有外部链接。可以利用jQuery技巧简洁地完成任务，如下：

$("a[href^=http://]").attr("target","_blank");

另一个jQuery特性操作功能的卓越用途是帮助解决web应用长期存在的问题：可恶的双重提交问题。这是web应用的常见问题，由于表单提交的延迟，有时几秒钟或更长，让用户有机会多次点击提交按钮，从而导致服务器端代码的种种麻烦。

为了解决该问题，我们绑定处理程序到表单的提交事件上，在按钮第一次点击提交之后禁止提交按钮。通过这种方式，用户就不会有机会多次点击提交按钮，并且看见可见的指示“表单正在提交中...”。现在关注于attr()命令的使用：

$("form").submit(function(){
$(":submit",this).attr("disabled","disabled");
});

在事件处理程序内，用:submit 选择器来获取表单内的所有提交按钮，并将disabled特性值修改为disabled。请注意，建立匹配集的时候我们提供this的上下文值。

警告：以这种方式禁止提交按钮，不会免除服务端代码的责任——预防双重提交或任何其他类型的验证问题。添加这种功能到客户端代码，能够提高界面对终端用户的有好程度，并且帮助防止正常情况下的双重提交问题，但是防止不了攻击或其他黑客企图，所以服务端代码必须继续保持警惕。