案例一:全选、反选、取消实例
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" οnclick="checkAll();" /> <input type="button" value="反选" οnclick="reverseAll();" /> <input type="button" value="取消" οnclick="cancleAll();"/> <table border="1"> <thead> <tr> <th>选项</th> <th>IP</th> <th>PORT</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll() { $('#tb :checkbox').prop('checked',true); #prop是jquery的属性,checked设置为true,只有checked表示获取选中的 } function cancleAll() { $('#tb :checkbox').prop('checked',false); } function reverseAll() { $(':checkbox').each(function(k){ // this,代指当前循环的每一个元素 // Dom /* if(this.checked){ this.checked = false; }else{ this.checked = true; } */ /* if($(this).prop('checked')){ $(this).prop('checked', false); }else{ $(this).prop('checked', true); } */ // 三元运算var v = 条件? 真值:假值 var v = $(this).prop('checked')?false:true; $(this).prop('checked',v); }) } </script> </body> </html> 全选、反选、取消
案例二:菜单栏点击展开收起实例
本实例实现菜单栏点击一个菜单另一个菜单收起来,类似下图:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .header { background-color: #67b168; color: wheat; } .content { min-height: 30px; } .hide { display: none; } </style> </head> <body> <div style="height: 400px;width: 200px;border: 1px solid #d58512"> <div class="tiem"> <div class="header">标题一</div> <div class="content hide">内容一</div> </div> <div class="tiem"> <div class="header">标题二</div> <div class="content hide">内容二</div> </div> <div class="tiem"> <div class="header">标题三</div> <div class="content hide">内容三</div> </div> </div> <script src='js/jquery-1.11.0.min.js'></script> <script> // 找到所有class为header的标签,然后.click()绑定事件 $('.header').click(function(){ // #jQuery默认循环所有选中的标签 // $(this) 当前点击的标签 // $(this).next 当前点击的标签的下一个标签 // 找到当前点击的标签的下一个标签,移除hide样式,点击后hide去掉,即展开 $(this).next().removeClass('hide'); // 找到当前标签的父标签的兄弟标签,然后找样式为.content的标签 $(this).parent().siblings().find('.content').addClass('hide'); // 可以一行完成 // $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide') }) </script> </body> </html>
案例三:模态编程框案例
本案例实现魔态编程框案例,点击添加会出现一个对话框,用于添加一行,编辑可以编辑当前行,删除可以删除当前行
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .modal{ position: fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-left: -250px; margin-top: -250px; background-color: #eeeeee; z-index: 10; } .shadow { position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.6; background-color: #000000; z-index: 9; } .hide { display: none; } </style> </head> <body> <a οnclick="addElement();">添加</a> <table border="2" id="tb"> <tr> <!--target 自定义属性--> <td target="hostname">1.1.1.1</td> <td target="port">80</td> <td> <a class="edit">编辑</a> <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">2.2.2.2</td> <td target="port">80</td> <td> <a class="edit">编辑</a> <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">3.3.3.3</td> <td target="port">8000</td> <td> <a class="edit">编辑</a> <a class="del">删除</a> </td> </tr> </table> <!--modal 提前写好编程框--> <div class="modal hide"> <div> <input name="hostname" type="text"> <input name="port" type="text"> </div> <div> <input type="button" value="取消" οnclick="canceModal();"> <input type="button" value="确定" οnclick="confirmModal();"> </div> </div> <!--shadow 遮罩层--> <div class="shadow hide"></div> <script src='js/jquery-1.11.0.min.js'></script> <script> function addElement(){ $(".modal,.shadow").removeClass('hide'); } function canceModal(){ $(".modal,.shadow").addClass('hide'); // 清空框中的脏数据, $('.modal input[type="text"]').val(""); } // $('.edit').click(function(){ // $(".modal,.shadow").removeClass('hide'); this 当前点击的标签,parent父标签,prevAll父标签上面的所有同级标签 // var tds = $(this).parent().prevAll(); 循环获取tds中的内容(td中的内容),赋值给编程框中的value // tds.each(function(){ this 当前每个td 获取自定义属性的值,hostname/port // var n = $(this).attr('target'); 获取当前td内容:1.1.1.1/80 // var v = $(this).text(); 将获取的内容放入相应的编程框中 $('.modal input[name="[hostname"]').val(1.1.1.1) 因为hostaname/port为变量,而name=里面需要是“”格式,所以用到字符串拼接 var a1 = '.modal input[name="'; var a2 = '"]'; var temp = a1 + n + a2 // $('.modal input[name="' + n + '"]').val(v) // }); // // }); // 在添加更多一行的时候所产生的 input 和 button 都是动态生成的,所以不能使用 click,要使用 on $(document).on('click','.edit',function(){ $(".modal,.shadow").removeClass('hide'); // this 当前点击的标签,parent父标签,prevAll父标签上面的所有同级标签 var tds = $(this).parent().prevAll(); // 循环获取tds中的内容(td中的内容),赋值给编程框中的value tds.each(function(){ // this 当前每个td // 获取自定义属性的值,hostname/port var n = $(this).attr('target'); // 获取当前td内容:1.1.1.1/80 var v = $(this).text(); // 将获取的内容放入相应的编程框中 // $('.modal input[name="[hostname"]').val(1.1.1.1) // 因为hostaname/port为变量,而name=里面需要是“”格式,所以用到字符串拼接 // var a1 = '.modal input[name="'; // var a2 = '"]'; // var temp = a1 + n + a2 $('.modal input[name="' + n + '"]').val(v) }); }); function confirmModal(){ // 创建一个tr var tr = document.createElement('tr'); $('.modal input[type="text"]').each(function(){ // 循环使用dom创建一个td,也就是有几个input就需要加几个td var td = document.createElement('td'); // 获取输入框中输入的数据 var v = $(this).val(); // 获取数据库的属性 var tage = $(this).attr('name'); // 将属性加入到td中 $(td).attr('target',tage); // 将输入的内容加入td中 $(td).append(v); // 将td加入tr中 $(tr).append(td); }); // 最后将编辑和删除加入 var temp = "<a class='edit'>编辑</a> <a class='del'>删除</a>"; // 将一行加入到table里面 var td2 = document.createElement('td'); $(td2).append(temp); $(tr).append(td2); $('#tb').append(tr); // 添加完成后去掉编程框和遮罩层 $('.modal,.shadow').addClass('hide'); // 清空框中的脏数据,否则下次在点击添加时,还会有上一次填写的数据 $('.modal input[type="text"]').val(""); } // 删除tr行 // 在添加更多一行的时候所产生的 input 和 button 都是动态生成的,所以不能使用 click,要使用 on $(document).on('click','.del',function(){ console.log(this,"1"); $(this).parent().parent().remove(); }); </script> </body> </html>
案例四:横向菜单切换
本案例实现横向菜单菜单切换,即点击菜单一现实内容一,点击菜单二,显示菜单二。。。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .content{ min-height: 100px; border: 1px solid #eeeeee; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" a="1">菜单一</div> <div class="menu-item" a="2">菜单二</div> <div class="menu-item" a="3">菜单三</div> </div> <div class="content"> <div b="1">内容一</div> <div class="hide" b="2">内容二</div> <div class="hide" b="3">内容三</div> </div> </div> <script src='js/jquery-1.11.0.min.js'></script> <script> $('.menu-item').click(function(){ $(this).addClass('active').siblings().removeClass('active'); var target = $(this).attr('a'); $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide'); }); </script> </body> </html>