Jquery例項練習
阿新 • • 發佈：2018-11-10
Jquery例項練習
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #cover{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.3); z-index: 99; } #model { position: absolute; width: 400px; height: 200px; margin-top:-100px ; margin-left: -200px; left: 50%; top: 50%; z-index: 100; background: white; } .hide { display: none; } </style> </head> <body> <div id="cover" class="hide usrtag"></div> <div id="model" class="hide usrtag"> <label> 使用者: <input id='name' type="text"> </label> <hr> <label> 密碼: <input id="hobby" type="text"> </label> <hr> <button id="send">提交</button> <button id="back">取消</button> </div> <button class="selectAll">全選</button> <button class="reverse">反選</button> <button class="cancell">取消</button> <button class="add">新增</button> <table border="1px"> <thead> <tr> <th>#</th> <th>姓名</th> <th>愛好</th> <th>操作</th> </tr> </thead> <tr> <td><input class="i1" type="checkbox"></td> <td>景女神</td> <td>茶道</td> <td><button class="hire">開除</button></td> </tr> <tr> <td><input type="checkbox"></td> <td>金老闆</td> <td>開車</td> <td><button class="hire">開除</button></td> </tr> <tr> <td><input type="checkbox"></td> <td>苑局</td> <td>不洗頭</td> <td><button class="hire">開除</button></td> </tr> </table> <script src="jquery-3.3.1.js"></script> <script> // 全選按鈕繫結事件將所有input標籤設定選定 $('.selectAll').click(function () { $("input").prop('checked',true); }); //反算按鈕繫結點選事件，並租個判斷checked屬性並反轉 $('.reverse').click(function () { let $obj=$('input'); for(let i=0;i<$obj.length;i++) { let state = $($obj[i]).prop('checked'); $($obj[i]).prop('checked',!state); } }); //取消按鈕繫結點選事件，並將所有的checked屬性取消 $('.cancell').click(function () { $("input").prop('checked',false); }); $('.hire').click(function () { $(this).parent().parent().remove() }); $('.add').click(function () { $('.usrtag').removeClass('hide') }); $('#back').click(function () { $('.usrtag').addClass('hide') }); $('#send').click(function () { let name=$('#name').val(); let pwd=$('#hobby').val(); }) </script> </body> </html>