jQuery页面元素的综合操作

淡忘728

已于 2022-10-21 15:53:57 修改

阅读量180

点赞数

文章标签： jquery 前端 javascript

于 2022-10-20 12:00:49 首次发布

本文链接：https://blog.csdn.net/weixin_65824274/article/details/127423387

版权

jQ的内容：
通过选择器和筛选确定元素，可以设置属性(prop()、attr());可以设置文本内容(html()、text()、val());可以设置样式(css()、addclass());可以设置效果，可以设置事件，可以对元素进行遍历、添加，删除。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>页面元素的综合操作</title>
		<script src="js/jquery.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				//点击刷新，需要动态生成数据，需要通过Java代码读取数据库中的数据，使用JQ进行元素的添加
				//自定义一组数据，模拟后端程序获取的数据
				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(){
					//2.先把list里面页面元素清空
					$("#list").empty();
					//3.定义变量进行字符串的拼接
					var dom = "";
					//4.遍历数组
					for (var i =0;i<data.length;i++) {
						//5.获取data数组的数据
						var goods = data[i];
						//6.把该条数据的值取出来拼接成一个tr的信息
						dom+="<tr>"+
						"<td><input type='checkbox' class='check'/> </td>"+
						"<td>"+goods.id+"</td>"+
						"<td>"+goods.name+"</td>"+
						"<td>"+goods.price+"</td>"+
						"<td>"+goods.brand+"</td>"+
						"<td>"+
						"<a href='#'>修改</a>&nbsp;&nbsp;"+
						"<button>删除</button>"+
					"</td>"+
					"</tr>";
					}
					//7.向list中添加元素
					$("#list").append(dom);
				});
				//2.click事件只能绑定到文档一开始存在的元素标签上，动态生成的元素不能进行事件绑定
				//动态生成的页面元素只能通过on()进行事件绑定
				//语法 ：元素.on('事件名称','给里面那个元素',功能函数);
				$("#list").on('click','tr td button',function(){
					//当前点击的button执行删除它的父元素且名字是tr
					$(this).parents("tr").remove();
				});
				//3.点击全选，选中所有的数据行
				$("#checkAll").click(function(){
					//1.点击全选获取的选中状态
					var flag = $(this).prop("checked");
					//2.让list里面所有class为check的复选框设置相同的状态
					$("#list .check").prop("checked",flag);
				});
				//4.删除选中的行
				$("#batchDel").click(function(){
					//找到id为list里面所有class为checked的元素，且他们被选中，执行删除父元素tr
					$("#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">
				<!--<tr>
					<td><input type="checkbox" class="check"/> </td>
					<td>1</td>
					<td>泡面</td>
					<td>3.5</td>
					<td>白象</td>
					<td><a href="#">修改</a> 
						<button>删除</button>
					</td>
				</tr>-->
			</tbody>
		</table>
		<div>
			<input type="checkbox" id="checkAll" class="check" />
			<span>全选&nbsp;&nbsp;&nbsp;&nbsp;</span>
			<button id="batchDel">删除选中</button>
		</div>

	</body>
</html>

1.操作元素属性

attr()：获取和设置元素的自定义属性

prop()：获取和设置元素本身自带的属性

data()：获取元素上data-*开头的自定义属性

2.文本属性

html()：获取和设置元素中的带有html标签的内容

text()：获取和设置元素中的纯文本内容

val()：获取和设置表单元素的值

ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为 Ecma 国际。ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。

JSON数据操作

JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP,JSP,.NET）编程语言都支持JSON。

淡忘728

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery页面元素的综合操作

通过选择器和筛选确定元素，可以设置属性(prop()、attr());可以设置文本内容(html()、text()、val());可以设置样式(css()、addclass());可以设置效果，可以设置事件，可以对元素进行遍历、添加，删除。
复制链接

扫一扫