JavaScript與jQuery案例教程課件第7章

1、 第 7 章 jQuery基礎(chǔ)前端開發(fā)課程組JavaScript與jQuery案例教程 第 7 章 jQuery基礎(chǔ)目標TARGET知識目標了解 jQuery 庫的特點和優(yōu)勢。理解 jQuery 工廠函數(shù)。掌握常用 jQuery 選擇器。了解 jQuery 事件對象的屬性和方法。掌握 jQuery 綁定事件、解除綁定和事件處理。目標TARGET知識目標了解 jQuery 庫的特點和優(yōu)勢。目標TARGET技能目標能搭建 jQuery 開發(fā)環(huán)境。能實現(xiàn) jQuery 對象與 DOM 對象的轉(zhuǎn)換。能使用常用選擇器實現(xiàn) jQuery 的應(yīng)用。能熟練使用 jQuery 的鏈式操作能使用 jQuery 控

2、制頁面元素，實現(xiàn) DOM 元素的查找、過濾和屬性操作。能實現(xiàn)節(jié)點的添加、刪除、復(fù)制和替換。能實現(xiàn) jQuery 事件綁定、解除綁定、事件處理。能實現(xiàn) jQuery 復(fù)合事件的應(yīng)用。目標TARGET技能目標 1 任務(wù)描述 2 jQuery 簡介 3 jQuery 常用選擇器的應(yīng)用 5 jQuery 事件 4 jQuery 控制頁面 6 任務(wù)實施 1 任務(wù)描述 2 jQuery 簡介 3 jQuer1任務(wù)描述Part實現(xiàn)文字和圖片提示效果1任務(wù)描述Part實現(xiàn)文字和圖片提示效果 本任務(wù)是當鼠標移動到小圖時，顯示該圖的大圖片及圖片的標題，如圖所示，當鼠標在小圖范圍內(nèi)移動時，提示圖片跟隨鼠標移動；當鼠

3、標移出小圖片時，提示的大圖片不顯示。任務(wù)描述：實現(xiàn)文字和圖片提示效果 本任務(wù)是當鼠標移動到小圖時，顯示該圖的大圖片及2 jQuery 簡介Part jQuery 環(huán)境配置 jQuery 應(yīng)用的創(chuàng)建 jQuery 對象與 DOM 對象的轉(zhuǎn)換 2 jQuery 簡介Part jQuery 環(huán)境配置 1 jQuery 環(huán)境配置 jQuery是 Web 開發(fā)領(lǐng)域最流行的 JavaScript 庫之一，jQuery 是一款免費且開放源代碼的輕量級 JavaScript 代碼庫。 jQuery主旨是：以更少的代碼，實現(xiàn)更多的功能，即(Write Less ,Do More)。 使用之前需要引用 jQuer

4、y 庫文件。jQuery 庫文件可以從 下載1 jQuery 環(huán)境配置 jQuery是 W2 jQuery應(yīng)用的創(chuàng)建 jQuery 程序中不管是頁面元素的選擇、內(nèi)置的功能函數(shù)，都是美元符號“$”來起始的。而這個“$”就是 jQuery 當中最重要且獨有的對象。$()等效于 jQuery()，稱為 jQuery 工廠函數(shù)，它是 jQuery 的核心函數(shù)，使用工廠函數(shù)$()可以將 DOM 元素轉(zhuǎn)化為 jQuery 對象。使用$(document)將 DOM 元素 document 轉(zhuǎn)化為 jQuery 對象，并調(diào)用 ready 方法指定 DOM 加載就緒時執(zhí)行的函數(shù)。$(document).rea

5、dy()是整個 jQuery 運行的核心。語法： $(document).ready(function()/代碼段); $(function() /代碼段); 上述兩種寫法是一致的，第二種是第一種的簡寫方式，功能類似于 JavaScript 中的window.onload=function();但是JavaScript 中 onload 沒有簡寫方式， jQuery的方式執(zhí)行效率高?？梢詧?zhí)行多次， 按照（代碼中的）先后順序依次執(zhí)行；不會被覆蓋。2 jQuery應(yīng)用的創(chuàng)建 jQuery 程舉例演示【例7-1】創(chuàng)建 jQuery 應(yīng)用。 【例7-3】jQuery 實現(xiàn)登錄表單簡單驗證。 【例7-2

