《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH06 jQuery入門；CH07 jQuery選擇器與過濾器；CH08 jQuery事件_第1頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH06 jQuery入門；CH07 jQuery選擇器與過濾器；CH08 jQuery事件_第2頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH06 jQuery入門；CH07 jQuery選擇器與過濾器；CH08 jQuery事件_第3頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH06 jQuery入門；CH07 jQuery選擇器與過濾器；CH08 jQuery事件_第4頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH06 jQuery入門；CH07 jQuery選擇器與過濾器；CH08 jQuery事件_第5頁
已閱讀5頁，還剩265頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

JavaScript與jQuery

網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版學(xué)校名稱：XXXX主講教師：XXXX第6章jQuery入門本章學(xué)習(xí)目標(biāo) 了解jQuery的下載與使用； 掌握jQuery的基礎(chǔ)語法結(jié)構(gòu)； 掌握jQuery文檔就緒函數(shù)的用法； 掌握jQuery名稱沖突的解決方案。目錄6.1jQuery下載和使用6.2jQuery語法6.1jQuery下載和使用6.1.1jQuery的下載6.1.2jQuery的使用6.1.1jQuery的下載jQuery是一種開源函數(shù)庫，讀者可以直接訪問官網(wǎng)頁面（/download/）進(jìn)行下載。目前常用的jQuery分為1.x、2.x和3.x版本，本書將選擇官方推薦的1.12.x系列版本作為示例，因?yàn)樵摪姹镜臑g覽器兼容性相對(duì)較好。6.1.1jQuery的下載圖所示為jQuery的官方下載頁面。6.1.1jQuery的下載以1.12.3版本為例，下載完整版點(diǎn)擊“DownloadtheuncompresseddevelopmentjQuery1.12.3”，下載壓縮版點(diǎn)擊“DownloadthecompressedproductionjQuery1.12.3”。完整版的文件后綴名為.js，常用于開發(fā)和調(diào)試；壓縮版的文件后綴名為.min.js，里面保留了所有的jQuery函數(shù)并提升了產(chǎn)品性能，適用于正式發(fā)布。6.1.1jQuery的下載注：由于官方不定期會(huì)更新可供下載的頁面jQuery版本，可能實(shí)際訪問的時(shí)候已經(jīng)無法在官網(wǎng)的下載頁面下載1.x版的jQuery文件了。官方也另外提供了一個(gè)歷年jQuery版本下載地址/DanielRuf/snyk-js-jquery-565129但是由于服務(wù)器在海外有時(shí)打開非常慢，讀者也可以直接使用本書配套提供的源碼包，從第6章開始后續(xù)每章節(jié)例題源代碼包中的js目錄下均包含了jquery-1.12.3.js（未壓縮包，可查看源代碼，適合開發(fā)學(xué)習(xí)過程）和jquery-1.12.3.min.js（混淆壓縮包，更加精簡加載效率高，適合正式環(huán)境）供讀者使用。6.1.2jQuery的使用和其他JavaScript文件的使用方式一樣，可以通過<script>標(biāo)簽在HTML文檔的首部標(biāo)簽<head>和</head>中添加jQuery的引用聲明。語法如下：<scriptsrc="jQuery文件URL"></script>上述代碼中的jQuery文件URL需要替換為實(shí)際的jQuery文件引用地址。6.1.2jQuery的使用需要注意的是，HTML4.01版<script>元素首標(biāo)簽需要寫成<scripttype="text/javascript"src="jQuery文件URL">；而在HTML5中可以省略其中的type="text/javascript"，直接寫成<scriptsrc="jQuery文件URL">即可。6.1.2jQuery的使用以jquery1.12.3.js為例，將該文件放置在和網(wǎng)頁同一個(gè)文件夾下，則使用聲明寫法如下：上述代碼聲明完成后就可以在頁面上添加jQuery相關(guān)語句了。<scriptsrc="jquery1.12.3.js"></script>注：引用的jQuery文件名是可以下載后由開發(fā)者重新自定義的，例如上述代碼中的文件名如若改成了jquery.js，那么引用時(shí)也需要同步更新為<scriptsrc="jquery.js"></script>即可。6.2jQuery語法jQuery的語法是專門為HTML元素的選取編制的，可以對(duì)元素執(zhí)行操作。6.2jQuery語法6.2.1基礎(chǔ)語法結(jié)構(gòu)6.2.2文檔就緒函數(shù)6.2.3jQuery名稱沖突6.2.1基礎(chǔ)語法結(jié)構(gòu)jQuery的基礎(chǔ)語法結(jié)構(gòu)如下：其中美元符號(hào)$表示jQuery語句，選擇符selector用于查詢HTML元素，action()需要替換為對(duì)元素某種具體操作的方法名。$(selector).action()6.2.1基礎(chǔ)語法結(jié)構(gòu)例如：在HTML中<p>表示段落標(biāo)簽，hide()為jQuery中的新方法用于隱藏元素。因此上述代碼表示隱藏所有段落。$("p").hide();6.2.2文檔就緒函數(shù)為了避免文檔在加載完成前就運(yùn)行了jQuery代碼導(dǎo)致潛在的錯(cuò)誤，所有的jQuery函數(shù)都需要寫在一個(gè)文檔就緒（documentready）函數(shù)中。例如當(dāng)前HTML頁面還沒有加載完，因此某HTML元素標(biāo)簽可能還無法查詢獲取。6.2.2文檔就緒函數(shù)文檔就緒函數(shù)的寫法如下：$(document).ready(function(){jQuery函數(shù)內(nèi)容});6.2.2文檔就緒函數(shù)【例6-1】jQuery文檔就緒函數(shù)的使用6.2.2文檔就緒函數(shù)【例6-1】jQuery文檔就緒函數(shù)的使用<head><metacharset="utf-8"><title>jQuery文檔準(zhǔn)備就緒</title><scriptsrc="js/jquery-1.12.3.min.js"></script></head>6.2.2文檔就緒函數(shù)【例6-1】jQuery文檔就緒函數(shù)的使用<body><h3>jQuery文檔準(zhǔn)備就緒函數(shù)的應(yīng)用</h3><hr><script>$(document).ready(function(){alert("jQuery文檔準(zhǔn)備就緒！");});</script></body>6.2.3jQuery名稱沖突jQuery通常使用美元符號(hào)$作為簡寫方式，但在同時(shí)使用了多個(gè)JavaScript函數(shù)庫的HTML文檔中jQuery就有可能與其他同樣使用$符號(hào)的函數(shù)（例如Prototype）沖突。因此jQuery使用noConflict()方法自定義其他名稱來替換可能產(chǎn)生沖突的$符號(hào)表達(dá)方式。6.2.3jQuery名稱沖突【例6-2】jQuery自定義名稱代替$符號(hào)6.2.3jQuery名稱沖突【例6-2】jQuery自定義名稱代替$符號(hào)<head><metacharset="utf-8"><title>jQuery自定義名稱代替$符號(hào)</title><scriptsrc="js/jquery-1.12.3.min.js"></script></head>6.2.3jQuery名稱沖突【例6-2】jQuery自定義名稱代替$符號(hào)<body><h3>jQuery自定義名稱代替$符號(hào)</h3><hr><button>

測(cè)試jQuery別名</button><script>

var

jq=jQuery.noConflict();

