JQ总结2

71 阅读 0 评论 47 点赞

我是靠谱客的博主怡然书包，这篇文章主要介绍JQ总结2，现在分享给大家，希望可以做个参考。

DOM操作

1.内容操作：
html(): 获取/设置元素的标签体内容。
text(): 获取/设置元素的标签体纯文本内容。
val()：获取/设置元素的value属性值。

属性操作
1.通用属性操作

attr(): 获取/设置元素的属性。
removeAttr():删除属性。
prop():获取/设置元素的属性。
removeProp():删除属性。

2.对class属性操作

addClass():添加class属性值。
removeClass():删除class属性值。
toggleClass():切换class属性。

3.CRUD操作

append():父元素将子元素追加到末尾。
对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾。
prepend():父元素将子元素追加到开头。
对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头。
appendTo():
对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾。
prependTo()：
对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头。
after():添加元素到元素后边。
对象1.after(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系。
before():添加元素到元素前边。
对象1.before(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系。
insertAfter()：
对象1.insertAfter(对象2)：将对象1添加到对象2后边。对象1和对象2是兄弟关系。
insertBefore()：
对象1.insertBefore(对象2)：将对象1添加到对象2前边。对象1和对象2是兄弟关系。
remove():移除元素。
对象.remove():将对象删除掉。
empty():清空元素的所有后代元素。
对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点。

元素增删

复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function() {
				var data = [{
						"id": 1,
						"name": "方便面",
						"price": 3.5,
						"brand": "白象"
					},
					{
						"id": 2,
						"name": "火腿肠",
						"price": 1.5,
						"brand": "双汇"
					},
					{
						"id": 3,
						"name": "牛奶",
						"price": 4.5,
						"brand": "蒙牛"
					},
					{
						"id": 4,
						"name": "瓜子",
						"price": 6.5,
						"brand": "金鸽"
					},
					{
						"id": 5,
						"name": "辣条",
						"price": 5.5,
						"brand": "卫龙"
					},
					{
						"id": 6,
						"name": "面包",
						"price": 3.5,
						"brand": "盼盼"
					},
				];
 
				//1.点击刷新，动态生产数据
				$("#refresh").click(function() {
 
					//先把list里的元素清空
					$("#list").empty()
					//定义变量进行字符串的拼接
					var dom = "";
					//遍历数组
					for (var i = 0; i < data.length; i++) {
						var goods = data[i];
 
						//把该条数据的值拼接成一个tr信息
						dom += "<tr>" +
							"<td><input type='checkbox' id='checkAll' class='check'/></td>" +
							"<td>" + goods.id + "</td>" +
							"<td>" + goods.name + "</td>" +
							"<td>" + goods.price + "</td>" +
							"<td>" + goods.brand + "</td>" +
							"<td>" +
							"<a href='#'>修改</a>" +
							"<button>删除</button>" +
							"</td>" +
							"</tr>";
					}
					//向list中添加数据
					$("#list").append(dom);
				});
 
				//click事件只能绑定到文档一开始存在的元素标签上，动态生产的元素不能进行事件绑定
				//动态生成的页面元素只能通过on()进行事件绑定
				//2.语法： 元素。on('事件名称','给里面那个元素萨',功能函数);
				$("#list").on('click', 'tr td button', function() {
					$(this).parents("tr").remove()
				});
 
				//3
				$("#checkAll").click(function() {
					//3.1点击全选获取状态
					var flag = $(this).prop("checked")
					//3.2让list里面所有的复选框设置相同状态
					$("#list .check").prop("checked", flag)
				})
				//4.删除选中行
				$("#batchDel").click(function() {
					$("#list .check:checked ").parents("tr").remove()
				});
			});
		</script>
	</head>
	<body>
		<button id="refresh">刷新</button>
		<hr />
		<table>
			<thead>
				<tr>
					<th>勾选</th>
					<th>编号</th>
					<th>名称</th>
					<th>价格</th>
					<th>品牌</th>
					<th>操作</th>
				</tr>
			</thead>
 
			<tbody id="list">
 
			</tbody>
		</table>
		<div>
			<input type="checkbox" id="checkAll" class="check">
			<span>全选</span>
			<button id="batchDel">删除</button>
		</div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function() {
				var data = [{
						"id": 1,
						"name": "方便面",
						"price": 3.5,
						"brand": "白象"
					},
					{
						"id": 2,
						"name": "火腿肠",
						"price": 1.5,
						"brand": "双汇"
					},
					{
						"id": 3,
						"name": "牛奶",
						"price": 4.5,
						"brand": "蒙牛"
					},
					{
						"id": 4,
						"name": "瓜子",
						"price": 6.5,
						"brand": "金鸽"
					},
					{
						"id": 5,
						"name": "辣条",
						"price": 5.5,
						"brand": "卫龙"
					},
					{
						"id": 6,
						"name": "面包",
						"price": 3.5,
						"brand": "盼盼"
					},
				];
 
				//1.点击刷新，动态生产数据
				$("#refresh").click(function() {
 
					//先把list里的元素清空
					$("#list").empty()
					//定义变量进行字符串的拼接
					var dom = "";
					//遍历数组
					for (var i = 0; i < data.length; i++) {
						var goods = data[i];
 
						//把该条数据的值拼接成一个tr信息
						dom += "<tr>" +
							"<td><input type='checkbox' id='checkAll' class='check'/></td>" +
							"<td>" + goods.id + "</td>" +
							"<td>" + goods.name + "</td>" +
							"<td>" + goods.price + "</td>" +
							"<td>" + goods.brand + "</td>" +
							"<td>" +
							"<a href='#'>修改</a>" +
							"<button>删除</button>" +
							"</td>" +
							"</tr>";
					}
					//向list中添加数据
					$("#list").append(dom);
				});
 
				//click事件只能绑定到文档一开始存在的元素标签上，动态生产的元素不能进行事件绑定
				//动态生成的页面元素只能通过on()进行事件绑定
				//2.语法： 元素。on('事件名称','给里面那个元素萨',功能函数);
				$("#list").on('click', 'tr td button', function() {
					$(this).parents("tr").remove()
				});
 
				//3
				$("#checkAll").click(function() {
					//3.1点击全选获取状态
					var flag = $(this).prop("checked")
					//3.2让list里面所有的复选框设置相同状态
					$("#list .check").prop("checked", flag)
				})
				//4.删除选中行
				$("#batchDel").click(function() {
					$("#list .check:checked ").parents("tr").remove()
				});
			});
		</script>
	</head>
	<body>
		<button id="refresh">刷新</button>
		<hr />
		<table>
			<thead>
				<tr>
					<th>勾选</th>
					<th>编号</th>
					<th>名称</th>
					<th>价格</th>
					<th>品牌</th>
					<th>操作</th>
				</tr>
			</thead>
 
			<tbody id="list">
 
			</tbody>
		</table>
		<div>
			<input type="checkbox" id="checkAll" class="check">
			<span>全选</span>
			<button id="batchDel">删除</button>
		</div>
	</body>
</html>