湘潭网站建设口碑好磐石网络,麻江网站建设,wordpress文章加颜色,免费做网站推荐jQuery 操作入门案例 一、复选框案例 功能: 列表的全选#xff0c;反选#xff0c;全不选功能实现。 实现步骤和分析#xff1a; - 全选 1. 为全选按钮绑定单击事件。 2. 获取所有的商品项复选框元素#xff0c;为其添加 checked 属性#xff0c;属性值为 true。 -…jQuery 操作入门案例 一、复选框案例 功能: 列表的全选反选全不选功能实现。 实现步骤和分析 - 全选 1. 为全选按钮绑定单击事件。 2. 获取所有的商品项复选框元素为其添加 checked 属性属性值为 true。 - 全不选 1. 为全不选按钮绑定单击事件。 2. 获取所有的商品项复选框元素为其添加 checked 属性属性值为 false。 - 反选 1. 为反选按钮绑定单击事件 2. 获取所有的商品项复选框元素为其添加 checked 属性属性值是目前相反的状态。
环境需要引入jQuery
示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title复选框/title
/head
bodytable idtab1 border1 width800 aligncentertrth styletext-align: leftinput stylebackground:lightgreen idselectAll typebutton value全选input stylebackground:lightgreen idselectNone typebutton value全不选input stylebackground:lightgreen idreverse typebutton value反选/thth分类ID/thth分类名称/thth分类描述/thth操作/th/trtrtdinput typecheckbox classitem/tdtd1/tdtd手机数码/tdtd手机数码类商品/tdtda href#修改/a|a href#删除/a/td/trtrtdinput typecheckbox classitem/tdtd2/tdtd电脑办公/tdtd电脑办公类商品/tdtda href#修改/a|a href#删除/a/td/trtrtdinput typecheckbox classitem/tdtd3/tdtd鞋靴箱包/tdtd鞋靴箱包类商品/tdtda href#修改/a|a href#删除/a/td/trtrtdinput typecheckbox classitem/tdtd4/tdtd家居饰品/tdtd家居饰品类商品/tdtda href#修改/a|a href#删除/a/td/tr/table
/body
script srcjs/jquery-3.3.1.min.js/script
script//全选//1.为全选按钮添加单击事件$(#selectAll).click(function(){//2.获取所有的商品复选框元素为其添加checked属性属性值true$(.item).prop(checked,true);});//全不选//1.为全不选按钮添加单击事件$(#selectNone).click(function(){//2.获取所有的商品复选框元素为其添加checked属性属性值false$(.item).prop(checked,false);});//反选//1.为反选按钮添加单击事件$(#reverse).click(function(){//2.获取所有的商品复选框元素为其添加checked属性属性值是目前相反的状态let items $(.item);items.each(function(){$(this).prop(checked,!$(this).prop(checked));});});
/script
/html
二、随机图片案例 功能 随机图片点击开始按钮,随机图片,点击停止按钮,停止并显示大图; 实现步骤和分析 一)开始按钮: 1. 准备一个数组 2. 定义计数器 3. 定义定时器对象 4. 定义图片路径变量 5. 为开始按钮绑定单击事件 6. 设置按钮状态 7. 设置定时器循环显示图片 8. 循环获取图片路径 9. 将当前图片显示到小图片上 10. 计数器自增 二)停止按钮: 1. 为停止按钮绑定单击事件 2. 取消定时器 3. 设置按钮状态 4. 将图片显示到大图片上
环境需要引入jQuery和准备图片
示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title随机图片/title
/head
body
!-- 小图 --
div stylebackground-color:red;border: dotted; height: 50px; width: 50pximg srcimg/01.jpg idsmall stylewidth: 50px; height: 50px;
/div
!-- 大图 --
div styleborder: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10pximg src idbig stylewidth: 400px; height: 400px; display:none;
/div!-- 开始和结束按钮 --
input idstartBtn typebutton stylewidth: 150px;height: 150px; font-size: 20px value开始
input idstopBtn typebutton stylewidth: 150px;height: 150px; font-size: 20px value停止
/body
script srcjs/jquery-3.3.1.min.js/script
script//1.准备一个数组let imgs [img/01.jpg,img/02.jpg,img/03.jpg,img/04.jpg,img/05.jpg,img/06.jpg,img/07.jpg,img/08.jpg,img/09.jpg,img/10.jpg];//2.定义计数器变量let count 0;//3.声明定时器对象let time null;//4.声明图片路径变量let imgSrc ;//5.为开始按钮绑定单击事件$(#startBtn).click(function(){//6.设置按钮状态//禁用开始按钮$(#startBtn).prop(disabled,true);//启用停止按钮$(#stopBtn).prop(disabled,false);//7.设置定时器循环显示图片time setInterval(function(){//8.循环获取图片路径let index count % imgs.length; // 0%100 1%101 2%102 .. 9%109 10%100 //9.将当前图片显示到小图片上imgSrc imgs[index];$(#small).prop(src,imgSrc);//10.计数器自增count;},10);});//11.为停止按钮绑定单击事件$(#stopBtn).click(function(){//12.取消定时器clearInterval(time);//13.设置按钮状态//启用开始按钮$(#startBtn).prop(disabled,false);//禁用停止按钮$(#stopBtn).prop(disabled,true);//14.将图片显示到大图片上$(#big).prop(src,imgSrc);$(#big).prop(style,width: 400px; height: 400px;);});/script
/html
