jquery属性操作

jquery属性操作可分三类

1. jquery属性：获取元素的属性值，和设置元素的属性值
2. class类：元素的class类名的添加删除和切换操作
3. HTML代码/文本/值：HTML代码/文本/值的获取和设置

一、jquery属性的设置和获取

attr()

attr()设置或返回被选元素的属性值

参数attr(name|properties|key,value|fn)

• 参数name属性名称
• 参数properties作为属性的“名/值对”对象
• 参数key,value属性名称，属性值
• 参数key,function(index, attr)1:属性名称，2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值

//参数name属性名称用法：获取input类型
$("input").attr("type");

//参数properties作为属性的“名/值对”对象用法:可设置多个属性type和value...
$("input").attr({
	type:"text",
	value:"第二个属性value值",
});

//参数key,value属性名称，属性值用法：将input类型设置或修改成button
$("input").attr("type","button");

//参数key,function(index, attr)用法
$("input").attr("type",function(index,attr){//index当前元素的索引值,attr原先的属性值
	return attr = button;//返回一个属性值，这里将类型设置成了按钮
});

prop()

获取在匹配的元素集中的第一个元素的属性值
随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

参数prop(name|properties|key,value|fn)

• 参数name属性名称
• 参数properties作为属性的“名/值对”对象
• 参数key,value属性名称，属性值
• 参数key,fn属性名称，函数fn中有两个参数，参数1:属性名称、参数2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值

//参数name的用法
$("input").prop("type")//获取input的type值(类型)

//参数properties作为属性的“名/值对”对象用法:可设置多个属性type和value...
$("input").prop({
	type:"text",
	value:"第二个属性value值",
});

//参数key,value属性名称，属性值用法：将input类型设置或修改成button
$("input").prop("type","button");

//参数key,function(index, prop)用法
$("input").prop("type",function(index,prop){//index当前元素的索引值,attr原先的属性值
	return prop = button;//返回一个属性值，这里将类型设置成了按钮
});

removeAttr(name)

从每一个匹配的元素中删除一个属性
1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的，解决的方法就是使用$(“XX”).prop(“disabled”,false)

$("input").prop("value");//删除属性value

二、class类

addClass(class|fn)

为每个匹配的元素添加指定的类名

//为匹配的元素加上 'selected' 类
$("p").addClass("selected");
$("p").addClass("selected1 selected2");

removeClass([class|fn])

从所有匹配的元素中删除全部或者指定的类

//删除匹配元素的所有类
$("p").removeClass();

//从匹配的元素中删除 'selected' 类
$("p").removeClass("selected");

toggleClass(class|fn[,sw])

如果存在（不存在）就删除（添加）一个类

//为匹配的元素切换 'selected' 类
$("p").toggleClass("selected");

三、HTML代码/文本/值

html()

html() 取得第一个匹配元素的html内容，这个函数不能用于XML文档，但可以用于XHTML文档

参数html([val|fn])

• 无参数时返回当前元素的内容，其内容为一个字符串
• 参数val用于设定HTML内容的值
• 参数fn为一个函数，此函数返回一个HTML字符串，接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值

// 取出html内容
var $htm = $('#div1').html();

// 设置html内容
$('#div1').html('<p>添加文字</p>');//这样设置html会将元素中原本的html内容替换掉

var $xhtm = $("#div1").html(function(index,html){
	 console.log(index);//元素在原先集合中的索引
	 console.log(html);//#div1元素中原本的内容
	 return html + "<h3>增加了一个h3</h3>";//返回一个HTML字符串，此操作在元html内容后面添加了一个h3标签
});

text()

text()取得所有匹配元素的内容，结果是由所有匹配元素包含的文本内容组合起来的文本，这个方法对HTML和XML文档都有效

参数text([val|fn])

• 无参数时，返回所有匹配元素的内容
• 参数val用于设置元素内容的文本
• 参数fn为一个函数，此函数返回一个字符串，接受两个参数，index为元素在集合中的索引位置，text为原先的text值

//无参数时
$('p').text();//返回p元素的文本内容

//有参数为val时
$("p").text("Hello world!");//设置所有 p 元素的文本内容

//有参数为fn时
$("p").text(function(index,text){//index元素在原先集合中的索引,text是原本的文本内容
	return "这个 p 元素的 index 是：" + text;//设置所有匹配元素的文本内容，此操作在原文本内容之前插入一段文本
});

val()

获得匹配元素的当前值
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值

参数val([val|fn|array])

• 参数val要设置的值
• 参数fn此函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。
• 参数arr用于 check/select 的值

//获取文本框中的值
$("input").val();

//设定文本框的值
$('input:text.items').val(function() {
	return this.value + ' ' + this.className;
});