6、】jQuery 的隱式循環(huán)和鏈式書寫。舉例演示【例7-1】創(chuàng)建 jQuery 應(yīng)用。 【例7-3】3 jQuery對象與DOM對象的轉(zhuǎn)換 jQuery 對象就是通過 jQuery 包裝 DOM對象后產(chǎn)生的對象，jQuery 對象實際上就是 DOM對象的一個集合。jQuery 對象是 jQuery 獨有的，其可以使用 jQuery 里的方法.例如：document.getElementById(mydiv).innerHTML = 你好！;使用 jQuery 可以寫為：$( #mydiv ).html( 你好！ ); / html()是 jQuery 對象的方法 jQuery 對象無法使用 DO

7、M 對象屬性方法，DOM 對象也無法使用 jQuery 對象屬性DOM對象轉(zhuǎn)換為 jQuery對象：只需要用$()將 DOM 對象包裝起來，就可以獲得 jQuery 對象 - $(DOM 對象)var variable = document.getElementById(mydiv); / DOM 對象var $variable = $(variable); / jQuery 對象jQuery對象轉(zhuǎn)換為DOM 對象：通過兩種方式轉(zhuǎn)換index和 get(index)3 jQuery對象與DOM對象的轉(zhuǎn)換 jQue3jQuery常用選擇器的應(yīng)用Part 基本選擇器 層次選擇器 過濾選擇器3jQu

8、ery常用選擇器的應(yīng)用Part 基本選擇器 1 基本選擇器 選擇器是 jQuery 的根基, 在 jQuery 中, 對事件處理,遍歷 DOM和 Ajax 操作都依賴于選擇器。在操作之前，必先選中。jQuery 選擇器允許對 HTML 元素組或單個元素進行操作。jQuery選擇器基于元素的 id、類、類型、屬性、屬性值等“查找”（或選擇）HTML 元素。它基于已經(jīng)存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。jQuery 中所有選擇器都以美元符號開頭：$()。語法：$(選擇器) 1 基本選擇器 選擇器是 jQuery 的根基基本選擇器選擇器描述css模式j(luò)Query示例#id根據(jù)

9、給定的id匹配一個元素#test $(#test)選取id為test的元素.class根據(jù)給定的類名匹配元素.test $(.test)選取所有class為test的元素element根據(jù)給定的元素名匹配元素p $(p)選取所有的元素*匹配所有元素* $(*)選取所有的元素selector1, selector2,selectorN將每一個選擇器匹配到的元素合并后一起返回div,span, p.myClass $(div, span, p.myClass)選取所有、和擁有class為myClass的標簽的一組元素基本選擇器是 jQuery 所有選擇器的基礎(chǔ)，是 jQuery 中使用最頻繁的選擇

10、器，通過元素的id 屬性、class 屬性、標簽名稱進行選擇?；具x擇器選擇器描述css模式j(luò)Query示例#id根據(jù)給定舉例演示【例7-4】基本選擇器的應(yīng)用：獲取并設(shè)置所有元素的背景。 【例7-5】基本選擇器的應(yīng)用：提示。 舉例演示【例7-4】基本選擇器的應(yīng)用：獲取并設(shè)置所有2 層次選擇器 層次選擇器通過 DOM 元素之間的層次關(guān)系來獲取元素，其主要層次關(guān)系包括后代、父子、相鄰、兄弟關(guān)系 。層次選擇器選擇器描述css模式j(luò)Query示例$(ancestor descendant)選取ancestor元素里的所有descendant后代元素div span $(div span)選取里的所有的

11、元素$(parentchild)選取parent元素下的child子元素，$(ancestor descendant)選擇的是所有descendant子元素div span $(div span)選取元素下元素名是的子元素$(prev+ next)選取緊接在prev元素后的next元素.one + div $(.one + div)選取class為one的下一個元素$(prevsiblings)選取prev元素之后的所有siblings元素#two div $(#two div)選取id為two的元素后面的所有兄弟元素2 層次選擇器 層次選擇器通過 DOM 元素之間舉例演示【例7-6】層次選擇

12、器的應(yīng)用：獲取并設(shè)置網(wǎng)頁元素的文字顏色。 【例7-7】網(wǎng)頁選項卡的實現(xiàn)。 舉例演示【例7-6】層次選擇器的應(yīng)用：獲取并設(shè)置網(wǎng)頁元素的文舉例演示 【例7-8】淘寶網(wǎng)選項卡的實現(xiàn)。 舉例演示 【例7-8】淘寶網(wǎng)選項卡的實現(xiàn)。 3 過濾選擇器 過濾選擇器通過特定的過濾規(guī)則來篩選元素，語法特點是使用“:”，如使用$(li:first)來選取第一個 li 元素，$ (div:last) 匹配最后一個 div 元素?；具^濾選擇器是過濾選擇器使用最廣泛的一種。1. 基本過濾選擇器常用的基本過濾選擇器選擇器描述:first選取第一個元素 $(tr:first) :last選取最后一個元素 $(tr:last

13、) :not(selector)去除所有與給定選擇器匹配的元素 $(input:not(:checked) :even選取所有元素中偶數(shù)索引的元素，從 0 開始計數(shù) $(tr:even) :odd選取所有元素中奇數(shù)索引的元素 ，從 0 開始計數(shù) $(tr:odd) 3 過濾選擇器 過濾選擇器通過特定的過濾規(guī)則來篩常用的基本過濾選擇器選擇器描述:eq(index)選取指定索引的元素，如取得集合中的第二個元素 $(div.horizontal:eq(1) :gt(index)選取索引大于指定index的元素 $(tr:gt(0) :lt(index)選取索引小于指定index的元素 $(tr:lt

14、(2) :header選取所有的標題元素 如：h1, h2, h3 $(:header):animated匹配所有正在執(zhí)行動畫效果的元素:focus選取當前獲得焦點的元素常用的基本過濾選擇器選擇器描述:eq(index)選取指定索舉例演示 【例7-9】基本過濾選擇器的應(yīng)用。 【例7-10】基本過濾選擇器實現(xiàn)隔行變色。舉例演示 【例7-9】基本過濾選擇器的應(yīng)用。 【例7-2 內(nèi)容過濾選擇器 內(nèi)容過濾選擇器根據(jù)元素中的文字內(nèi)容或所包含的子元素獲取元素。常用的內(nèi)容過濾選擇器選擇器描述:contains(text)選取包含text文本內(nèi)容的元素 $(div:contains(新) ;區(qū)分大小寫:emp

15、ty選取不包含子元素或者文本節(jié)點的空元素 $(td:empty) :has(selector)選取含有選擇器所匹配的元素的元素 $(div:has(p).addClass(test);:parent選取含有子元素或文本節(jié)點的元素 $(td:parent) 2 內(nèi)容過濾選擇器 內(nèi)容過濾選擇器根據(jù)元素中的文字內(nèi)容舉例演示 【例7-11】內(nèi)容過濾選擇器實現(xiàn)包含大豆的單元格高亮。舉例演示 【例7-11】內(nèi)容過濾選擇器實現(xiàn)包含大豆的3 屬性過濾選擇器 屬性過濾選擇器根據(jù)元素的某個屬性獲取元素，如 ID 號或匹配屬性值的內(nèi)容，并以“”開始，以“”結(jié)束，其中表示值在字符串的開始, $表示值在字符串的結(jié)尾.

16、*表示要匹配的值可以出現(xiàn)在字符串的任意位置, !表示對值取反等。常用的內(nèi)容過濾選擇器選擇器描述attribute選取擁有此屬性的元素 $(divid) attribute=value選取指定屬性值為value的所有元素 attribute !=value選取屬性值不為value的所有元素 attribute = value選取屬性值以value開始的所有元素 attribute $= value選取屬性值以value結(jié)束的所有元素 attribute *= value選取屬性值包含value的所有元素 selector1 selector2selectorN復(fù)合性選擇器，首先經(jīng)selector

17、1選擇返回集合A，集合A再經(jīng)過selector2選擇返回集合B，集合B再經(jīng)過selectorN選擇返回結(jié)果集合 3 屬性過濾選擇器 屬性過濾選擇器根據(jù)元素的某4表單過濾選擇器 表單過濾選擇器是選取表單元素的過濾選擇器。常用的表單過濾選擇器選擇器描述:input選取所有、和元素 :text選取所有的文本框元素 :password選取所有的密碼框元素 :radio選取所有的單選框元素 :checkbox選取所有的多選框元素 :submit選取所有的提交按鈕元素 :image選取所有的圖像按鈕元素 :reset選取所有重置按鈕元素 :button選取所有按鈕元素 :file選取所有文件上傳域元素 4

18、表單過濾選擇器 表單過濾選擇器是選取表單元素的過濾選5表單屬性過濾選擇器 表單對象屬性過濾選擇器通過表單中的某對象屬性特征獲取該類元素。常用的表單屬性過濾選擇器選擇器描述:enabled匹配所有可用元素:disabled選取所有不可用的元素，如：$(inputtype=text:disabled) 選擇禁用的文本輸入字段:checked匹配所有選中的被選中元素(復(fù)選框、單選框等，不包括select中的option)如：$(inputtype=radio:checked) 選擇所有選中的單選按鈕:selected選取所有被選中的選項元素（下拉框），如：$(select:selected).tex

19、t();獲取下拉框選中的內(nèi)容:checkbox選取所有的多選框元素 5表單屬性過濾選擇器 表單對象屬性過濾選擇器通過表單中舉例演示 【例7-12】表單元素的獲取。舉例演示 【例7-12】表單元素的獲取。6可見度過濾選擇器可見度過濾選擇器是根據(jù)元素的可見與不可見狀態(tài)來選取元素。:hidden選取所有不可見元素，匹配所有display:none 、input hidden元素，如：$(tr:hidden)。:visible 選取所有可見的元素，如：$(tr:visible)。舉例演示【例7-13】過濾選擇器實現(xiàn)品牌列表。 6可見度過濾選擇器可見度過濾選擇器是根據(jù)元素的可見與不可4 jQuery 控

20、制頁面Part DOM 元素的遍歷 DOM 元素屬性操作及節(jié)點添加 DOM 節(jié)點刪除、復(fù)制和替換4 jQuery 控制頁面Part DOM 元素的遍歷 1 DOM元素的遍歷jQuery 遍歷函數(shù)包括了用于篩選過濾、查找和串聯(lián)元素的方法。如表 所示。 jQuery 遍歷函數(shù)函數(shù)說明.add()將元素添加到匹配元素的集合中。.andSelf()把之前的元素集添加到當前集合中。.children()獲得匹配元素集合中每個元素的所有直接子元素。.closest()從元素本身開始，逐級向上級元素匹配，并返回最先匹配的祖先元素，即被選元素的第一個祖先元素.contents()獲得匹配元素集合中每個元素的子

21、元素，包括文本和注釋節(jié)點。:focus選取當前獲得焦點的元素.each()對jQuery 對象進行迭代，為每個匹配元素執(zhí)行函數(shù)。.end()結(jié)束當前鏈中最近的一次篩選操作，并將匹配元素集合返回到前一次的狀態(tài)。.eq()返回帶有被選元素的指定索引號的元素。eq(index) 獲取第N個元素（index的值從0算起)如果index為負數(shù)，從最后一個元素向前計數(shù)$(p).eq(1)1 DOM元素的遍歷jQuery 遍歷函數(shù)包括了用于篩選過 jQuery 遍歷函數(shù)函數(shù)說明.filter()將匹配元素集合縮減為匹配選擇器或匹配函數(shù)返回值的新元素。.find()獲得當前匹配元素集合中每個元素的后代，由選擇

22、器進行篩選。.first()將匹配元素集合縮減為集合中的第一個元素。相當于eq(0)，如：$(li).first().has()將匹配元素集合縮減為包含特定元素的后代的集合。去掉那些不含有指定后代的元素。.is()根據(jù)選擇器檢查當前匹配元素集合，如果存在至少一個匹配元素，則返回 true。.last()將匹配元素集合縮減為集合中的最后一個元素。相當于.eq(-1)，如：$(li).last().map()把當前匹配集合中的每個元素傳遞給函數(shù)，產(chǎn)生包含返回值的新 jQuery 對象。.next()獲得匹配元素集合中每個元素緊鄰的同輩元素。.nextAll()獲得匹配元素集合中每個元素之后的所有同

23、輩元素，由選擇器進行篩選（可選）。.nextUntil()獲得每個元素之后所有的同輩元素，直到遇到匹配選擇器的元素為止。.not()從匹配元素集合中刪除元素。 jQuery 遍歷函數(shù)函數(shù)說明.filter()將匹配元 jQuery 遍歷函數(shù)函數(shù)說明.offsetParent()獲得用于定位的第一個父元素。.parent()獲得當前匹配元素集合中每個元素的父元素，由選擇器篩選（可選）。.parents()獲得當前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選）。.parentsUntil()獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止。.prev()獲得匹配元素集

24、合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。.prevAll()獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選）。.prevUntil()獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。.siblings()獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。.slice()將匹配元素集合縮減為指定范圍的子集。 jQuery 遍歷函數(shù)函數(shù)說明.offsetParent舉例演示 【例7-14】DOM 元素的查找?！纠?-15】DOM元素的過濾。舉例演示 【例7-14】DOM 元素的查找?！纠?-2 DOM元素屬性操作及節(jié)點添加 我們通常將

25、id,src,alt,class 等稱為屬性,即元素屬性。在jQuery中,提供了attr函數(shù)來操作元素屬性,具體如表所示。1. 元素屬性操作jQuery attr 函數(shù)說明函數(shù)說明attr(name)取得第一個匹配元素的屬性值. 如：$(input).attr(value)attr(property)將一個名/值形式的對象設(shè)置為所有匹配元素的屬性.如：$(input).attr( value: txt, title: text );attr(key,value)為所有匹配的元素設(shè)置一個屬性值.如：$(input).attr(value,txt);attr(key,fn)為所有匹配的元素設(shè)置一

26、個計算的屬性值.如：$(input).attr(title, function () return this.value );2 DOM元素屬性操作及節(jié)點添加 我們通常將 獲取和設(shè)置函數(shù)說明函數(shù)說明val()獲取第一個匹配元素的value值. 如：$(#txt1).val()val(val)為匹配的元素設(shè)置value值. 如：$(#txt1).val(txt1)html()獲取第一個匹配元素的html內(nèi)容. 如：$(#dv1).html()html(val)設(shè)置每一個匹配的元素的html內(nèi)容. 如：$(#dv1).html(this is a div)text()取得所有匹配文本節(jié)點的內(nèi)容,并

27、將其連接起來. 如：$(div).text()text(val)將所有匹配元素的置為val. 如：$(div).text(divs) 獲取和設(shè)置函數(shù)說明函數(shù)說明val()獲取第一個匹配元素的 jQuery 操作 CSS 常用的方法函數(shù)說明addClass(classes)為每個匹配的元素添加指定的類名. 如：$(input).addClass(colorRed borderBlack);.hasClass ()檢查當前的元素是否含有某個特定的類，如果有則返回true. 如：alert($(input).hasClass(borderBlack);removeClass(classes)從匹配元

28、素中移除所有或指定的css類. 如：$(input).removeClass(colorRed borderBlack);toggleClass(classes)如果存在(不存在)就刪除(添加)指定類. 如：$(input).toggleClass(colorRed borderBlack);css(name)訪問第一個匹配元素的樣式屬性. 如：$(input).css(color)css(properties)把一個名/值對設(shè)置給所有匹配元素的樣式屬性. 如：$(input).css(border:solid 3px silver,color:red)css(name,value)為匹配的元

29、素設(shè)置同一個樣式屬性,如果是數(shù)字,將自動轉(zhuǎn)換為像素值. 如：$(input).css(border-width,5); jQuery 操作 CSS 常用的方法函數(shù)說明addCl jQuery 處理尺寸方法及說明函數(shù)說明width()設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）。$(#div1).width()返回300height()設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距）。$(#div1).height()返回100innerWidth()innerWidth() 方法返回元素的寬度（包括內(nèi)邊距）。$(#div1).innerWidth()返回320innerHeight()

30、innerHeight() 方法返回元素的高度（包括內(nèi)邊距）。$(#div1).innerHeight()返回120outerWidth()outerWidth() 方法返回元素的寬度（包括內(nèi)邊距和邊框）。$(#div1).outerWidth()返回322outerHeight()outerHeight() 方法返回元素的高度（包括內(nèi)邊距和邊框）。$(#div1).outerHeight()返回122 jQuery 處理尺寸方法及說明函數(shù)說明width()設(shè)2節(jié)點插入 創(chuàng)建元素可以使用工廠函數(shù)$(html,props)，參數(shù) html 是用于動態(tài)創(chuàng)建 DOM 元素的HTML 標記字符串；參數(shù)

31、 props 是用于附加到新創(chuàng)建元素上的屬性、事件和方法。如下：$(你好，jQuery).appendTo(body); jQuery 元素插入方法函數(shù)說明$node.append($newNode)向每個匹配的元素內(nèi)部的結(jié)尾處追加新元素 。$newNode.appendTo($node)將新元素追加到每個匹配元素內(nèi)部的結(jié)尾處 。$node.prepend($newNode)向每個匹配的元素內(nèi)部的開始處追加新元素 。$newNode.prependTo($node)將新元素追加到每個匹配元素內(nèi)部的開始處。 $node.after($newNode)向每個匹配的元素的之后插入內(nèi)容，是并列兄弟。

32、$newNode.insertAfter($node)將新元素插入到每個匹配元素之后，是并列兄弟。 $newNode.before($node) 向每個匹配的元素的之前插入內(nèi)容，是并列兄弟。 $node.insertBefore($newNode)將新元素插入到每個匹配元素之前，是并列兄弟。 2節(jié)點插入 創(chuàng)建元素可以使用工廠函數(shù)$(h舉例演示 【例7-16】內(nèi)部插入?！纠?-17】外部插入。舉例演示 【例7-16】內(nèi)部插入。【例7-17】外部3 DOM節(jié)點刪除、復(fù)制和替換$( p ).remove( .hello );刪除所有 class 屬性值為 hello 的 p 元素，還有它下面的所有元

33、素。該方法返回被刪除節(jié)點的引用，該方法刪除節(jié)點后，連同節(jié)點的事件也刪除了。 $(p).empty();從被選元素移除所有內(nèi)容，包括所有文本和子節(jié)點。使用 detach 方法刪除的節(jié)點，會保留原有的事件，該方法返回被刪除節(jié)點的引用。1. 刪除節(jié)點舉例演示【例7-18】刪除節(jié)點?！纠?-19】empty()、remove()、detach()方法的區(qū)別。3 DOM節(jié)點刪除、復(fù)制和替換$( p ).remov復(fù)制節(jié)點 ：$(p).clone(); /返回節(jié)點克隆后的副本，但不會克隆原節(jié)點的事件。$(p).clone(true); /克隆節(jié)點，保留原有事件。替換節(jié)點 ：$(p).replaceWith(ITCAST); / 將所有 p 元素，替換為ITCAST。$(ITCAST).replaceAll(p); /與 replaceWith 相反 被替換的在后面。2.復(fù)制和替換節(jié)點舉例演示復(fù)制節(jié)點 ：2.復(fù)制和替換節(jié)點舉例演示5 jQuery 事件 Part 事件綁定與解除 復(fù)合事件5 jQuery 事件 Part 事件綁定與解除 1 事件綁定與解除 頁面對不同訪問者的響應(yīng)叫做事件。事件處理程序指的是當 HTML 中發(fā)生某些事件時所調(diào)用的方法。在 jQuery 中，大多數(shù) DOM 事件都有一個等效的 jQuery 方法。頁面中指定一個點擊事件