網(wǎng)頁設(shè)計(jì)與Web前端開發(fā)案例教程第7章jQuery基礎(chǔ)知識(shí)CONTENT目錄jQuery介紹01基本選擇器02高級(jí)選擇器03事件處理04內(nèi)容處理05樣式處理06進(jìn)階應(yīng)用07擴(kuò)展知識(shí)08習(xí)題0901jQuery介紹7.1jQuery介紹jQuery的作用簡(jiǎn)化DOM操作跨瀏覽器兼容安全性特點(diǎn)禁止訪問本地硬盤不允許對(duì)網(wǎng)絡(luò)中的文本修改或刪除jQuery的特性鏈?zhǔn)秸{(diào)用強(qiáng)大選擇器事件處理AJAX下載安裝例7-1一個(gè)最簡(jiǎn)單的jQuery程序$(document).ready()確保DOM加載后執(zhí)行$符號(hào)是jQuery的別名$()是合法的函數(shù)或?qū)ο竺Q，它等價(jià)于jQuery()例7-1執(zhí)行效果02基本選擇器常用選擇器jQuery代碼說明$("#block")選擇id為block的首個(gè)元素$(".block")選擇class為block的所有元素$("div")選擇所有div標(biāo)簽的元素$("span,#block")選擇所有span標(biāo)簽和id為block的元素$("span#block")選擇所有span標(biāo)簽下面id為block的元素標(biāo)簽選擇器舉例標(biāo)簽選擇器$("p").css("color","red");id選擇器??$("#myElement").css("color","red");??類選擇器$(".myClass").css("color","red");03高級(jí)選擇器過濾器選擇器jQuery選擇器說明:first選擇集合中的第一個(gè)元素。:last選擇集合中的最后一個(gè)元素。:eq(index)選擇集合中指定索引的元素。:gt(index)選擇集合中索引大于指定索引的元素。:lt(index)選擇集合中索引小于指定索引的元素。過濾器選擇器jQuery選擇器說明:even選擇集合中索引為偶數(shù)的元素。:odd選擇集合中索引為奇數(shù)的元素。:visible選擇當(dāng)前可見的元素。:hidden選擇當(dāng)前隱藏的元素。:contains(text)選擇包含指定文本的元素。:has(selector)選擇包含子元素的元素。過濾器選擇器jQuery選擇器說明:parent選擇有子元素的元素。:empty選擇沒有子元素的元素。:not(selector)選擇不匹配指定選擇器的元素。屬性選擇器jQuery選擇器說明[attribute]選擇具有指定屬性的元素。[attribute=value]選擇具有指定屬性值等于指定值的元素。[attribute~=value]選擇具有指定屬性值包含指定值的元素。[attribute|=value]選擇具有指定屬性值以指定值開頭的元素。[attribute^=value]選擇具有指定屬性值以指定值開頭的元素。[attribute$=value]選擇具有指定屬性值以指定值結(jié)尾的元素。[attribute*=value]選擇具有指定屬性值包含指定值的元素。偽類選擇器jQuery選擇器說明:focus選擇當(dāng)前獲得焦點(diǎn)的元素。:hover選擇鼠標(biāo)懸停在其上的元素。:active選擇當(dāng)前被激活的元素。:focus選擇當(dāng)前獲得焦點(diǎn)的元素。:focus-within選擇當(dāng)前或其子元素獲得焦點(diǎn)的元素。:target選擇當(dāng)前URL中的目標(biāo)元素。:lang(language)選擇具有指定語言的元素。偽元素選擇器jQuery選擇器說明::before選擇元素的開始偽元素。::after選擇元素的結(jié)束偽元素。::first-letter選擇元素的第一個(gè)字母。::first-line選擇元素的第一行。::selection選擇用戶選中的文本。04事件處理例7-2綁定事件的jQuery程序$符號(hào)是jQuery的別名jQuery常用事件事件名/方法名功能描述click單擊事件：當(dāng)用戶單擊某個(gè)元素時(shí)觸發(fā)。dblclick雙擊事件：當(dāng)用戶雙擊某個(gè)元素時(shí)觸發(fā)。focus獲取焦點(diǎn)事件：當(dāng)元素獲得焦點(diǎn)時(shí)觸發(fā)。keydown鍵盤按下事件：當(dāng)用戶按下鍵盤上的任意鍵時(shí)觸發(fā)。keyup鍵盤抬起事件：當(dāng)用戶釋放鍵盤上的任意鍵時(shí)觸發(fā)。mousedown鼠標(biāo)按下事件：當(dāng)用戶按下鼠標(biāo)按鈕時(shí)觸發(fā)。mouseup鼠標(biāo)抬起事件：當(dāng)用戶釋放鼠標(biāo)按鈕時(shí)觸發(fā)。submit提交事件：當(dāng)表單提交時(shí)觸發(fā)。blur失去焦點(diǎn)事件：當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)。change變化事件：當(dāng)元素的內(nèi)容發(fā)生變化時(shí)觸發(fā)。解綁事件觸發(fā)事件事件委托自定義事件與鏈?zhǔn)秸{(diào)用05內(nèi)容處理一般屬性讀寫class讀寫事件委托內(nèi)容讀寫06樣式處理標(biāo)簽樣式讀寫標(biāo)簽尺寸讀寫事件委托標(biāo)簽位置計(jì)算計(jì)算位置：使用

.offset()

方法獲取元素相對(duì)于文檔的偏移量。07進(jìn)階應(yīng)用批量操作這個(gè)例子中的each內(nèi)部匿名函數(shù)中的$(this)訪問到的是當(dāng)前正在處理的div元素，each會(huì)自動(dòng)的遍歷所有被前面選擇器(div)選中的元素，并依次調(diào)用后面的匿名函數(shù)。表單驗(yàn)證動(dòng)畫處理類似的動(dòng)畫方法還有hide/show、fadeIn/fadeOut、slideDown/slideUp/slideToggle、animate等，具體用法可以查閱7.8.2提到的手冊(cè)和在線教程。視頻控制這個(gè)例子中的get(0)與之前7.1.2一節(jié)中的[0]是等價(jià)的，都可以訪問到原始的DOM元素，然后就可以調(diào)用DOM對(duì)象原有的方法了。標(biāo)簽處理類似的能直接改變DOM結(jié)構(gòu)的方法還有append/prepend、after/before、remove/empty等，適當(dāng)?shù)乩眠@些方法，可以在不使用網(wǎng)絡(luò)流量的情況下對(duì)頁面內(nèi)容進(jìn)行局部或徹底的修改調(diào)整。案例改寫利用本章所學(xué)的jQuery語法，我們可以對(duì)之前6.12.1中的交互案例進(jìn)行改寫，改寫后的案例文件夾為pra07。關(guān)鍵部分代碼及注釋見教材7.7.608擴(kuò)展知識(shí)AJAX動(dòng)態(tài)加載AJAXAJAX即“AsynchronousJavaScriptAndXML”（異步JavaScript和XML）執(zhí)行邏輯??來避免整個(gè)頁面刷新帶來的流量大、速度慢、延時(shí)高等問題??基本原理它通過在瀏覽器端運(yùn)行特殊的Ja