jQuery基础：设置DOM元素属性

一、 .attr()和.revoveAttr()方法操作属性

我们经常使用.addClass()和.removeClass()方法来改变页面上元素的外观。实际上jQuery就是在操作DOM中的className属性。
有时候，我们还需要操作其他一些属性，比如id、 rel和title属性。 jQuery为此也提供了.attr()和.revoveAttr()方法。
此外，通过jQuery还可以一次修改多个属性，如 .css() 方法修改多个CSS属性。

.attr()方法也接受一对参数，第一个是属性名，第二个是属性值。不过，更常用的方式还是传入一个包含键值对的对象。
如下代码所示：

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

要为每个链接设置唯一的id，可以使用jQuery的.css()和.each()方法的另一个特性：值回调。
值回调其实就是给参数传入一个函数，而不是传入具体的值。这个函数会针对匹配的元素集中的每个元素都调用一次，调用后的返回值将作为属性的值。例如，可以使用值回调来为每个元素生成唯一的id值。如下所示：

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

不过，考虑到其他链接，还应该把选择符表达式定义得更具体一些，

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

二、.prop()方法操作元素属性

某些DOM属性，例如nodeName、 nodeType、selectedIndex和childNodes，在HTML中没有对应的属性，因此通过.attr()方法就没有办法操作它们。
此外，数据类型方面也存在差异，比如HTML中的checked属性是一个字符串，而DOM中的checked属性则是一个布尔值。对于布尔值属性，最后是测试DOM属性而不是HTML属性，以确保跨浏览器的一致行为。
在jQuery中，可以通过.prop()方法取得和设置DOM属性：

//取得"checked"属性的当前值
var currentlyChecked = $('.my-checkbox').prop('checked');
//设置"checked"属性的值
$('.my-checkbox').prop('checked', false);

这个.prop()方法与.attr()方法没有什么不同，比如它们都可以一次性接受一个包含多个值的对象，也支持值回调函数。

三、表单控件的值

HTML属性与DOM属性差别最大的地方，恐怕就要数表单控件的值了。
比如，文本输入框的value属性在DOM中的属性叫defaultValue，DOM中就没有value属性。而选项列表（select）元素呢，其选项的值在DOM中通常是通过selectedIndex属性，或者通过其选项元素的selected属性来取得。
由于存在这些差异，在取得和设置表单控件的值时，最好不要使用.attr()方法。而对于选项列表呢，最好连.prop()方法也不要使用。建议使用jQuery提供的.val()。

//取得文本输入框的当前值
var inputValue = $('#my-input').val();
//取得选项列表的当前值
var selectValue = $('#my-select').val();
//设置单选列表的值
$('#my-single-select').val('value3');
//设置多选列表的值
$('#my-multi-select').val(['value1', 'value2']);

与.attr()和.prop()一样， .val()方法也可以接受一个函数作为其setter参数。