jq(document).ready(function(){

jq("button").click(function(){alert("jQuery的別名生效了！");});});</script></body>本章小結(jié)本章小結(jié)本章主要是jQuery的基礎(chǔ)知識(shí)入門，首先介紹了jQuery文件如何下載和使用，其次介紹了jQuery的常用語法，包括基礎(chǔ)語法結(jié)構(gòu)、文檔就緒函數(shù)以及jQuery別名的使用。Thankyou！JavaScript與jQuery

網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版學(xué)校名稱：XXXX主講教師：XXXX第7章jQuery選擇器與過濾器本章學(xué)習(xí)目標(biāo) 理解jQuery選擇器和過濾器的作用； 掌握jQuery選擇器的常見用法； 掌握jQuery過濾器的常見用法。目錄7.1jQuery選擇器7.2jQuery過濾器7.3階段案例：網(wǎng)頁一鍵換膚7.1jQuery選擇器jQuery選擇器可用于快速選定需要的HTML元素，并為其進(jìn)行后續(xù)處理。jQuery選擇器的部分語法規(guī)則來自于CSS選擇器，加上其他功能模塊形成了jQuery特有的選擇匹配元素工具，簡化了用戶使用JavaScript選擇和操作元素的復(fù)雜度。7.1jQuery選擇器7.1.1基礎(chǔ)選擇器(BasicSelector) 7.1.2屬性選擇器(AttributeSelector) 7.1.3表單選擇器(FormSelector) 7.1.4層次選擇器(HierarchySelector) 7.1.5jQueryCSS選擇器7.1.1基礎(chǔ)選擇器(BasicSelector) jQuery基礎(chǔ)選擇器(BasicSelector)的語法規(guī)則基本和CSS選擇器相同，可以通過指定HTML元素的標(biāo)簽名稱、類名稱或ID名稱對(duì)元素進(jìn)行篩選定位。 7.1.1基礎(chǔ)選擇器(BasicSelector) 7.1.1基礎(chǔ)選擇器(BasicSelector) 1. 全局選擇器全局選擇器用于選擇文檔中所有的元素。其語法結(jié)構(gòu)如下：$("*")全局選擇器會(huì)遍歷文檔中所有的元素標(biāo)簽，甚至包括首部標(biāo)簽<head>及其內(nèi)部的<meta>、<script>等，運(yùn)行速度較慢。7.1.1基礎(chǔ)選擇器(BasicSelector) 1. 全局選擇器【例7-1】jQuery全局選擇器的使用7.1.1基礎(chǔ)選擇器(BasicSelector) 2.元素選擇器元素選擇器用于選擇所有指定標(biāo)簽名稱的元素。其語法結(jié)構(gòu)如下：$("element")這里的element在使用時(shí)需要換成真正的元素標(biāo)簽名稱。例如，$("h1")表示選中所有<h1>標(biāo)題元素。使用元素選擇器時(shí)，jQuery會(huì)調(diào)用JavaScript中的原生方法getElementsByTagName()來獲取指定的元素。該方法化簡了原先JavaScript的代碼量。7.1.1基礎(chǔ)選擇器(BasicSelector) 2.元素選擇器【例7-2】jQuery元素選擇器的使用7.1.1基礎(chǔ)選擇器(BasicSelector) 3. ID選擇器ID選擇器用于選擇指定ID名稱的單個(gè)元素。其語法結(jié)構(gòu)如下：$("#ID")這里的ID在使用時(shí)需要換成元素真正的ID名稱。例如，$("#test")表示選中id="test"的元素。使用ID選擇器時(shí)，jQuery會(huì)調(diào)用JavaScript中的原生方法getElementById()來獲取指定ID名稱的元素。7.1.1基礎(chǔ)選擇器(BasicSelector) 3. ID選擇器ID選擇器也可以和元素選擇器配合使用，例如：$("p#test01")表示選擇id="test01"的段落元素<p>。7.1.1基礎(chǔ)選擇器(BasicSelector) 3. ID選擇器【例7-3】jQueryID選擇器的使用7.1.1基礎(chǔ)選擇器(BasicSelector) 4. 類選擇器類選擇器用于篩選出具有同一個(gè)class屬性值的所有元素。其語法結(jié)構(gòu)如下：$(".class")這里的class在使用時(shí)需要換成真正的類名稱。例如，$(".box")表示選擇所有class="box"的元素。如果一個(gè)元素包含了多個(gè)類，只要其中任意一個(gè)類符合條件即可被選中。使用類選擇器時(shí)，jQuery會(huì)調(diào)用JavaScript中的原生方法getElementsByClassName()來獲取指定的元素。7.1.1基礎(chǔ)選擇器(BasicSelector) 4. 類選擇器類選擇器也可以和元素選擇器配合使用，例如：$("p.style01")表示選擇所有具有class="style01"的段落元素<p>。7.1.1基礎(chǔ)選擇器(BasicSelector) 4. 類選擇器【例7-4】jQuery類選擇器的使用7.1.1基礎(chǔ)選擇器(BasicSelector) 5. 多重選擇器多重選擇器適用于需要批量處理的多種元素，可以將不同的篩選條件用逗號(hào)隔開寫入同一個(gè)選擇器中。其語法結(jié)構(gòu)如下：$("selector1[,selector2]......[,selectorN]")其中selector1-selectorN需要全部換成具體的jQuery選擇器，數(shù)量可自定義。這里的選擇器可以是元素選擇器、ID選擇器或類選擇器的任意一種或組合使用，只要滿足其中任意一個(gè)條件的元素即可被選中。7.1.1基礎(chǔ)選擇器(BasicSelector) 5. 多重選擇器例如：$("p,div.style01,#news")上述代碼表示選中所有的段落元素<p>、class="style01"的<div>元素以及id="news"的元素。7.1.1基礎(chǔ)選擇器(BasicSelector) 5. 多重選擇器【例7-5】jQuery多重選擇器的使用7.1.2屬性選擇器(AttributeSelector)屬性選擇器可以用于選擇具有指定屬性要求的元素。jQuery使用路徑表達(dá)式（XPath）在HTML文檔中進(jìn)行導(dǎo)航，從而選擇指定屬性的元素。7.1.2屬性選擇器(AttributeSelector)jQuery屬性選擇器的常見用法如表所示。7.1.2屬性選擇器(AttributeSelector)屬性選擇器也可以和其他選擇器配合使用，能縮小匹配范圍。例如：$("img[src$='.png']")上述代碼表示找出頁面中所有src屬性值以".png"結(jié)尾的圖像元素<img>。7.1.2屬性選擇器(AttributeSelector)【例7-6】jQuery屬性選擇器的使用7.1.3表單選擇器(FormSelector) jQuery表單選擇器(FormSelector)可用于選擇指定類型或處于指定狀態(tài)的表單元素。7.1.3表單選擇器(FormSelector) 7.1.3表單選擇器(FormSelector) 7.1.3表單選擇器(FormSelector) 【例7-7】jQuery表單選擇器的使用7.1.4層次選擇器(HierarchySelector)1. 子元素選擇器子元素選擇器（ChildSelector）只能選擇指定元素的第一層子元素。其語法結(jié)構(gòu)如下：$("parent>child")其中參數(shù)parent可以是任何一個(gè)有效的jQuery選擇器，參數(shù)child填入的選擇器篩選的必須是parent的第一層子元素。7.1.4層次選擇器(HierarchySelector)1. 子元素選擇器例如：<p>這是一個(gè)<span><strong>測(cè)試</strong>段落</span>，用于測(cè)試子元素的層次。</p>在上述代碼中段落元素<p>的第一層子元素為<span>，而<strong>是<span>的第一層子元素，只能算是<p>元素的后代。因此使用子元素選擇器只能是$("p>span")或者是$("span>strong")的形式，不可以寫成$("p>strong")的形式。7.1.4層次選擇器(HierarchySelector)1. 子元素選擇器【例7-8】jQuery子元素選擇器的使用7.1.4層次選擇器(HierarchySelector)2. 后代選擇器后代選擇器（DescendantSelector）可以用于選擇指定元素內(nèi)包含的所有后代元素。它比子元素選擇器的涵蓋范圍更加廣泛。其語法結(jié)構(gòu)如下：$("ancestordescendant")其中參數(shù)ancestor可以是任何一個(gè)有效的jQuery選擇器，參數(shù)descendant填入的選擇器篩選的必須是parent的后代元素，該后代元素可以是parent元素的第一層子元素，也可以是其中子元素的后代。7.1.4層次選擇器(HierarchySelector)2. 后代選擇器例如：<p>這是一個(gè)<span><strong>測(cè)試</strong>段落</span>，用于測(cè)試子元素的層次。</p>在上述代碼中段落元素<p>的第一層子元素為<span>，而<strong>是<span>的第一層子元素，屬于是<p>元素的后代。因此使用后代選擇器選擇其中的<strong>標(biāo)簽可以是$("pstrong")或者$("spanstrong")的形式均可。7.1.4層次選擇器(HierarchySelector)2. 后代選擇器【例7-9】jQuery后代選擇器的使用7.1.4層次選擇器(HierarchySelector)3.后相鄰選擇器后相鄰選擇器（NextAdjacentSelector）可以用于選擇指定元素相鄰的后一個(gè)元素。其語法結(jié)構(gòu)如下：$("prev+next")其中參數(shù)prev可以是任何一個(gè)有效的jQuery選擇器，參數(shù)next填入的選擇器篩選的必須是與prev相鄰的后一個(gè)元素。7.1.4層次選擇器(HierarchySelector)3.后相鄰選擇器當(dāng)需要選擇的元素沒有id名稱或class屬性值可以進(jìn)行選擇時(shí)，可以考慮使用該方法先獲取其相鄰的前一個(gè)元素，然后再定位到需要的元素。例如：<pclass="test">這是第一個(gè)段落元素。</p><p>這是第二個(gè)段落元素。</p>上述代碼包含了兩個(gè)段落元素<p>，其中第一個(gè)元素可以使用類選擇器$("p.test")獲取，第二個(gè)元素?zé)oid名稱和class屬性值，因此可以考慮使用相鄰選擇器$("p.test+p")獲取。7.1.4層次選擇器(HierarchySelector)3.后相鄰選擇器【例7-10】jQuery后相鄰選擇器的使用7.1.4層次選擇器(HierarchySelector)4.后兄弟選擇器后兄弟選擇器（NextSiblingsSelector）可以用于選擇指定元素后面跟隨的所有符合條件的兄弟元素。其語法結(jié)構(gòu)如下：$("prev~siblings")其中參數(shù)prev可以是任何一個(gè)有效的jQuery選擇器，參數(shù)siblings填入的選擇器篩選的必須是位置在prev元素后面的兄弟元素。7.1.4層次選擇器(HierarchySelector)4.后兄弟選擇器該選擇器與上一小節(jié)介紹的$("prev+next")不同之處在于：$("prev+next")只能篩選緊跟在指定元素后面的下一個(gè)相鄰元素，而$("prev~siblings")可以篩選指定元素后面所有符合條件的兄弟元素，可以是多個(gè)元素。7.1.4層次選擇器(HierarchySelector)4.后兄弟選擇器當(dāng)在同一個(gè)父元素中有多個(gè)元素需要選擇，可以考慮使用該選擇器先找到它們的前一個(gè)兄弟元素，然后在批量選中這些元素。例如：<pclass="test">這是第一個(gè)段落元素。</p><p>這是第二個(gè)段落元素。</p><p>這是第三個(gè)段落元素。</p>上述代碼包含了三個(gè)段落元素<p>，其中第一個(gè)段落元素可以使用類選擇器$("p.test")獲取，后兩個(gè)段落元素?zé)oid名稱和class屬性值，因此可以考慮使用后兄弟選擇器$("p.test~p")獲取。7.1.4層次選擇器(HierarchySelector)4.后兄弟選擇器【例7-11】jQuery后兄弟選擇器的使用7.1.5jQueryCSS選擇器jQueryCSS選擇器用于改變指定HTML元素的CSS屬性。其語法結(jié)構(gòu)如下：$(selector).css(propertyName,value);其中selector參數(shù)位置可以是任意有效的選擇器，propertyName參數(shù)位置為CSS屬性名稱，value參數(shù)位置為需要設(shè)置的CSS屬性值。7.1.5jQueryCSS選擇器例如，將所有h1標(biāo)簽的背景顏色改為灰色，寫法如下：$("h1").css("background-color","gray");7.1.5jQueryCSS選擇器【例7-12】jQueryCSS選擇器的使用7.2jQuery過濾器jQuery過濾器可單獨(dú)使用，也可以與其他選擇器配合使用。根據(jù)篩選條件可歸納為基礎(chǔ)過濾器、子元素過濾器、內(nèi)容過濾器和可見性過濾器。7.2jQuery過濾器 7.2.1基礎(chǔ)過濾器(BasicFilter) 7.2.2子元素過濾器(ChildFilter) 7.2.3內(nèi)容過濾器(ContentFilter) 7.2.4可見性過濾器(VisibilityFilter) 7.2.1基礎(chǔ)過濾器(BasicFilter)1. :first和:last:first過濾器用于篩選第一個(gè)符合條件的元素，其語法結(jié)構(gòu)如下：:first過濾器只能選擇符合條件的第一個(gè)元素。例如：上述代碼表示選擇頁面上的第一個(gè)<div>元素。$(":first")$("div:first")7.2.1基礎(chǔ)過濾器(BasicFilter)1. :first和:last:last過濾器用于篩選最后一個(gè)符合條件的元素，其語法結(jié)構(gòu)如下：:last過濾器可單獨(dú)使用，也可以與其他選擇器配合使用。$(":last")7.2.1基礎(chǔ)過濾器(BasicFilter)1. :first和:last【例7-13】jQuery基礎(chǔ)過濾器:first和:last的使用7.2.1基礎(chǔ)過濾器(BasicFilter)2. :even和:odd:even過濾器用于篩選符合條件的偶數(shù)個(gè)元素，序號(hào)從0開始計(jì)數(shù)。其語法結(jié)構(gòu)如下：例如，篩選表格中的偶數(shù)行寫法如下：由于:even過濾器是基于JavaScript數(shù)組的原理，同樣繼承了從0開始計(jì)數(shù)的規(guī)則，因此上述代碼表示篩選表格的第1、3、5......以及更多行。$(":even")$("tr:even")7.2.1基礎(chǔ)過濾器(BasicFilter)2. :even和:odd:odd過濾器用于篩選符合條件的奇數(shù)個(gè)元素，序號(hào)從0開始計(jì)數(shù)。其語法結(jié)構(gòu)如下：例如，篩選表格中的奇數(shù)行寫法如下：需要注意的是，:odd過濾器同樣繼承了從0開始計(jì)數(shù)的規(guī)則，因此上述代碼表示篩選表格的第2、4、6......以及更多行。$(":odd")$("tr:odd")7.2.1基礎(chǔ)過濾器(BasicFilter)2. :even和:odd【例7-14】jQuery基礎(chǔ)過濾器:even和:odd的使用7.2.1基礎(chǔ)過濾器(BasicFilter)3. :eq()、:gt()和:lt():eq()過濾器用于選擇指定序號(hào)為n的元素，序號(hào)從0開始計(jì)數(shù)。其中eq來源于英文單詞equal（等于）的前兩個(gè)字母縮寫。其語法結(jié)構(gòu)如下：參數(shù)index可替換為指定的序號(hào)。在jQuery1.8版以后，若index填入負(fù)數(shù)，表示倒數(shù)第n個(gè)元素。其中:eq(0)等同于:first過濾器的效果。$(":eq(index)")7.2.1基礎(chǔ)過濾器(BasicFilter)3. :eq()、:gt()和:lt():gt()過濾器用于選擇所有大于序號(hào)為n的元素，序號(hào)從0開始計(jì)數(shù)。其中g(shù)t來源于英文單詞greaterthan（大于）的首字縮寫。其語法結(jié)構(gòu)如下：其中參數(shù)index替換為指定的序號(hào)。在jQuery1.8版以后，若index填入負(fù)數(shù)，表示序號(hào)大于倒數(shù)第n個(gè)元素。$(":gt(index)")7.2.1基礎(chǔ)過濾器(BasicFilter)3. :eq()、:gt()和:lt():lt()過濾器用于選擇所有小于序號(hào)為n的元素，序號(hào)從0開始計(jì)數(shù)。其中l(wèi)t來源于英文單詞lessthan（小于）的首字縮寫。其語法結(jié)構(gòu)如下：參數(shù)index可替換為指定的序號(hào)。在jQuery1.8版以后，若index填入負(fù)數(shù)，表示序號(hào)小于倒數(shù)第n個(gè)元素。其中:lt(1)相當(dāng)于:first過濾器的效果。$(":lt(index)")7.2.1基礎(chǔ)過濾器(BasicFilter)3. :eq()、:gt()和:lt()【例7-15】jQuery基礎(chǔ)過濾器:eq()、:gt()和:lt()的使用7.2.1基礎(chǔ)過濾器(BasicFilter)4. :not():not()過濾器用于篩選所有不符合條件的元素，其語法結(jié)構(gòu)如下：所有的選擇器都可以與:not()配合使用來篩選相反的條件。$(":not(selector)")7.2.1基礎(chǔ)過濾器(BasicFilter)4. :not()【例7-16】jQuery基礎(chǔ)過濾器:not()的使用7.2.1基礎(chǔ)過濾器(BasicFilter)5. :header:header()過濾器用于篩選所有的標(biāo)題元素，從<h1>到<h6>均在此選擇范圍內(nèi)。其語法結(jié)構(gòu)如下：$(":header")7.2.1基礎(chǔ)過濾器(BasicFilter)5. :header【例7-17】jQuery基礎(chǔ)過濾器:header()的使用7.2.2子元素過濾器(ChildFilter)jQuery子元素過濾器(ChildFilter)可篩選指定元素的子元素。常見用法如表所示。7.2.2子元素過濾器(ChildFilter)1. :first-child:first-child過濾器用于篩選頁面上每個(gè)父元素中的第一個(gè)子元素，其語法結(jié)構(gòu)如下：與只能選擇唯一元素的:first過濾器不同，只要是頁面上的父元素都可以同時(shí)使用:first-child過濾器從中選出其第一個(gè)子元素，因此選擇結(jié)果可能不止一個(gè)元素。$(":first-child")7.2.2子元素過濾器(ChildFilter)1. :first-child:first-child過濾器可單獨(dú)使用，也可以與其他選擇器配合使用。例如：上述代碼表示在頁面上所有包含有段落元素<p>的父元素中篩選出每個(gè)父元素內(nèi)部的第一個(gè)段落子元素<p>。$("p:first-child")7.2.2子元素過濾器(ChildFilter)1. :first-child需要注意的是，這里所篩選出來的段落子元素<p>有可能并不是其父元素的第一個(gè)子元素，例如以下這種情況：<div><span>我是第一個(gè)子元素。</span><p>我是第二個(gè)子元素，但是也是第一個(gè)段落元素。我將被$("p:first-child")篩選出來。</p><p>我是第三個(gè)子元素。</p></div>7.2.2子元素過濾器(ChildFilter)1. :first-child【例7-18】jQuery基礎(chǔ)過濾器:first-child()的使用7.2.2子元素過濾器(ChildFilter)2. :last-child:last-child過濾器用于篩選頁面上每個(gè)父元素中的最后一個(gè)子元素，其語法結(jié)構(gòu)如下：與:first-child過濾器類似，選擇結(jié)果可能不止一個(gè)元素。$(":last-child")7.2.2子元素過濾器(ChildFilter)2. :last-child:last-child過濾器可單獨(dú)使用，同樣也可以與其他選擇器配合使用。例如：上述代碼表示在頁面上所有包含有段落元素<p>的父元素中篩選出每個(gè)父元素內(nèi)部的最后一個(gè)段落子元素<p>。$("p:last-child")7.2.2子元素過濾器(ChildFilter)2. :last-child需要注意的是，這里所篩選出來的段落子元素<p>有可能并不是其父元素的最后一個(gè)子元素，例如以下這種情況：<div><p>我是第一個(gè)子元素。</p><p>

