前端：代码示例参考

1.点击按钮全选、反选、取消

　　知识点：if else、for循环、jQuery事件绑定

　　代码如下：

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>作业需求分析</title>
 6 </head>
 7 <body>
 8 
 9 <table border="1">
10     <thead>
11     <tr>
12         <th>#</th>
13         <th>姓名</th>
14         <th>职位</th>
15     </tr>
16     </thead>
17     <tbody>
18     <tr>
19         <td><input type="checkbox"></td>
20         <td>小东北</td>
21         <td>二人转演员</td>
22     </tr>
23     <tr>
24         <td><input type="checkbox"></td>
25         <td>乔小强</td>
26         <td>xx演员</td>
27     </tr>
28     <tr>
29         <td><input type="checkbox"></td>
30         <td>韩涉</td>
31         <td>导演</td>
32     </tr>
33     </tbody>
34 </table>
35 
36 <input type="button" id="b1" value="全选">
37 <input type="button" id="b2" value="反选">
38 <input type="button" id="b3" value="取消">
39 
40 <script src="jquery-3.2.1.min.js"></script>
41 <script>
42     // 点击全选,表格中所有的checkbox都选中
43     // 1. 找checkbox
44     // 2. 全部选中  --> prop("checked", true);
45     $("#b1").click(function () {
46         $(":checkbox").prop("checked", true);
47     });
48 
49     // 点击取消
50     // 1. 找checkbox
51     // 2. 全部取消选中  --> prop("checked", false);
52    $("#b3").click(function () {
53         $(":checkbox").prop("checked", false);
54     });
55 
56     // 反选
57     // 1. 找到所有的checkbox
58     // 2. 判断
59     // 2.1 原来没选中的,要选中
60     // 2.2 原来选中的,要取消选中
61        $("#b2").click(function () {
62            // 找到所有的checkbox,把它们保存在一个名叫 $checkboxEles 的变量中,方便后面使用
63            var $checkboxEles = $(":checkbox");
64            // 遍历所有的checkbox,根据每一个checkbox的状态做不同的操作
65            for (var i=0;i<$checkboxEles.length;i++){
66                // 把每一个checkbox包成jQuery对象
67                var $tmp = $($checkboxEles[i]);
68                // 如果 checkbox是选中的
69                if ($tmp.prop("checked")){
70                    // 取消选中
71                    $tmp.prop("checked", false);
72                }else {
73                    // 否则就选中
74                    $tmp.prop("checked", true);
75                }
76            }
77     });
78 
79 </script>
80 </body>
81 </html>

全选、反选、取消

2.返回顶部

　　知识点：windows事件操作 scroll方法

　　代码如下：

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link href="index.css" rel="stylesheet" type="text/css">
 7     <style>
 8         .test {
 9             width: 500px;
10             height: 6000px;
11             background-color: antiquewhite;
12         }
13 
14         .go_back {
15             position: fixed;
16             right: 50px;
17             bottom: 50px;
18         }
19         .hide {
20             display: none;
21         }
22     </style>
23 </head>
24 <body>
25 <div class="test"></div>
26 <input class="go_back hide" type="button" value="返回顶部">
27 <script src="jquery-3.3.1.min.js"></script>
28 <script src="testjquery.js"></script>
29 <script>
30     $(window).scroll(function () {
31         if ($(window).scrollTop() > 800) {
32             $(".go_back").removeClass("hide");
33         } else {
34             $(".go_back").addClass("hide");
35         }
36     });
37     $(".go_back").on("click", function () {
38         $(window).scrollTop(0);
39     })
40 </script>
41 </body>
42 </html>

返回顶部

3.键盘相关事件 shift批量操作

　　知识点：windows事件操作 scroll方法

