jQuery基本操作

一、属性操作

方法	描述
attr(name/pro/key,val/fn)	获取或设置元素的属性
removeAttr(name)	删除元素的某一个属性
prop(name/pro/key,val/fn)	获取或设置元素的一个或多个属性
removeProp(name)	删除由prop()方法设置的属性集

当元素尚需经（如checked、selected和disabled等）取值为true或false时，通过prop()方法对属性进行操作，而其它普通属性通过attr()方法操作。

1、attr()方法

attr()方法用于获取所匹配元素的集合中的第一个元素的属性，或设置所匹配元素的一个或多个属性：

【语法】

attr(name)
attr(properties)
attr(key,value)
attr(key.function(index,oldAttr))

其中：

• 参数name表示元素的属性名；
• 参数properties是一个由key/value键值对构成的集合，用于设置元素中的1~n个属性；
• 参数key表示需要设置的属性名，参数value表示需要设置的属性值；
• 参数function(index,oldAttr)表示使用函数的返回值作为属性的值，index表示当前元素在集合中的索引位置，oldAttr表示当前元素在修改之前的属性值

【示例】

	$("img").attr("src");			//用于返回<img>集合中第一个图像的src属性值
	$("#myImage").attr("src");		//返回ID为myImage图像的src属性值
	$("#myImage").attr("src","images/flower2.png");		//设置myImage的src属性
	//通过properties(名/值对)的方式设置图像的属性
	$("#myImage").attr({src:"images/flower2.png",title:"鲜花"});
	//使用函数的返回值作为属性值
	$("myImage").attr("title",function(){return this.src;});

2、removeAttr()方法

removeAttr()方法用于删除匹配元素的指定属性：

【语法】

removeAttr(name)

其中name表示需要删除的属性名。

【示例】

	$("img").removeAttr("title")			//删除所有的img的title属性

3、prop()方法

prop()方法用于用于获取所匹配元素的集合中的第一个元素的属性，或这只所匹配元素的一个或多个属性。prop()方法多用于boolean类型属性操作：

【语法】

prop(name)
prop(properties)
prop(key,value)
prop(key.function(index,oldAttr))

其中：

• 参数name表示元素的属性名；
• 参数properties是一个由key/value键值对构成的集合，用于设置元素中的1~n个属性；
• 参数key表示需要设置的属性名，参数value表示需要设置的属性值；
• 参数function(index,oldAttr)表示使用函数的返回值作为属性的值，index表示当前元素在集合中的索引位置，oldAttr表示当前元素在修改之前的属性值

【示例】

	$("input[type='checkbox']").porp("checked");			//返回第一个复选框的状态
	$("input[type='checkbox']").prop("checked",true);		//将所有复选框选中
	//通过properties(名/值对)的方式，将所有复选框设为禁用、选中状态
	$("input[type='checkbox']").prop({disabled:true,checked:true});
	//使用函数返回值作为属性值，对所有复选框进行反选
	$("input[type='checkbox']").prop("checked",function(index,oldValue){return !oldValue;})

4、removeProp()方法

removeProp()方法用于删除由prop()方法设置的属性集：

【语法】

removeProp(name)

其中name表示需要删除的属性名。

【示例】

	$("input[type='checkbox']").removeProp("disabled")			//所有复选框设为可用状态

二、样式操作

在HTML代码中，通过class属性指定HTML标签的样式名；在jQuery中，可以使用attr()方法操作元素的class属性，以获取或改变元素的样式。
【示例】

	$("#myDiv").attr("class");				//返回myDiv的class属性
	$("#myDiv").attr("class","newClass");	//设置myDiv的class属性值，如果存在则替换

1、addClass()方法

addClass()方法用于对一个或多个匹配元素追加样式：

【语法】

addClass(className)
addClass(className1 className2 … classNameN)
addClass(function(index,oldClassName))

其中：

• 参数className表示需要追加的样式名；
• 参数className1、className2、··· 、classNameN表示可以同时追加多个样式，样式名之间使用空格隔开；
• 参数function(indx,oldClassName)表示使用函数的返回值作为当前位置德阳市，index表示当前元素在集合中的索引值，oldClassName表示当前元素在修改之前的样式名。

【示例】

	//追加baseClass样式
	$("p[title='desc']").addClass("baseClass");
	//追加baseClass和fontColor样式
	$("p[title='desc']").addClass("baseClass fontColor")

2、removeClass()方法

removeClass()方法用于移除匹配元素的一个或多个样式，也可以一次性移除元素的所有样式：

【语法】

removeClass()
removeClass(classname)
removeClass(classname1 classname2 … classnameN)

其中：

• 无参方法用于移除匹配元素的所有样式；
• 参数className表示需要移除的样式名；
• 参数className1、className2、… 、classNameN表示同时移除多个样式，样式名之间使用空格隔开。

【示例】

	$("p").removeClass();						//移除所有样式
	$("p").removeClass("baseClass");			//移除baseClass样式
	$("p").removeClass("baseClass fontColor");	//移除baseClass和fontColor样式

