JQ总结2

53 阅读 0 评论 35 点赞

我是靠谱客的博主怡然书包，最近开发中收集的这篇文章主要介绍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>