我是第二個(gè)子元素，但是也是最后一個(gè)段落元素。

我將被$("p:last-child")篩選出來。</p><span>我是最后一個(gè)子元素。</span></div>7.2.2子元素過濾器(ChildFilter)2. :last-child【例7-19】jQuery基礎(chǔ)過濾器:last-child()的使用7.2.2子元素過濾器(ChildFilter)3. :nth-child:nth-child()過濾器用于篩選頁面上每個(gè)父元素中的第n個(gè)子元素，序號(hào)從1開始計(jì)數(shù)。其語法結(jié)構(gòu)如下：其中index參數(shù)可以填入具體的數(shù)值，例如：上述代碼表示篩選父元素中的第2個(gè)子元素。$(":nth-child(index)")$(":nth-child(2)")7.2.2子元素過濾器(ChildFilter)3. :nth-child也可以在:nth-child()過濾器的index參數(shù)位置填入even或odd字樣，分別表示偶數(shù)個(gè)或奇數(shù)個(gè)元素。例如：上述代碼表示篩選父元素中的第1、3、5、7...個(gè)子元素。$(":nth-child(odd)")7.2.2子元素過濾器(ChildFilter)3. :nth-child還可以在:nth-child()過濾器的index參數(shù)位置填入數(shù)字與字母n的算術(shù)組合，n的取值從0開始，每次自增1直到篩選完全部符合條件的子元素為止。例如：上述代碼表示篩選父元素中的第3n+1個(gè)元素，即第1、4、7、10...個(gè)子元素。$(":nth-child(3n+1)")7.2.2子元素過濾器(ChildFilter)3. :nth-child:nth-child()過濾器可單獨(dú)使用，也可以與其他選擇器配合使用。例如:nth-child(1)表示篩選第一個(gè)子元素，等同于:first-child()。7.2.2子元素過濾器(ChildFilter)3. :nth-child【例7-20】jQuery基礎(chǔ)過濾器:nth-child()的使用7.2.2子元素過濾器(ChildFilter)4. :only-child:only-child過濾器用于篩選所有在父元素中有且僅有一個(gè)的子元素。其語法結(jié)構(gòu)如下：:only-child()過濾器可單獨(dú)使用，也可以與其他選擇器配合使用。例如：上述代碼表示在所有只包含一個(gè)子元素的<div>父元素中，查找<span>類型的子元素。$(":only-child")$("divspan:only-child")7.2.2子元素過濾器(ChildFilter)4. :only-child如果父元素中包含了其他子元素則不匹配，例如以下這種情況：上述代碼如果使用$("divspan:only-child")進(jìn)行篩選則匹配失敗，因?yàn)楦冈?lt;div>中還包含了其他子元素<button>。<div> <span>這是span元素</span> <button>這是button元素</button></div>7.2.2子元素過濾器(ChildFilter)4. :only-child需要注意的是，即使其他子元素是<br>或<hr>等內(nèi)容也會(huì)匹配失敗。例如：上述代碼如果使用$("divspan:only-child")進(jìn)行篩選也會(huì)匹配失敗，因?yàn)?lt;hr>也會(huì)被認(rèn)為是父元素<div>的第二個(gè)子元素。<div> <span>這是span元素</span> <hr></div>7.2.2子元素過濾器(ChildFilter)4. :only-child如果父元素中只包含其他文本內(nèi)容不影響:only-child過濾器的判斷。例如：上述代碼如果使用$("divspan:only-child")進(jìn)行篩選會(huì)匹配成功。<div> <span>這是span元素</span>

