日木女人做爰視頻網(wǎng)站淘寶搜索關鍵詞排名
前言：為什么說 jQuery 熟悉即可，已日漸過時？
作為前端開發(fā)中常用的兩個庫或框架：Vue.js 和 jQuery。不少開發(fā)者想要學習 Vue.js 時，都會有一個疑惑：學習 Vue.js 是否一定要學習 jQuery？
從幾個方面來對比大家就清晰了：
（1）數(shù)據(jù)驅(qū)動
| jQuery | Vue |
| 需要一直操作 DOM | 以數(shù)據(jù)為導向，將業(yè)務邏輯分開 |
（2）組件化
| jQuery | Vue |
| 組件化支持較少 | 支持組件化開發(fā)，每個組件負責獨立的事情 |
（3）實時響應
| jQuery | Vue |
| 需要通過操作 DOM 來完成頁面上元素的添加或刪除等操作 | Vue.js 的數(shù)據(jù)驅(qū)動方式所體現(xiàn)的一個最顯著的優(yōu)勢是實時響應。只要數(shù)據(jù)發(fā)生變化，視圖就會自動更新 |
（4）數(shù)據(jù)綁定
| jQuery | Vue |
| 數(shù)據(jù)綁定需要通過手動操作 DOM 實現(xiàn) | Vue.js 中的數(shù)據(jù)綁定能夠有效地減少對 DOM 的直接操作。通過簡單的模板語法，可以輕松地將數(shù)據(jù)綁定到視圖上，實現(xiàn)數(shù)據(jù)的自動更新 |
（5）插件支持
| jQuery | Vue |
| ?jQuery 依賴于插件來擴展自身的功能，如表單驗證、模板引擎等 | 擁有豐富的插件，并且不斷地有新的插件加入。這些插件能夠擴展 Vue.js 的功能，提高程序的可維護性和擴展性 |
（6）語法特色
| jQuery | Vue |
| jQuery 是標準 HTML 和 CSS 語法的增強版，開發(fā)者需要掌握較多的 JavaScript 和 DOM 操作知識 | Vue.js 所采用的是模板語法，不需要掌握太多的 JavaScript，即可快速上手開發(fā) |
實際工作中，如何選擇 jQuery 和 Vue？
- ?需求適配：如果是需要適配現(xiàn)有的 jQuery 項目，那么就沒有必要去深入學習 Vue.js。反之，如果是新項目或者要對項目進行重構，推薦使用 Vue.js。
- 前后端分離：Vue.js 更適合在前后端分離的項目中使用，這樣可以更加明確地劃分前后端職責，是一種更加先進的開發(fā)模式。而 jQuery 更適合傳統(tǒng)的后端渲染頁面應用開發(fā)模式。
- 應用復雜度：當應用復雜度較高時，Vue.js 的組件化開發(fā)模式會更好地滿足項目需求。而當開發(fā)需求較簡單時，jQuery 的操作 DOM 和事件綁定的方式更為方便快捷。
- 開發(fā)成本：盡管 Vue.js 有一定的學習成本，但是隨著項目規(guī)模的擴大和需求變化，學習 Vue.js 能夠有效提高開發(fā)效率，節(jié)省開發(fā)成本。而 jQuery 的學習成本相對較低，但是在項目規(guī)模較大，需求變化頻繁的情況下，開發(fā)成本會隨著項目規(guī)模的擴大而逐漸變高。
總的來說：Vue.js 以數(shù)據(jù)驅(qū)動和組件化為特色，能夠有效地提高開發(fā)效率和可維護性，適用于較為復雜和前后端分離的項目。而 jQuery 則以操作 DOM 為特色，適用于需求簡單、項目規(guī)模較小的項目。Vue 已經(jīng)成為前端主流開發(fā)語言之一，是找工作、開發(fā)項目的首選。但不排除有很多公司有老舊的 jQuery 項目需要維護。從另外一個層面來說，掌握多一門語言絕不是壞事。
1、簡單認識 jQuery
1.1 jQuery 是什么（What）？
- jQuery 是一個 JavaScript 庫，還提供了大量的插件，即插即用。
- jQuery 極大地簡化了 JavaScript 編程。write less，do more（寫得少，做得多）
- jQuery 封裝簡化 DOM 操作(CRUD) / Ajax，包括：HTML元素的選取和操作以及事件綁定，CSS的操作，JavaScript 特效和動畫，封裝 Ajax 操作等等。
- jQuery 很容易學習。有 HTML、CSS、JavaScript 基礎的人很容易上手。
1.2 為什么要使用 jQuery（Why）？
- 強大選擇器：方便快速查找DOM元素
- 讀寫合一：同一個函數(shù)，根據(jù)傳參不同，可以進行讀數(shù)據(jù) 或 寫數(shù)據(jù)操作
- 鏈式調(diào)用：可以通過(.)不斷調(diào)用 jQuery 對象的方法
- 瀏覽器兼容，且 jQuery 是目前最流行的 JS 代碼庫
1.3 如何使用 jQuery（How）？
1.3.1 引入jQuery庫
引入 jQuery 庫分為“本地引入”和“CDN遠程引入”，同時，引入的版本分為“測試版”與“生產(chǎn)版”（壓縮版）。
我們平時開發(fā)、測試的時候，使用“測試版”，方便調(diào)試和打印日志。
上生產(chǎn)環(huán)境，使用“生產(chǎn)版”或者“CDN遠程引入”，因為它的文件體積更小，訪問速度更快，可減輕服務器壓力。
1、jQuery 在線教程：https://www.runoob.com/jquery/jquery-tutorial.html
2、jQuery 在線參考手冊：https://www.runoob.com/manual/jquery/
3、jQuery 1.7 離線版中文手冊 chm：https://pan.baidu.com/s/1yigT3MWHfYgobk_HthaV6A?pwd=1717 提取碼: 1717
4、jQuery 1.11.3 離線版中文手冊 chm：https://pan.baidu.com/s/1k3slbwsGkl1cSZjj7z87gQ?pwd=xmde
提取碼：xmde
5、jQuery 官網(wǎng)：https://jquery.com/
什么是 CDN？
CDN 的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡。其基本思路是盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母?、更穩(wěn)定。通過在網(wǎng)絡各處放置節(jié)點服務器所構成的在現(xiàn)有的互聯(lián)網(wǎng)基礎之上的一層智能虛擬網(wǎng)絡，CDN系統(tǒng)能夠?qū)崟r地根據(jù)網(wǎng)絡流量和各節(jié)點的連接、負載狀況以及到用戶的距離和響應時間等綜合信息將用戶的請求重新導向離用戶最近的服務節(jié)點上。其目的是使用戶可就近取得所需內(nèi)容，解決 Internet 網(wǎng)絡擁擠的狀況，提高用戶訪問網(wǎng)站的響應速度。
常用的 CDN 網(wǎng)站：
1、bootcdn：https://www.bootcdn.cn/
例如：https://cdn.bootcdn.net/ajax/libs/jquery/1.10.1/jquery.min.js
2、staticfile：https://www.staticfile.org/
1.3.2?使用jQuery
使用 jQuery 函數(shù)：$ 或者 jQuery
使用 jQuery 對象：$xxx(執(zhí)行$() 或者 jQuery() 得到的)
js 源文件可以在官網(wǎng)下載，這里提供截圖的 js 文件：https://pan.baidu.com/s/1SMp9fb0IzIdQWplhg-60SA?pwd=u7kp
提取碼：u7kp
1.4 jQuery 不同版本的區(qū)別
jQuery主要有 3 個不同的大版本，分別是 1.x、2.x 和 3.x 這 3 個不同的大版本。
1.x ：是 jQuery 比較早期的版本，主要兼容老的瀏覽器，包括 IE6、IE7等瀏覽器。如果需要兼容IE6及以上版本瀏覽器，那么可以選擇使用 jQuery 1.x 版本。其缺點是文件體積比較大。
2.x：是 jQuery? 發(fā)展后期的版本，主要舍棄了對低版本瀏覽器的兼容性（部分 IE8 及以下版本不再支持），將文件大小減小，并提高了性能，提高執(zhí)行效率。
3.x：是 jQuery? 的最新版本，支持所有現(xiàn)代瀏覽器，不再兼容舊的瀏覽器，完全不再支持 IE8 及以下的版本。提供了一些新的 API，這意味著可以使用更多的 HTML5 和 CSS3 特性。另外，jQuery?3.x還完全移除了一些早期版本中被棄用的方法和特性。
2、jQuery的 2 把利器：核心函數(shù)&核心對象
2.1 jQuery 的 HelloWorld
2.1.1 需求：點擊“打招呼”按鈕，彈框提示輸入的值
代碼結(jié)構：
01-HelloWorld.html 源代碼：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery HelloWorld</title><!-- 使用 JavaScript 原生 DOM --><script>window.onload = function () {let btn1 = document.getElementById("btn1");btn1.onclick = function () {let yourWord = document.getElementById("yourWord").value;alert(yourWord);}}</script><!-- 使用 jQuery 實現(xiàn) --><!-- 本地引入 js 文件 --><script src="../js/jquery-1.10.1.js"></script><!-- 遠程 CDN 引入，要求電腦聯(lián)網(wǎng) --><!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.1/jquery.js"></script> --><script>/*1、使用 jQuery 核心函數(shù)：$ / jQuery2、使用 jQuery 核心對象：執(zhí)行 $() 或者 jQuery() 返回的對象*/$(function () {//文檔加載完成后執(zhí)行l(wèi)et btn2 = $("#btn2");btn2.click(function () {//給 btn2 綁定監(jiān)聽事件let yourWord = $("#yourWord").val();alert(yourWord);})})/*// 上面的代碼可以改為以下的方式，也就是引入 jQuery 文件后，$和jQuery等價jQuery(function () {let btn2 = jQuery("#btn2");btn2.click(function () {let yourWord = jQuery("#yourWord").val();alert(yourWord);})})*/</script>
</head><body><!-- 需求：點擊“打招呼”按鈕，彈框提示輸入的值-->請輸入您要說的話：<input type="text" id="yourWord" /> <br> <br><button id="btn1">打招呼（JavaScript 原生版）</button> <br> <br><button id="btn2">打招呼（jQuery 版）</button>
</body></html>你是否很疑惑為什么沒有在 <script> 標簽中使用 type="text/javascript" ？
在 HTML5 中，不必那樣做了。JavaScript 是 HTML5 以及所有現(xiàn)代瀏覽器中的默認腳本語言！
文檔就緒事件
注意到在實例中的 jQuery 函數(shù)位于一個函數(shù)中：
$(function(){
? ?// 邏輯代碼...
});這是為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼，即在 DOM 加載完成后才可以對 DOM 進行操作。如果在文檔沒有完全加載之前就運行函數(shù)，操作可能失敗。另外一種寫法（比較麻煩）：
$(document).ready(function(){
? ?// 邏輯代碼...
});
運行結(jié)果：
文本框輸入消息，點擊 JavaScript 原生版按鈕、jQuery版按鈕。
可以在瀏覽器的 Console（控制臺） 窗口中使用?$.fn.jquery?命令查看當前 jQuery 使用的版本：
2.2 簡單解讀 jQuery 源代碼
1、jQuery 是匿名函數(shù)調(diào)用
2、jQuery 函數(shù)執(zhí)行后，返回的是實例對象
3、引入 jQuery 文件后，給 window 添加了 2 個屬性。jQuery 與 $ 都是指向 jQuery。
2.3 jQuery 核心函數(shù)
jQuery 文件只對外暴露了 2 個函數(shù)，即：$ 或?jQuery
引入 jQuery 庫后，直接使用 $ （jQuery用得比較少），當函數(shù)用：$(xxx)，當對象用：$.xxx()，記憶口訣：當 $ 作為函數(shù)用的時候，后面緊跟著的是函數(shù)括號 ()；當 $ 當做對象用的是，后面緊跟著的是英文點 . 去調(diào)用對象的方法，調(diào)用方法后一般都是返回對象結(jié)果。
我們研究函數(shù)，就是研究給函數(shù)傳遞不同的參數(shù)后，有什么功能，返回什么結(jié)果。
平時學習、工作可以對照中文手冊：
實踐：
需求1：點擊按鈕，顯示按鈕的文本，增加新的文本輸入框
需求2：輸出數(shù)組中的元素值，當?shù)扔谀硞€值時不再往后執(zhí)行
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>核心函數(shù)</title><script src="../js/jquery-1.10.1.js"></script><script>// 需求1：點擊按鈕，顯示按鈕的文本，增加新的文本輸入框$(function () {//綁定文檔加載完成后的回調(diào)函數(shù)$("#btn").click(function () {//綁定按鈕的點擊事件函數(shù)//這里的 this，指的是發(fā)生事件的 dom 元素，即：id=btn 的元素//方式1：元素.innerHTML（原生方式）console.log("this.innerHTML 輸出：" + this.innerHTML);//方式2：參數(shù)如果是 dom 對象，jQuery 會把它封裝成 jQuery 對象，封裝后就可以使用 jQuery 的方法console.log("$(this).html() 輸出：" + $(this).html());//創(chuàng)建標簽對象并封裝成jQuery對象，追加到 div 元素中$(`<input type="text" name="say2" /><br/>`).appendTo("div");})})// 需求2：輸出數(shù)組中的元素值，當?shù)扔谀硞€值時不再往后執(zhí)行l(wèi)et arr = [1, 3, 5, 7, 9];$.each(arr, function (index, item) {if (item == 7) {//當 item 值等于 7 時，不再往后執(zhí)行，結(jié)束循環(huán)return false;}console.log("index=" + index + ",item=" + item);})</script>
</head><body><div><button id="btn">點我</button><br><input type="text" name="say"><br></div>
</body></html>結(jié)果：
打開 jQuery 1.7中文幫助手冊，找到“工具”目錄下，找到 jQuery.each() 函數(shù)，里面有詳細的使用說明?；卣{(diào)函數(shù)有2個參數(shù)：第一個參數(shù)是數(shù)組索引，第二個參數(shù)是變量的內(nèi)容。如果要退出循環(huán)，使用 return false
另外，我們找到“屬性”下的 html 函數(shù)，如果沒有傳遞參數(shù)，則是獲取元素的內(nèi)容；如果傳遞了參數(shù)，則是設置元素的內(nèi)容。這就是 jQuery 讀寫合一的特性：同一個函數(shù)，根據(jù)傳參不同，可以進行讀數(shù)據(jù) 或 寫數(shù)據(jù)操作。
2.4 jQuery 核心對象
jQuery 對象可以通過執(zhí)行函數(shù)后獲取到：$xxx(執(zhí)行$() 或者 jQuery() 得到)，執(zhí)行jQuery函數(shù)返回的就是 jQuery 對象。使用 jQuery 對象： $obj.xxx()
jQuery 對象內(nèi)部包含的是 dom 元素對象的偽數(shù)組（可能只有一個元素），jQuery 對象擁有很多有用的屬性和方法，讓程序員能方便操作 dom。什么叫做偽數(shù)組？就是沒有數(shù)組的專有特性，比如：push() pop()
我們研究對象，主要是研究對象的屬性、方法。jQuery 對象的基本屬性、方法有如下。
2.4.1 基本行為
- size() / length：jQuery 對象中元素的個數(shù)
- index([selector|element])：搜索匹配的元素，并返回相應元素的索引值，從0開始計數(shù)。
- get([index])：取得其中一個匹配的元素。 index表示取得第幾個匹配的元素。
- each()：以每一個匹配的元素作為上下文來執(zhí)行一個函數(shù)。
2.4.2 屬性
操作內(nèi)部標簽的屬性或值
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>核心對象</title><script src="../js/jquery-1.10.1.js"></script><script>$(function () {// 需求1：統(tǒng)計一共有多少個按鈕let buttons = $("button");//獲取所有的 button 元素console.log("buttons.size()=" + buttons.size(), ",buttons.lenth=" + buttons.length);//輸出：buttons.size()=5 ,buttons.lenth=5// 需求2：取出第3個 button 元素的文本console.log("第3個button元素的文本 buttons[2].innerHTML=" + buttons[2].innerHTML);//輸出：第3個button元素的文本 buttons[2].innerHTML=哈佛大學console.log("第3個button元素的文本 buttons.get(2).innerHTML=" + buttons.get(2).innerHTML);//輸出：第3個button元素的文本 buttons.get(2).innerHTML=哈佛大學//需求3：輸出所有 button 標簽的文本buttons.each(function () {//不使用參數(shù)的方式console.log("each不加參數(shù)：" + this.innerHTML);})/*輸出：each不加參數(shù)：清華大學each不加參數(shù)：北京大學each不加參數(shù)：哈佛大學each不加參數(shù)：牛津大學each不加參數(shù)：復旦大學*/buttons.each(function (index, item) {//使用參數(shù)的方式console.log("index=" + index + ",item=" + item.innerHTML);})/*輸出：index=0,item=清華大學index=1,item=北京大學index=2,item=哈佛大學index=3,item=牛津大學index=4,item=復旦大學*///需求4：輸出“牛津大學”按鈕的下標console.log("“牛津大學”按鈕的下標是：" + $("#niujin").index());//輸出：“牛津大學”按鈕的下標是：3//什么是偽數(shù)組？/*** 它是 Object 對象* 它有 length 屬性* 它有數(shù)值下標屬性* 沒有數(shù)組特別的方法：forEach()、push()、pop()、splice()*///需求5：證明 buttons 不是數(shù)組，而是偽數(shù)組console.log("buttons是否是數(shù)組$.isArray()：" + $.isArray(buttons));//輸出：buttons是否是數(shù)組$.isArray()：falseconsole.log("buttons是否是數(shù)組 instanceof Array：" + (buttons instanceof Array));//輸出：buttons是否是數(shù)組 instanceof Array：false//非數(shù)組對象調(diào)用 forEach 函數(shù)返回 undefinedconsole.log("buttons.forEach=" + buttons.forEach);//輸出：buttons.forEach=undefined})</script>
</head><body><button id="qinghua">清華大學</button><button id="beida">北京大學</button><button id="hafo">哈佛大學</button><button id="niujin">牛津大學</button><button id="fudan">復旦大學</button>
</body></html>2.4.3 CSS
2.4.3.1 選擇器
jQuery 選擇器的基本語法就是 CSS 的選擇器語法，并在此基礎上做了一些擴展；只有調(diào)用 $，并將選擇器作為參數(shù)傳入才能起到作用。$(selector)作用：根據(jù)選擇器規(guī)則在整個文檔中查找所有匹配的標簽的數(shù)組（偽數(shù)組），并封裝成 jQuery 對象返回。
2.4.3.2 選擇器分類
- 基本選擇器
- 層次選擇器
- 過濾選擇器
- 表單選擇器
2.4.3.2.1 基本選擇器
- id選擇器，語法：$("#xxx")，例如：$("#p1")
- 元素選擇器，語法：$("xxx")，例如：$("div")
- 類選擇器，語法：$(".xxx")，例如：$(".good")
- 通配符選擇器，語法：$("*")，例如：$("*")
- 并集選擇器，不同元素之間以逗號隔開，語法：$("選擇器1,?選擇器2,?選擇器3?")，例如：$("a,button")
- 交集選擇器，不用隔開（記憶：它們要貼在一起寫才算是相交），語法：$("選擇器1選擇器2")，例如：$("li.good")
?使用“交集選擇器”注意：
1. 有標簽名，標簽名必須寫在前面。
2. 交集選擇器中不可能出現(xiàn)兩個元素選擇器 ，因為一個元素，不可能即是 p 元素又是 span 元素。
3. 用的最多的交集選擇器是：元素選擇器配合類名選擇器，例如： li.good
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>選擇器</title><script src="../js/jquery-1.10.1.js"></script><script>$(function () {// 綁定文檔加載完成后的回調(diào)函數(shù)// 需求1：選擇 id=p1 的元素，并設置背景顏色為 red$("#p1").css("background", "red");// 需求2：選擇所有的 div 元素，并設置背景顏色為 green$("div").css("background", "green");// 需求3：選擇所有 class 屬性為 good 的元素，并設置字體大小為30px$(".good").css("font-size", "30px");// 需求4：選擇所有的 a 和 button 元素，并設置背景顏色為 yellow$("a,button").css("background", "yellow");// 需求5：選擇所有 class 屬性為 good 的 li 元素，并設置背景顏色為 orange$("li.good").css("background", "orange");})</script>
</head><body><p id="p1">我是p元素(id=p1)</p><div id="div1" class="good">我是div1(class="good")</div><div id="div2">我是div2</div><span class="good">我是span(class="good")</span><br><a id="jump" href="http://www.baidu.com" target="_blank">點我，去百度首頁</a><button id="btn">我是一個按鈕，可以開啟未來</button><br><ul><li>北京</li><li title="bigCity">上海(title="bigCity")</li><li class="good">廣州(class="good")</li><li title="bigCity">深圳(title="bigCity")</li></ul>
</body></html>效果：
2.4.3.2.21 層次選擇器
- 查找子元素（也叫直接后代元素），語法：$("parent>child")，例如：$("ul>li")
- 查找后代元素（指的是所有后代元素，包括子元素），語法：$("ancestor descendant")，例如：$("ul span")
- 查找兄弟元素，緊接在 prev 元素后的 next 元素，語法：$("prev+next")，例如：$(".shanghai+li")
- 查找某個元素后的所有兄弟元素，語法：$("prev~siblings")，例如：$("ul .shenzhen~*")
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>層次選擇器</title><script src="../js/jquery-1.10.1.js"></script><script>$(function () {// 綁定文檔加載完成后的回調(diào)函數(shù)//查找所有后代元素（包括子元素）語法：ancestor descendant// 需求1、選中ul下所有的的span（在給定的祖先元素下匹配所有的后代元素）$("ul span").css("background", "red");// 查找子元素（直接后代）的語法：parent>child// 需求2、選中ul下所有的子元素p$("ul>p").css("background", "yellow");//查找兄弟元素，緊接在 prev 元素后的 next 元素，語法：prev+next// 需求3、選中class為 shanghai 的下一個li$(".shanghai+li").css("background", "green");//查找匹配 prev 元素之后的所有 siblings 元素，語法：prev~siblings//需求4、選中 ul 下的class為shenzhen的元素后面的所有兄弟元素$("ul .shenzhen~*").css("background", "purple");})</script>
</head><body><ul><li>我去過北京</li><li class="shanghai">我去過上海</li><li title="guilin"><a href="http://www.baidu.com">我去過桂林</a></li><li class="shanghai"><p>我去過東方明珠塔</p><p class="lujiazui">我去過陸家嘴</p></li><span>我去過重慶</span><li class="shenzhen"><span>我去過深圳</span></li><h2>我去過沈陽</h2><h3>我去過蘇州</h3></ul>
</body></html>效果：
??
?
2.4.3.2.3 過濾選擇器
在原有選擇器匹配的元素中，進一步進行過濾的選擇器
- 基本
- 內(nèi)容
- 可見性
- 屬性
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>過濾選擇器</title><script src="../js/jquery-1.10.1.js"></script><script>$(function () {// 綁定文檔加載完成后的回調(diào)函數(shù)// 需求1、選擇第一個 div$("div:first").css("background", "green");// 需求2、選擇最后一個 class 為 nice 的元素$(".nice:last").css("background", "black");// 需求3、選擇所有 class 屬性不為 nice 的 div$("div:not(.nice)").css("background", "yellow");// 需求4、選擇第二個和第三個 li 元素$("li:eq(1)").css("background", "red");$("li:eq(2)").css("background", "orange");// 需求5、選擇內(nèi)容為“我喜歡做飯”的li$(`li:contains("我喜歡做飯")`).css("background", "pink");// 需求6、選擇隱藏的 li，并輸出其內(nèi)容console.log($("li:hidden")[0].innerHTML);// 需求7、選擇有 title 屬性的 li 元素$("li[title]").css("font-size", "30px");// 需求8、選擇所有 title 屬性為 nice 的 li 元素$(`li[title="games"]`).css("color", "white");})</script>
</head><body><div id="div1" class="nice">class=nice的div1</div><div id="div2" class="nice">class=nice的div2</div><div id="div3">div3</div><span class="nice">class=nice的span元素</span><br><ul><li>我的愛好很多</li><li title="games">我喜歡玩?zhèn)髌?lt;/li><li title="games">我喜歡打王者</li><li title="coking">我喜歡做飯</li><li class="nice">我喜歡KTV，class=nice</li><li style="display: none;">我本來的隱藏的元素</li></ul>
</body></html>效果：
??
?
2.4.3.2.4 表單選擇器
- 表單
- 表單對象屬性
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表單選擇器</title><script src="../js/jquery-1.10.1.js"></script><script>$(function () {// 綁定文檔加載完成后的回調(diào)函數(shù)//需求1：選擇不可用的文本輸入框$(":text:disabled").css("background", "red");//需求2：顯示選擇愛好的個數(shù)console.log("愛好的個數(shù)=" + $(":checkbox:checked").length);//需求3：顯示選擇的城市名稱$(":submit").click(function () {let city = $("select>option:selected").html();city = $("select").val();console.log("選擇的城市名稱=" + city);})})</script>
</head><body><form>用戶名: <input type="text" /><br>密 碼: <input type="password" /><br>愛 好:<input type="checkbox" checked="checked" />唱歌<input type="checkbox" />編程<input type="checkbox" checked="checked" />羽毛球 <br>性 別:<input type="radio" name="sex" value='male' />男<input type="radio" name="sex" value='female' />女<br>郵 箱: <input type="text" name="email" disabled="disabled" /><br>所在地:<select><option value="北京">北京</option><option value="深圳" selected="selected">深圳</option><option value="上海">上海</option></select><br><input type="submit" value="提交" /></form>
</body></html>效果：
?
?
1. 操作任意屬性
? ?attr()：操作屬性值為非布爾值的屬性
? ?removeAttr()：刪除屬性
? ?prop()：專門操作屬性值為布爾值的屬性
2. 操作class屬性
? ?addClass(classValue)：添加 class 屬性
? ?removeClass(classValue)：移除指定class屬性
3. 操作HTML代碼/文本/值
? ?html()：讀寫標簽體文本
? ?val()：讀寫標簽的value
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>屬性</title><script src="../js/jquery-1.10.1.js"></script><script>$(function () {// 綁定文檔加載完成后的回調(diào)函數(shù)// attr(): 操作屬性值為非布爾值的屬性// prop(): 專門操作屬性值為布爾值的屬性//需求1：讀取第一個 div 的 class 屬性console.log($("div:first").attr("class"));//需求2：給所有的 div 設置 name 屬性為 study$("div").attr("name", "study");//測試輸出console.log($("div:first").attr("name"));//需求3：移除所有的 div 的 title 屬性$("div").removeAttr("title");//測試輸出console.log($("div:first").attr("title"));//需求4：給所有的 div 添加 class="meet"$("div").addClass("meet");//測試輸出console.log($("div:first").attr("class"));//需求5：移除所有的 div 的 class=nice$("div").removeClass("nice");//測試輸出console.log($("div:first").attr("class"));//需求6：得到最后一個li的標簽體文本console.log($("li:last").html());//輸出：我本來的隱藏的元素//需求7：設置第一個 li 的標簽體為 "<h2>哈哈哈哈哈哈哈</h2>"$("li:first").html("<h2>哈哈哈哈哈哈哈</h2>");//需求8：得到輸入框中的 value 值console.log($(":text").val());//需求9：將輸入框的值設置為：倫敦大學$(":text").val("倫敦大學");//需求10：點擊“全選”、“全不選”按鈕實現(xiàn)全選、全不選let checkboxArr = $(":checkbox");$("#btn1").click(function () {checkboxArr.prop("checked", true);});$("#btn2").click(function () {checkboxArr.prop("checked", false);});})</script>
</head><body><input type="text" name="username" value="清華大學" /><div id="div1" class="nice">class=nice的div1</div><div id="div2" class="nice">class=nice的div2</div><div id="div3">div3</div><span class="nice">class=nice的span元素</span><br><ul><li>我的愛好很多</li><li title="games">我喜歡玩?zhèn)髌?lt;/li><li title="games">我喜歡打王者</li><li title="coking">我喜歡做飯</li><li class="nice">我喜歡KTV，class=nice</li><li style="display: none;">我本來的隱藏的元素</li></ul><br><input type="checkbox" value="爬山">爬山<input type="checkbox" value="騎行">騎行<input type="checkbox" value="釣魚">釣魚<br><button id="btn1">全選</button><button id="btn2">全不選</button>
</body></html>效果：
?
?
更多選擇器參考下列表格：
?選擇器在線參考手冊：https://www.runoob.com/cssref/css-selectors.html
| 選擇器 | 示例 | 示例說明 | CSS |
|---|---|---|---|
| .class | .intro | 選擇所有class="intro"的元素 | 1 |
| #id | #firstname | 選擇所有id="firstname"的元素 | 1 |
| * | * | 選擇所有元素 | 2 |
| element | p | 選擇所有<p>元素 | 1 |
| element,element | div,p | 選擇所有<div>元素和 <p> 元素 | 1 |
| element.class | p.hometown | 選擇所有 class="hometown" 的 <p> 元素 | 1 |
| element?element | div p | 選擇<div>元素內(nèi)的所有<p>元素 | 1 |
| element>element | div>p | 選擇所有父級是 <div> 元素的 <p> 元素 | 2 |
| element+element | div+p | 選擇所有緊跟在 <div> 元素之后的第一個 <p> 元素 | 2 |
| [attribute] | [target] | 選擇所有帶有target屬性元素 | 2 |
| [attribute=value] | [target=-blank] | 選擇所有使用target="-blank"的元素 | 2 |
| [attribute~=value] | [title~=flower] | 選擇標題屬性包含單詞"flower"的所有元素 | 2 |
| [attribute|=language] | [lang|=en] | 選擇 lang 屬性等于?en，或者以?en-?為開頭的所有元素 | 2 |
| :link | a:link | 選擇所有未訪問鏈接 | 1 |
| :visited | a:visited | 選擇所有訪問過的鏈接 | 1 |
| :active | a:active | 選擇活動鏈接 | 1 |
| :hover | a:hover | 選擇鼠標在鏈接上面時 | 1 |
| :focus | input:focus | 選擇具有焦點的輸入元素 | 2 |
| :first-letter | p:first-letter | 選擇每一個<p>元素的第一個字母 | 1 |
| :first-line | p:first-line | 選擇每一個<p>元素的第一行 | 1 |
| :first-child | p:first-child | 指定只有當<p>元素是其父級的第一個子級的樣式。 | 2 |
| :before | p:before | 在每個<p>元素之前插入內(nèi)容 | 2 |
| :after | p:after | 在每個<p>元素之后插入內(nèi)容 | 2 |
| :lang(language) | p:lang(it) | 選擇一個lang屬性的起始值="it"的所有<p>元素 | 2 |
| element1~element2 | p~ul | 選擇p元素之后的每一個ul元素 | 3 |
| [attribute^=value] | a[src^="https"] | 選擇每一個src屬性的值以"https"開頭的元素 | 3 |
| [attribute$=value] | a[src$=".pdf"] | 選擇每一個src屬性的值以".pdf"結(jié)尾的元素 | 3 |
| [attribute*=value] | a[src*="runoob"] | 選擇每一個src屬性的值包含子字符串"runoob"的元素 | 3 |
| :first-of-type | p:first-of-type | 選擇每個p元素是其父級的第一個p元素 | 3 |
| :last-of-type | p:last-of-type | 選擇每個p元素是其父級的最后一個p元素 | 3 |
| :only-of-type | p:only-of-type | 選擇每個p元素是其父級的唯一p元素 | 3 |
| :only-child | p:only-child | 選擇每個p元素是其父級的唯一子元素 | 3 |
| :nth-child(n) | p:nth-child(2) | 選擇每個p元素是其父級的第二個子元素 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 選擇每個p元素的是其父級的第二個子元素，從最后一個子項計數(shù) | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 選擇每個p元素是其父級的第二個p元素 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 選擇每個p元素的是其父級的第二個p元素，從最后一個子項計數(shù) | 3 |
| :last-child | p:last-child | 選擇每個p元素是其父級的最后一個子級。 | 3 |
| :root | :root | 選擇文檔的根元素 | 3 |
| :empty | p:empty | 選擇每個沒有任何子級的p元素（包括文本節(jié)點） | 3 |
| :target | #news:target | 選擇當前活動的#news元素（包含該錨名稱的點擊的URL） | 3 |
| :enabled | input:enabled | 選擇每一個已啟用的輸入元素 | 3 |
| :disabled | input:disabled | 選擇每一個禁用的輸入元素 | 3 |
| :checked | input:checked | 選擇每個選中的輸入元素 | 3 |
| :not(selector) | :not(p) | 選擇每個并非p元素的元素 | 3 |
| ::selection | ::selection | 匹配元素中被用戶選中或處于高亮狀態(tài)的部分 | 3 |
| :out-of-range | :out-of-range | 匹配值在指定區(qū)間之外的input元素 | 3 |
| :in-range | :in-range | 匹配值在指定區(qū)間之內(nèi)的input元素 | 3 |
| :read-write | :read-write | 用于匹配可讀及可寫的元素 | 3 |
| :read-only | :read-only | 用于匹配設置 "readonly"（只讀） 屬性的元素 | 3 |
| :optional | :optional | 用于匹配可選的輸入元素 | 3 |
| :required | :required | 用于匹配設置了 "required" 屬性的元素 | 3 |
| :valid | :valid | 用于匹配輸入值為合法的元素 | 3 |
| :invalid | :invalid | 用于匹配輸入值為非法的元素 | 3 |
2.4.4 CSS
2.4.4.1?style樣式
- css(styleName): 根據(jù)樣式名得到對應的值
- css(styleName, value): 設置一個樣式
- css({多個樣式對}): 設置多個樣式
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css</title><script src="../js/jquery-1.10.1.js"></script><script>$(function () {// 綁定文檔加載完成后的回調(diào)函數(shù)//需求1：得到第一個標簽的顏色console.log($("p:first").css("color"));//輸出：rgb(0, 0, 255)//需求2：設置所有 span 標簽的背景顏色為 orange$("span").css("background", "orange");//需求3：設置第2個p標簽的字體顏色=#FF2288 背景=yellow，寬=300px，高=30px$("p:eq(1)").css({color: "#FF2288",background: "yellow",width: "300px",height: "30px"})})</script>
</head><body><span>馬云</span><p style="color:blue">讓天下沒有難做的生意！</p><br><span>雷軍</span><p style="color:red">小米，為發(fā)燒而生！</p>
</body></html>效果：
2.4.4.2?位置坐標
- offset(): 讀/寫當前元素坐標(原點是頁面左上角)
- position(): 讀當前元素坐標(原點是父元素左上角)
- scrollTop()/scrollLeft(): 讀/寫元素/頁面的滾動條坐標
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>offset</title><script src="../js/jquery-1.10.1.js"></script><script>$(function () {// 綁定文檔加載完成后的回調(diào)函數(shù)/* 需求1：點擊 btn1打印 div1 相對于頁面左上角的位置打印 div2 相對于頁面左上角的位置打印 div1 相對于父元素左上角的位置打印 div2 相對于父元素左上角的位置*/$("#btn1").click(function () {let offset1 = $(".div1").offset();// 打印 div1 相對于頁面左上角的位置console.log("offset1=", offset1.left, offset1.top);let offset2 = $(".div2").offset();// 打印 div2 相對于頁面左上角的位置console.log("offset2=", offset2.left, offset2.top);// 打印 div1 相對于父元素左上角的位置let position1 = $(".div1").position();console.log("position1=", position1.left, position1.top);// 打印 div2 相對于父元素左上角的位置let position2 = $(".div2").position();console.log("position2=", position2.left, position2.top);});// 需求2：點擊 btn2 設置 div2 相對于頁面的左上角的位置$("#btn2").click(function () {$(".div2").offset({left: "50",//注意不能使用像素單位px，否則失效top: "100" //注意不能使用像素單位px，否則失效});//輸出驗證let offset3 = $(".div2").offset();console.log("offset3=", offset3.left, offset3.top);})})</script>
</head><body style="height: 1000px;"><div class="div1"><div class="div2">測試offset</div></div><div class="div3"><button id="btn1">讀取 offset 和 position </button><button id="btn2">設置offset</button></div><style type="text/css">* {margin: 0px;}/* 設置 class=div1 的樣式 */.div1 {/* 絕對定位 */position: absolute;width: 200px;height: 200px;left: 10px;top: 20px;background: green;}/* 設置 class=div2 的樣式 */.div2 {/* 絕對定位 */position: absolute;width: 100px;height: 100px;top: 50px;background: red;}/* 設置 class=div3 的樣式 */.div3 {/* 絕對定位 */position: absolute;top: 250px;}</style>
</body></html>效果：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>元素滾動</title><script src="../js/jquery-1.10.1.js"></script><script>$(function () {// 綁定文檔加載完成后的回調(diào)函數(shù)//需求1：得到 div 或者頁面滾動條的坐標$("#btn1").click(function () {console.log($("div").scrollTop())console.log($("html").scrollTop() + $("body").scrollTop())console.log($(document.documentElement).scrollTop() + $(document.body).scrollTop()) // 兼容IE/Chrome})//需求2： 讓div或頁面的滾動條滾動到指定位置$("#btn2").click(function () {$("div").scrollTop(200)$("html,body").scrollTop(300)})})</script>
</head><body style="height: 1000px;"><div style="border:1px solid black;width:100px;height:150px;overflow:auto">“輕舟已過萬重山”出自唐代詩人李白的《早發(fā)白帝城》。這句詩描繪了一幅輕舟快速穿越重重山巒的壯麗畫面，寓含了詩人因遇赦而心情愉悅的情境。同時，這句詩也常被用來形容人們在面對困難時，勇往直前、無所畏懼的精神風貌。這句詩不僅具有文學價值，也富含人生哲理。它告訴我們，在人生的旅途中，無論遇到多少艱難險阻，只要我們保持積極的心態(tài)，堅定信念，勇往直前，就一定能夠克服一切困難，到達理想的彼岸。此外，這句詩也體現(xiàn)了李白獨特的詩歌風格，他善于運用生動的形象和富有想象力的語言，將自然景觀與人生哲理相結(jié)合，創(chuàng)作出既具有藝術美感又富含深刻內(nèi)涵的詩歌作品。因此，“輕舟已過萬重山”不僅是一句優(yōu)美的詩句，更是一種積極向上、勇往直前的人生態(tài)度的象征。小時候背這句古詩是如此輕松，步入而立之年才聽懂其中的人生道理。</div><br><br><br><button id="btn1">得到scrollTop</button><button id="btn2">設置scrollTop</button>
</body></html>效果：
2.4.4.3?尺寸
- width()/height(): 內(nèi)容尺寸，width/height
- innerWidth()/innerHeight(): 內(nèi)部尺寸，innerHeight=height+padding（注意有上下2個）、innerWidth=width+padding（注意有左右2個）
- outerWidth()/outerHeight(): 外部尺寸，outerWidth=width+padding+border 如果是true, 加上margin。 ?outerHeight=height+padding+border ?如果是true, 加上margin
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>元素的尺寸</title><script src="../js/jquery-1.10.1.js"></script><script>$(function () {// 綁定文檔加載完成后的回調(diào)函數(shù)// 需求1：獲取內(nèi)容尺寸let $div = $("div");console.log("width=" + $div.width(), "height=" + $div.height());//需求2：獲取內(nèi)部尺寸。innerHeight=height+padding（注意有上下2個）、innerWidth=width+padding（注意有左右2個）console.log("innerWidth=" + $div.innerWidth(), "innerHeight=" + $div.innerHeight());//需求3：獲取外部尺寸。outerWidth=width+padding+border 如果是true, 加上margin。 outerHeight=height+padding+border 如果是true, 加上marginconsole.log("outerWidth=" + $div.outerWidth(), "outerHeight=" + $div.outerHeight());console.log("outerWidth=" + $div.outerWidth(true), "outerHeight=" + $div.outerHeight(true));})</script>
</head><body><div><textarea name="textarea" id="textarea" cols="50" rows="10">《你曾是少年》 S.H.E許多年前，你有一雙清澈的雙眼。奔跑起來，像是一道春天的閃電。想看遍這世界，去最遙遠的遠方。感覺有雙翅膀，能飛越高山和海洋。許多年前，你曾是個樸素的少年。愛上一個人，就不怕付出自己一生。相信愛會永恒，相信每個陌生人。相信你會成為最想成為的人。</textarea></div><style>div {width: 400px;height: 160px;background: red;padding: 10px;border: 10px #fbd850 solid;margin: 10px;}</style>
</body></html>效果：
2.4.5 篩選
根據(jù)指定的規(guī)則過濾內(nèi)部的標簽，在 jQuery 對象中的元素對象數(shù)組中過濾出一部分元素來
? ? ? ? ? ? 1. first()
? ? ? ? ? ? 2. last()
? ? ? ? ? ? 3. eq(index|-index)
? ? ? ? ? ? 4. filter(selector)
? ? ? ? ? ? 5. not(selector)
? ? ? ? ? ? 6. has(selector) 篩選有某個標簽
? ? ? ? ? ? 7. children()：在子標簽中找
? ? ? ? ? ? 8. find()：后代標簽中找
? ? ? ? ? ? 9. parent()：父標簽
? ? ? ? ? ? 10. prevAll()：前面所有的兄弟標簽
? ? ? ? ? ? 11. nextAll()：后面所有的兄弟標簽
? ? ? ? ? ? 12.siblings()：前后所有的兄弟標簽
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>篩選-過濾</title><script src="../js/jquery-1.10.1.js"></script><script>$(function () {// 綁定文檔加載完成后的回調(diào)函數(shù)/*在 jQuery 對象中的元素對象數(shù)組中過濾出一部分元素來1. first()2. last()3. eq(index|-index)4. filter(selector)5. not(selector)6. has(selector) 篩選有某個標簽7. children()：在子標簽中找8. find()：后代標簽中找9. parent()：父標簽10. prevAll()：前面所有的兄弟標簽11. nextAll()：后面所有的兄弟標簽12.siblings()：前后所有的兄弟標簽*/let liArr = $("ul>li");$.each(liArr, function (index, item) {console.log("index=" + index + ",item=" + item.innerHTML);})// 需求1：獲取 ul 下 li 標簽的第一個$(liArr.first()).css("font-size", "30px");$(liArr[0]).css("color", "red");//需求2：獲取 ul 下 li 標簽的最后一個$(liArr.last()).css("color", "blue");//需求3：獲取 ul 下 li 標簽的第三個$(liArr.eq(2)).css("color", "orange");//需求4：獲取 ul 下 li 標簽 title = games 的元素$(liArr.filter("[title=games]")).css("background", "#999999");//需求5：獲取 ul 下 li 標簽中 title 屬性不是 games 的$(liArr.not("[title=games]")).css("text-decoration", "underline");$(liArr.filter("[title!=games]").filter("[title]")).css("font-family", "楷體");//需求6：獲取 ul 下 li 標簽有 span 子標簽的$(liArr.has("span")).css("background", "green");let $olArr = $("ol");// 需求7：ol 標簽的第2個 span 子標簽$olArr.children("span:eq(1)").css("font-size", "30px");//需求8：ol 標簽的第二個 span 后代標簽$olArr.find("span:eq(1)").css("color", "red");//需求9：ol 標簽的父標簽$olArr.parent().css("font-family", "黑體");//需求10：ol 中 title="beijing" 的前面所有 li 標簽$("[title=beijing]").prevAll("li").css("background", "purple");// 需求11： title="beijing"的li標簽的所有兄弟標簽$("[title=beijing]").siblings("li").css("text-decoration", "underline");})</script>
</head><body><ul><li>我的愛好很多</li><li title="games">我喜歡玩?zhèn)髌?lt;/li><li title="games">我喜歡打王者</li><li title="coking">我喜歡做飯</li><li class="ktv">我喜歡KTV，class=ktv</li><li><span>再小的個體，也有品牌</span></li><li class="chess">我喜歡玩下棋</li></ul><br><li>我爬圍墻出走了</li><br><ol><span>重慶</span><li title="shenzhen" class="city">深圳</li><li title="beijing">北京</li><li class="city"><span>上海</span></li><li class="city">廣州</li><span class="city">武漢</span></ol>
</body></html>效果：
2.4.5 文檔操作
1. 添加/替換元素
? * append(content)：? ? 向當前匹配的所有元素內(nèi)部的最后插入指定內(nèi)容
? * prepend(content)：? ? 向當前匹配的所有元素內(nèi)部的最前面插入指定內(nèi)容
? * before(content)：? ? 將指定內(nèi)容插入到當前所有匹配元素的前面
? * after(content)：? ? 將指定內(nèi)容插入到當前所有匹配元素的后面替換節(jié)點
? * replaceWith(content)：? ? 用指定內(nèi)容替換所有匹配的標簽刪除節(jié)點
2. 刪除元素
? * empty()：? ? 刪除所有匹配元素的子元素，掏空(自己還在)
? * remove()：? ? 刪除所有匹配的元素，將自己及內(nèi)部的孩子都刪除
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文檔操作</title><script src="../js/jquery-1.10.1.js"></script><script>$(function () {// 綁定文檔加載完成后的回調(diào)函數(shù)let $ul = $("ul");// 需求1：在 ul 后面添加一個 span$(`<span>我是添加的span</span>`).appendTo($ul);//需求2：在 ul 前面添加一個 li$(`<li>我是添加的li</li>`).prependTo($ul);//需求3：在 li 下的 title=coking 前面添加一個 li$ul.children("li[title=coking]").before(`<li>你會做飯嗎？</li>`);//需求4：在 li 下的 title=coking 后面添加一個 li$ul.children("li[title=coking]").after(`<li>我還會吃！</li>`);//需求5：把 title=games 全部替換為 p 標簽$("ul>li[title=games]").replaceWith(`<p>replaceWith把我們替換成 p </p>`);//需求6：移除 class = chess 后面的所有 li$(".chess~li").remove();//$(".chess~li").empty();})</script>
</head><body><ul><li>我的愛好很多</li><li title="games">我喜歡玩?zhèn)髌?lt;/li><li title="games">我喜歡打王者</li><li title="coking">我喜歡做飯</li><li class="ktv">我喜歡KTV，class=ktv</li><li><span>再小的個體，也有品牌</span></li><li class="chess">我喜歡玩下棋</li><li id="fight">還會打架</li><li class="gun">還會玩槍</li></ul><br><li>我爬圍墻出走了</li>
</body></html>效果：
2.4.6 事件
2.4.6.1?綁定事件、解綁事件
? ? * eventName(function(){})：綁定對應事件名的監(jiān)聽,?? ?例如：$('#btn').click(function(){});
? ? * on('eventName', function(){})：通用的綁定事件監(jiān)聽, 例如：$('#btn').on('click', function(){})優(yōu)缺點:
? ? eventName: 編碼方便, 但只能加一個監(jiān)聽, 且有的事件監(jiān)聽不支持
? ? on: 編碼不方便, 可以添加多個監(jiān)聽, 且更通用
? ? * 常用: click，mouseenter/mouseleave，mouseover/mouseout，focus/blur，?hover(function(){}, function(){})
解綁事件：
off('eventName')：如果不加 eventName 則是取消綁定所有事件監(jiān)聽
? * 事件坐標
? ? ?* event.offsetX: 原點是當前元素左上角
? ? ?* event.clientX: 原點是窗口左上角
? ? ?* event.pageX: 原點是頁面左上角
? * 事件相關
? ? * 停止事件冒泡: event.stopPropagation()
? ? * 阻止事件的默認行為: event.preventDefault()?
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件綁定與解綁</title><script src="../js/jquery-1.10.1.js"></script><script>$(function () {// 綁定文檔加載完成后的回調(diào)函數(shù)//需求1：給 class=out 綁定監(jiān)聽事件$("#out").click(function () {console.log("id=out 方式1：觸發(fā)了 click 事件");});$("#out").on("click", function () {console.log("id=out 方式2：觸發(fā)了 on click 事件");});//需求2：給 id=content 綁定鼠標移入、移除的事件監(jiān)聽$("#content").mouseenter(function () {console.log("id=content 方式1：鼠標進入事件 mouseenter");});$("#content").mouseleave(function () {console.log("id=content 方式1：鼠標離開事件 mouseleave");});$("#content").on("mouseenter", function () {console.log("id=content 方式2：鼠標進入事件 on=mouseenter");});$("#content").on("mouseleave", function () {console.log("id=content 方式2：鼠標離開事件 on=mouseleave");});$("#content").hover(function () {console.log("id=content 方式3：鼠標進入事件 hover");}, function () {console.log("id=content 方式3：鼠標離開事件");});//需求3：點擊 btn1 解除 id=content 的所有 mouseenter事件監(jiān)聽$("#btn1").click(function () {$("#content").off("mouseenter");console.log("id=content 的 mouseenter 事件監(jiān)聽被解除");})//需求4：點擊 btn2 解除 id=content 的所有事件監(jiān)聽$("#btn2").click(function () {$("#content").off();console.log("id=content 的所有事件監(jiān)聽被解除");})//需求5： 點擊 btn3 得到事件坐標$("#btn3").click(function (event) { // event事件對象console.log("offsetX、offsetY=" + event.offsetX, event.offsetY) // 原點為事件元素的左上角console.log("clientX、clientY=" + event.clientX, event.clientY) // 原點為窗口的左上角console.log("pageX、pageY=" + event.pageX, event.pageY) // 原點為頁面的左上角})// 需求6：點擊 content 區(qū)域，外部點擊監(jiān)聽不響應$(".content").click(function () {console.log("點擊了 content 區(qū)域");//停止事件冒泡event.stopPropagation();})// 需求7：點擊鏈接，如果當前時間是偶數(shù)，則不跳轉(zhuǎn)$("#test4").click(function (event) {let now = Date.now() % 2;console.log("now=" + now);if (now === 0) {event.preventDefault();}})})</script>
</head><body style="height: 1000px;"><div id="out"><div id="content" style="border:1px solid black;width:100px;height:150px;overflow:auto">“輕舟已過萬重山”出自唐代詩人李白的《早發(fā)白帝城》。這句詩描繪了一幅輕舟快速穿越重重山巒的壯麗畫面，寓含了詩人因遇赦而心情愉悅的情境。同時，這句詩也常被用來形容人們在面對困難時，勇往直前、無所畏懼的精神風貌。這句詩不僅具有文學價值，也富含人生哲理。它告訴我們，在人生的旅途中，無論遇到多少艱難險阻，只要我們保持積極的心態(tài)，堅定信念，勇往直前，就一定能夠克服一切困難，到達理想的彼岸。此外，這句詩也體現(xiàn)了李白獨特的詩歌風格，他善于運用生動的形象和富有想象力的語言，將自然景觀與人生哲理相結(jié)合，創(chuàng)作出既具有藝術美感又富含深刻內(nèi)涵的詩歌作品。因此，“輕舟已過萬重山”不僅是一句優(yōu)美的詩句，更是一種積極向上、勇往直前的人生態(tài)度的象征。小時候背這句古詩是如此輕松，步入而立之年才聽懂其中的人生道理。</div></div><br><br><br><button id="btn1">取消綁定 mouseover 事件</button><button id="btn2">取消綁定所有事件</button><button id="btn3">測試事件坐標</button><a href="http://www.baidu.com" id="test4" target="_blank">去百度首頁</a>
</body></body></html>效果：
問：如何 區(qū)別 mouseover?與 mouseenter ？
- mouseover：在移入當前元素和子元素時都會觸發(fā), 對應移出事件是：mouseout
- mouseenter：只在移入當前元素時才觸發(fā), 對應移出事件是：mouseleave
- hover()使用的就是 mouseenter() 和 mouseleave()，也就是移入、移出當前元素才觸發(fā)
2.4.6.3?事件委托
1. 事件委托(委派/代理):
? ? ?* 將多個子元素(li)的事件監(jiān)聽委托給父輩元素(ul)處理
? ? ?* 監(jiān)聽回調(diào)是加在了父輩元素上
? ? ?* 當操作任何一個子元素(li)時, 事件會冒泡到父輩元素(ul)
? ? ?* 父輩元素不會直接處理事件, 而是根據(jù)event.target得到發(fā)生事件的子元素(li), 通過這個子元素調(diào)用事件回調(diào)函數(shù)
2. 事件委托的2方:
? ? ?* 委托方: 業(yè)主 ?li
? ? ?* 被委托方: 中介 ?ol
3. 使用事件委托的好處
? ? ?* 添加新的子元素, 自動有事件響應處理
? ? ?* 減少事件監(jiān)聽的數(shù)量: n==>1
4. jQuery的事件委托API
? ? ?* 設置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
? ? ?* 移除事件委托: $(parentSelector).undelegate(eventName)
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件委托</title><script src="../js/jquery-1.10.1.js"></script><script>$(function () {// 綁定文檔加載完成后的回調(diào)函數(shù)//綁定事件監(jiān)聽的問題: 新加的元素沒有監(jiān)聽//需求1：點擊 li 背景變藍色$("ul>li").click(function () {this.style.background = "pink";});//需求2：點擊按鈕，增加一個新 li$("#btn1").click(function () {$("ul").append(`<li>周星馳</li>`);})/*1. 事件委托(委派/代理):* 將多個子元素(li)的事件監(jiān)聽委托給父輩元素(ol)處理* 監(jiān)聽回調(diào)是加在了父輩元素上* 當操作任何一個子元素(li)時, 事件會冒泡到父輩元素(ol)* 父輩元素不會直接處理事件, 而是根據(jù)event.target得到發(fā)生事件的子元素(li), 通過這個子元素調(diào)用事件回調(diào)函數(shù)2. 事件委托的2方:* 委托方: 業(yè)主 li* 被委托方: 中介 ol3. 使用事件委托的好處* 添加新的子元素, 自動有事件響應處理* 減少事件監(jiān)聽的數(shù)量: n==>14. jQuery的事件委托API* 設置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)* 移除事件委托: $(parentSelector).undelegate(eventName)*///設置事件委托$("ol").delegate("li", "click", function () {console.log("將多個子元素(li)的事件監(jiān)聽委托給父輩元素(ol)處理");this.style.background = "green";});//點擊按鈕2，增加 li$("#btn2").click(function () {$("ol").append(`<li>姚明</li>`);});//點擊按鈕3，移除事件委托$("#btn3").click(function () {$("ol").undelegate("click");});})</script>
</head><body><ul><li>劉德華</li><li>黎明</li><li>張學友</li><li>周潤發(fā)</li></ul><br><button id="btn1">給 ul 添加新的 li 按鈕</button><br><ol><li>喬丹</li><li>梅西</li><li>馬拉多納</li></ol><br><button id="btn2">給 ol 添加新的 li 按鈕</button><button id="btn3">刪除 ol 上的事件</button>
</body></html>效果：沒有設置委托事件時，新增的元素沒有監(jiān)聽事件，比如“周星馳”。添加了委托事件后，新增的元素會有監(jiān)聽事件，比如“姚明”。但是當移除 ol 上的事件后，新增的元素也沒有監(jiān)聽事件了。
2.4.7 動畫效果
概念：動畫效果，指的是在一定的時間內(nèi), 不斷改變元素樣式。
2.4.7.1 淡入淡出
淡入淡出：不斷改變元素的透明度(opacity)來實現(xiàn)的
1. fadeIn()：帶動畫的顯示
2. fadeOut()：帶動畫隱藏
3. fadeToggle()：帶動畫切換顯示/隱藏
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淡入淡出</title><script src="../js/jquery-1.10.1.js"></script><script>$(function () {// 綁定文檔加載完成后的回調(diào)函數(shù)let $div1 = $("#div1");//需求1：點擊btn1, 慢慢淡出，動畫結(jié)束時提示“動畫結(jié)束了”$("#btn1").click(function () {$div1.fadeOut();//無參數(shù)//$div1.fadeOut("slow");//有參數(shù)$div1.fadeOut(1000, function () {alert("動畫結(jié)束了");//1秒后彈框提示})})//需求2：點擊btn2, 慢慢淡入$("#btn2").click(function () {$div1.fadeIn()})//需求3：點擊btn3, 淡出/淡入切換$("#btn3").click(function () {$div1.fadeToggle()})})</script>
</head><body><button id="btn1">慢慢淡出</button><button id="btn2">慢慢淡入</button><button id="btn3">淡出/淡入切換</button><div id="div1"></div><style type="text/css">* {margin: 0px;}#div1 {position: absolute;width: 200px;height: 200px;top: 50px;left: 10px;background: red;}</style>
</body></html>2.4.7.2?滑動
滑動動畫: 不斷改變元素的高度實現(xiàn)
1. slideDown(): 帶動畫的展開
2. slideUp(): 帶動畫的收縮
3. slideToggle(): 帶動畫的切換展開/收縮
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>滑動動畫</title><script src="../js/jquery-1.10.1.js"></script><script>$(function () {// 綁定文檔加載完成后的回調(diào)函數(shù)let $div1 = $("#div1");//需求1：點擊btn1, 向上滑動$("#btn1").click(function () {$div1.slideUp(3000);})//需求2：點擊btn2，向下滑動$("#btn2").click(function () {$div1.slideDown();})//需求3：點擊btn3, 向上/向下切換$("#btn3").click(function () {$div1.slideToggle();})})</script>
</head><body><button id="btn1">向上滑動</button><button id="btn2">向下滑動</button><button id="btn3">上下滑動</button><div id="div1"></div><style type="text/css">* {margin: 0px;}#div1 {position: absolute;width: 200px;height: 200px;top: 50px;left: 10px;background: red;}</style>
</body></html>2.4.7.3 顯示與隱藏
顯示隱藏，默認沒有動畫, 動畫(opacity/height/width)
1. show(): (不)帶動畫的顯示
2. hide(): (不)帶動畫的隱藏
3. toggle(): (不)帶動畫的切換顯示/隱藏
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>顯示與隱藏</title><script src="../js/jquery-1.10.1.js"></script><script>$(function () {// 綁定文檔加載完成后的回調(diào)函數(shù)let $div1 = $("#div1");//需求1：點擊btn1, 立即顯示$("#btn1").click(function () {$div1.show();})//需求2：點擊btn2，慢慢顯示$("#btn2").click(function () {$div1.show(1000);//1秒顯示完成})//需求3：點擊btn3, 慢慢隱藏$("#btn3").click(function () {$div1.hide(1000);//1秒隱藏完畢})//需求4：點擊btn4，切換顯示/隱藏$("#btn4").click(function () {$div1.toggle(1000);})})</script>
</head><body><button id="btn1">瞬間顯示</button><button id="btn2">慢慢顯示</button><button id="btn3">慢慢隱藏</button><button id="btn4">顯示/隱藏切換</button><div id="div1"></div><style type="text/css">* {margin: 0px;}#div1 {position: absolute;width: 200px;height: 200px;top: 50px;left: 10px;background: red;/* 默認不顯示 */display: none;}</style>
</body></html>2.4.7.4?自定義動畫
jQuery動畫本質(zhì) : 在指定時間內(nèi)不斷改變元素樣式值來實現(xiàn)的
1. animate(): 自定義動畫效果的動畫
2. stop(): 停止動畫
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定義動畫</title><script src="../js/jquery-1.10.1.js"></script><script>$(function () {// 綁定文檔加載完成后的回調(diào)函數(shù)let $div1 = $("#div1");//需求1：逐漸擴大，寬/高都擴大為 200px，寬先擴為200px, 高后擴為200px$("#btn1").click(function () {/* 方式1：寬和高一起擴大$div1.animate({width: 200,height: 200}, 1000)*///方式2：先寬、后高擴大$div1.animate({width: 200}, 1000).animate({height: 200}, 1000)})//需求2：按鈕2，移動到指定位置：移動到 (500,100)處$("#btn2").click(function () {$div1.animate({left: 500,top: 100}, 1000)})//需求3：按鈕3，移動指定距離，移動距離為(100, 50)$("#btn3").click(function () {$div1.animate({left: "+=100",top: "+=50"}, 1000)})//需求4：按鈕4，停止動畫$("#btn4").click(function () {$div1.stop();})})</script>
</head><body><button id="btn1">逐漸擴大</button><button id="btn2">移動到指定位置</button><button id="btn3">移動指定距離</button><button id="btn4">停止動畫</button><div id="div1">紙上得來終覺淺，絕知此事要躬行</div><style type="text/css">* {margin: 0px;}#div1 {position: absolute;width: 100px;height: 100px;top: 50px;left: 10px;background: darkgray;}</style>
</body></html>2.4.8 擴展插件
* 插件機制
? * 擴展jQuery函數(shù)對象的方法
? ? $.extend({
? ? ? xxx: fuction () {} // this是$
? ? })
? ? $.xxx()
? * 擴展jQuery對象的方法
? ? $.fn.extend({
? ? ? xxx: function(){} ?// this是jQuery對象
? ? })
? ? $obj.xxx()
?代碼結(jié)構（先在 js 文件目錄創(chuàng)建自定義 js 插件）：my_jQuery-plugin.js
my_jQuery-plugin.js內(nèi)容如下：?
/*需求：1. 給 $ 添加4個工具方法:* min(a, b) : 返回較小的值* max(c, d) : 返回較大的值* leftTrim() : 去掉字符串左邊的空格* rightTrim() : 去掉字符串右邊的空格2. 給jQuery對象 添加3個功能方法:* checkAll() : 全選* unCheckAll() : 全不選* reverseCheck() : 全反選*/
(function () {// 擴展$的方法$.extend({min: function (a, b) {return a < b ? a : b},max: function (a, b) {return a > b ? a : b},leftTrim: function (str) {return str.replace(/^\s+/, '')},rightTrim: function (str) {return str.replace(/\s+$/, '')}})// 擴展jQuery對象的方法$.fn.extend({checkAll: function () {this.prop('checked', true) // this是jQuery對象},unCheckAll: function () {this.prop('checked', false)},reverseCheck: function () {// this是jQuery對象this.each(function () {// this是dom元素this.checked = !this.checked})}})})()案例代碼：?
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>擴展插件</title><script src="../js/jquery-1.10.1.js"></script><!-- 引入自定義插件 --><script type="text/javascript" src="../js/my_jQuery-plugin.js"></script><script>$(function () {// 綁定文檔加載完成后的回調(diào)函數(shù)/*需求：1. 給 $ 添加4個工具方法:* min(a, b) : 返回較小的值* max(c, d) : 返回較大的值* leftTrim() : 去掉字符串左邊的空格* rightTrim() : 去掉字符串右邊的空格2. 給jQuery對象 添加3個功能方法:* checkAll() : 全選* unCheckAll() : 全不選* reverseCheck() : 全反選*/console.log($.min(3, 5), $.max(3, 5));let string = " 讓天下沒有難寫的代碼 ";console.log("-----" + $.leftTrim(string) + "-----");console.log("-----" + $.rightTrim(string) + "-----");let $items = $(":checkbox[name=items]");$("#checkedAllBtn").click(function () {$items.checkAll();})$("#checkedNoBtn").click(function () {$items.unCheckAll();})$("#reverseCheckedBtn").click(function () {$items.reverseCheck();})})</script>
</head><body><input type="checkbox" name="items" value="足球" />足球<input type="checkbox" name="items" value="籃球" />籃球<input type="checkbox" name="items" value="羽毛球" />羽毛球<input type="checkbox" name="items" value="乒乓球" />乒乓球<br /><input type="button" id="checkedAllBtn" value="全 選" /><input type="button" id="checkedNoBtn" value="全不選" /><input type="button" id="reverseCheckedBtn" value="反選" />
</body></html>效果：
2.4.9 多庫共存
問題 : 如果有2個庫都有$, 就存在沖突
解決 : jQuery庫可以釋放$的使用權, 讓另一個庫可以正常使用, 此時jQuery庫只能使用jQuery了
API : jQuery.noConflict()要想使用 jQuery 的功能, 只能使用 jQuery
例如有一個自定義庫：myLib.js，代碼如下：
(function () {window.$ = function () {console.log('my lib $()...')}
})()在實際使用中，需要先釋放 jQuery 的 $ 使用權，如：
// 釋放$的使用權jQuery.noConflict();// 調(diào)用myLib中的$$();// 要想使用jQuery的功能, 只能使用jQueryjQuery(function () {console.log("文檔加載完成")})2.4.10 onload 與 ready
區(qū)別: window.onload與 $(document).ready()
? * window.onload
? ? * 包括頁面的圖片加載完后才會回調(diào)(比較晚加載)
? ? * 只能有一個監(jiān)聽回調(diào)
? * $(document).ready()
? ? * 等同于: $(function(){})
? ? * 頁面加載完就回調(diào)(比較早)
? ? * 可以有多個監(jiān)聽回調(diào)