3、toggleClass()方法

toggleClass()方法用于元素样式之间的重复切换，当元素的指定样式存在时，将该样式移除，否则添加该样式。

【语法】

toggleClass(className)
toggleClass(className,switch)

其中：

• 参数className表示需要切换的样式名；
• 参数switch表示切换样式开关，默认为true，当switch为true时允许样式切换，否则不允许。

【示例】

	//ID为userName的元素添加样式，如果存在focusClass样式则移除，没有则添加该样式
	$("#userName").toggleClass("focusClass");
	//第二个参数为真，样式切换为inverseColor
	$("#userName").toggleClass("inverseColor",true);

4、css()方法

在jQuery1.9+中新增了css()方法，用于返回第一个匹配元素的css样式，或设置所有匹配元素的样式。

【语法】

css(attrName)
css(key,value)
css(properties)
css(attrName,function(index,oldValue))

其中：

• 参数attrName表示要访问的属性名称；
• 参数key,value用于设置元素的某一样式，key表示属性名，value表示属性值；
• 参数properties用于设置元素的某些样式，为Map类型的键值对所构成的集合；
• 参数function(index,oldValue)表示使用函数的返回值作为当前元素的属性值，index表示当前元素在集合中的索引位置，oldValue表示当前元素在修改之前的属性值

【示例】

	//一个参数时，用于返回第一个匹配元素的样式
	$("img").css("width");
	//多个参数时，用于设置匹配元素的样式
	$("img").css("width","200px");
	//使用properties(键值对)的方式一次设置多个样式
	$("img").css({backgroundColor:"#ccc",borderColor:"#999"});
	//使用函数的返回值作为css()方法的value值
	$("img").css({
		width:function(){
			return parseFloat(value)*0.9;
		}
	});

三、内容操作

在jQuery中，提供了html()方法和text()方法用于操作页面元素的内容，val()方法用于操作表单元素的值。

1、html()方法

html()方法用于获取第一个匹配元素的HTML内容或修改匹配元素的内容，该方法仅对XHTML文档有效，不能用于XML文档。

【语法】

html()
html(htmlCode)
html(function(insex,oldHtmlCode))

其中：

• 无参方法用于返回第一个匹配元素的HTML内容；
• 有参方法用于设定匹配元素的文本内容；
• 参数htmlCode表示将所匹配元素的HTML内容设置为htmlCode ；
• 参数function(index,oldHtmlCode)表示将函数的返回值作为当前元素的HTML内容，index表示当前元素在集合中的索引位置，oldHtmlCode表示当前元素在修改之前的HTML内容。

【示例】

	//返回mainContentDiv标签的HTML内容
	$("#mainContentDiv").html();
	//设置#mainContentDiv标签的HTML内容为红色标题格式的"漫步时尚广场"
	$("#mainContentDiv").html("<h1><font color='red'>漫步时尚广场</font></h1>")
	//根据元素在集合中的不同位置，设定不同的HTML内容
	$("p").html(function(index,htmlCode){
		switch(index){
			case 0:
				return "<h1>" + htmlCode + "</h1>";
			case 1:
				return "<h2>" + htmlCode + "</h2>";
		}
	);

2、text()方法

text()方法用于读取或设置匹配元素的文本内容，与html()方法区别在于，text()方法返回纯文本内容，适用于XHTML和XML文档。

【语法】

text()
text(textContent)
text(function(index,oldTextContent))

其中：

• 无参方法用于返回第一个匹配元素的文本内容；
• 有参方法用于设定匹配元素的文本内容；
• 参数textContent表示将所匹配元素的文本内容设置为textContent；
• 参数function(index,oldTextContent)表示将函数的返回值作为当前元素的文本内容，index表示当前元素在集合中的索引位置，oldTextContent表示当前元素在修改之前的文本内容。

【示例】

	//返回mainContentDiv标签的文本内容，即使该标签包含HTML标签，返回的内容也仅仅是纯文本内容
	$("#mainContentDiv").text();
	//将InputDiscuss输入内容作为newDiscuss的文本内容
	$("#newDiscuss").text("<hr/>评论如下：" + $("#inputDiscuss").val() + "<hr/>");

3、val()方法

val()方法用于设置或获取表单元素的值，包括文本框、下拉列表、单选框和复选框等元素。当元素允许多选时，返回一个包含被选项的数组。

【语法】

val()
val(newValue)
val(arrayValue)
val(function(indx,oldValue))

其中：

• 无参方法用于返回所匹配的表单元素的value值；
• 有参方法用于设定所匹配的表单元素的value值；
• 参数newValue表示将所匹配的表单元素的value值设置为newValue；
• 参数arrayValue用于设置多选表单元素（如check和select等）的选中状态；
• 参数function(index,oldValue)表示将函数的返回值赋给当前匹配的表单元素，index表示当前元素在匹配集合中的索引位置，oldValue表示当前元素在修改之前的value值。