這段文字不會(huì)影響span作為div的唯一子元素。</div>7.2.2子元素過濾器(ChildFilter)4. :only-child如果子元素內(nèi)部還包含自身的子元素也不會(huì)影響匹配。例如:上述代碼如果使用$("divspan:only-child")進(jìn)行篩選也會(huì)匹配成功。<div> <span>

這是span元素<br>

這里的br元素是span的子元素<br>

不影響span作為div的唯一子元素。 </span></div>7.2.2子元素過濾器(ChildFilter)4. :only-child【例7-21】jQuery基礎(chǔ)過濾器:only-child()的使用7.2.3內(nèi)容過濾器(ContentFilter)jQuery內(nèi)容過濾器(ContentFilter)可以根據(jù)元素所包含的子元素或文本內(nèi)容進(jìn)行過濾篩選。常見用法如表所示。7.2.3內(nèi)容過濾器(ContentFilter)1. :contains():contains()過濾器用于篩選出所有包含指定文本內(nèi)容的元素，其語法結(jié)構(gòu)如下：其中text替換成指定的字符串文本，由于過濾器外面已經(jīng)存在一對(duì)雙引號(hào)，因此該文本可以用單引號(hào)括住具體文字內(nèi)容。例如：上述代碼表示選擇所有文本內(nèi)容包含"hi"字樣的段落元素<p>。$(":contains(text)")$("p:contains('hi')")7.2.3內(nèi)容過濾器(ContentFilter)1. :contains():contains()過濾器的篩選文本是大小寫敏感型，例如：上述兩個(gè)選擇器的表示完全不同的篩選結(jié)果。$("p:contains('hello')")$("p:contains('HELLO')")7.2.3內(nèi)容過濾器(ContentFilter)1. :contains()【例7-22】jQuery內(nèi)容過濾器:contains()的使用7.2.3內(nèi)容過濾器(ContentFilter)2. :empty:empty過濾器用于選擇未包含子節(jié)點(diǎn)（子元素和文本）的元素，其語法結(jié)構(gòu)如下：:empty過濾器可以和其他有效選擇器配合使用，例如：上述代碼表示選擇所有無內(nèi)容的表格單元格元素<td>。部分元素標(biāo)簽直接默認(rèn)為不包含任何子節(jié)點(diǎn)，例如水平線標(biāo)簽<hr>、換行標(biāo)簽<br>、圖像標(biāo)簽<img>、表單標(biāo)簽<input>等。$(":empty")$("td:empty")7.2.3內(nèi)容過濾器(ContentFilter)2. :empty【例7-23】jQuery內(nèi)容過濾器:empty()的使用7.2.3內(nèi)容過濾器(ContentFilter)3. :parent:parent過濾器用于選擇包含了子節(jié)點(diǎn)（子元素和文本）的元素，其語法結(jié)構(gòu)如下：

