jQuery之事件和批量操作、事件委託示例
阿新 • • 發佈：2018-11-09
一、常用事件
click(function(){...}) // 點選時觸發
focus(function(){...}) // 獲得焦點觸發
blur(function(){...}) // 失去焦點觸發
change(function(){...}) // 內容改變後觸發
keyup(function(){...}) // 鍵盤按下後觸發
keydown(function(){...}) // 鍵盤放開後觸發
hover(function(){...},function(){...}) // 滑鼠移上去觸發第一個函式，移開時觸發第二個函式
<!鍵盤按鍵示例DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> // 按鍵被按下 $(window).keydown(function (event) {// 每個按鍵都有一個屬於自己的程式碼編號，列印下哪個按鍵被按下 console.log(event.keyCode); if (event.keyCode === 16){ console.log('shift被按下了'); } }); // 按鍵被放開的事件 $(window).keyup(function (event) { console.log(event.keyCode); if (event.keyCode === 16){ console.log('shift被放開了'); } }) </script> </body> </html>
二、事件繫結
1、 jQuery繫結事件的方式
1.on( events [, selector ],function(){})
events： 事件
selector: 選擇器（可選的）
function: 事件處理函式
例如：
$('div').on('click', function(){})
$('div').on('click','.c1',function(){})
2. events(function(){})
events： 事件
function: 事件處理函式
例如：
$('div').click(function(){})
2、示例
1.hover事件示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>hover示例</title> <style> * { margin: 0; padding: 0; } .nav { height: 40px; width: 100%; background-color: #3d3d3d; position: fixed; top: 0; } .nav ul { list-style-type: none; line-height: 40px; } .nav li { float: left; padding: 0 10px; color: #999999; position: relative; } .nav li:hover { background-color: #0f0f0f; color: white; } .clearfix:after { content: ""; display: block; clear: both; } .son { position: absolute; top: 40px; right: 0; height: 50px; width: 100px; background-color: #00a9ff; } .hide { display: none; } </style> </head> <body> <div class="nav"> <ul class="clearfix"> <li>登入</li> <li>註冊</li> <li>購物車 <p class="son hide"> 空空如也... </p> </li> </ul> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(".nav li").hover( function () { $(this).find(".son").removeClass("hide"); }, function () { $(this).find(".son").addClass("hide"); } ); </script> </body> </html>hover
2.實時監聽input輸入值變化示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>input事件</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <input type="text" id="i1"> <script> /* * oninput是HTML5的標準事件 * 能夠檢測textarea,input:text,input:password和input:search這幾個元素的內容變化， * 在內容修改後立即被觸發，不像onchange事件需要失去焦點才觸發 * oninput事件在IE9以下版本不支援，需要使用IE特有的onpropertychange事件替代 * 使用jQuery庫的話直接使用on同時繫結這兩個事件即可。 * */ $("#i1").on("input propertychange", function () { console.log($(this).val()); }) </script> </body> </html>input
三、移除事件
.off( events [, selector ][,function(){}])
.off() 方法移除用 .on()繫結的事件處理程式。
events： 事件
selector: 選擇器（可選的）
function: 事件處理函式
四、阻止後續事件執行
1、return false;
2、e.preventDefault();
3、阻止的是有關聯的事件，比如阻止表單提交，阻止冒泡事件等
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>阻止後續事件發生</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <form action=""> <input type="text" name="name" id="t"> <input type="submit" value="提交" id="sub"> </form> <script> /*表單的submit會把表單內容提交到action指向的連線 *如果沒有設定action的值，則會重新整理本頁面，即你現在點選提交，會重新整理你現在的頁面 *也就是說submit是自帶了一個事件的，用於表單的提交， *現在我再給submit繫結一個點選事件，判斷表單是否為空，如果為空，則阻止提交(阻止submit自帶的事件)， *即值為空的時候頁面不會重新整理 * */ $("#sub").on('click', function (e) { var value = $("#t").val().trim(); if (!value) { // 阻止表單的提交 // 阻止後面的事件執行 // e.preventDefault(); return false; } }) </script> </body> </html>例子
五、冒泡事件
事件冒泡：當一個元素接收到事件的時候 會把他接收到的事件傳給自己的父級，一直到window 。
注意這裡傳遞的僅僅是事件，並不傳遞所繫結的事件函式。所以如果父級沒有繫結事件函式，就算傳遞了事件也不會有什麼表現，但事件確實傳遞了。
很難理解嗎？那看看例子吧
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>阻止事件冒泡</title> </head> <body> <div> <p> <button id="b1">點我</button> </p> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $('div').click(function () { alert('我是div標籤'); console.log(this); }); $('p').click(function () { alert('我是一個p標籤'); console.log(this); }); $('#b1').click(function () { alert('我是那個按鈕！'); console.log(this); }); </script> </body> </html>冒泡事件例子
解釋：此時會彈出三個警告框，因為點選按鈕的時候，會把點選事件也傳給它的父標籤，
一直傳到window，而此時父標籤p和div也綁定了點選事件，因此也會觸發。
那麼要想阻止冒泡事件，有兩種方式：
1、使用return false，阻止後續事件發生、
2、使用事件的event.stopPropagation()方法，阻止事件冒泡
即在按鈕那個事件裡面設定：
$('#b1').click(function (e) {
// e在此處是一個形參，表示事件本身，也可以寫成eve或者even等
alert('我是那個按鈕！');
console.log(this);
e.stopPropagation();
// 阻止後續事件發生也可以達到相同的效果
// return false;
});
六、頁面載入
如果你的JS程式碼寫在head標籤中，因為瀏覽器是從上到下執行的，那麼你的JS程式碼就不會生效了，
因為你的JS程式碼是操作你body裡面的標籤的，而瀏覽器讀到head的時候已經把JS程式碼讀取了，
但是此時HTML程式碼還沒讀取，也就是說，此時你JS程式碼操作的標籤根本就不存在，因此JS程式碼不會生效。
但是如果我就想把JS程式碼寫在head呢，可以，有兩種方式：
1、DOM方法
1.語法
window.onload = function(){你的JS程式碼}
2. 存在的問題
會等到頁面上的文件、圖片、視訊等所有資源都載入完才會觸發
存在覆蓋宣告的問題
2、jQuery幫我們封裝的一個事件
1. 語法
1. $(document).ready(function(){你的JS程式碼})
2. $(function(){繫結事件的操作...})
2. 優勢：
1. 只要文件載入完就會觸發
2. 不存在覆蓋宣告的問題
七、事件委託
事件委託是通過事件冒泡的原理，利用父標籤去捕獲子標籤的事件。
語法：
$("table").on("click", "button", function () {
// JS程式碼
})
解釋：給table繫結一個點選事件，但是是通過button觸發的。
注意事項1：
像click、keydown等DOM中定義的事件，我們都可以使用`.on()`方法來繫結事件，但是`hover`這種jQuery中定義的事件就不能用`.on()`方法來綁定了，
也就是說hover()方法不能直接使用事件委託，想使用事件委託的方式繫結hover事件處理函式，可以參照如下程式碼分兩步繫結事件：
$('ul').on('mouseenter', 'li', function() {//繫結滑鼠進入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//繫結滑鼠劃出事件
$(this).removeClass('hover');
});
注意事項2
關於this：誰觸發這個事件，this就指向誰。
例如：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <div id="div"> <p id="p"> <input type="button" value="點我" id="btn"> </p> </div> <script type="text/javascript"> $("#div").click(function () { //點選按鈕，經過事件冒泡，觸發這個事件 //此時this是代表div的，雖然點選的是那個按鈕 //但是實際上是經過冒泡後，div自己觸發的這個事件，所有this是div console.log(this); }); //任意註釋一個script標籤測試另一個標籤 $("#div").on("click", "#btn", function () { //事件委託，給div綁定了一個事件，點選按鈕觸發這個事件 //此時this是代表按鈕btn的，雖然繫結的事件是div //但是觸發這個事件的是btn，所以this是btn console.log(this); }) </script> </body> </html>this指向問題
八、動畫效果
// 基本
s是毫秒
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑動
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定義（瞭解即可）
animate(p,[s],[e],[fn])
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>點贊動畫示例</title> <style> div { position: relative; display: inline-block; cursor: pointer; } div > i { display: inline-block; color: red; position: absolute; right: -16px; top: -5px; opacity: 1; } </style> </head> <body> <div id="d1">點贊</div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $("#d1").on("click", function () { var newI = document.createElement("i"); newI.innerText = "+1"; $(this).append(newI); $(this).children("i").animate({ // 在1秒內透明度變成0 opacity: 0 }, 1000) }) </script> </body> </html>點贊示例
九、拓展
1、each
方式一：迴圈可迭代物件
jQuery.each(collection, callback(indexInArray, valueOfElement))
jQuery.each(可迭代物件, 函式(索引, 值)) -->類似於python內建函式sorted那種型別
描述：一個通用的迭代函式，它可以用來無縫迭代物件和陣列。
陣列和類似陣列的物件通過一個長度屬性（如一個函式的引數物件）來迭代數字索引，從0到length - 1。其他物件通過其屬性名進行迭代。
例如：
li =["a","b","c","d"]
$.each(li,function(i, v){
console.log(i, v);//i是索引，v是每次迴圈的具體元素。
})
輸出：
0"a"
1"b"
2"c"
3"d"
li =["a","b","c","d"]
$.each(li,function(i, v){
if (i === 2){
return false; // 相當於break
}
console.log(i, v);
})
輸出：
0"a"
1"b"
li =["a","b","c","d"]
$.each(li,function(i, v){
if (i === 2){
return; // 相當於continue
}
console.log(i, v);
})
輸出：
0"a"
1"b"
3"d"
方式二：迴圈節點
somenode.each(function(index, Element))
描述：遍歷一個jQuery物件，為每個匹配元素執行一個函式。
.each() 方法用來迭代jQuery物件中的每一個DOM元素。每次回撥函式執行時，會傳遞當前迴圈次數作為引數(從0開始計數)。
由於回撥函式是在當前DOM元素為上下文的語境中觸發的，所以關鍵字 this 總是指向這個元素。
例如：
// 為每一個li標籤新增一個樣式
$("li").each(function(){
$(this).addClass("c1");
});
注意:
jQuery的方法返回一個jQuery物件，遍歷jQuery集合中的元素 - 被稱為隱式迭代的過程。當這種情況發生時，它通常不需要顯式地迴圈的 .each()方法
也就是說，上面的例子沒有必要使用each()方法，直接像下面這樣寫就可以了：
$("li").addClass("c1"); // 對所有標籤做統一操作
2、data
在匹配的元素集合中的所有元素上儲存任意相關資料或返回匹配的元素集合中的第一個元素的給定名稱的資料儲存的值。
1.設定資料(可以儲存任意的值，包括物件)
somenode.data(key, value):
描述：在匹配的元素上儲存任意相關資料。
$("div").data("age",100); //給所有div標籤都儲存一個數據，名為age，值為100
2.取值
somenode.data(key)
描述: 返回匹配的元素集合中的第一個元素的給定名稱的資料儲存的值
$("div").data("k"); //返回第一個div標籤中儲存的"k"的值
$("div").data(); //返回div標籤中儲存的所有的值
3.刪除值
somenode.removeData(key):
描述：移除存放在元素上的資料，不加key引數表示移除所有儲存的資料。
$("div").removeData("k"); //移除元素上存放k對應的資料
3、外掛
語法：jQuery.extend(object)
給jQuery新增自定義的方法(擴充套件後jQuery就擁有了此方法)：
$.extend({
nb:function(){
console.log("RNG牛逼！")
}
});
$.nb();
給jQuery物件新增自定義的方法(擴充套件後所有物件都能用此方法)：
$.fn.extend({
znb:function(){
console.log("RNG真牛逼！")
}
});
$("div").znb();
十、示例
1、表格的新增和刪除(事件委託)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 99; } .modal { width: 300px; height: 200px; background-color: white; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -150px; z-index: 1000; } .hide { display: none; } </style> </head> <body> <button id="add">新增</button> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>愛好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>小明</td> <td>開車</td> <td> <button class="fire">開除</button> </td> </tr> <tr> <td><input type="checkbox"></td> <td>小紅</td> <td>化妝</td> <td> <button class="fire">開除</button> </td> </tr> <tr> <td><input type="checkbox"></td> <td>小東</td> <td>吃吃吃</td> <td> <button class="fire">開除</button> </td> </tr> </tbody> </table> <div class="cover hide"></div> <div class="modal hide"> <div> <label>姓名： <input type="text" id="name"> </label> </div> <div> <label>愛好： <input type="text" id="hobby"> </label> </div> <button id="cancel" type="button">取消</button> <button id="submit" type="button">提交</button> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> // 定義一個清空輸入框並且隱藏模態框的方法 function hideModal(){ // 1. 清空input的值 $("#name,#hobby").val(''); // 2. 隱藏起來 $(".cover,.modal").addClass('hide'); } // 開除按鈕的功能(事件委託) $("table").on('click', '.fire', function () { // 點選開除按鈕要做的事兒 // 把當前行移除掉 //this --> 觸發當前點選事件的DOM物件 $(this).parent().parent().remove(); // 鏈式操作 }); // 新增按鈕的功能 $("#add").click(function () { // 點選新增按鈕要做的事兒 // 1. 移除cover和modal的hide樣式 $(".cover,.modal").removeClass('hide'); }); // 點選modal中的cancel按鈕 $("#cancel").click(function () { hideModal(); }); // 點選modal中的submit按鈕 $("#submit").click(function () { // 1. 獲取使用者輸入的值 var name = $("#name").val(); var hobby = $("#hobby").val(); // 2. 隱藏模態框，清空輸入框 hideModal(); // 3. 建立一個tr標籤，把資料新增進去 var trEle = document.createElement("tr"); // 直接append HTML內容 $(trEle).append('<td><input type="checkbox"></td>'); $(trEle).append('<td>' + name + '</td>'); // 建立td標籤 var tdTmp = document.createElement('td'); // 設定td標籤的文字內容 tdTmp.innerText = hobby; // 把建立的td標籤追加到tr裡面 $(trEle).append(tdTmp); // 直接append HTML內容 $(trEle).append('<td><button class="fire">開除</button></td>') // 4. 把上一步的tr追加到表格的tbody後面 $('tbody').append(trEle); }); </script> </body> </html>事件委託
2、批量操作示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>批量操作</title> </head> <body> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>小明</td> <td> <select> <option value="1">上線</option> <option value="2">下線</option> <option value="3">隱身</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>小紅</td> <td> <select> <option value="1">上線</option> <option value="2">下線</option> <option value="3">隱身</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>小白</td> <td> <select> <option value="1">上線</option> <option value="2">下線</option> <option value="3">隱身</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>小花</td> <td> <select> <option value="1">上線</option> <option value="2">下線</option> <option value="3">隱身</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>小狗</td> <td> <select> <option value="1">上線</option> <option value="2">下線</option> <option value="3">隱身</option> </select> </td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> var flag = false; // shift被按下，就將全域性的flag置為true $(window).keydown(function (e) { // shift鍵的程式碼編號是16 if (e.keyCode === 16){ flag = true; } }); // shift鍵被放開的時候，就將全域性的flag置為false $(window).keyup(function (e) { if (e.keyCode === 16){ flag = false; } }); // 按下shift鍵，進入批量編輯模式，且操作的是被選中的項 // 給select標籤繫結change事件 $('td>select').change(function () { // 判斷是否進入批量編輯模式 // 判斷checkbox的狀態 var isChecked = $(this).parent().prev().prev().find(':checkbox').prop('checked'); // flag為true且checkbox是被選中的狀態 if ( flag && isChecked){ // 1. 取到當前select選中的值 var checkedValue = $(this).val(); // 2. 找到所有被選中的行 // 3. 把選中行的select置為一樣的值 $('tr:has(input:checked)').find('select').val(checkedValue); } }) </script> </body> </html>批量操作