一：jquery实现全选取消反选
3元运算：条件？真值：假值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="selectAll()"> <input type="button" value="取消" onclick="cancelAll()"> <input type="button" value="dom反选" onclick="reverserAll()"> <input type="button" value="jQuery反选" onclick="reverserAll2()"> <input type="button" value="jQuery三元运算实现反选" onclick="reverserAll3()"> <table id="tb" border="1"> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>1191</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.2</td> <td>1192</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.3</td> <td>1193</td> </tr> </table> <script src="jquery-1.12.3.js"></script> <script> function selectAll(){ $("#tb :checkbox").prop("checked",true);//jquery默认自带循环 } function cancelAll(){ $("#tb :checkbox").prop("checked",false); } //反选两种方法dom实现和jquery实现 //dom实现 function reverserAll(){ $("#tb :checkbox").each(function(){//each遍历 if (this.checked) //this这里是dom对象 { this.checked=false; }else { this.checked=true; } } ) } function reverserAll2(){ $("#tb :checkbox").each(function() {//each遍历 if($(this).prop("checked"))//$(this)转jquery对象 { $(this).prop("checked",false); }else { $(this).prop("checked",true); } } ) } //3元运算实现反选 // 条件？真值：假值 function reverserAll3(){ $("#tb :checkbox").each( function(){ var v=$(this).prop("checked")?false:true; $(this).prop("checked",v); } ) } </script> </body> </html>
二：jquery实现菜单栏功能
1)找到header标签所在位置
1)在找到header标签加入onclick事件
2)找到下一个标签所在位置content
3)去除当前content的hide类，显示本标栏
4)找到当前header的父标签item
5)找到item所有兄弟标签
6)找到item兄弟标签下面的content
7)在找到content加入hide类，隐藏标题栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ height: 400px; width: 200px; border: 1px solid #dddddd; } .header{ background-color: black; color: white; } .content{ height: 50px; } .hide{ display: none; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="header">标题1</div> <div class="content">内容1</div> </div> <div class="item"> <div class="header">标题2</div> <div class="content hide">内容2</div> </div> <div class="item"> <div class="header">标题3</div> <div class="content hide">内容3</div> </div> </div> <script src="jquery-1.12.3.js"></script> <script> /* 1)找到header标签所在位置 1)在找到header标签加入onclick事件 2)找到下一个标签所在位置content 3)去除当前content的hide类，显示本标栏 4)找到当前header的父标签item 5)找到item所有兄弟标签 6)找到item兄弟标签下面的content 7)在找到content加入hide类，隐藏标题栏 */ $(".header").click( function() { $(this).next().removeClass("hide") //找到header父级标签的所有兄弟标签的孩子content,并加入hide类 $(this).parent().siblings().find(".content").addClass("hide") } ) </script> </body> </html>
三：jquery模态编辑1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .shadow{ position: fixed; top: 0; left: 0; right: 0; bottom:0; background-color: black; opacity: 0.6; z-index: 9; } .model{ position: fixed; top:50%; left: 50%; margin-left: -250px; maigin-top: -200px; background-color: white; z-index: 10; height: 200px; width: 400px; } </style> </head> <body> <a onclick="addElement();" style="color: red">增加</a> <input type="button" value="+" onclick="addElement();"> <table border="1px"> <tr> <td target="hostname">1.1.1.1</td> <td target="port">1182</td> <td> <a class="edit">编辑</a>| <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.2</td> <td target="port">1182</td> <td> <a class="edit">编辑</a>| <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.3</td> <td target="port">1182</td> <td> <a class="edit">编辑</a>| <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.4</td> <td target="port">1182</td> <td> <a class="edit">编辑</a>| <a class="del">删除</a> </td> </tr> </table> <div class="shadow hide"></div> <div class="model hide"> <input type="text" name="host"> <input type="text" name="port"> <input type="button" value="取消" onclick="cancelElement();"> </div> <script src="jquery-1.12.3.js"></script> <script> function addElement(){ console.log(1) $(".model,.shadow").removeClass('hide'); } function cancelElement(){ $(".model,.shadow").addClass("hide"); $('.model input[name="host"]').val(""); $('.model input[name="port"]').val(""); } $(".edit").click( function(){ addElement() var tds=$(this).parent().prevAll(); var host=$(tds[1]).text(); var port=$(tds[0]).text(); console.log(host,port); $('.model input[name="host"]').val(host); $('.model input[name="port"]').val(port); } ) </script> </body> </html>
四：jquery模态编辑-改进版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .shadow{ position: fixed; top: 0; left: 0; right: 0; bottom:0; background-color: black; opacity: 0.6; z-index: 9; } .model{ position: fixed; top:50%; left: 50%; margin-left: -250px; maigin-top: -200px; background-color: white; z-index: 10; height: 200px; width: 400px; } </style> </head> <body> <a onclick="addElement();" style="color: red">增加</a> <input type="button" value="+" onclick="addElement();"> <table border="1px"> <tr> <td target="host">1.1.1.1</td> <td target="port">1182</td> <td> <a class="edit">编辑</a>| <a class="del">删除</a> </td> </tr> <tr> <td target="host">1.1.1.2</td> <td target="port">1182</td> <td> <a class="edit">编辑</a>| <a class="del">删除</a> </td> </tr> <tr> <td target="host">1.1.1.3</td> <td target="port">1182</td> <td> <a class="edit">编辑</a>| <a class="del">删除</a> </td> </tr> <tr> <td target="host">1.1.1.4</td> <td target="port">1182</td> <td> <a class="edit">编辑</a>| <a class="del">删除</a> </td> </tr> </table> <div class="shadow hide"></div> <div class="model hide"> <input type="text" name="host"> <input type="text" name="port"> <input type="button" value="取消" onclick="cancelElement();"> </div> <script src="jquery-1.12.3.js"></script> <script> function addElement(){ console.log(1) $(".model,.shadow").removeClass('hide'); } function cancelElement(){ $(".model,.shadow").addClass("hide"); $('.model input[name="host"]').val(""); $('.model input[name="port"]').val(""); } // $(".edit").click( // function(){ // addElement() // var tds=$(this).parent().prevAll(); // var host=$(tds[1]).text(); // var port=$(tds[0]).text(); // // console.log(host,port); // $('.model input[name="host"]').val(host); // $('.model input[name="port"]').val(port); // // } // ) /*上面直接使用tds[0]等存在这个问题，就是如果在增加一列，所有tds及下面的赋值都要修改 处理方法：给每个td绑定个属性，并且这个属性值和model中name属性的值相对应，通过each循环获取并把属性值相等的设置 */ $(".edit").click( function(){ addElement(); var tds=$(this).parent().prevAll(); tds.each( function(){ var v1=$(this).attr("target"); var value=$(this).text(); var a1=".model input[name="; var a2="]"; //字符串拼接 var tmp=a1+v1+a2; $(tmp).val(value) } ) } ) </script> </body> </html>
五：jquery实现tab页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ width:400px; height: 38px; margin: 0 auto; line-height: 38px; } .menu .menu-item{ float: left; padding: 0 10px; border-right: 1px solid red; cursor: pointer; } .active{ background-color: rebeccapurple; } .content{ min-height: 100px; width: 400px; border:1px solid #2459a2; margin: 0 auto; } </style> </head> <body> <div class="menu"> <div class="menu-item active" target="1">菜单1</div> <div class="menu-item " target="2">菜单2</div> <div class="menu-item "target="3">菜单3</div> <div style="clear:both"></div> </div> <div class="content"> <div class="content-pg" target="1">内容1</div> <div class="content-pg hide" target="2">内容2</div> <div class="content-pg hide" target="3">内容3</div> </div> <script src="jquery-1.12.3.js"></script> <script> $(".menu-item").click( function(){ //菜单切换 $(this).addClass("active").siblings().removeClass("active"); var target=$(this).attr("target"); console.log($(".content-pg [target='"+target+"']")); $('.content').children("[target='"+ target+"']").removeClass('hide').siblings().addClass('hide'); } ) </script> </body> </html>