1、jQuery事件css
經常使用事件
blur(function(){}) 失去焦點
focus(function(){}) 獲取焦點（ 搜索框例子）
change(function(){}) 當select下拉框中的元素髮生改變的時候觸發change事件(select例子)
click() 點擊
dblclick() 雙擊
scroll() 滾動
submit() 提交
不經常使用事件
error()
focusin()
focusout()
keydown([) 按下
keypress() 按鍵
keyup() 鍵鬆開
mousedown() 鼠標按下
mouseenter() 鼠標移進去
mouseleave() 鼠標離開：只有鼠標離開被選元素的時候，纔會觸發mouseleave事件
mousemove() 鼠標移動
mouseout() 鼠標離開：不管鼠標離開被選元素仍是任何子元素，都會觸發mouseout事件
mouseover() 鼠標懸停
mouseup( ) 鼠標彈起
resize( ) 元素窗口發生變化
select( )
unload( )
補充：
文檔樹加載完以後綁定事件（絕大多數狀況下）
第一種：吧script放在後面。
第二種：
$(document).ready(function(){
// 綁定事件的代碼
....
})
簡寫：
$(function(){
// 綁定事件的代碼
....
});
事件練習
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>經常使用事件</title>
6 </head>
7 <body>
8 <input type="text" name="search" value="蘋果手機" data-show ="">
9 <button>搜索</button>
10 <select name="" id="s1">
11 <option value="gansu">甘肅</option>
12 <option value="wuwei">武威</option>
13 <option value="dingxi">定西</option>
14 <option value="longxi">隴西</option>
15 <option value="dalian">大連</option>
16 </select>
17 <script src="jquery-3.2.1.min.js"></script>
18 <script>
19 // focus和blur事件
20 $(document).ready(function () {
21 //文檔加載完以後執行下面的代碼
22 $(":input").focus(function () {
23 var data = $(this).val();
24 $(this).val("");
25 $(this).attr("data-show", data);
26
27 });
28 $(":input").blur(function () {
29 $(this).val($(this).attr("data-show"));
30 });
31 $("#s1").change(function () {
32 // 當你的下拉框改變的時候就觸發這個事件，就會執行下面的代碼
33 console.log($(this).val())
34 })
35 });
36
37 </script>
38 </body>
39 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>onmouse事件</title>
6 <style>
7 .box{
8 width: 300%;
9 height: 200px;
10 }
11 .title{
12 background: steelblue;
13 line-height: 40px;
14 }
15 .con{
16 background: slategray;
17 line-height: 30px;
18 }
19 .hide{
20 display: none;
21 }
22 </style>
23 </head>
24 <body>
25 <div class="box">
26 <div class="title">onmouse</div>
27 <div class="con hide">
28 <div><a href="" class="item">你好嗎？</a></div>
29 <div><a href="" class="item">我好啊</a></div>
30 <div><a href="" class="item">好就好唄</a></div>
31 </div>
32 </div>
33 <script>
34 var ele_title = document.getElementsByClassName('title')[0];
35 var ele_box = document.getElementsByClassName('box')[0];
36 //鼠標指上去的事件
37 ele_title.onmouseover = function () {
38 this.nextElementSibling.classList.remove('hide');
39 };
40 //鼠標移走的事件的兩種方式
41 // 方式一（推薦）
42 ele_box.onmouseleave= function () {
43 ele_title.nextElementSibling.classList.add('hide');
44 };
45 // 方式二
46 // ele_title.onmouseout = function () {
47 // this.nextElementSibling.classList.add('hide');
48 // }
49 // 方式一和方式二的區別：
50 // 不一樣點
51 // onmouseout：不論鼠標指針離開被選元素仍是任何子元素，都會觸發onmouseout事件
52 // onmouseleave：只有在鼠標指針離開被選元素時，纔會觸發onmouseleave事件
53 // 相同點：都是鼠標移走觸發事件
54 </script>
55 </body>
56 </html>
2、jQuery擴展（很重要！！）html
一、jQuery擴展語法html5
把擴展的內容就能夠寫到xxxx.js文件了，在主文件中直接導入就好了。jquery
用法一、$.xxx()
$.extend({
"GDP": function () {
console.log("戴小紅花");
}
});
- 給jQuery添加擴展
- $.GDP()
用法二、$("").xxx()
$.fn.extend({
"BJG": function () {
console.log("英語八級就是好！");
}
})
- 給jQuery對象添加擴展
- $(":input").BJG()
二、練習1bootstrap
第一步：不完美數組
extend.js文件//插入新功能。app
$.extend({
"GDP":function () {
foo();
console.log("帶小紅花")
}
});
那麼若是這樣定義一個函數，其餘的擴展均可以調用這個函數了
這個函數只想在本身調用。不想讓它公共的調用，不讓他起衝突
那麼定義一個私有的。用一個匿名函數
function foo() {
console.log("英語八級就是牛")
}
$.fn.extend({
"BJG":function () {
foo()
console.log("就這樣吧")
}
});
繼續第二步：加上匿名函數ide
匿名函數：foo方法只想本身用，不想讓別人調用
(function () {
$.extend({
"GDP":function () {
foo();
console.log("帶小紅花")
}
});
function foo() { 函數的內部能夠調用，外部就不能夠調用了
console.log("英語八級就是牛")
}
})();
(function () {
$.fn.extend({
"BJG":function () {
foo2();
console.log("就這樣吧")
}
});
function foo2() {
console.log("哎哎呀")
}
})();
第三步、越趨於完美：既不可讓別人在外部隨意調用，也能夠避免別人修改$函數
// 若是怕$被別人改，那麼就傳個參數進去
(function (jq) {
jq.extend({
"GDP":function () {
foo();
console.log("帶小紅花")
}, //能夠擴展多個（加上逗號在寫幾個）
"SGS":function () {
console.log("你蛤蟆")
}
});
function foo() {
console.log("英語八級就是牛")
}
})(jQuery);
(function (jq) {
jq.fn.extend({
"BJG":function () {
foo2();
console.log("就這樣吧")
}
});
function foo2() {
console.log("哎哎呀")
}
})(jQuery);
extend.html文件post
三、具體示例練習（登陸校驗）
login.html文件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>做業1</title>
6 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
7 <style>
8 .container {
9 margin-top: 50px;
10 }
11 </style>
12 </head>
13 <body>
14 <div class="container">
15 <div class="row">
16 <div class="col-md-4 col-md-offset-4">
17 <form action="" novalidate>
18 <div class="form-group">
19 <label for="username">用戶名</label>
20 <input type="text" class="form-control" id="username" placeholder="username">
21 <span id="helpBlock" class="help-block"></span>
22 </div>
23 <div class="form-group">
24 <label for="Password">密碼</label>
25 <input type="password" class="form-control" id="Password" placeholder="Password">
26 <span id="helpBlock2" class="help-block"></span>
27 </div>
28 <button type="submit" class="btn btn-default submit">提交</button>
29 </form>
30 </div>
31 </div>
32 </div>
33 <!--jQuery導入必定要放到js的上面-->
34 <script src="jquery-3.2.1.min.js"></script>
35 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
36 <script>
37 // var span =$("span");
38 $(".submit").on("click",function () {
39 //先清空狀態
40 $("form .form-group").removeClass("has-error");
41 $("form span").text("");
42 $(":input").each(function () {
43 if ($(this).val().length===0){
44 var name = $(this).prev().text();
45 $(this).parent().addClass("has-error");
46 $(this).next().text(name+"不能爲空");
47 return false
48 }
49 });
50 return false
51 })
52
53
54 </script>
55 </body>
56 </html>
loginextend.js 文件
// 匿名函數
(function (jq) { //jq就至關於$
jq.extend({
"myValidate": function (form) {
var formObj = jq(form) ;//賦一個變量，由於咱們常常用到
這裏的form參數就指的是在html文件裏面傳進去的"#login"，也就是找到的form標籤
formObj.find(":submit").on("click", function () {
//先清空狀態
formObj.find(".form-group").removeClass("has-error");
formObj.find("span").text("");
formObj.find(":input").each(function () {
if ($(this).val().length === 0) {
var name = $(this).prev().text();
$(this).parent().addClass("has-error");
$(this).next().text(name + "不能爲空");
return false
}
});
return false
});
}
})
})(jQuery);
loginextend2.js 文件
/**
* Created by Administrator on 2017/10/17.
*/
// 匿名函數
(function (jq) {
jq.fn.extend({
"myValidate": function (arg) {
console.log(this); //就是當前的.前面的jQuery對象 $("#login") ----->也就是[form#login]
var formObj = this;//賦一個變量，由於咱們常常用到
formObj.find(":submit").on("click", function () {
// this --->提交的submit
//先清空狀態
formObj.find(".form-group").removeClass("has-error");
formObj.find("span").text("");
//each循環
var flag = true; //設置一個標誌位
// 找到input的屬性[required=true]的，而後設置相關的操做
formObj.find("input[required=true]").each(function () {
var inputID = jq(this).attr("id"); //獲取input的id屬性值 "username"
var minlength = arg[inputID]["min-length"]; //arg[inputID]["min-length"]--->arg["username"]["min-length"]--->獲得6
if ($(this).val().length === 0) {
//而這裏的this是當前的input框，和上面的不是同一個
var name = $(this).prev().text();
$(this).parent().addClass("has-error");
$(this).next().text(name + "不能爲空");
flag = false;
return flag
}
if (minlength!==undefined){
if (jq(this).val().length<minlength){
var name = $(this).prev().text();
$(this).parent().addClass("has-error");
$(this).next().text(name + "長度過短");
flag = false;
return flag
}
}
});
return flag
});
}
})
})(jQuery);
3、表格的添加 | 刪除 | 編輯示例
第一種：點擊編輯沒有模態框，是input框編輯修改
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>增刪改</title>
6 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
7 <style>
8 .addBtn {
9 margin-top: 30px;
10 margin-bottom: 15px;
11 }
12 </style>
13 </head>
14 <body>
15 <div class="container">
16 <div class="row">
17 <div class="col-md-9 col-md-offset-2">
18 <!-- Button trigger modal -->
19 <button type="button" class="btn btn-primary btn-mg addBtn" data-toggle="modal" data-target="#myModal">
20 添加學生的信息
21 </button>
22 <table class="table table-striped">
23 <tbody>
24 <tr>
25 <th>姓名</th>
26 <th>年齡</th>
27 <th>性別</th>
28 <th>操做</th>
29 </tr>
30 <tr>
31 <td class="col-md-3">六點</td>
32 <td class="col-md-3">23</td>
33 <td class="col-md-3">女</td>
34 <td>
35 <button class="btn btn-success editBtn">編輯</button>
36 <button class="btn btn-danger delBtn">刪除</button>
37 </td>
38 </tr>
39 <tr>
40 <td>時時彩</td>
41 <td>24</td>
42 <td>女</td>
43 <td>
44 <button class="btn btn-success editBtn">編輯</button>
45 <button class="btn btn-danger delBtn">刪除</button>
46 </td>
47 </tr>
48 <tr>
49 <td>剛強</td>
50 <td>13</td>
51 <td>男</td>
52 <td>
53 <button class="btn btn-success editBtn">編輯</button>
54 <button class="btn btn-danger delBtn">刪除</button>
55 </td>
56 </tr>
57 </tbody>
58 </table>
59 </div>
60 </div>
61 </div>
62
63
64 <!-- Modal模態框 -->
65 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
66 <div class="modal-dialog" role="document">
67 <div class="modal-content">
68 <div class="modal-header">
69 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
70 </button>
71 <h4 class="modal-title" id="myModalLabel">Modal title</h4>
72 </div>
73 <div class="modal-body">
74 <form>
75 <div class="form-group">
76 <label for="username">姓名</label>
77 <input type="text" class="form-control item" id="username" placeholder="username">
78 </div>
79 <div class="form-group">
80 <label for="age">年齡</label>
81 <input type="text" class="form-control item" id="age" placeholder="age">
82 </div>
83 <div class="form-group">
84 <label for="gender">性別</label>
85 <input type="text" class="form-control item" id="gender" placeholder="gender">
86 </div>
87 </form>
88 </div>
89 <div class="modal-footer">
90 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
91 <button type="button" class="btn btn-primary queding">肯定</button>
92 </div>
93 </div>
94 </div>
95 </div>
96 <script src="jquery-3.2.1.min.js"></script>
97 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
98 <script>
99 //添加信息
100 $(".queding").on("click",function () {
101 arr=[];
102 $(".item").each(function () {
103 // console.log($(this).val()) //返回的是input框裏面輸入的內容
104 var ele_v = $(this).val();
105 arr.push(ele_v); //吧拿到的值添加到數組
106 });
107 var s ='<tr><td>'+arr[0]+'</td><td>'+arr[1]+'</td><td>'+arr[2]+'</td><td><button class="btn btn-success editBtn">編輯</button><button class="btn btn-danger delBtn">刪除</button></td></tr>';
108 $("tbody").append(s);
109 $("#myModal").modal("hide")
110 });
111
112 //刪除信息
113 // 方式一
114 $("tbody").on("click",".delBtn",function (e) { //事件委派
115 if (e.target.className=='btn btn-danger delBtn'){
116 //找到要刪除的行
117 // console.log(e.target.parentElement.parentElement);
118 e.target.parentElement.parentElement.remove()
119 }
120 });
121
122 // 方式二
123 $("tbody").on("click",".delBtn",function () { //事件委派
124 $(this).parent().parent().remove() //這裏的
125 });
126
127 //編輯信息
128
129 $("tbody").on("click",".editBtn",function () {
130 var tds = $(this).parent().prevAll();
131 tds.each(function () {
132 $(this).html('<input type="text" value='+ $(this).text()+ '>')
133 });
134
135 $(this).text("保存");
136 $(this).removeClass("btn btn-success editBtn");
137 $(this).addClass("btn btn-info saveBtn")
138 });
139
140 $("tbody").on("click",".saveBtn",function () {
141 var tds = $(this).parent().prevAll();
142 console.log(tds);
143 tds.each(function (){
144 // $(this).text(this.firstElementChild.value);
145 $(this).text($(this).children().first().val());
146 console.log()
147 });
148 $(this).text("編輯");
149 $(this).removeClass("btn btn-info saveBtn");
150 $(this).addClass("btn btn-success editBtn");
151 });
152
153
154 </script>
155 </body>
156 </html>
第二種：點擊編輯有模態框
1 <!DOCTYPE html>
2 <!-- saved from url=(0041)http://v3.bootcss.com/examples/dashboard/ -->
3 <html lang="zh-CN">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6
7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
8 <meta name="viewport" content="width=device-width, initial-scale=1">
9 <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
10 <meta name="description" content="">
11 <meta name="author" content="">
12 <link rel="icon" href="http://v3.bootcss.com/favicon.ico">
13
14 <title>Dashboard Template for Bootstrap</title>
15
16 <!-- Bootstrap core CSS -->
17 <link href="./Dashboard_files/bootstrap.min.css" rel="stylesheet">
18
19 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
20 <link href="./Dashboard_files/ie10-viewport-bug-workaround.css" rel="stylesheet">
21
22 <!-- Custom styles for this template -->
23 <link href="./Dashboard_files/dashboard.css" rel="stylesheet">
24
25 <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
26 <!--[if lt IE 9]>
27 <script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
28 <script src="Dashboard_files/ie-emulation-modes-warning.js"></script>
29
30 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
31 <!--[if lt IE 9]>
32 //cdn導入css樣式
33 <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
34 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
35 <![endif]
36 <!--<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">-->
37
38
39 <style>
40 .menu {
41 margin: 0 -20px;
42 border-bottom: 1px solid #336699;
43 }
44
45 .head {
46 padding: 15px;
47 }
48
49 .my-table-tool {
50 margin-bottom: 15px;
51 }
52
53 .menu .nav-sidebar > li > a {
54 padding-right: 40px;
55 padding-left: 40px;
56 }
57 </style>
58
59 </head>
60
61 <body>
62
63 <nav class="navbar navbar-inverse navbar-fixed-top">
64 <div class="container-fluid">
65 <div class="navbar-header">
66 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
67 aria-expanded="false" aria-controls="navbar">
68 <span class="sr-only">Toggle navigation</span>
69 <span class="icon-bar"></span>
70 <span class="icon-bar"></span>
71 <span class="icon-bar"></span>
72 </button>
73 <a class="navbar-brand" href="http://v3.bootcss.com/examples/dashboard/#左側菜單.html">Project name</a>
74 </div>
75 <div id="navbar" class="navbar-collapse collapse">
76 <ul class="nav navbar-nav navbar-right">
77 <li><a href="http://v3.bootcss.com/examples/dashboard/#左側菜單.html">Dashboard</a></li>
78 <li><a href="http://v3.bootcss.com/examples/dashboard/#左側菜單.html">Settings</a></li>
79 <li><a href="http://v3.bootcss.com/examples/dashboard/#左側菜單.html">Profile</a></li>
80 <li><a href="http://v3.bootcss.com/examples/dashboard/#左側菜單.html">Help</a></li>
81 </ul>
82 <form class="navbar-form navbar-right">
83 <input type="text" class="form-control" placeholder="Search...">
84 </form>
85 </div>
86 </div>
87 </nav>
88 <!--左側菜單-->
89 <div class="container-fluid">
90 <div class="row">
91 <div class="col-sm-3 col-md-2 sidebar">
92
93 <div class="menu">
94 <div class="head bg-primary">菜單一</div>
95 <ul class="nav nav-sidebar">
96 <li class=""><a href="http://v3.bootcss.com/examples/dashboard/#左側菜單.html">Overview <span
97 class="sr-only">(current)</span></a>
98 </li>
99 <li><a href="http://v3.bootcss.com/examples/dashboard/#左側菜單.html">Reports</a></li>
100 <li><a href="http://v3.bootcss.com/examples/dashboard/#左側菜單.html">Analytics</a></li>
101 <li><a href="http://v3.bootcss.com/examples/dashboard/#左側菜單.html">Export</a></li>
102 </ul>
103 </div>
104
105 <div class="menu">
106 <div class="head bg-primary">菜單二</div>
107 <ul class="nav nav-sidebar">
108 <li><a href="http://v3.bootcss.com/examples/dashboard/左側菜單.html">Nav item</a></li>
109 <li><a href="http://v3.bootcss.com/examples/dashboard/左側菜單.html">Nav item again</a></li>
110 <li><a href="http://v3.bootcss.com/examples/dashboard/左側菜單.html">One more nav</a></li>
111 <li><a href="http://v3.bootcss.com/examples/dashboard/左側菜單.html">Another nav item</a></li>
112 <li><a href="http://v3.bootcss.com/examples/dashboard/左側菜單.html">More navigation</a></li>
113 </ul>
114 </div>
115
116 <div class="menu">
117 <div class="head bg-primary">菜單三</div>
118 <ul class="nav nav-sidebar">
119 <li><a href="http://v3.bootcss.com/examples/dashboard/左側菜單.html">Nav item again</a></li>
120 <li><a href="http://v3.bootcss.com/examples/dashboard/左側菜單.html">One more nav</a></li>
121 <li><a href="http://v3.bootcss.com/examples/dashboard/左側菜單.html">Another nav item</a></li>
122 </ul>
123 </div>
124 </div>
125 </div>
126 </div>
127 <!--表格-->
128 <div class="container">
129 <div class="row">
130 <div class="col-md-10 col-md-offset-2">
131 <!-- Button trigger modal -->
132 <button type="button" class="btn btn-primary btn-mg addBtn" data-toggle="modal" data-target="#myModal">
133 添加學生的信息
134 </button>
135 <table class="table table-striped">
136 <thead>
137 <tr>
138 <th>學號</th>
139 <th>姓名</th>
140 <th>年齡</th>
141 <th>性別</th>
142 <th>操做</th>
143 </tr>
144 </thead>
145 <tbody>
146 <tr>
147 <td class="col-md-2">1</td>
148 <td class="col-md-2">李欣</td>
149 <td class="col-md-2">23</td>
150 <td class="col-md-2">女</td>
151 <td>
152 <button class="btn btn-success editBtn">編輯</button>
153 <button class="btn btn-danger delBtn">刪除</button>
154 </td>
155 </tr>
156 <tr>
157 <td>2</td>
158 <td>時時彩</td>
159 <td>24</td>
160 <td>女</td>
161 <td>
162 <button class="btn btn-success editBtn">編輯</button>
163 <button class="btn btn-danger delBtn">刪除</button>
164 </td>
165 </tr>
166 <tr>
167 <td>3</td>
168 <td>剛強</td>
169 <td>13</td>
170 <td>男</td>
171 <td>
172 <button class="btn btn-success editBtn">編輯</button>
173 <button class="btn btn-danger delBtn">刪除</button>
174 </td>
175 </tr>
176 <tr>
177 <td>4</td>
178 <td>杜康</td>
179 <td>25</td>
180 <td>男</td>
181 <td>
182 <button class="btn btn-success editBtn">編輯</button>
183 <button class="btn btn-danger delBtn">刪除</button>
184 </td>
185 </tr>
186 </tbody>
187 </table>
188 </div>
189 </div>
190 </div>
191 <!--模態框-->
192 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
193 <div class="modal-dialog" role="document">
194 <div class="modal-content">
195 <div class="modal-header">
196 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
197 </button>
198 <h4 class="modal-title" id="myModalLabel">學生信息</h4>
199 </div>
200 <div class="modal-body">
201 <form>
202 <div class="form-group">
203 <label for="modal-username">姓名</label>
204 <input type="text" class="form-control item" id="modal-username" placeholder="username">
205 </div>
206 <div class="form-group">
207 <label for="modal-age">年齡</label>
208 <input type="text" class="form-control item" id="modal-age" placeholder="age">
209 </div>
210 <div class="form-group">
211 <label for="modal-gender">性別</label>
212 <input type="text" class="form-control item" id="modal-gender" placeholder="gender">
213 </div>
214 </form>
215 </div>
216 <div class="modal-footer">
217 <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
218 <button type="button" class="btn btn-primary queding">肯定</button>
219 </div>
220 </div>
221 </div>
222 </div>
223 <!-- Bootstrap core JavaScript
224 ================================================== -->
225 <script src="jquery-3.2.1.min.js"></script>
226 <!-- Placed at the end of the document so the pages load faster -->
227 <!--<script src="Dashboard_files/jquery.min.js"></script>-->
228 <!--<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>-->
229 <!--<script src="Dashboard_files/bootstrap.min.js"></script>-->
230 <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
231 <script src="Dashboard_files/holder.min.js"></script>
232 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
233 <script src="Dashboard_files/ie10-viewport-bug-workaround.js"></script>
234
235 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
236 <script>
237 //左側菜單
238 $(".head").on("click", function () {
239 // 兄弟標籤 緊挨着的ul標籤 隱藏 addClass("hide")
240 $(this).parent().siblings().children("ul").slideUp();
241 // 把本身 緊挨着的ul標籤顯示 removeClass("hide")
242 // $(this).next().removeClass("hide");
243 $(this).next().slideToggle();
244 });
245
246 //刪除按鈕
247 $("tbody").on("click","td>.btn-danger",function () {
248 $(this).parent().parent().remove()
249 });
250 //編輯
251 $("tbody").on("click",".editBtn",function () {//事件委派
252 //彈出模態框
253 //alert(123)
254 $("#myModal").modal("show");
255 //給模態框賦值
256 //一、先取值
257 var tds = $(this).parent().parent().children();
258 var username = tds.eq(1).text();
259 var age = tds.eq(2).text();
260 var danger = tds.eq(3).text();
261 //二、後賦值
262 $("#modal-username").val(username);
263 $("#modal-age").val(age);
264 $("#modal-gender").val(danger);
265 //吧tds保存到myModal的data（先把數據保存下來）
266 $("#myModal").data("tds",tds);
267 console.log(tds);
268 // console.log($("#myModal").data("tds"));
269 });
270 //點擊模態框中的肯定按鈕，增長事件
271 $(".queding").on("click",function () {
272 //一、隱藏模態框
273 $("#myModal").modal("hide");
274 //二、更新td的值0
275 //取值
276 var username = $("#modal-username").val();
277 var age = $("#modal-age").val();
278 var denger = $("#modal-gender").val();
279 // 賦值
280 //拿到你點擊的哪一行
281 var tds = $("#myModal").data("tds");
282 console.log(tds);
283 if (tds === undefined) {
284 //由於添加和編輯共用一個模態框，因此先分開判斷一下
285 //當tds在模態框中沒有值的時候，就實現添加的功能，若是有數據，就作編輯的功能
286 var tr1 = document.createElement("tr");
287 //第一個是td的序號
288 $(tr1).append("<td>" + $("tbody tr").length+1 + "</td>");
289 console.log($("tbody tr").length);
290 // 第二個是username
291 $(tr1).append('<td>' + username + '</td>');
292 $(tr1).append('<td>' + age + '</td>');
293 $(tr1).append('<td>' + denger + '</td>');
294 // 最後加按鈕(找到tbody下的第一行，再從第一行中找到td最後一個td,而後克隆)
295 //
296 var s = $("tbody tr:last").find("td").last();
297 var ss = s.clone(true);
298 $(tr1).append(ss);
299 $("tbody").append(tr1);
300 } else {
301 console.log(tds); //這裏的tds就是上面用data保存下來的每一列裏面的內容
302 tds.eq(1).text(username);
303 tds.eq(2).text(age);
304 tds.eq(3).text(denger);
305 $("#myModal").removeData("tds")
306 }
307 });
308 //給添加按鈕增長事件
309 $(".addBtn").on("click",function () {
310 //當點擊添加按鈕的時候把模態框裏面的..內容清空
311 $("#myModal :input").val("");
312 });
313 </script>
314 </body>
315 </html>
補充一個知識點 data
- .data()
- .data("key", value) 保存值，value能夠是字符串，也能夠是數組，也能夠是jquery對象
- .data("key") 獲取值（沒有值就返回undefined）
- .removeData() 刪除全部
- .removeData("key") 刪除key對應的value
注意事項;
focus focusin focusout blur 的區別;
focus:當focusable元素得到焦點時，不支持冒泡；focusin:和focus同樣，只是此事件支持冒泡；blur:當focusable元素失去焦點時，不支持冒泡；focusout:和blur同樣，只是此事件支持冒泡；
error () 當元素遇到錯誤（沒有正確載入）時，發生 error 事件。
鍵盤上每一個按鍵都對應有一個keyCode：