jquery练习
一、左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>left_menu</title> <script src="/static/node_modules/jquery/dist/jquery.js"></script> <style> .menu{ height: 500px; width: 20%; background-color: gainsboro; text-align: center; float: left; } .content{ height: 500px; width: 80%; background-color: darkgray; float: left; } .title{ line-height: 50px; background-color: wheat; color: rebeccapurple;} .hide{ display: none; } </style> </head> <body> <div class="outer"> <div class="menu"> <div class="item"> <div class="title">菜单一</div> <div class="con"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="title">菜单二</div> <div class="con hide"> <div>222</div> <div>222</div> <div>222</div> </div> </div> <div class="item"> <div class="title">菜单三</div> <div class="con hide"> <div>333</div> <div>333</div> <div>333</div> </div> </div> </div> <div class="content"></div> </div> <script> $(function () { $(".item .title").mouseenter(function () { $(this).next().removeClass("hide").parent().siblings("div").children(".con").addClass("hide") // $(this).next().removeClass("hide"); //$(this).parent().siblings("div").children(".con").addClass("hide") }) }) </script>
二、table正反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/node_modules/jquery/dist/jquery.js"></script> </head> <body> <button>全选</button> <button>取消</button> <button>反选</button> <hr> <table border="1"> <tr> <td><input type="checkbox"></td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td><input type="checkbox"></td> <td>222</td> <td>222</td> <td>222</td> <td>222</td> </tr> <tr> <td><input type="checkbox"></td> <td>333</td> <td>333</td> <td>333</td> <td>333</td> </tr> <tr> <td><input type="checkbox"></td> <td>444</td> <td>444</td> <td>444</td> <td>444</td> </tr> </table> </body> <script> $(function () { $("button").click(function () { if ($(this).text() == "全选"){ $("table :checkbox").prop("checked",true) }else if ($(this).text() == "取消"){ $("table :checked").prop("checked",false) } else { $("table :checkbox").each(function () { $(this).prop("checked",!$(this).prop("checked")) //$(this).prop("checked")会获取这个checkbox是否被选中，选中返回true }) } }) }) </script> </html>