:parent過濾器可以和其他有效選擇器配合使用，例如：上述代碼表示選擇所有包含內(nèi)容的表格單元格元素<td>。需要注意的是，W3C規(guī)定了段落元素<p>起碼包含一個(gè)子節(jié)點(diǎn)，即使該元素中沒有任何文本內(nèi)容。$(":parent")$("td:parent")7.2.3內(nèi)容過濾器(ContentFilter)3. :parent【例7-24】jQuery內(nèi)容過濾器:parent()的使用

7.2.3內(nèi)容過濾器(ContentFilter)4. :has:has()過濾器用于選擇包含指定選擇器的元素，其語法結(jié)構(gòu)如下：所有的選擇器都可以與:has()配合使用作為包含的條件。例如：上述代碼表示選擇所有包含表格的塊元素<div>。$(":has(selector)")$("div:has(table)")7.2.3內(nèi)容過濾器(ContentFilter)4. :has【例7-25】jQuery內(nèi)容過濾器:has()的使用7.2.4可見性過濾器(VisibilityFilter)jQuery可見性過濾器(VisibilityFilter)根據(jù)元素當(dāng)前狀態(tài)是否可見進(jìn)行過濾篩選。常見用法如表所示。7.2.4可見性過濾器(VisibilityFilter)1. :hidden:hidden過濾器用于篩選出所有處于隱藏狀態(tài)的元素，其語法結(jié)構(gòu)如下：:hidden過濾器可單獨(dú)使用，也可以與其他選擇器配合使用對(duì)元素進(jìn)一步過濾篩選。例如：上述代碼表示查找所有隱藏的段落元素<p>。$(":hidden")$("p:hidden")7.2.4可見性過濾器(VisibilityFilter)1. :hidden元素在網(wǎng)頁中不占用任何位置空間就被認(rèn)為是隱藏的，具體有以下幾種情況：元素的寬度和高度明確設(shè)置為0；元素的CSS屬性中display的值為none；表單元素的type屬性設(shè)置為hidden；元素的父元素處于隱藏狀態(tài)，因此元素也一并無法顯示出來；下拉列表中的所有選項(xiàng)<option>元素也被認(rèn)為是隱藏的，無論其是否為selected狀態(tài)；7.2.4可見性過濾器(VisibilityFilter)1. :hidden【例7-26】jQuery可見性過濾器:hidden()的使用7.2.4可見性過濾器(VisibilityFilter)2. :visible:visible過濾器用于篩選出所有處于可見狀態(tài)的元素，其語法結(jié)構(gòu)如下：:visible過濾器可單獨(dú)使用，也可以與其他選擇器配合使用對(duì)元素進(jìn)一步過濾篩選。:visible過濾器與:hidden過濾器的篩選條件完全相反，因此無法同時(shí)使用。$(":visible")7.2.4可見性過濾器(VisibilityFilter)2. :visible需要注意的是，元素處于以下幾種特殊情況中也被認(rèn)為是可見狀態(tài):元素的透明度屬性opacity為0，此時(shí)元素仍然占據(jù)原來的位置；元素的可見屬性visibility值為hidden，此時(shí)元素仍然占據(jù)原來的位置；當(dāng)元素處于逐漸被隱藏的動(dòng)畫效果中，到動(dòng)畫結(jié)束之前都被認(rèn)為仍然是可見的；當(dāng)元素處于逐漸被顯現(xiàn)的動(dòng)畫效果中，從動(dòng)畫一開始啟動(dòng)就被認(rèn)為是可見的。7.2.4可見性過濾器(VisibilityFilter)2. :visible【例7-27】jQuery可見性過濾器:visible()的使用7.3階段案例：網(wǎng)頁一鍵換膚7.3.1案例需求 7.3.2案例分析 7.3.3案例制作 7.3.4案例思考 7.3.1案例需求制作一款可以給網(wǎng)頁主題顏色一鍵切換的應(yīng)用，點(diǎn)擊工具箱中的按鈕即可實(shí)現(xiàn)一鍵換膚功能。7.3.2案例分析網(wǎng)頁的主題顏色主要是靠css樣式代碼實(shí)現(xiàn)的，如果事先制作好多個(gè)主題顏色的CSS樣式文件，那么HTML頁面引用了其中哪個(gè)主題顏色樣式文件，就會(huì)顯示對(duì)應(yīng)的皮膚效果了?？梢钥紤]給HTML頁面<head>中關(guān)于外部樣式表引用的<link>標(biāo)簽加上id屬性，這樣就方便被jQuery選擇器準(zhǔn)確定位和修改引用的文件地址了。7.3.2案例分析例如，在HTML文件中有：上述代碼就表示原先引用的外部樣式文件是a.css，然后被jQuery使用ID選擇器找到了id="skinCSS"的<link>標(biāo)簽，并且把引用的href地址變更成了b.css。<linkid="skinCSS"rel="stylesheet"href="css/theme/a.css"><script>//更新對(duì)應(yīng)的CSS樣式文件$("#skinCSS").attr("href","css/theme/b.css")</script>7.3.3案例制作創(chuàng)建一個(gè)HTML文件，文件名可自定義，例如ThemeSwitch.html。1. <!doctypehtml>2. <html>3. <head>4. <metacharset="utf-8">5. <title>網(wǎng)頁一鍵換膚</title>6. <linkrel="stylesheet"href="css/common.css">7. <linkid="skinCSS"rel="stylesheet"href="css/theme/skin_blue.css">8. <scriptsrc="js/jquery-1.12.3.min.js"></script>9. </head>10. 11. <body>12. <!--一、頁眉-->13. <header>14. <h1>網(wǎng)頁一鍵換膚</h1>15. </header>16. <!--二、主體部分-->17. <divid="container">18. <!--工具箱整體區(qū)域-->19. <divid="toolbox">7.3.3案例制作20.<!--（1）工具箱區(qū)域頁眉-->21. <header>22. <h2>主題切換工具箱</h2>23. </header>24. <!--（2）按鈕區(qū)域-->25. <divid="btnBox">26. <button>藍(lán)色主題</button>27. <button>紅色主題</button>28. <button>紫色主題</button>29. </div>30. <!--（3）工具箱區(qū)域頁腳-->31. <footer></footer>32. </div>33. </div>34. <!--三、頁腳-->35. <footer>36. Copyright©ZWJ2023-2033AllRightsReserved.37. </footer>38. 7.3.3案例制作39. <script>40. //記錄主題皮膚CSS文件名稱的數(shù)組41. varskinArr=["skin_blue","skin_red","skin_purple"];42. 43. //監(jiān)聽按鈕點(diǎn)擊事件44. $("#btnBoxbutton").click(function(){45. //獲取當(dāng)前鼠標(biāo)點(diǎn)擊的按鈕索引值（從0開始計(jì)數(shù)）46. vari=$("#btnBoxbutton").index(this);47. //更新對(duì)應(yīng)的CSS樣式文件48. $("#skinCSS").attr("href","css/theme/"+skinArr[i]+".css")49. });50. </script>51. </body>52. </html>7.3.3案例制作1. /*公共樣式*/2. body{3. text-align:center;/*文本居中*/4. background-color:#ccc;/*網(wǎng)頁背景顏色灰色*/5. }6. *{7. margin:0;/*清除外邊距*/8. padding:0;/*清除內(nèi)邊距*/9. box-sizing:border-box;/*頁眉頁腳*/10. }11. /*頁眉頁腳*/12. header,footer{13. color:#FFFFFF;/*文字顏色為白色*/14. padding:20px;/*內(nèi)邊距20px*/15. }16. /*主體部分*/17. #container{18. min-height:620px;/*最小高度*/19. padding:30px;/*內(nèi)邊距30px*/20. }21. /*顏色切換工具箱*/22. #toolbox{23. width:600px;/*寬度600px*/24. height:auto;/*高度隨著內(nèi)容填充自動(dòng)變化*/25. padding:15px;/*內(nèi)邊距15px*/26. margin:0auto;/*外邊距上下0左右自動(dòng)居中*/27. background-color:white;/*背景顏色白色*/28. }29. /*按鈕區(qū)域*/30. #btnBox{31. width:100%;/*寬度100%適應(yīng)父容器*/32. height:300px;/*高度300px*/33. }34. /*按鈕*/35. button{36. outline:none;/*清除輪廓*/37. width:100px;/*寬度100px*/38. height:100px;/*高度600px*/39. font-size:16px;/*字體大小16px*/margin:50px10px;/*外邊距上下50px左右10px*/ }其中公共樣式代碼存放于外部樣式表common.css中。7.3.3案例制作1. /*紅色主題皮膚*/2. header,footer{3. background-color:#870002;/*設(shè)置背景為紅色*/4. }5. #container{background-color:#FFC8C8;/*設(shè)置背景為淺紅色*/}1. /*藍(lán)色主題皮膚*/2. header,footer{3. background-color:#1b478e;/*設(shè)置背景為藍(lán)色*/4. }5.#container{background-color:#cae6ff;/*設(shè)置背景為淺藍(lán)色*/}用于切換變色的樣式文件做了三款分別是skin_red.css、skin_blue.css和skin_purple.css。skin_red.cssskin_blue.css1. /*紫色主題皮膚*/2. header,footer{3. background-color:#4B0C77;/*設(shè)置背景為紫色*/4. }5. #container{background-color:#B0A4E1;/*設(shè)置背景為淺紫色*/7. }skin_purple.css7.3.4案例思考【拓展練習(xí)】是否追加更多的顏色主題進(jìn)行一鍵換膚？【進(jìn)階改造】當(dāng)前主要是純色彩的變化，后續(xù)還可以為不同的主題加上圖片裝飾，這樣換膚效果就更加美觀。本章小結(jié)本章小結(jié)本章主要介紹了jQuery選擇器和過濾器的相關(guān)知識(shí)。jQuery選擇器可用于快速選定需要的HTML元素，并為其進(jìn)行后續(xù)處理；jQuery過濾器可單獨(dú)使用過濾篩選條件，也可以與其他選擇器配合使用。jQuery選擇器主要包括基礎(chǔ)選擇器、屬性選擇器、表單選擇器、層次選擇器以及CSS選擇器。其中基礎(chǔ)選擇器主要包括全局選擇器、元素選擇器、ID選擇器、類選擇器和多重選擇器；層次選擇器主要包括子元素選擇器、后代選擇器、后相鄰選擇器、后兄弟選擇器。本章小結(jié)jQuery過濾器主要包括基礎(chǔ)過濾器、子元素過濾器、內(nèi)容過濾器和可見性過濾器。本章階段案例介紹了網(wǎng)頁一鍵換膚工具箱，通過點(diǎn)擊按鈕讓jQuery選擇器找到<link>標(biāo)簽，并更新網(wǎng)頁引用的主題顏色樣式文件，從而做到整體換膚。Thankyou！JavaScript與jQuery

