jquery jQuery快速入門
- 2019 年 10 月 4 日
- 筆記
jQuery快速入門
jQuery
jQuery介紹
- jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。
- jQuery使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，能夠極大地簡化JavaScript編程。它的宗旨就是：「Write less, do more.「
jQuery的優勢
- 一款輕量級的JS框架。jQuery核心js文件才幾十kb，不會影響頁面載入速度。
- 豐富的DOM選擇器,jQuery的選擇器用起來很方便，比如要找到某個DOM對象的相鄰元素，JS可能要寫好幾行程式碼，而jQuery一行程式碼就搞定了，再比如要將一個表格的隔行變色，jQuery也是一行程式碼搞定。
- 鏈式表達式。jQuery的鏈式操作可以把多個操作寫在一行程式碼里，更加簡潔。
- 事件、樣式、動畫支援。jQuery還簡化了js操作css的程式碼，並且程式碼的可讀性也比js要強。
- Ajax操作支援。jQuery簡化了AJAX操作，後端只需返回一個JSON格式的字元串就能完成與前端的通訊。
- 跨瀏覽器兼容。jQuery基本兼容了現在主流的瀏覽器，不用再為瀏覽器的兼容問題而傷透腦筋。
- 插件擴展開發。jQuery有著豐富的第三方的插件，例如：樹形菜單、日期控制項、圖片切換插件、彈出窗口等等基本前端頁面上的組件都有對應插件，並且用jQuery插件做出來的效果很炫，並且可以根據自己需要去改寫和封裝插件，簡單實用。
jQuery內容：
- 選擇器
- 篩選器
- 樣式操作
- 文本操作
- 屬性操作
- 文檔處理
- 事件
- 動畫效果
- 插件
- each、data、Ajax
下載鏈接：jQuery官網
中文文檔：jQuery AP中文文檔
jQuery版本
- 1.x：兼容IE678,使用最為廣泛的，官方只做BUG維護，功能不再新增。因此一般項目來說，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日)
- 2.x：不兼容IE678，很少有人使用，官方只做BUG維護，功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)
- 3.x：不兼容IE678，只支援最新的瀏覽器。需要注意的是很多老的jQuery插件不支援3.x版。目前該版本是官方主要更新維護的版本。
維護IE678是一件讓人頭疼的事情，一般我們都會額外載入一個CSS和JS單獨處理。值得慶幸的是使用這些瀏覽器的人也逐步減少，PC端用戶已經逐步被移動端用戶所取代，如果沒有特殊要求的話，一般都會選擇放棄對678的支援。
jQuery對象
jQuery對象就是通過jQuery包裝DOM對象後產生的對象。jQuery對象是 jQuery獨有的。如果一個對象是 jQuery對象，那麼它就可以使用jQuery里的方法：例如$(「#i1」).html()。
$("#i1").html()的意思是：獲取id值為 i1的元素的html程式碼。其中 html()是jQuery里的方法。
相當於： document.getElementById("i1").innerHTML;
雖然 jQuery對象是包裝 DOM對象後產生的，但是 jQuery對象無法使用 DOM對象的任何方法，同理 DOM對象也沒不能使用 jQuery里的方法。
一個約定，我們在聲明一個jQuery對象變數的時候在變數名前面加上$：
var $variable = jQuery對像 var variable = DOM對象 $variable[0]//jQuery對象轉成DOM對象
拿上面那個例子舉例，jQuery對象和DOM對象的使用：
$("#i1").html();//jQuery對象可以使用jQuery的方法 $("#i1")[0].innerHTML;// DOM對象使用DOM的方法
jQuery基礎語法
$(selector).action()
查找標籤
基本選擇器
id選擇器：
$("#id")
標籤選擇器：
$("tagName")
class選擇器：
$(".className")
配合使用：
$("div.c1") // 找到有c1 class類的div標籤
所有元素選擇器：
$("*")
組合選擇器：
$("#id, .className, tagName")
層級選擇器：
x和y可以為任意選擇器
$("x y");// x的所有後代y（子子孫孫） $("x > y");// x的所有兒子y（兒子） $("x + y")// 找到所有緊挨在x後面的y $("x ~ y")// x之後所有的兄弟y
基本篩選器：
:first // 第一個 :last // 最後一個 :eq(index)// 索引等於index的那個元素 :even // 匹配所有索引值為偶數的元素，從 0 開始計數 :odd // 匹配所有索引值為奇數的元素，從 0 開始計數 :gt(index)// 匹配所有大於給定索引值的元素 :lt(index)// 匹配所有小於給定索引值的元素 :not(元素選擇器)// 移除所有滿足not條件的標籤 :has(元素選擇器)// 選取所有包含一個或多個標籤在其內的標籤(指的是從後代元素找)
例子：
$("div:has(h1)")// 找到所有後代中有h1標籤的div標籤 $("div:has(.c1)")// 找到所有後代中有c1樣式類的div標籤 $("li:not(.c1)")// 找到所有不包含c1樣式類的li標籤 $("li:not(:has(a))")// 找到所有後代中不含a標籤的li標籤
練習：
自定義模態框，使用jQuery實現彈出和隱藏功能。
jQuery版自定義模態框
屬性選擇器：
[attribute] [attribute=value]// 屬性等於 [attribute!=value]// 屬性不等於
例子：
// 示例 <input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']");// 取到checkbox類型的input標籤 $("input[type!='text']");// 取到類型不是text的input標籤
表單篩選器：
:text :password :file
例子：
$(":checkbox") // 找到所有的checkbox
表單對象屬性:
:enabled :disabled :checked :selected
例子：
找到可用的input標籤
<form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input標籤
找到被選中的option：
<select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">廣州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被選中的option
篩選器方法
下一個元素：
$("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2")
上一個元素：
$("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2")
父親元素：
$("#id").parent() $("#id").parents() // 查找當前元素的所有的父輩元素 $("#id").parentsUntil() // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。
兒子和兄弟元素：
$("#id").children();// 兒子們 $("#id").siblings();// 兄弟們
查找
搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。
$("div").find("p")
等價於$("div p")
篩選
篩選出與指定表達式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個表達式。
$("div").filter(".c1") // 從結果集中過濾出有c1樣式類的
等價於 $("div.c1")
補充：
.first() // 獲取匹配的第一個元素 .last() // 獲取匹配的最後一個元素 .not() // 從匹配元素的集合中刪除與指定表達式匹配的元素 .has() // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。 .eq() // 索引值等於指定值的元素
示例：左側菜單
左側菜單示例
操作標籤
樣式操作
樣式類
addClass();// 添加指定的CSS類名。 removeClass();// 移除指定的CSS類名。 hasClass();// 判斷樣式存不存在 toggleClass();// 切換CSS類名，如果有就移除，如果沒有就添加。
示例：開關燈和模態框
CSS
css("color","red")//DOM操作：tag.style.color="red"
示例：
$("p").css("color", "red"); //將所有p標籤的字體設置為紅色
位置操作
offset()// 獲取匹配元素在當前窗口的相對偏移或設置元素位置 position()// 獲取匹配元素相對父元素的偏移 scrollTop()// 獲取匹配元素相對滾動條頂部的偏移 scrollLeft()// 獲取匹配元素相對滾動條左側的偏移
.offset()方法允許我們檢索一個元素相對於文檔（document）的當前位置。
和 .position()的差別在於： .position()是相對於相對於父級元素的位移。
示例：
按 Ctrl+C 複製程式碼 按 Ctrl+C 複製程式碼
尺寸：
height() width() innerHeight() innerWidth() outerHeight() outerWidth()
文本操作
HTML程式碼：
html()// 取得第一個匹配元素的html內容 html(val)// 設置所有匹配元素的html內容
文本值：
text()// 取得所有匹配元素的內容 text(val)// 設置所有匹配元素的內容
值：
val()// 取得第一個匹配元素的當前值 val(val)// 設置所有匹配元素的值 val([val1, val2])// 設置多選的checkbox、多選select的值
例如：
<input type="checkbox" value="basketball" name="hobby">籃球 <input type="checkbox" value="football" name="hobby">足球 <select multiple id="s1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>
設置值：
$("[name='hobby']").val(['basketball', 'football']); $("#s1").val(["1", "2"])
示例：
獲取被選中的checkbox或radio的值：
<label for="c1">女</label> <input name="gender" id="c1" type="radio" value="0"> <label for="c2">男</label> <input name="gender" id="c2" type="radio" value="1">
可以使用：
$("input[name='gender']:checked").val()
自定義登錄校驗示例
屬性操作
用於ID等或自定義屬性：
attr(attrName)// 返回第一個匹配元素的屬性值 attr(attrName, attrValue)// 為所有匹配元素設置一個屬性值 attr({k1: v1, k2:v2})// 為所有匹配元素設置多個屬性值 removeAttr()// 從每一個匹配的元素中刪除一個屬性
用於checkbox和radio
prop() // 獲取屬性 removeProp() // 移除屬性
注意：
在1.x及2.x版本的jQuery中使用attr對checkbox進行賦值操作時會出bug，在3.x版本的jQuery中則沒有這個問題。為了兼容性，我們在處理checkbox和radio的時候盡量使用特定的prop()，不要使用attr("checked", "checked")。
<input type="checkbox" value="1"> <input type="radio" value="2"> <script> $(":checkbox[value='1']").prop("checked", true); $(":radio[value='2']").prop("checked", true); </script>
prop和attr的區別：
attr全稱attribute(屬性)
prop全稱property(屬性)
雖然都是屬性，但他們所指的屬性並不相同，attr所指的屬性是HTML標籤屬性，而prop所指的是DOM對象屬性，可以認為attr是顯式的，而prop是隱式的。
舉個例子：
<input type="checkbox" id="i1" value="1">
針對上面的程式碼，
$("#i1").attr("checked") // undefined $("#i1").prop("checked") // false
可以看到attr獲取一個標籤內沒有的東西會得到undefined，而prop獲取的是這個DOM對象的屬性，因此checked為false。
如果換成下面的程式碼：
<input type="checkbox" checked id="i1" value="1">
再執行：
$("#i1").attr("checked") // checked $("#i1").prop("checked") // true
這已經可以證明attr的局限性，它的作用範圍只限於HTML標籤內的屬性，而prop獲取的是這個DOM對象的屬性，選中返回true，沒選中返回false。
接下來再看一下針對自定義屬性，attr和prop又有什麼區別：
<input type="checkbox" checked id="i1" value="1" me="自定義屬性">
執行以下程式碼：
$("#i1").attr("me") // "自定義屬性" $("#i1").prop("me") // undefined
可以看到prop不支援獲取標籤的自定義屬性。
總結一下：
- 對於標籤上有的能看到的屬性和自定義屬性都用attr
- 對於返回布爾值的比如checkbox、radio和option的是否被選中都用prop。
練習題：全選、反選、取消
文檔處理
添加到指定元素內部的後面
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B
添加到指定元素內部的前面
$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B
添加到指定元素外部的後面
$(A).after(B)// 把B放到A的後面 $(A).insertAfter(B)// 把A放到B的後面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 從DOM中刪除所有匹配的元素。 empty()// 刪除匹配的元素集合中所有的子節點。
例子：
點擊按鈕在表格添加一行數據。
點擊每一行的刪除按鈕刪除當前行數據。
替換
replaceWith() replaceAll()
克隆
clone()// 參數
克隆示例：
點擊複製按鈕
事件
常用事件
click(function(){...}) hover(function(){...}) blur(function(){...}) focus(function(){...}) change(function(){...}) keyup(function(){...})
keydown和keyup事件組合示例：
按住shift實現批量操作
hover事件示例：
hover事件
實時監聽input輸入值變化示例：
input值變化事件
事件綁定
.on( events [, selector ],function(){})
- events： 事件
- selector: 選擇器（可選的）
- function: 事件處理函數
移除事件
.off( events [, selector ][,function(){}])
off() 方法移除用 .on()綁定的事件處理程式。
- events： 事件
- selector: 選擇器（可選的）
- function: 事件處理函數
阻止後續事件執行
return false; // 常見阻止表單提交等- e.preventDefault();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止默認事件</title> </head> <body> <form action=""> <button id="b1">點我</button> </form> <script src="jquery-3.3.1.min.js"></script> <script> $("#b1").click(function (e) { alert(123); //return false; e.preventDefault(); }); </script> </body> </html>
注意：
像click、keydown等DOM中定義的事件，我們都可以使用`.on()`方法來綁定事件，但是`hover`這種jQuery中定義的事件就不能用`.on()`方法來綁定了。
想使用事件委託的方式綁定hover事件處理函數，可以參照如下程式碼分兩步綁定事件：
$('ul').on('mouseenter', 'li', function() {//綁定滑鼠進入事件 $(this).addClass('hover'); }); $('ul').on('mouseleave', 'li', function() {//綁定滑鼠划出事件 $(this).removeClass('hover'); });
阻止事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止事件冒泡</title> </head> <body> <div> <p> <span>點我</span> </p> </div> <script src="jquery-3.3.1.min.js"></script> <script> $("span").click(function (e) { alert("span"); e.stopPropagation(); }); $("p").click(function () { alert("p"); }); $("div").click(function () { alert("div"); }) </script> </body> </html>
頁面載入
當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。這是事件模組中最重要的一個函數，因為它可以極大地提高web應用程式的響應速度。
兩種寫法：
$(document).ready(function(){ // 在這裡寫你的JS程式碼... })
簡寫：
$(function(){ // 你在這裡寫你的程式碼 })
文檔載入完綁定事件，並且阻止默認事件發生：
登錄校驗示例
與window.onload的區別
- window.onload()函數有覆蓋現象，必須等待著圖片資源載入完成之後才能調用
- jQuery的這個入口函數沒有函數覆蓋現象，文檔載入完成之後就可以調用（建議使用此函數）
事件委託
事件委託是通過事件冒泡的原理，利用父標籤去捕獲子標籤的事件。
示例：
表格中每一行的編輯和刪除按鈕都能觸發相應的事件。
$("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([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])
自定義動畫示例：
點贊特效簡單示例
補充
each
jQuery.each(collection, callback(indexInArray, valueOfElement))：
描述：一個通用的迭代函數，它可以用來無縫迭代對象和數組。數組和類似數組的對象通過一個長度屬性（如一個函數的參數對象）來迭代數字索引，從0到length – 1。其他對象通過其屬性名進行迭代。
li =[10,20,30,40] $.each(li,function(i, v){ console.log(i, v);//index是索引，ele是每次循環的具體元素。 })
輸出：
010 120 230 340
.each(function(index, Element))：
描述：遍歷一個jQuery對象，為每個匹配元素執行一個函數。
.each() 方法用來迭代jQuery對象中的每一個DOM元素。每次回調函數執行時，會傳遞當前循環次數作為參數(從0開始計數)。由於回調函數是在當前DOM元素為上下文的語境中觸發的，所以關鍵字 this 總是指向這個元素。
// 為每一個li標籤添加foo $("li").each(function(){ $(this).addClass("c1"); });
注意: jQuery的方法返回一個jQuery對象，遍歷jQuery集合中的元素 – 被稱為隱式迭代的過程。當這種情況發生時，它通常不需要顯式地循環的 .each()方法：
也就是說，上面的例子沒有必要使用each()方法，直接像下面這樣寫就可以了：
$("li").addClass("c1"); // 對所有標籤做統一操作
注意：
在遍歷過程中可以使用 return false提前結束each循環。
終止each循環
return false；
伏筆…
.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.extend(object)
jQuery的命名空間下添加新的功能。多用於插件開發者向 jQuery 中添加新函數時使用。
示例：
<script> jQuery.extend({ min:function(a, b){return a < b ? a : b;}, max:function(a, b){return a > b ? a : b;} }); jQuery.min(2,3);// => 2 jQuery.max(4,5);// => 5 </script>
jQuery.fn.extend(object)
一個對象的內容合併到jQuery的原型，以提供新的jQuery實例方法。
<script> jQuery.fn.extend({ check:function(){ return this.each(function(){this.checked =true;}); }, uncheck:function(){ return this.each(function(){this.checked =false;}); } }); // jQuery對象可以使用新添加的check()方法了。 $("input[type='checkbox']").check(); </script>
單獨寫在文件中的擴展：
(function(jq){ jq.extend({ funcName:function(){ ... }, }); })(jQuery);
例子：
自定義的jQuery登錄驗證插件
<!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>登錄校驗示例</title> <style> .login-form { margin: 100px auto 0; max-width: 330px; } .login-form > div { margin: 15px 0; } .error { color: red; } </style> </head> <body> <div> <form action="" class="login-form" novalidate> <div> <label for="username">姓名</label> <input id="username" type="text" name="name" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="passwd">密碼</label> <input id="passwd" type="password" name="password" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="mobile">手機</label> <input id="mobile" type="text" name="mobile" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="where">來自</label> <input id="where" type="text" name="where" autocomplete="off"> <span class="error"></span> </div> <div> <input type="submit" value="登錄"> </div> </form> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="validate.js"></script> <script> $.validate(); </script> </body> </html>
"use strict"; (function ($) { function check() { // 定義一個標誌位，表示驗證通過還是驗證不通過 var flag = true; var errMsg; // 校驗規則 $("form input[type!=':submit']").each(function () { var labelName = $(this).prev().text(); var inputName = $(this).attr("name"); var inputValue = $(this).val(); if ($(this).attr("required")) { // 如果是必填項 if (inputValue.length === 0) { // 值為空 errMsg = labelName + "不能為空"; $(this).next().text(errMsg); flag = false; return false; } // 如果是密碼類型，我們就要判斷密碼的長度是否大於6位 if (inputName === "password") { // 除了上面判斷為不為空還要判斷密碼長度是否大於6位 if (inputValue.length < 6) { errMsg = labelName + "必須大於6位"; $(this).next().text(errMsg); flag = false; return false; } } // 如果是手機類型，我們需要判斷手機的格式是否正確 if (inputName === "mobile") { // 使用正則表達式校驗inputValue是否為正確的手機號碼 if (!/^1[345678]d{9}$/.test(inputValue)) { // 不是有效的手機號碼格式 errMsg = labelName + "格式不正確"; $(this).next().text(errMsg); flag = false; return false; } } } }); return flag; } function clearError(arg) { // 清空之前的錯誤提示 $(arg).next().text(""); } // 上面都是我定義的工具函數 $.extend({ validate: function () { $("form :submit").on("click", function () { return check(); }); $("form :input[type!='submit']").on("focus", function () { clearError(this); }); } }); })(jQuery);
傳參版插件：
<!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>登錄校驗示例</title> <style> .login-form { margin: 100px auto 0; max-width: 330px; } .login-form > div { margin: 15px 0; } .error { color: red; } </style> </head> <body> <div> <form action="" class="login-form" novalidate> <div> <label for="username">姓名</label> <input id="username" type="text" name="name" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="passwd">密碼</label> <input id="passwd" type="password" name="password" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="mobile">手機</label> <input id="mobile" type="text" name="mobile" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="where">來自</label> <input id="where" type="text" name="where" autocomplete="off"> <span class="error"></span> </div> <div> <input type="submit" value="登錄"> </div> </form> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="validate3.js"></script> <script> $.validate({"name":{"required": true}, "password": {"required": true, "minLength": 8}, "mobile": {"required": true}}); </script> </body> </html>
JS文件
課後習題：
- 登錄+驗證
- 左側菜單
- 表格-增、刪、改、查
