JQuery页面元素综合操作

最新推荐文章于 2023-04-25 10:49:25 发布

辣椒沾辣酱啦

最新推荐文章于 2023-04-25 10:49:25 发布

阅读量359

点赞数

文章标签： jquery html 前端

本文链接：https://blog.csdn.net/weixin_70676044/article/details/127429104

版权

本文介绍如何使用JQuery进行表单元素的综合操作，包括创建表单、插入数据、选择与删除行、全选复选框及批量删除功能。

摘要由CSDN通过智能技术生成

今天的作业呢，就是通过一些表单元素来实现一些综合操作

先来看一下效果图

第一步：首先写一个表单

<body>
		<!-- 实际开发这些数据不是写死的，是通过后端程序读取数据库的内容，然后使用jq动态生成的 -->
		<button id="refersh">刷新</button>
		<hr />
		<!-- jq就是如何获取元素（选择器和筛选器），操作属性（prop()/attr()），
		操作内容（html()/text()/val()），操作样式（css()/addClass()），设定事件，设置效果 -->
		<table>
			<thead>
				<th>勾选</th>
				<th>编号</th>
				<th>名称</th>
				<th>价格</th>
				<th>品牌</th>
				<th>操作</th>
			</thead>
			<tbody id="list">
				
			</tbody>
		</table>
		<div>
			<input type="checkbox" id="checkAll" class="check">
			<span >全选&nbsp;&nbsp;</span>
			<button id="batchDel">删除</button>
		</div>
	</body>

第二步：写js类库并且插入一些数据

//模拟一些数据，假设这些数据是通过后端程序读取的数据库内容
				var data = [
					{"id":1,"name":"泡面","price":3.5,"brand":"白象"},
					{"id":2,"name":"瓜子","price":4.5,"brand":"金鸽"},