jQuery案例_网站交易平台

jQuery案例

来源：互联网转载 | 更新日期：2023-09-07 08:57:10

- - 1. 开关灯(jquery与dom对象转换案例)
  - 2. 下拉菜单(选择器案例)
  - 3. 突出展示(选择器案例)
  - 4. 手风琴(选择器案例)
  - 5. 淘宝服饰精品(选择器案例)
  - 6. tab栏切换(class操作案例)
  - 7. 下拉菜单(滑入与滑出案例)
  - 8. 360开机动画(自定义动画案例)
  - 9. 生成表格(动态创建元素案例)
  - 10. 城市选择(节点创建案例)
  - 11. 表格删除(清空和移除节点案例)
  - 12. 动态数据添加和删除(val()方法案例)
  - 13. 美女相册(操作属性案例)
  - 14. 表格全选反选(prop()方法案例)
  - 15. 固定导航栏(scrollTop与scrollLeft案例)
  - 16. 动态数据添加和删除(使用on委托注册事件)
  - 17. 按键变色(jquery事件对象案例)
  - 18. 五角星评分(jquery事件对象案例)

1. 开关灯(jquery与dom对象转换案例)

点击按钮是网页屏幕变亮或变暗

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>img{display: block;margin: 0 auto;}</style> </head> <body><button>开灯</button><button>关灯</button><img src="./image/coder.jpg" alt=""> </body> </html> <script src="../jquery-3.4.1/jquery-3.4.1.js"></script> <script>$(function (){// 给按钮添加事件：设置body的背景色// 1. 获取按钮let btns = document.getElementsByTagName('button');// 2. 给关灯按钮设置点击事件btns[1].onclick=function (){$('body').css('backgroundColor','#ccc');}// 3. 给开灯按钮设置一个点击事件$(btns[0]).click(function (){$('body')[0].style.backgroundColor='white';})}) </script>

2. 下拉菜单(选择器案例)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}ul {list-style: none;}.wrap {width: 330px;height: 30px;margin: 100px auto 0;padding-left: 10px;background-image: url(../image/bg.jpg);}.wrap li{background-image: url(../image/libg.jpg);}.wrap > ul > li {float: left;margin-right: 10px;position: relative;}.wrap a {display: block;height: 30px;width: 100px;text-decoration: none;color: #000;line-height: 30px;text-align: center;}.wrap li ul {position: absolute;top: 30px;display: none;}</style> </head> <body> <div class="wrap"><ul><li><a href="javascript:void(0);">一级菜单1</a><ul><li><a href="javascript:void(0);">二级菜单1</a></li><li><a href="javascript:void(0);">二级菜单2</a></li><li><a href="javascript:void(0);">二级菜单3</a></li></ul></li><li><a href="javascript:void(0);">一级菜单1</a><ul><li><a href="javascript:void(0);">二级菜单1</a></li><li><a href="javascript:void(0);">二级菜单2</a></li><li><a href="javascript:void(0);">二级菜单3</a></li></ul></li><li><a href="javascript:void(0);">一级菜单1</a><ul><li><a href="javascript:void(0);">二级菜单1</a></li><li><a href="javascript:void(0);">二级菜单2</a></li><li><a href="javascript:void(0);">二级菜单3</a></li></ul></li></ul> </div> </body> </html> <script src="../jquery-3.4.1/jquery-3.4.1.js"></script> <script>$(function () {//需求: 给一级菜单li设置鼠标移入事件，二级菜单显示。// 给一级菜单li设置鼠标离开事件，二级菜单隐藏。//获取一级菜单li的方式://$('li');//不行//$('ul>li');//不行//$('.wrap li');//不行//$('.wrap>ul>li')//可行的.//1.给一级菜单li设置鼠标移入事件，二级菜单显示。$(`.wrap>ul>li`).mouseover(function () {//console.log(this); //谁触发了鼠标移入事件,那这个this就是谁,this还是一个dom对象.// $(this).children('ul').css('display','block'); //显示就是更改display属性为block.$(this).children('ul').show(); //show()方法本质上还是更新display属性为block.});//2.给一级菜单li设置鼠标离开事件，二级菜单隐藏。$('.wrap>ul>li').mouseout(function () {$(this).children('ul').hide(); //hide()方法本质上还是更新display属性为none});//3.思考题://为什么不给一级菜单a标签设置鼠标移入和离开事件?//因为这样的话,选不到二级菜单.// $('.wrap>ul>li>a').mouseover(function () {// $(this).siblings('ul').show();// });// $('.wrap>ul>li>a').mouseout(function () {// $(this).siblings('ul').hide();// });}); </script>

3. 突出展示(选择器案例)

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}body {background: #000;}.wrap {margin: 100px auto 0;width: 630px;height: 394px;padding: 10px 0 0 10px;background: #000;overflow: hidden;border: 1px solid #fff;}.wrap li {float: left;margin: 0 10px 10px 0;}.wrap img {display: block;border: 0;}</style> </head> <body> <div class="wrap"><ul><li><a href="#"><img src="../image/01.jpg" alt=""/></a></li><li><a href="#"><img src="../image/02.jpg" alt=""/></a></li><li><a href="#"><img src="../image/03.jpg" alt=""/></a></li><li><a href="#"><img src="../image/04.jpg" alt=""/></a></li><li><a href="#"><img src="../image/05.jpg" alt=""/></a></li><li><a href="#"><img src="../image/06.jpg" alt=""/></a></li></ul> </div> </body> </html> <script src="../jquery-3.4.1/jquery-3.4.1.js"></script> <script>$(function () {//需求1:给小人物所在的li标签设置鼠标移入事件:当前li标签透明度为1,其他的兄弟li标签透明度为0.4//需求2:鼠标离开大盒子,所有的li标签的透明度改成1.//获取小人物们所在的li//$('.wrap li')//可以的//console.log($('.wrap').find('li'));//可以的//需求1:$(`.wrap`).find('li').mouseenter(function () {console.log($(this).css('opacity', 1)); //这个css方法有返回值,返回值就是设置这个方法的元素本身.console.log($(this).css('opacity', 1).siblings('li'));$(this).css('opacity', 1).siblings('li').css('opacity',0.4);});//需求2:$('.wrap').mouseleave(function () {//$('.wrap').find('li').css('opacity',1);//console.log($(this)); //在这个离开事件中,this是这整个大盒子.$(this).find('li').css('opacity',1);});}); </script>

4. 手风琴(选择器案例)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>* {padding: 0;margin: 0;}ul {list-style-type: none;}.parentWrap {width: 200px;text-align: center;}.menuGroup {border: 1px solid #999;background-color: #e0ecff;}.groupTitle {display: block;height: 20px;line-height: 20px;font-size: 16px;border-bottom: 1px solid #ccc;cursor: pointer;}.menuGroup > div {height: 200px;background-color: #fff;display: none;}</style> </head> <body> <ul class="parentWrap"><li class="menuGroup"><span class="groupTitle">标题1</span><div>我是弹出来的div1</div></li><li class="menuGroup"><span class="groupTitle">标题2</span><div>我是弹出来的div2</div></li><li class="menuGroup"><span class="groupTitle">标题3</span><div>我是弹出来的div3</div></li><li class="menuGroup"><span class="groupTitle">标题4</span><div>我是弹出来的div4</div></li> </ul> </body> </html> <script src="../jquery-3.4.1/jquery-3.4.1.js"></script> <script>$(function () {//需求:点击标题li标签,对应的div显示, 他的兄弟标签li下面的div隐藏.$('.parentWrap>.menuGroup').click(function () {// console.log($('.menuGroup'))//jQuery特性:隐式迭代//jQuery特性:链式编程,在于一个方法返回的是一个jQuery对象,既然是jQuery对象就可以继续点出jQuery的方法来.$(this).children('div').show().parent().siblings('li').children('div').hide();});}); </script>

5. 淘宝服饰精品(选择器案例)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;font-size: 12px;}ul {list-style: none;}a {text-decoration: none;}.wrapper {width: 298px;height: 248px;margin: 100px auto 0;border: 1px solid pink;overflow: hidden;}#left,#center,#right{float: left;}#left li , #right li{background: url(../image/lili.jpg) repeat-x;}#left li a,#right li a{display: block;width: 48px;height: 27px;border-bottom: 1px solid pink;line-height: 27px;text-align: center;color: black;}#left li a:hover,#right li a:hover{background-image: url(../image/abg.gif);}#center {border-left: 1px solid pink;border-right: 1px solid pink;}</style> </head> <body> <div class="wrapper"><ul id="left"><li><a href="#">女靴</a></li><li><a href="#">雪地靴</a></li><li><a href="#">冬裙</a></li><li><a href="#">呢大衣</a></li><li><a href="#">毛衣</a></li><li><a href="#">棉服</a></li><li><a href="#">女裤</a></li><li><a href="#">羽绒服</a></li><li><a href="#">牛仔裤</a></li></ul><ul id="center"><li><a href="#"><img src="../image/女靴.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="../image/雪地靴.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="../image/冬裙.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="../image/呢大衣.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="../image/毛衣.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="../image/棉服.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="../image/女裤.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="../image/羽绒服.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="../image/牛仔裤.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="../image/女包.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="../image/男包.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="../image/登山鞋.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="../image/皮带.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="../image/围巾.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="../image/皮衣.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="../image/男毛衣.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="../image/男棉服.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="../image/男靴.jpg" width="200" height="250" /></a></li></ul><ul id="right"><li><a href="#">女包</a></li><li><a href="#">男包</a></li><li><a href="#">登山鞋</a></li><li><a href="#">皮带</a></li><li><a href="#">围巾</a></li><li><a href="#">皮衣</a></li><li><a href="#">男毛衣</a></li><li><a href="#">男棉服</a></li><li><a href="#">男靴</a></li></ul> </div> </body> </html> <script src="../jquery-3.4.1/jquery-3.4.1.js"></script> <script>$(function () {//需求1:给左边的li标签们设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏.//需求2:给右边的li标签们设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏.//需求1:$('#left>li').mouseenter(function () {//获取当前鼠标移入的这个li标签的索引.var idx = $(this).index(); //索引:表示的是这个元素在他兄弟元素间的排行.//console.log(idx);//让中间索引对应的li显示,其他的li隐藏.//$('#center>li:eq('+idx+')'); //字符串的拼接$('#center>li').eq(idx).show().siblings('li').hide();});//需求2:$('#right>li').mouseenter(function () {//获取当前鼠标移入的这个li标签的索引.var idx = $(this).index();idx += 9;//9不要写死,9是左边li标签的个数.//让中间索引对应的li显示,其他的li隐藏.$('#center>li').eq(idx).show().siblings('li').hide();});//因为age已经成为字符串的一部分了.不能拿到age变量的值.// var age = 18;// console.log("我的名字是age");//思考题://为什么是给li标签设置鼠标移入事件,而不是给a标签设置鼠标移入事件?//因为给a标签设置的话,不能拿到正确的索引.// $('#left a').mouseenter(function () {// var idx = $(this).index();// console.log(idx);// });}); </script>

6. tab栏切换(class操作案例)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}ul {list-style: none;}.wrapper {width: 1000px;height: 475px;margin: 0 auto;margin-top: 100px;}.tab {border: 1px solid #ddd;border-bottom: 0;height: 36px;width: 320px;}.tab li {position: relative;float: left;width: 80px;height: 34px;line-height: 34px;text-align: center;cursor: pointer;border-top: 4px solid #fff;}.tab span {position: absolute;right: 0;top: 10px;background: #ddd;width: 1px;height: 14px;overflow: hidden;}.products {width: 1002px;border: 1px solid #ddd;height: 476px;}.products .main {float: left;display: none;}.products .main.selected {display: block;}.tab li.active {border-color: red;border-bottom: 0;}</style> </head> <body> <div class="wrapper"><ul class="tab"><li class="tab-item active">国际大牌<span>◆</span></li><li class="tab-item">国妆名牌<span>◆</span></li><li class="tab-item">清洁用品<span>◆</span></li><li class="tab-item">男士精品</li></ul><div class="products"><div class="main selected"><a href="###"><img src="../image/guojidapai.jpg" alt=""/></a></div><div class="main"><a href="###"><img src="../image/guozhuangmingpin.jpg" alt=""/></a></div><div class="main"><a href="###"><img src="../image/qingjieyongpin.jpg" alt=""/></a></div><div class="main"><a href="###"><img src="../image/nanshijingpin.jpg" alt=""/></a></div></div> </div> </body> </html> <script src="../jquery-3.4.1/jquery-3.4.1.js"></script> <script>$(function () {//需求:给tab栏的每一个li标签设置鼠标移入事件: 当前li添加active类,其他的兄弟li移除active类.// 找到当前tab栏索引一致的div,让他添加 selected类,其他的兄弟div移除selected类.//需求1$('.tab>.tab-item').mouseenter(function () {$(this).addClass('active').siblings('li').removeClass('active');//获取鼠标当前移入的这个li标签的索引var idx = $(this).index();//需求2:$('.products>.main').eq(idx).addClass('selected').siblings('div').removeClass('selected');});}); </script>

7. 下拉菜单(滑入与滑出案例)

// html与css代码与下拉菜单(选择器案例)相同 $(function () {//需求: 给一级菜单的li标签设置鼠标移入事件，二级菜单ul显示。// 给一级菜单li设置鼠标离开事件，二级菜单隐藏。//鼠标移入事件.$(`.wrap>ul>li`).mouseenter(function () {//$(this).children('ul').css('display','block');//简写$(this).children('ul').stop(true,false).slideDown(300);});//鼠标移出事件.$('.wrap>ul>li').mouseleave(function () {//$(this).find('ul').css('display','none');//简写$(this).find('ul').stop(true,false).slideUp(150);}); });

8. 360开机动画(自定义动画案例)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>.box {width: 322px;position: fixed;bottom: 0;right: 0;overflow: hidden;}span {position: absolute;top: 0;right: 0;width: 30px;height: 20px;cursor: pointer;}</style> </head> <body> <div class="box" id="box"><span id="closeButton"></span><div class="hd" id="headPart"><img src="../image/t.jpg" alt=""/></div><div class="bd" id="bottomPart"><img src="../image/b.jpg" alt=""/></div> </div></body> </html> <script src="../jquery-3.4.1/jquery-3.4.1.js"></script> <script>$(function () {//1.给关闭按钮一个点击事件.$('#closeButton').click(function () {//2.让下面那部分的高度动画变为0.$('#bottomPart').animate({height:0},500, function () {//3.让整个大盒子的宽度动画变为0$('#box').animate({width:0},1000);});});}); </script>

9. 生成表格(动态创建元素案例)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>* {padding: 0;margin: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;}th,td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}td {font: 14px "微软雅黑";}tbody tr {background-color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}</style> </head> <body> <input type="button" value="获取数据" id="j_btnGetData" /> <table><thead><tr><th>标题</th><th>地址</th><th>说明</th></tr></thead><tbody id="j_tbData"></tbody> </table> </body> </html> <script src="../jquery-3.4.1/jquery-3.4.1.js"></script> <script>$(function () {//模拟从后端拿到的数据//data数组的每一个元素其实就是一个tr.var data = [{name: "传智播客",url: "http://www.itcast.cn",type: "IT最强培训机构"}, {name: "黑马程序员",url: "http://www.itheima.com",type: "大学生IT培训机构"}, {name: "传智前端学院",url: "http://web.itcast.cn",type: "前端的黄埔军校"}];//需求:点击获取数据按钮,根据data这个数组里面的数据来给tbody追加tr.//data这个数组,有多少个元素,就生成多少个tr, 每一个元素又是一个对象,所以对象有多少个键值对就有多少个td.//给获取数据按钮设置一个点击事件.$('#j_btnGetData').click(function () {//1.html();//设置内容,内容中有标签会解析; 会覆盖原来的内容的.var list = [];for(var i = 0 ; i < data.length; i++){//生成tr.list.push("<tr>");//生成tdfor(var key in data[i]){list.push('<td>');list.push(data[i][key]);list.push('</td>');}list.push("</tr>");}//console.log(list.join(""));$('#j_tbData').html(list.join(""));//2.$();// for(var i = 0 ; i < data.length; i++){// var $tr = $("<tr><td>"+data[i]['name']+"</td><td>"+data[i]['url']+"</td><td>"+data[i]['type']+"</td></tr>");// //把创建出来的$tr追加到tbody中去.// $('#j_tbData').append($tr);// }});}); </script>

10. 城市选择(节点创建案例)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>select {width: 200px;background-color: teal;height: 200px;font-size: 20px;}.btn-box {width: 30px;display: inline-block;vertical-align: top;}</style> <body><h1>城市选择：</h1><select id="src-city" name="src-city" multiple><option value="1">北京</option><option value="2">上海</option><option value="3">深圳</option><option value="4">广州</option><option value="5">西红柿</option></select><div class="btn-box"><button id="btn-sel-all"> >> </button><button id="btn-sel-none"> << </button><button id="btn-sel"> ></button><button id="btn-back"> < </button></div><select id="tar-city" name="tar-city" multiple></select> </body> </html> <script src="../jquery-3.4.1/jquery-3.4.1.js"></script> <script>$(function () {//1.全部到右边$('#btn-sel-all').click(function () {//找到左边select下拉菜单的所有option项,把这些option项都添加到右边的select下拉菜单中去.$('#src-city>option').appendTo($('#tar-city'));});//2.全部到左边$('#btn-sel-none').click(function () {//找到右边select下拉菜单中的所有option项,把这些option项都添加到左边的select下拉菜单中去.$('#tar-city>option').appendTo($('#src-city'));});//3.选中的到右边.$('#btn-sel').click(function () {//找到左边select下拉菜单中,被选中的option项, 把这些option项添加到右边的select下拉菜单中.$('#src-city>option:selected').appendTo($('#tar-city'));});//4.选中的到左边.$('#btn-back').click(function () {//找到右边select下拉菜单中,被选中的option项,把这些option项添加到左边的select下拉菜单中.$('#tar-city>option:selected').appendTo($('#src-city'));});}); </script>

11. 表格删除(清空和移除节点案例)

12. 动态数据添加和删除(val()方法案例)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>* {padding: 0;margin: 0;}.wrap {width: 410px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;}th, td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}td {font: 14px "微软雅黑";}td a.get {text-decoration: none;}a.del:hover {text-decoration: underline;}tbody tr {background-color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}.btnAdd {width: 110px;height: 30px;font-size: 20px;font-weight: bold;}.form-item {height: 100%;position: relative;padding-left: 100px;padding-right: 20px;margin-bottom: 34px;line-height: 36px;}.form-item > .lb {position: absolute;left: 0;top: 0;display: block;width: 100px;text-align: right;}.form-item > .txt {width: 300px;height: 32px;}.mask {position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background: #000;opacity: 0.6;display: none;}#j_hideFormAdd {width: 22px;height: 22px;cursor: pointer;text-align: center;line-height: 22px;font-size: 18px;}#j_hideFormAdd:hover {background-color: skyblue;}.form-add {position: fixed;top: 30%;left: 50%;margin-left: -197px;padding-bottom: 20px;background: #fff;display: none;}.form-add-title {background-color: #f7f7f7;border-width: 1px 1px 0 1px;border-bottom: 0;margin-bottom: 15px;position: relative;}.form-add-title span {width: auto;height: 18px;font-size: 16px;font-family: 宋体;font-weight: bold;color: rgb(102, 102, 102);text-indent: 12px;padding: 8px 0px 10px;margin-right: 10px;display: block;overflow: hidden;text-align: left;}.form-add-title div {width: 16px;height: 20px;position: absolute;right: 10px;top: 6px;font-size: 30px;line-height: 16px;cursor: pointer;}.form-submit {text-align: center;}.form-submit input {width: 170px;height: 32px;}</style> </head> <body>  <div class="wrap"><div><input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/></div><table><thead><tr><th>课程名称</th><th>所属学院</th><th>操作</th></tr></thead><tbody id="j_tb"><tr><td>JavaScript</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" class="get">delete</a></td></tr><tr><td>css</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" class="get">delete</a></td></tr><tr><td>html</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" class="get">delete</a></td></tr><tr><td>jQuery</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" class="get">delete</a></td></tr></tbody></table> </div>  <div id="j_mask" class="mask"></div>  <div id="j_formAdd" class="form-add"><div class="form-add-title"><span>添加数据</span><div id="j_hideFormAdd">×</div></div><div class="form-item"><label class="lb" for="j_txtLesson">课程名称：</label><input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称"></div><div class="form-item"><label class="lb" for="j_txtBelSch">所属学院：</label><input class="txt" type="text" id="j_txtBelSch" value="传智播客-前端与移动开发学院"></div><div class="form-submit"><input type="button" value="添加" id="j_btnAdd"></div> </div> </body> </html> <script src="../jquery-3.4.1/jquery-3.4.1.js"></script> <script>$(function () {//需求1:点击添加数据按钮,显示添加面板和遮罩层.//需求2:点击添加面板里的关闭按钮,隐藏添加面板和遮罩层.//需求3:点击添加面板里的添加按钮,会把输入的内容生成一个tr,这个tr添加到tbody中//需求4:点击delete这些a标签,删除对应的tr.//需求1:$('#j_btnAddData').click(function () {$('#j_formAdd').show();$('#j_mask').show();});//需求2:$('#j_hideFormAdd').click(function () {$('#j_formAdd').hide();$('#j_mask').hide();});//需求3:$('#j_btnAdd').click(function () {//3.1 获取到用户输入的所属学院和课程名称.var txtLesson = $('#j_txtLesson').val(); //获取用户输入的课程名称var txtBelSch = $('#j_txtBelSch').val(); //获取用户输入的所属学院//3.2 把用户输入的课程名称和所属学院 ,创建出一个tr.var $trNew =$( '<tr>' +'<td>'+txtLesson+'</td>'+'<td>'+txtBelSch+'</td>' +'<td><a href="javascript:;" class="get">delete</a></td>' +'</tr>' );//给新创建的这个$trNew里面的a标签添加一个事件.$trNew.find('.get').click(function () {//$(this).parent().parent().remove();$trNew.remove();});//3.3 把新创建的tr标签添加到tbody中.$('#j_tb').append($trNew);//3.4 把添加数据面板和遮罩层影藏起来.$('#j_hideFormAdd').click();});//4.需求$('#j_tb .get').click(function () {$(this).parent().parent().remove();});//页面出现了哈哈二字,说明上面的代码,包括需求4这个注册事件,都已经完成了.//说明原来的那4个tr已经注册了事件了.console.log("哈哈");}); </script>

13. 美女相册(操作属性案例)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body {font-family: "Helvetica","Arial",serif;color: #333;background-color: #ccc;margin: 1em 10%;}h1 {color: #333;background-color: transparent;}a {color: #c60;background-color: transparent;font-weight: bold;text-decoration: none;}ul {padding: 0;}li {float: left;padding: 1em;list-style: none;}#imagegallery {list-style: none;}#imagegallery li {margin: 0px 20px 20px 0px;padding: 0px;display: inline;}#imagegallery li a img {border: 0;}</style> </head> <body> <h2>美女画廊</h2> <ul id="imagegallery"><li><a href="../image/meinv/1.jpg" title="美女A"><img src="../image/meinv/1-small.jpg" width="100" alt="美女1" /></a></li><li><a href="../image/meinv/2.jpg" title="美女B"><img src="../image/meinv/2-small.jpg" width="100" alt="美女2" /></a></li><li><a href="../image/meinv/3.jpg" title="美女C"><img src="../image/meinv/3-small.jpg" width="100" alt="美女3" /></a></li><li><a href="../image/meinv/4.jpg" title="美女D"><img src="../image/meinv/4-small.jpg" width="100" alt="美女4" /></a></li> </ul> <div style="clear:both"></div> <img id="image" src="../image/meinv/placeholder.png" alt="" width="450px" /> <p id="des">选择一个图片</p> </body> </html> <script src="../jquery-3.4.1/jquery-3.4.1.js"></script> <script>$(function () {//1.需求//给小图片a标签设置一个单击事件.//让id为image的img标签修改src属性为当前点击的a标签的href属性的值//让id为des的这个p标签的文本设置为当前点击的这个a标签的title属性的值.$('#imagegallery>li>a').click(function () {//获取当前点击的a标签的href属性的值和title属性的值。var srcValue = $(this).attr('href');var contentValue = $(this).attr('title');//给img标签的src属性赋值，以及给p标签的内容赋值。$('#image').attr('src',srcValue);$('#des').text(contentValue);//阻止a标签的跳转return false;});}); </script>

14. 表格全选反选(prop()方法案例)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>* {padding: 0;margin: 0;}.wrap {width: 300px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;}th, td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}td {font: 14px "微软雅黑";}tbody tr {background-color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}</style> </head> <body> <div class="wrap"><table><thead><tr><th><input type="checkbox" id="j_cbAll"/></th><th>课程名称</th><th>所属学院</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox"/></td><td>JavaScript</td><td>前端与移动开发学院</td></tr><tr><td><input type="checkbox"/></td><td>css</td><td>前端与移动开发学院</td></tr><tr><td><input type="checkbox"/></td><td>html</td><td>前端与移动开发学院</td></tr><tr><td><input type="checkbox"/></td><td>jQuery</td><td>前端与移动开发学院</td></tr></tbody></table> </div> <div id="one"></div> </body> <script src="../jquery-3.4.1/jquery-3.4.1.js"></script> <script>$(function () {//需求1：上面的多选框选中,下面的多选框们跟着选中,上面的多选框没有选中,下面的多选框们跟着不选中.$('#j_cbAll').click(function () {//获取这多选框的checked值。var checkedValue = $(this).prop('checked');//console.log(checkedValue);//让下面的多选框们的checked跟随这个checkedValue$('#j_tb input').prop('checked',checkedValue);});//需求2：下面的多选框们,都有单击事件:// 如果下面的多选框们都选中了,那么上面的那个多选框跟着选中,如果下面多选框有一个没有选中,那么上面的多选框就不选中.$('#j_tb input').click(function () {//判断下面的那四个多选框是否都被选中了。var numOfAll = $('#j_tb input').length; //获取到下面所有多选框的个数。var numOfSelect = $('#j_tb input:checked').length; //获取到下面被选中的多选框的个数。console.log(numOfAll + ":" + numOfSelect);//判断// if(numOfAll == numOfSelect){// //全部被选中。// $('#j_cbAll').prop('checked',true);// }else {// //有的有没选中。// $('#j_cbAll').prop('checked',false);// }//上面这个判断其实可以优化。$('#j_cbAll').prop('checked',numOfAll === numOfSelect);});}); </script> </html>

15. 固定导航栏(scrollTop与scrollLeft案例)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}.top, .nav {width: 1423px;margin: 0 auto;}.main {width: 1000px;margin: 10px auto;}img {display: block;vertical-align: middle;}</style> </head> <body> <div class="top"><img src="../image/top.png"/> </div> <div class="nav"><img src="../image/nav.png"/> </div> <div class="main"><img src="../image/main.png"/> </div> <script src="../jquery-3.4.1/jquery-3.4.1.js"></script> <script>$(function () {//思路:给页面设置一个滚动事件,时刻监视页面的scrollTop的值,// 如果这个值大于第一部分的高度,就设置第二部分为固定定位.// 如果这个值小于第一部分的高度,就设置第二部分的定位还原.//计算第一部分的高度.var topHeight = $('.top').height();//计算第二部分的高度.var navHeight = $('.nav').height();//给页面设置一个滚动事件.$(window).scroll(function () {//1.获取页面滚出去的距离(被卷曲出去的距离);var scrollTopValue = $(window).scrollTop();//2.判断,看scrollTopValue的值是不是大于第一部分的高度.if(scrollTopValue >= topHeight){//让第二部分固定定位.$('.nav').css({position:'fixed',top:0,left:0});//设置第三部分的margin-top的值为第二部分的高度.$('.main').css({marginTop:navHeight+10});}else {//让第二部分定位还原.$('.nav').css({position:'static',top:0,left:0});//设置第三部分的margin-top的值为原来的值.$('.main').css({marginTop:10});}});}); </script> </body> </html>

16. 动态数据添加和删除(使用on委托注册事件)

// html与css、部分js与案例12相同 // 修改需求4//使用on委托注册的方式来添加删除方法. //支持动态注册的. $('#j_tb').on('click','.get', function () {//jQuery为了使用方便,把this给修改了.//console.log($(this));$(this).parent().parent().remove(); });

17. 按键变色(jquery事件对象案例)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> <<style>.wrap {width: 400px;height: 400px;margin: 100px auto 0;}.wrap h1 {text-align: center;}.wrap div {width: 400px;height: 300px;background: pink;font-size: 30px;text-align: center;line-height: 300px;} </style> </head> <body><div class="wrap"><h1>按键改变颜色</h1><div id="bgChange">keyCode为：<span id="keyCodeSpan"></span></div> </div> <script src="../jquery-3.4.1/jquery-3.4.1.js"></script> <script>$(function () {//获取divvar $div = $('#bgChange');//获取显示按键的spanvar $showCode = $('#keyCodeSpan');//给页面注册一个键盘按下事件.$(document).on('keydown', function (e) {//console.log(e.keyCode); //r 82 g 71 b 66 p 80 y 89switch (e.keyCode){case 82:$div.css('backgroundColor','red');$showCode.text(82);break;case 71:$div.css('backgroundColor','green');$showCode.text(71);break;case 66:$div.css('backgroundColor','blue');$showCode.text(66);break;case 80:$div.css('backgroundColor','purple');$showCode.text(80);break;case 89:$div.css('backgroundColor','yellow');$showCode.text(89);break;default :$div.css('backgroundColor','pink');$showCode.text("查无此键");break;}});}); </script> </body> </html>

18. 五角星评分(jquery事件对象案例)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>* {padding: 0;margin: 0;}.comment {font-size: 40px;color: red;}.comment li {float: left;cursor: pointer;}ul {list-style: none;}</style> </head> <body> <ul class="comment"><li>☆</li><li>☆</li><li>☆</li><li>☆</li><li>☆</li> </ul> <script src="../jquery-3.4.1/jquery-3.4.1.js"></script> <script>$(function () {//prev(); 上一个兄弟;prevAll(); 之前所有的兄弟 ;next(); 下一个兄弟 ;nextAll(); 之后所有的兄弟//声明两个个变量,分别记录这个实心/空心五角心.var sx_wjx = '★';var kx_wjx = '☆';$('.comment>li').on('mouseenter', function () {//需求1:// //当前鼠标移入的li和他之前的兄弟li都显示实心五角心.// $(this).text(sx_wjx).prevAll().text(sx_wjx);// //当前鼠标移入的li之后的兄弟li都显示空心五角心.// $(this).nextAll().text(kx_wjx);//这样不行.//$(this).text(sx_wjx).prevAll().text(sx_wjx).nextAll().text(kx_wjx);//这样又可行, 加了一个end();$(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);}).on('mouseleave', function () {//需求2:鼠标离开li,所有的li都变成空心.$('.comment>li').text(kx_wjx);//获取刚才点击的那个li.$('.comment>li[clickCurrent]').text(sx_wjx).prevAll().text(sx_wjx);}).on('click', function () {//需求3:点击li,鼠标离开后,刚才点击的那个li和之前的li都变成实心五角心,后面空心五角心.//给鼠标当前点击的li做一个记号,为什么要做一个记号,是因为鼠标离开的时候,要知道你刚才点击的是哪一个li.//给当前鼠标点击的这个li添加一个独一无二的属性.$(this).attr('clickCurrent','current').siblings().removeAttr('clickCurrent');});}); </script> </body> </html>

上一篇：远程控制电脑软件VNC安装使用教程：Windows系统

下一篇：C#event EventHandler事件触发