JQuary页面元素综合操作案例

实现点击刷新之后出现数据并且实现添加删除，批量删除。

第一步：写页面布局，标题，按钮，复选框

<button id="refresh">刷新</button><hr /><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;&nbsp;&nbsp;</span><button id="batchDel">删除</button></div>

第二步：把想要的数据利用数组的形式存储（模拟一些数据，假设这些数据是通过后端程序读取的数据库内容）

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":"盼盼"},];

第三步：刷新生成数据，定义变量，读取数据，并且把数据生成每一行的标签元素添加到定义的变量中去

//刷新生成数据$("#refresh").click(function(){//当点击新的时候，首先清空元素$("#list").empty();//1,定义标签变量var dom="";//2,读取data中的数据，把数据生成每一行的标签元素追加到dom变量中for(var i=0;i<data.length;i++){var goods=data[i]dom+="<tr>"+"<td><input type='checkbox' class='check'/></td>";dom+="<td>"+goods.id+"<td/>"+"<td>"+goods.name+"<td/>"+"<td>"+goods.price+"<td/>"+"<td>"+goods.brand+"<td/>";dom+="<td>"+"<a href='#'>购买</a>&nbsp:"+"<button class='del'>删除</button>"+"</td>"+"</tr>";}//3.把dom变量追加到tbody中$("#list").append(dom)});

第四步：点击全选，勾选列表中所有的复选框（click不能对动态生成的元素执行事件绑定，必须使用on进行事件动态绑定）

//click不能对动态生成的元素执行事件绑定，必须使用on进行事件动态绑定//语法：元素.on(事件名，元素里面那个标签绑定，function(){})$("#list").on('click','.del',function(){//当前点击的删除按钮的父辈元素且名字是tr的进行移除$(this).parents("tr").remove()});//3.点击全选，勾选列表中所有的复选框$("#checkAll").click(function(){//获取当前复选框要变成的状态var flag=$(this).prop("checked");if(flag){//如果全选被勾选了，把id为list里面所有的class为check的复选框设置勾选$("#list .check").prop("checked",true)}else{//全选被取消了，把id为list里面所有的class为check的复选框设置取消勾选$("#list .check").prop("checked",false)}});

第五步：批量删除（筛选class叫做check的复选框，并且状态被勾选，删除它们父元素的tr行）

//批量删除$("#batchDel").click(function(){//筛选class叫做check的复选框，并且状态被勾选，删除它们父元素的tr行$(".check:checked").parents("tr").remove();});

页面总体代码：

<!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":"盼盼"},]; //刷新生成数据$("#refresh").click(function(){//当点击新的时候，首先清空元素$("#list").empty();//1,定义标签变量var dom="";//2,读取data中的数据，把数据生成每一行的标签元素追加到dom变量中for(var i=0;i<data.length;i++){var goods=data[i]dom+="<tr>"+"<td><input type='checkbox' class='check'/></td>";dom+="<td>"+goods.id+"<td/>"+"<td>"+goods.name+"<td/>"+"<td>"+goods.price+"<td/>"+"<td>"+goods.brand+"<td/>";dom+="<td>"+"<a href='#'>购买</a>&nbsp:"+"<button class='del'>删除</button>"+"</td>"+"</tr>";}//3.把dom变量追加到tbody中$("#list").append(dom)});//click不能对动态生成的元素执行事件绑定，必须使用on进行事件动态绑定//语法：元素.on(事件名，元素里面那个标签绑定，function(){})$("#list").on('click','.del',function(){//当前点击的删除按钮的父辈元素且名字是tr的进行移除$(this).parents("tr").remove()});//3.点击全选，勾选列表中所有的复选框$("#checkAll").click(function(){//获取当前复选框要变成的状态var flag=$(this).prop("checked");if(flag){//如果全选被勾选了，把id为list里面所有的class为check的复选框设置勾选$("#list .check").prop("checked",true)}else{//全选被取消了，把id为list里面所有的class为check的复选框设置取消勾选$("#list .check").prop("checked",false)}});//批量删除$("#batchDel").click(function(){//筛选class叫做check的复选框，并且状态被勾选，删除它们父元素的tr行$(".check:checked").parents("tr").remove();});});</script></head><body><button id="refresh">刷新</button><hr /><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;&nbsp;&nbsp;</span><button id="batchDel">删除</button></div></body>
</html>

JQuary页面元素综合操作案例相关推荐

第五章常用页面元素自动化操作(上）
-----Web自动化测试之Webdriver(python)--从零到熟练(系列) 经过我们对自动化测试环境的搭建,页面元素的定位,测试点的验证以及自动化测试用例的初探等的学习,可以说我们可以编写自 ...
Cypress之模拟键盘鼠标操作以及页面元素拖动操作
上篇文章讲解了使用cypress框架时,如何上传或者下载文件,以及定位操作iframe和shadow dom下的页面元素.此次课程将讲解如何模拟键盘输入.鼠标操作以及如何拖动页面元素,另外,会介绍如何 ...
selenium与js联动实现页面定位及删除页面元素的操作问题
在用selenuim爬取网站的过程中常常需要进行下拉条操作,在python中使用js联动是非常好的一个解决方法 # 定位到页面最底部 js = 'window.scrollTo(0, document ...
selenium 页面经常改变元素_selenium 总结篇，常见方法和页面元素的操作
今天,总结一下selenium怎么操作web页面常见的元素. 主要有: 上传 alter dialog prompt dialog confirm dialog select list radio b ...
cypress之实现文件上传下载以及操作iframe下页面元素
前面讲解了使用cypress框架如何定位.操作页面元素以及校验测试结果,此次课程将介绍如何实现文件上传.操作iframe下面的页面原因以及操作shadow dom下的页面元素.为了完成此次课程目标,拆 ...
selenium拖动元素java_【自动化测试】Java+Selenium操作页面元素（合集）
本文基于Java语言,依托于Eclipse工具,使用Selenium框架,主要介绍在Selenium中,如何操作Web页面中的各种元素. Eclipse 搭建 1.1.Eclipse 配置 1.2.引 ...
java 获取页面元素的位置_Selenium Java 页面元素定位2
一.操作目的 1.1 自动化测试常用操作 1.定位网页上的元素,并存储到一个变量中: 2.对变量进行操作,比如点击或输入文字: 3.设定页面元素的操作值: 二.定位方法汇总 2.1 findEleme ...
python selenium定位不到二级页面元素解决方法
在对一个页面元素进行操作,点击按钮弹出一个二级页面,一直获取不到元素解决: 需要切换到新的页面句柄才可以定位到元素 # 获取当前页的句柄main_windows = chromeDriver.cur ...
educoder头歌Web实训 web课——综合应用案例：动态焦点图页面的制作
educoder头歌Web实训太原理工web课--综合应用案例:拼图页面的制作[全网更新最快]_玛卡巴卡的博客-CSDN博客第1关:动态焦点图页面的样式设计任务描述本关任务: 完成动态焦点图 ...

JQuary页面元素综合操作案例

JQuary页面元素综合操作案例相关推荐

最新文章

热门文章