網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版學(xué)校名稱：XXXX主講教師：XXXX第8章jQuery事件 本章學(xué)習(xí)目標(biāo) 了解jQuery事件的基礎(chǔ)語法格式； 掌握常見jQuery文檔/窗口事件的用法； 掌握常見jQuery鍵盤事件的用法； 掌握常見jQuery鼠標(biāo)事件的用法； 掌握常見jQuery表單事件的用法； 掌握jQuery事件綁定與解除的用法； 掌握jQuery臨時(shí)事件的用法。目錄8.1jQuery事件概述 8.2常用jQuery事件 8.3jQuery事件綁定與解除8.4階段案例：鼠標(biāo)懸停切換圖片 8.1jQuery事件概述8.1.1事件的含義 8.1.2jQuery事件語法格式 8.1.1事件的含義事件指的是HTML頁面對(duì)不同用戶操作動(dòng)作的響應(yīng)。當(dāng)用戶做某個(gè)特定操作時(shí)將觸發(fā)頁面對(duì)應(yīng)的事件，例如點(diǎn)擊按鈕、移動(dòng)鼠標(biāo)、提交表單等?？梢允孪葹橹付ǖ氖录远x需要運(yùn)行的腳本程序，事件被觸發(fā)時(shí)將自動(dòng)執(zhí)行這段代碼。8.1.2jQuery事件語法格式在jQuery中，事件的語法格式如下：其中$(selector)可以是事件允許的jQuery選擇器，action需要替換為被監(jiān)聽的事件名稱。$(selector).action(function(){//事件觸發(fā)后需要執(zhí)行的自定義腳本代碼});8.1.2jQuery事件語法格式例如，為段落元素<p>添加鼠標(biāo)點(diǎn)擊事件click，其jQuery代碼如下:上述代碼中的關(guān)鍵詞click表示鼠標(biāo)左鍵單擊事件，當(dāng)用戶使用鼠標(biāo)點(diǎn)擊了段落元素時(shí)將執(zhí)行其中的alert()語句。$("p").click(function(){alert("段落元素被鼠標(biāo)點(diǎn)擊了！");});8.2常用jQuery事件常用jQuery事件根據(jù)其性質(zhì)可以歸納為以下四類：文檔/窗口事件：頁面文檔或?yàn)g覽器窗口發(fā)生變化時(shí)所觸發(fā)的事件；鍵盤事件：用戶操作鍵盤所觸發(fā)的事件； 鼠標(biāo)事件：用戶操作鼠標(biāo)所觸發(fā)的事件； 表單事件：用戶操作表單所觸發(fā)的事件。8.2常用jQuery事件8.2.1文檔/窗口事件 8.2.2鍵盤事件 8.2.3鼠標(biāo)事件 8.2.4表單事件 8.2.1文檔/窗口事件jQuery常見文檔/窗口事件如表所示。8.2.1文檔/窗口事件1. ready()事件ready()事件又稱為準(zhǔn)備就緒事件，該事件只在文檔準(zhǔn)備就緒時(shí)觸發(fā)，因此其選擇器只能是$(document)。一般來說，為了避免文檔在準(zhǔn)備就緒前就執(zhí)行了其他jQuery代碼而導(dǎo)致錯(cuò)誤，所有的jQuery函數(shù)都需要寫在文檔準(zhǔn)備就緒（documentready）函數(shù)中。8.2.1文檔/窗口事件1. ready()事件其語法格式如下：其中function為必填參數(shù)，表示文檔加載完畢后需要運(yùn)行的函數(shù)。$(document).ready(function)8.2.1文檔/窗口事件1. ready()事件例如：上述代碼表示在頁面加載完畢時(shí)執(zhí)行alert()語句跳出提示框。$(document).ready(function(){alert("頁面已經(jīng)準(zhǔn)備就緒！");});8.2.1文檔/窗口事件1. ready()事件在實(shí)際使用時(shí)，文檔準(zhǔn)備就緒函數(shù)function的內(nèi)部代碼可以更為豐富，例如可以是多個(gè)獨(dú)立的jQuery語句或者jQuery函數(shù)的調(diào)用組合而成。瀏覽器會(huì)按照先后順序執(zhí)行其內(nèi)部的全部代碼。8.2.1文檔/窗口事件1. ready()事件由于ready()事件只用于當(dāng)前文檔，因此也可以省略選擇器將其精簡為以下兩種格式：需要注意是，ready()事件不要與<body>元素的onload屬性一起使用，以免產(chǎn)生沖突。$().ready(function)或者$(function)8.2.1文檔/窗口事件1. ready()事件【例8-1】jQueryready()事件的簡單應(yīng)用8.2.1文檔/窗口事件2. load()事件當(dāng)頁面中指定的元素被加載完畢時(shí)會(huì)觸發(fā)load()事件。該事件通常用于監(jiān)聽具有可加載內(nèi)容的元素，例如圖像元素<img>、內(nèi)聯(lián)框架<iframe>等。其語法格式如下：其中參數(shù)function為必填內(nèi)容，表示元素加載完畢時(shí)需要執(zhí)行的函數(shù)。$(selector).load(function)8.2.1文檔/窗口事件2. load()事件例如：上述代碼表示當(dāng)圖像元素<img>中的圖片資源加載完畢時(shí)彈出提示框。$("img").load(function(){alert("圖像已經(jīng)加載完畢！");});8.2.1文檔/窗口事件2. load()事件【例8-2】jQueryload()事件的簡單應(yīng)用8.2.1文檔/窗口事件3. unload()事件當(dāng)用戶離開當(dāng)前頁面時(shí)會(huì)觸發(fā)unload()事件，該事件只適用于window對(duì)象?？赡軐?dǎo)致觸發(fā)unload()事件的行為如下： 關(guān)閉整個(gè)瀏覽器或當(dāng)前頁面； 在當(dāng)前頁面的瀏覽器地址欄中輸入新的URL地址并進(jìn)行訪問； 使用瀏覽器上的前進(jìn)或后退按鈕；點(diǎn)擊瀏覽器上的刷新按鈕或當(dāng)前瀏覽器支持快捷方式刷新頁面； 點(diǎn)擊當(dāng)前頁面中的某個(gè)超鏈接導(dǎo)致跳轉(zhuǎn)新頁面。8.2.1文檔/窗口事件3. unload()事件其語法格式如下：其中參數(shù)function為必填內(nèi)容，表示離開頁面時(shí)需要執(zhí)行的函數(shù)。$(window).unload(function)8.2.1文檔/窗口事件3. unload()事件例如：$(window).unload(function(){

alert("您已經(jīng)離開當(dāng)前頁面，再見！");});8.2.1文檔/窗口事件3. unload()事件需要注意是，在實(shí)踐中發(fā)現(xiàn)在不同瀏覽器中unload()事件的兼容情況不是很理想，例如在IE9+或Chrome瀏覽器中僅有刷新會(huì)觸發(fā)該事件，關(guān)閉瀏覽器時(shí)無任何響應(yīng)。與此同時(shí)，jQuery官方也宣布在jQuery3.0之后的版本將徹底取消對(duì)unload()事件的支持，因此不建議將該事件運(yùn)用于未來的實(shí)踐開發(fā)中。8.2.1文檔/窗口事件3. unload()事件【例8-3】jQueryunload()事件的簡單應(yīng)用8.2.2鍵盤事件鍵盤按鍵的敲擊可以分解為兩個(gè)過程：1.按鍵被按下去；2.按鍵被松開。這兩個(gè)動(dòng)作分別觸發(fā)或組合的jQuery鍵盤事件如表所示。8.2.2鍵盤事件以上三種鍵盤事件的選擇器均可以是$(document)或者文檔中的HTML元素。如果直接在文檔上設(shè)置，則無論元素是否獲取了焦點(diǎn)都會(huì)觸發(fā)該事件；如果是指定了選擇器，則必須在該選擇器指定的元素獲得焦點(diǎn)的狀態(tài)下才會(huì)觸發(fā)該事件。8.2.2鍵盤事件1. keydown()事件當(dāng)鍵盤上的按鍵處于按下狀態(tài)時(shí)將觸發(fā)keydown()事件，其語法格式如下：$(selector).keydown(function)8.2.2鍵盤事件1. keydown()事件例如：上述代碼表示當(dāng)用戶在表單的文本框<input>元素中輸入內(nèi)容時(shí)觸發(fā)keydown()事件。$("input:text").keydown(function(){alert("按鍵被按下！");});8.2.2鍵盤事件2.keyup()事件當(dāng)鍵盤上已經(jīng)被按下去的按鍵處于被釋放的狀態(tài)將觸發(fā)keyup()事件，其語法格式如下：$(selector).keyup(function)8.2.2鍵盤事件2.keyup()事件例如：上述代碼表示當(dāng)用戶在表單的文本框<input>元素中輸入內(nèi)容并在松開按鍵時(shí)觸發(fā)keyup()事件。$("input:text").keyup(function(){alert("按鍵被釋放！");});8.2.2鍵盤事件3.keypress()事件當(dāng)鍵盤上的按鍵處于按下并快速釋放時(shí)將觸發(fā)keypress()事件，其語法格式如下：簡而言之，keypress()事件可以看作是快速實(shí)現(xiàn)keydown()和keyup()事件的一個(gè)組合，表示鍵盤被敲擊。$(selector).keypress(function)8.2.2鍵盤事件3.keypress()事件例如：上述代碼表示當(dāng)用戶在表單的文本框<input>元素中輸入內(nèi)容時(shí)觸發(fā)keypress()事件。$("input:text").keypress(function){alert("按鍵被敲擊！");}8.2.2鍵盤事件【例8-4】jQuery鍵盤事件的簡單應(yīng)用8.2.3鼠標(biāo)事件jQuery常見鼠標(biāo)事件如表所示。注：鼠標(biāo)事件的選擇器可以是文檔中的任意HTML元素。8.2.3鼠標(biāo)事件1. click()事件當(dāng)用戶使用鼠標(biāo)左鍵點(diǎn)擊（單擊）網(wǎng)頁文檔中的任意HTML元素時(shí)均可以觸發(fā)click()事件，其語法格式如下：$(selector).click(function)8.2.3鼠標(biāo)事件1. click()事件以按鈕<button>元素為例，被鼠標(biāo)左鍵點(diǎn)擊后彈出警告框的代碼如下：當(dāng)click()事件被觸發(fā)時(shí)，會(huì)執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。$("button").click(function(){alert("click事件被觸發(fā)！");});8.2.3鼠標(biāo)事件2. dblclick()事件當(dāng)用戶使用鼠標(biāo)左鍵雙擊網(wǎng)頁文檔中的任意HTML元素時(shí)均可以觸發(fā)dblclick()事件，其語法格式如下：$(selector).dblclick(function)8.2.3鼠標(biāo)事件2. dblclick()事件以按鈕<button>元素為例，被鼠標(biāo)左鍵雙擊后彈出警告框的代碼如下：當(dāng)dblclick()事件被觸發(fā)時(shí)，會(huì)執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。$("button").dblclick(function(){alert("dblclick事件被觸發(fā)！");});8.2.3鼠標(biāo)事件3. hover()事件當(dāng)用戶將鼠標(biāo)懸停在網(wǎng)頁文檔中的任意HTML元素上時(shí)將會(huì)觸發(fā)hover()事件，其語法格式如下：$(selector).hover(function)8.2.3鼠標(biāo)事件3. hover()事件以段落元素<p>為例，鼠標(biāo)懸停在該元素上時(shí)彈出警告框的代碼如下：當(dāng)hover()事件被觸發(fā)時(shí)，會(huì)執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。$("p").hover(function(){alert("hover事件被觸發(fā)！");});8.2.3鼠標(biāo)事件【例8-5】jQuery鼠標(biāo)事件click()、dbclick()與hover()的簡單應(yīng)用8.2.3鼠標(biāo)事件4. mousexxx()系列事件以關(guān)鍵詞mouse開頭的一系列鼠標(biāo)事件是根據(jù)鼠標(biāo)移動(dòng)方向或效果來區(qū)分的，其語法格式如下：$(selector).mousexxx(function)8.2.3鼠標(biāo)事件4. mousexxx()系列事件其中xxx替換成具體的動(dòng)作效果，可替換的關(guān)鍵詞如下：down：鼠標(biāo)按鍵被按下；up：鼠標(biāo)按鍵被釋放，與down相反；move：鼠標(biāo)處于移動(dòng)狀態(tài)；enter：鼠標(biāo)進(jìn)入指定元素；leave：鼠標(biāo)離開指定元素，與enter相反；out：鼠標(biāo)離開指定元素或其子元素；over：鼠標(biāo)穿過指定元素或其子元素，與out相反。8.2.3鼠標(biāo)事件4. mousexxx()系列事件【例8-6】jQuery鍵盤事件mouse系列的簡單應(yīng)用18.2.3鼠標(biāo)事件4. mousexxx()系列事件【例8-7】jQuery鍵盤事件mouse系列的簡單應(yīng)用28.2.3鼠標(biāo)事件4. mousexxx()系列事件【例8-8】jQuery鍵盤事件mouse系列的簡單應(yīng)用38.2.3鼠標(biāo)事件4. mousexxx()系列事件【例8-9】jQuery鍵盤

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論