當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery之jQuery扩展和事件

發布時間：2023/12/2 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery之jQuery扩展和事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、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.js文件

$.extend({"GDP":function () {foo();console.log("帶小紅花")} }); 那么如果這樣定義一個函數，其他的擴展都可以調用這個函數了這個函數只想在自己調用。不想讓它公共的調用，不讓他起沖突那么定義一個私有的。用一個匿名函數 function foo() {console.log("英語八級就是牛") } $.fn.extend({"BJG":function () {foo()console.log("就這樣吧")} });

　　繼續第二步：加上匿名函數

匿名函數：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文件

3、具體示例練習（登錄校驗）

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  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"]--->得到6if ($(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 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 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 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 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 17 <link href="./Dashboard_files/bootstrap.min.css" rel="stylesheet">18 19 20 <link href="./Dashboard_files/ie10-viewport-bug-workaround.css" rel="stylesheet">21 22 23 <link href="./Dashboard_files/dashboard.css" rel="stylesheet">24 25 26 28 <script src="Dashboard_files/ie-emulation-modes-warning.js"></script>29 30 31 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 <span97 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  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  225 <script src="jquery-3.2.1.min.js"></script> 226  227  228  229  230  231 <script src="Dashboard_files/holder.min.js"></script> 232  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 //1、先取值 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 //2、后賦值 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 //1、隱藏模態框 273 $("#myModal").modal("hide"); 274 //2、更新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> 增刪改2

?補充一個知識點 data

- .data()
- .data("key", value) 保存值，value可以是字符串，也可以是數組，也可以是jquery對象
- .data("key") 獲取值（沒有值就返回undefined）
- .removeData() 刪除所有

- .removeData("key") 刪除key對應的value

更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的jQuery之jQuery扩展和事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： vue之node.js的简单介绍
下一篇： flex弹性布局操练2