　　代码如下：keydown()方法

  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 <head>
  4     <meta http-equiv="content-Type" charset="UTF-8">
  5     <meta http-equiv="x-ua-compatible" content="IE=edge">
  6     <title>Title</title>
  7 </head>
  8 <body>
  9 
 10 
 11 <table border="1">
 12   <thead>
 13   <tr>
 14     <th>#</th>
 15     <th>姓名</th>
 16     <th>操作</th>
 17   </tr>
 18   </thead>
 19   <tbody>
 20   <tr>
 21     <td><input type="checkbox"></td>
 22     <td>Egon</td>
 23     <td>
 24       <select>
 25         <option value="1">上线</option>
 26         <option value="2">下线</option>
 27         <option value="3">停职</option>
 28       </select>
 29     </td>
 30   </tr>
 31   <tr>
 32     <td><input type="checkbox"></td>
 33     <td>Alex</td>
 34     <td>
 35       <select>
 36         <option value="1">上线</option>
 37         <option value="2">下线</option>
 38         <option value="3">停职</option>
 39       </select>
 40     </td>
 41   </tr>
 42   <tr>
 43     <td><input type="checkbox"></td>
 44     <td>Yuan</td>
 45     <td>
 46       <select>
 47         <option value="1">上线</option>
 48         <option value="2">下线</option>
 49         <option value="3">停职</option>
 50       </select>
 51     </td>
 52   </tr>
 53   <tr>
 54     <td><input type="checkbox"></td>
 55     <td>EvaJ</td>
 56     <td>
 57       <select>
 58         <option value="1">上线</option>
 59         <option value="2">下线</option>
 60         <option value="3">停职</option>
 61       </select>
 62     </td>
 63   </tr>
 64   <tr>
 65     <td><input type="checkbox"></td>
 66     <td>Gold</td>
 67     <td>
 68       <select>
 69         <option value="1">上线</option>
 70         <option value="2">下线</option>
 71         <option value="3">停职</option>
 72       </select>
 73     </td>
 74   </tr>
 75   </tbody>
 76 </table>
 77 
 78 <input type="button" id="b1" value="全选">
 79 <input type="button" id="b2" value="取消">
 80 <input type="button" id="b3" value="反选">
 81 
 82 
 83 <script src= "jquery-3.2.1.min.js"></script>
 84 <script>
 85 
 86     var flag = false;
 87     // shift按键被按下的时候
 88     $(window).keydown(function (event) {
 89         console.log(event.keyCode);
 90         if (event.keyCode === 16){
 91             flag = true;
 92         }
 93     });
 94     // shift按键被抬起的时候
 95     $(window).keyup(function (event) {
 96         console.log(event.keyCode);
 97         if (event.keyCode === 16){
 98             flag = false;
 99         }
100     });
101     // select标签的值发生变化的时候
102     $("select").change(function (event) {
103         // 如果shift按键被按下，就进入批量编辑模式
104         // shift按键对应的code是16
105         // 判断当前select这一行是否被选中
106         console.log($(this).parent().siblings().first().find(":checkbox"));
107         var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked");
108         console.log(isChecked);
109         if (flag && isChecked) {
110             // 进入批量编辑模式
111             // 1. 取到当前select选中的值
112             var value = $(this).val();
113             // 2. 给其他被选中行的select设置成和我一样的值
114             // 2.1 找到那些被选中行的select
115             var $select = $("input:checked").parent().parent().find("select")
116             // 2.2 给选中的select赋值
117             $select.val(value);
118         }
119     });
120 </script>
121 </body>
122 </html>

按住Shift批量操作

4.登陆页面示例

　　知识点：bootstrap用法、栅格用法

　　代码如下：

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--设置PC和移动端兼容-->
 7     <meta name="viewport" content="width=device-width, initial-scale=1">
 8     <!--引用bootstrap框架样式-->
 9     <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
10     <!--初始化各种浏览器-->
11     <link href="css/normalize.css" rel="stylesheet">
12     <link rel="stylesheet" href="css/cbl_css.css">
13     <style>
14         #login_sty {
15             margin-top: 200px;
16         }
17 
18         body {
19             background-color: #eee;
20         }
21 
22     </style>
23 </head>
24 <body>
25 <div class="container">
26     <!--栅格-->
27     <div class="row">
28         <!--元素块占4列 元素块往右挪动4列-->
29         <div id="login_sty" class="col-md-4 col-md-offset-4">
30             <h2 class="text-center">请登陆</h2>
31             <form class="form-horizontal">
32                 <div class="form-group">
33                     <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
34                     <div class="col-sm-10">
35                         <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
36                     </div>
37                 </div>
38                 <div class="form-group">
39                     <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
40                     <div class="col-sm-10">
41                         <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
42                     </div>
43                 </div>
44                 <div class="form-group">
45                     <div class="col-sm-offset-2 col-sm-10">
46                         <div class="checkbox">
47                             <label>
48                                 <input type="checkbox">记住我
49                             </label>
50                         </div>
51                     </div>
52                 </div>
53                 <div class="form-group">
54                     <div class="col-sm-offset-2 col-sm-10">
55                         <button type="submit" class="btn btn-primary btn-block">登陆</button>
56                     </div>
57                 </div>
58             </form>
59         </div>
60     </div>
61 
62 </div>
63 
64 
65 <!--导入jQuery-->
66 <script src="js/jquery-3.3.1.min.js"></script>
67 <!--导入bootstrap框架样式-->
68 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
69 </body>
70 </html>

登陆页面

posted @ 2018-11-28 10:47 宝露阅读(508) 评论(0) 收藏举报

刷新页面返回顶部

宝露

前端：代码示例参考

公告