jquery快速入門三
阿新 • • 發佈：2018-06-06
border :hover rop css ima -i 最重要的 eva 支持 
事件
常用事件
click(function(){.......}) #觸發或將函數綁定到指定元素的click事件 hover(function(){.....}) 當鼠標指針懸停在上面時觸發。。。。事件 blur(function(){........}) 當元素失去焦點時觸發blur事件。 focus(function(){......}) 當輸入框獲得焦點時 觸發focus事件 change(function(){...}) 當元素的值發生改變時 觸發change事件 keydown(function(){.....}) 當按鍵按下時觸發。。。事件 keyup(function(){.....}) 當按鍵松開時觸發。。。事件
keydown 和keyup事件組合示例：
<!DOCTYPE html> <html lang="en"> <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="View Codecheckbox"></td> <td>Egon</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>Alex</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>Yuan</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>EvaJ</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>Gold</td> <td> <select> <option value="1">上線</option> <option value="2">下線</option> <option value="3">停職</option> </select> </td> </tr> </tbody> </table> <input type="button" id="b1" value="全選"> <input type="button" id="b2" value="取消"> <input type="button" id="b3" value="反選"> <script src="jquery-3.3.1.min.js"></script> <script> //全選 $("#b1").on("click",function () { $(":checkbox").prop("checked",true); }); //取消 $("#b2").on("click",function(){ $(":checkbox").prop("checked",false); }); //反選 $("#b3").on("click",function(){ $(":checkbox").each(function(){ var flag = $(this).prop("checked"); $(this).prop("checked",!flag); }) }); //按住shift鍵 批量操作 //定義全局變量 var flag = false //全局事件，監聽鍵盤shift按鍵是否被按下 $(window).on("keydown",function(e){ //alert(e.keyCode); if (e.keyCode === 16){ flag =true; } }); //全局事件，shift按鍵擡起時將全局變量置為false $(window).on("keyup",function(e){ if (e.keyCode ===16){ flag =false; } }) //select綁定change事件 $("table select").on("change",function () { //是否為批量操作模式 if (flag){ var selectValue =$(this).val(); //找到所有被選中的那一行的select.選中指定值 $("input:checked").parent().parent().find("select").val(selectValue); } }) </script> </body> </html>
hover事件示例：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; display: none; } .hover .son { display: block; } </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://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> $(".nav li").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); </script> </body> </html>View Code
實時監聽input輸入值變化示例：
<!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>實時監聽input輸入值變化</title> </head> <body> <input type="text" id="i1"> <script src="jquery-3.2.1.min.js"></script> <script> /* * oninput是HTML5的標準事件 * 能夠檢測textarea,input:text,input:password和input:search這幾個元素的內容變化， * 在內容修改後立即被觸發，不像onchange事件需要失去焦點才觸發 * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代 * 使用jQuery庫的話直接使用on同時綁定這兩個事件即可。 * */ $("#i1").on("input propertychange", function () { alert($(this).val()); }) </script> </body> </html>View Code
事件綁定
1、 .on(events[ , selector] function(){})
events：事件
select：選擇器
function：事件處理函數
移除事件
1 .off(events[ , selector] [, function(){}])
off() 方法移除用 .on()綁定的事件處理程序。
events: 事件
selector 選擇器
function：事件處理函數
阻止後續事件執行
1.return false;//常見阻止表單提交等
註意：
像click、keydown 等DOM中定義的事件，我們都可以使用 on()方法來綁定事件， 但是hover 這種jQuery中定義的事件就不能用 .on()方法來綁定了
想使用事件問題托的方式綁定hover 事件處理函數，可以參照如下代碼分兩步綁定事件：
$(‘ul‘).on(‘mouseenter‘, ‘li‘, function() {//綁定鼠標進入事件 $(this).addClass(‘hover‘); }); $(‘ul‘).on(‘mouseleave‘, ‘li‘, function() {//綁定鼠標劃出事件 $(this).removeClass(‘hover‘); });
頁面載入 ready
當DOM 載入就緒可以查詢及操縱時 綁定一個要執行的函數。這是事件模塊中最重要的 一個函數， 因為他可以大大的提高web應用程序的響應速度
$(document).ready(function(){ //這裏寫js代碼 })
簡寫：
$(function(){ //在這裏寫代碼 })
文檔加載完綁定事件， 並且阻止默認事件發生：
登錄效驗示例
<!DOCTYPE html> <html lang="zh-CN"> <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>登錄註冊示例</title> <style> .error { color: red; } </style> </head> <body> <form id="myForm"> <label for="name">姓名</label> <input type="text" id="name"> <span class="error"></span> <label for="passwd">密碼</label> <input type="password" id="passwd"> <span class="error"></span> <input type="submit" id="modal-submit" value="登錄"> </form> <script src="jquery-3.2.1.min.js"></script> <script src="s7validate.js"></script> <script> function myValidation() { // 多次用到的jQuery對象存儲到一個變量，避免重復查詢文檔樹 var $myForm = $("#myForm"); $myForm.find(":submit").on("click", function () { // 定義一個標誌位，記錄表單填寫是否正常 var flag = true; $myForm.find(":text, :password").each(function () { var val = $(this).val(); if (val.length <= 0 ){ var labelName = $(this).prev("label").text(); $(this).next("span").text(labelName + "不能為空"); flag = false; } }); // 表單填寫有誤就會返回false，阻止submit按鈕默認的提交表單事件 return flag; }); // input輸入框獲取焦點後移除之前的錯誤提示信息 $myForm.find("input[type!=‘submit‘]").on("focus", function () { $(this).next(".error").text(""); }) } // 文檔樹就緒後執行 $(document).ready(function () { myValidation(); }); </script> </body> </html>View Code
事件委托
事件委托是通過事件冒泡的原理。利用父標簽去捕獲子標簽的事件。
示例：
表格中每一行的編輯和刪除按鈕都能觸發相應的事件。
$("table").on("click",".delete",function(){ //刪除按鈕綁定的事件 })
動畫效果
// 基本 show([s,[e],[fn]]) //顯示 hide([s,[e],[fn]])//隱藏 toggle([s,[e],[fn]]) //切換 //滑動 slideDown([s,[e],[fn]]) //下滑 slideUp([s,[e],[fn]]) //上滑 slideToggle //切換 //淡入淡出 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"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>點贊動畫示例</title> <style> div { position: relative; display: inline-block; } div>i { display: inline-block; color: red; position: absolute; right: -16px; top: -5px; opacity: 1; } </style> </head> <body> <div id="d1">點贊</div> <script src="jquery-3.2.1.min.js"></script> <script> $("#d1").on("click", function () { var newI = document.createElement("i"); newI.innerText = "+1"; $(this).append(newI); $(this).children("i").animate({ opacity: 0 }, 1000) }) </script> </body> </html>View Code
each
jquery.each(collection,callback(indexInArray,valueOfElement)):
描述、；一個通用的叠代函數，他可以用來無縫叠代對象和數組， 數組和類似數組的對象通過一個長度屬性（如一個函數的參數對象）來叠代數字索引，從0到length-1.其他對象通過其屬性名進行叠代。
.each(function(index,Element)):
描述：遍歷一個Jquery對象，為每個匹配元素執行一個函數。
.each() 方法用來叠代Jquery對象中的每一個DOM 元素。每次回調函數執行時，會傳遞當前循環次數作為參數（從0開始計數）。由於回調函數是在當前DOM元素為上下文語境中觸發的。所以關鍵字this 總是指向這個元素）
//為每一個li標簽添加foo $("li”).each(function(){ $(this).addClass("cl")； }）
註意: jQuery的方法返回一個jQuery對象，遍歷jQuery集合中的元素 - 被稱為隱式叠代的過程。當這種情況發生時，它通常不需要顯式地循環的 .each()方法：
也就是說，上面的例子沒有必要使用each()方法，直接像下面這樣寫就可以了：
$("li").addClass("c1"); // 對所有標簽做統一操作
註意：
在遍歷過程中可以使用 return false提前結束each循環。
終止each循環 。 return相當於python中的continue的意思， return false 相當於python中的break的意思
.data()
在匹配的元素集合中的所有的 元素上存儲任意相關數據或返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。
.data(key,value):
描述：在匹配的元素上存儲任意相關數據。
$("div").data("k",100);//給所有div標簽都保存一個名為k，值為100
.data(key):
描述: 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值—通過 .data(name, value)或HTML5 data-*屬性設置。
$("div").data("k");//返回第一個div標簽中保存的"k"的值
.removeData(key):
描述：移除存放在元素上的數據，不加key ,參數表示移除所有保存的數據。
$("div").removeData("k"); //移除元素上存放k對應的數據
jquery快速入門三