1.内容操作

1.1html():相当于js中的innerHTML，对元素的标签体内容进行设置获取

1.2text():相当于js中的innerText，对元素的标签体内的纯文本内容进行设置获取

1.3val():相当于js中的value()，对元素的value属性进行设置获取

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			td {
				text-align: center;
			}
			
			button {
				width: 100px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-2.2.4.min.js">
		</script>
		<script type="text/javascript">
		
		function f1(){
			$("input:first").val("666");
		}
		
		function f2(){
			alert($("input:first").val("99999"));
		}
		</script>

	</head>

	<body>
		<input type="text" />
		
		<hr />
		<table height="50px" cellpadding="0" border="1px">
			<tr>
				<td>
					<button onclick="f1()">设置value</button>
				</td>
				<td>
					<button onclick="f2()">获取value</button>
					
				</td>
			</tr>
			<tr>
				<td>
					<button onclick="f3()">设置text</button>
				</td>
				<td>
					<button onclick="f4()">获取text</button>
				</td>
			</tr>
			<tr>
				<td>
					<button onclick="f5()">设置html</button>
				</td>
				<td>
					<button onclick="f6()">获取html</button>
				</td>
			</tr>
		</table>
	</body>

</html>

2.样式的操作

css():可以对样式进行设置，也可以通过指定的样式名获取样式值

获取方式：css("样式名")

3.属性操作

3.1 通用的属性操作

3.1.1 prop()

获取、设置元素的属性

3.1.2 removeProp

删除属性

3.1.3 attr()

获取、设置元素的属性

3.1.4 removeAttr()

删除属性

注：

1.prop(参数1，参数2)和attr(参数1，参数2)是对元素进行属性的设置

prop(参数)和attr(参数)是对元素的属性进行获取

2.prop()和attr()都能对元素的固有属性和自定义属性进行设置和获取

3.prop()和qttr()的设置和获取不能穿插使用

4.prop()一般用于对元素的固有属性进行设置和获取

attr()一般用于对元素的自定义属性进行设置和获取

5.removeProp()只能移除自定义的属性

removeAttr()既可以移除自定义的属性也可以移除固有属性

3.2 class属性操作

3.2.1 addClass():

添加class的属性值

3.2.2 removeClass()：

删除class的属性值

3.2.3 toggleClass():

切换class的属性

例如:jQuery对象.toggleClass("c")

判断如果元素上有class = "c"，则将属性值c删除；

如果没有class = "c",则添加属性值c

4. 元素的追加和删除

4.1 append()

a.append(b):将b元素作为a元素的最后一个子元素，并且追加到末尾

4.2 prepend()

a.prepend(b):将b元素作为a元素的子元素，并且添加在开头

4.3 appendTo()

a.appendTo(b):将a元素作为b元素的子元素，并且追加到末尾

4.4 prependTo()

a.prependTo(b):将a元素作为b元素的子元素，并且追加到末尾

4.5 before()

a.before(b):将b元素放到a元素之前

4.6 after()

a.after(b):将b元素放到a元素之后

4.7 remove()：

删除元素

4.8 empty()

删除所有后代元素，保留自身

jQuery的DOM操作的那些事儿