5.1.1 非类属性

有时候,我们还需要操作其他一些属性,比如id、rel和title属性。jQuery为此也提供了.attr()和.revoveAttr()方法。这些方法让修改属性变成了小菜一碟。此外,通过jQuery还可以一次修改多个属性,同我们在第4章中使用.css()方法修改多个CSS属性的方式类似。
比如,我们可一次性修改链接的id、rel和title属性。首先来看一看我们例子中的HTML代码:

对于以上HTML,我们可以循环遍历<div class="chapter">中的每个链接,并逐个为它们添加属性。如果只想为所有链接设置一个公共的属性值,那么在$(document).ready处理程序中通过一行代码即可完成这一操作,如代码清单5-1所示。

$(document).ready(function() {
  // Use attr() to add an id, rel, and title.
  $('div.chapter a').attr({rel: 'external'});
});

与.css()方法很相似,.attr()方法也接受一对参数,第一个是属性名,第二个是属性值。不过,更常用的方式还是传入一个包含键值对的对象,如代码清单5-1所示。使用对象可以轻松地扩展,以便一次性地修改多个属性,如代码清单5-2所示。

$(document).ready(function() { 
  $('div.chapter a').attr({ 
    rel: 'external', 
    title: 'Learn more at Wikipedia' 
  }); 
}); 

值回调

如果我们想让每个匹配的元素都具有相同的一个或多个属性值,那么只要给.attr()传入一个静态的对象即可。不过,更常见的情况是为每个元素添加或修改的属性都必须具有不同的值。
例如,对于任何给定的文档,如果要保证JavaScript代码有效,那么每个id属性的值必须唯一。**要为每个链接设置唯一的id,可以使用jQuery的.css()和.each()方法的另一个特性:值回调**。

什么是值回调

值回调其实就是给参数传入一个函数,而不是传入具体的值。这个函数会针对匹配的元素集中的每个元素都调用一次,调用后的返回值将作为属性的值。例如,可以使用值回调来为每个元素生成唯一的id值,参见代码清单5-3。

$(document).ready(function() { 
  $('div.chapter a').attr({ 
    rel: 'external', 
    title: 'Learn more at Wikipedia', 
    id: function(index, oldValue) { 
      return 'wikilink-' + index; 
    } 
  }); 
}); 

每次触发值回调,都会给它传入两个参数。
第一个是一个整数,表示迭代次数,我们在此利用这个值为第一个链接生成的id是wikilink-0,为第二个链接生成的id是wikilink-1,以此类推。代码清单5-3并没有用到第二个参数,这个参数中保存的是修改之前属性的值。

本文重点

attr()方法

attr()方法可以设置属性,

$('div.chapter a').attr({rel: 'external'});

attr()方法的参数

一个键值对参数

.attr()方法接受一对参数,第一个是属性名,第二个是属性值

包换键值对的对象作为参数

使用对象作为参数,可以轻松地扩展,以便一次性地修改多个属性。

什么是值回调

值回调其实就是给参数传入一个函数,而不是传入具体的值。这个函数会针对匹配的元素集中的每个元素都调用一次,调用后的返回值将作为属性的值。

值回调可做什么

可以使用值回调来为每个元素生成唯一的id值

值回调的参数

每次触发值回调,都会给它传入两个参数

• 第一个是一个整数,表示迭代次数。
• 第二个参数中保存的是修改之前属性的值。