全端之jQuery擴充套件和事件
阿新 • • 發佈：2018-11-01
一、jQuery事件
常用事件
- blur([[data],fn]) 失去焦點
- focus([[data],fn]) 獲取焦點（ 搜尋框例子）
- change([[data],fn]) 當select下拉框中的元素髮生改變的時候觸發change事件(select例子)
- click([[data],fn]) 點選
- dblclick([[data],fn]) 雙擊
- scroll([[data],fn]) 滾動
- submit([[data],fn]) 提交
不常用事件
error([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn]) 按下
keypress([[data],fn]) 按鍵
keyup([[data],fn]) 鍵鬆開
mousedown([[data],fn]) 滑鼠按下
mouseenter([[data],fn]) 滑鼠移進去
mouseleave([[data],fn]) 滑鼠離開：只有滑鼠離開被選元素的時候，才會觸發mouseleave事件
mousemove([[data],fn]) 滑鼠移動
mouseout([[data],fn]) 滑鼠離開：無論滑鼠離開被選元素還是任何子元素，都會觸發mouseout事件
mouseover([[data],fn] 滑鼠懸停
mouseup([[data],fn]) 滑鼠彈起
resize([[data],fn]) 元素視窗發生變化
select([[data],fn]) unload([[data],fn])
補充：
文件樹載入完之後繫結事件（絕大多數情況下）
第一種：把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>focus和blur練習
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>mouseleave和mouseout練習
二、jQuery擴充套件（很重要！！）
1、jQuery擴充套件語法
把擴充套件的內容就可以寫到xxxx.js檔案了，在主檔案中直接匯入就行了。
用法1、$.xxx()
$.extend({
"GDP": function () {
console.log("戴小紅花");
} });
- 給jQuery新增擴充套件
- $.GDP()
用法2、$("").xxx()
$.fn.extend({
"BJG": function () {
console.log("英語八級就是好！");
}
})
- 給jQuery物件新增擴充套件
- $(":input").BJG()
2、練習1
$.extend({
"GDP":function () {
foo();
console.log("帶小紅花")
}
});
那麼如果這樣定義一個函式，其他的擴充套件都可以呼叫這個函數了
這個函式只想在自己呼叫。不想讓它公共的呼叫，不讓他起衝突
那麼定義一個私有的。用一個匿名函式
function foo() {
console.log("英語八級就是牛")
}
$.fn.extend({
"BJG":function () {
foo()
console.log("就這樣吧")
}
});
繼續第二步：加上匿名函式
第一步：不完美
extend.js檔案
匿名函式：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);
3、具體示例練習（登入校驗）
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>View Code
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);
三、表格的新增 | 刪除 | 編輯示例
第一種：點選編輯沒有模態框，是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
第二種：點選編輯有模態框
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