jquery網(wǎng)頁開發(fā)實例精解教學(xué)-第3章div層控制

第3章DIV層的控制在HTML+CSS的設(shè)計模式中，DIV這個標(biāo)記一直起著很大的作用，jQuery在對頁面元素操作時，很多情況下都有DIV直接或者間接參與。本章我們講解jQuery如何操作DIV，為后續(xù)章節(jié)的學(xué)習(xí)打下基礎(chǔ)。3.1DIV的鼠標(biāo)選取jQuery對于DIV的鼠標(biāo)選取可以通過鼠標(biāo)的懸停和鼠標(biāo)單擊來實現(xiàn)。在jQuery的眾多應(yīng)用中能夠準(zhǔn)確選擇DIV是關(guān)鍵。3.1.1利用鼠標(biāo)懸停實現(xiàn)DIV的選取一般在動態(tài)菜單或圖片切換等應(yīng)用中需要使用這種效果。其中，需要使用jQuery的函數(shù)ready()、mouseover()。我們使用ready()函數(shù)在文檔加載完成后注冊DIV的鼠標(biāo)懸停事件，在鼠標(biāo)懸停事件中做出響應(yīng)。1.jQuery函數(shù)ready()——文檔加載完成該函數(shù)表示當(dāng)DOM載入就緒可以查詢及操縱時綁定一個要執(zhí)行的函數(shù)。其語法形式如下：ready(fn)2.jQuery函數(shù)mouseover()——鼠標(biāo)懸停事件該函數(shù)在每一個匹配元素的鼠標(biāo)懸停事件中綁定一個處理函數(shù)。其語法形式如下：mouseover(fn)3.jQuery函數(shù)hover()——鼠標(biāo)懸停/離開切換事件該方法模仿懸停事件（鼠標(biāo)移動到一個對象上面及移出這個對象）。其語法形式如下：hover(over,out)因為hover()可以對兩個事件都做出響應(yīng)，所以在hover()中使用了兩個function參數(shù)，第一個是鼠標(biāo)懸停事件，第二個是修正了的鼠標(biāo)離開事件。當(dāng)鼠標(biāo)懸停在DIV上時效果如圖1所示，當(dāng)鼠標(biāo)離開DIV時效果如圖2所示。圖1圖23.1.2利用鼠標(biāo)單擊實現(xiàn)DIV的選取有時我們不希望鼠標(biāo)懸停就選取一個DIV，而是當(dāng)鼠標(biāo)對DIV單擊時選擇它。如果是這樣我們需要使用鼠標(biāo)的單擊事件來操作對DIV的選取。其中，需要使用的jQuery函數(shù)ready()、click()。使用ready()函數(shù)在文檔加載完成后注冊DIV的鼠標(biāo)單擊事件，在鼠標(biāo)單擊事件中做出響應(yīng)。1.jQuery函數(shù)click()——鼠標(biāo)單擊事件該函數(shù)觸發(fā)每一個匹配元素的單擊事件。其語法形式如下：click([fn])效果如圖所示。在jQuery中還有一個事件響應(yīng)函數(shù)toggle()。它是對鼠標(biāo)的單擊不同次數(shù)進(jìn)行響應(yīng)，而不僅僅是單擊事件。當(dāng)發(fā)生多次單擊的時候，每次單擊事件都可以用這個函數(shù)做處理操作，它和上面所介紹的hover()函數(shù)同屬于事件切換函數(shù)。這里我們想要實現(xiàn)當(dāng)鼠標(biāo)第一次單擊DIV的時候選取，第二次單擊DIV的時候撤銷選取。

2.jQuery函數(shù)toggle()——單擊切換該函數(shù)表示每次單擊后依次調(diào)用函數(shù)。其語法形式如下：toggle(fn1,fn2,[fn3,fn4,…])在toggle()中添加了兩個function()函數(shù)，第一個表示鼠標(biāo)第一次單擊層（如果后面還有多次單擊的時候，則它表示奇數(shù)次單擊）。第二個表示鼠標(biāo)第二次單擊層（它表示偶數(shù)次單擊）。第一次單擊效果如圖1所示，第二次單擊效果如圖2所示。圖1圖23.2DIV層的尺寸jQuery對于DIV層的尺寸主要是動態(tài)讀取和動態(tài)修改。本節(jié)我們介紹通過jQuery控制DIV的尺寸。3.2.1jQuery動態(tài)讀取DIV層的尺寸jQuery在動態(tài)讀取DIV的高和寬的時候需要兩個固有函數(shù)height()、width()。這兩個函數(shù)分別獲取匹配元素對象的高和寬。我們可以在DIV的單擊事件中使用這兩個函數(shù)來取值。1.jQuery函數(shù)height()——元素高度該函數(shù)獲取或者設(shè)置元素的高度，單位像素。其語法形式如下：height([val])2.jQuery函數(shù)width()——元素寬度該函數(shù)獲取或者設(shè)置元素的寬度，單位像素。其語法形式如下：width([val])效果如圖所示。3.jQuery函數(shù)css()——樣式設(shè)定該函數(shù)獲取或設(shè)定匹配元素的CSS樣式。其語法格式如下：css(name)css(properties)css(name,value|fn)3.2.2jQuery動態(tài)修改DIV層的尺寸對于jQuery動態(tài)修改DIV層的尺寸同樣可以使用前面提到的尺寸函數(shù)，只是這里需要將參數(shù)值帶給這兩個函數(shù)。在下面的例子中用兩個文本框接收用戶動態(tài)輸入DIV的寬和高，并當(dāng)用戶單擊“修改尺寸”按鈕時，修改DIV的尺寸。1.Javascript功能實現(xiàn)HTML代碼和CSS樣式參考光盤內(nèi)容，我們直接看一下Javascript功能實現(xiàn)，效果如圖1和圖2所示。圖1圖22.通過css()函數(shù)修改DIV尺寸與上面獲取尺寸操作同樣，也可以通過css()函數(shù)來修改DIV的尺寸。3.jQuery函數(shù)animate()——自定義動畫該函數(shù)用于創(chuàng)建自定義動畫。其語法形式如下：animate(params,[duration],[easing],[callback])animate(params,options)3.3層的顯示與隱藏本節(jié)介紹如何利用jQuery控制DIV的顯示與隱藏。實際上DIV的顯示與隱藏可以通過多種途徑實現(xiàn)。我們從最簡單介紹開始。3.3.1利用jQuery的顯示與隱藏函數(shù)實現(xiàn)1.顯示和隱藏函數(shù)在jQuery的眾多函數(shù)中，專門提供了操作元素顯示和隱藏的函數(shù)show()、hide()。我們可以直接使用這兩個函數(shù)來操作。（1）jQuery函數(shù)show()——顯示元素該函數(shù)顯示隱藏的元素。其語法形式如下：show()show(speed,[callback])（2）jQuery函數(shù)hide()——隱藏元素該函數(shù)隱藏顯示的元素。其語法形式如下：hide()hide(speed,[callback])頁面初始加載及按鈕的偶數(shù)次單擊時效果如圖1所示，奇數(shù)次單擊“顯示/隱藏”按鈕后效果如圖2所示。圖1圖2

剛才的例子使用了顯示與隱藏函數(shù)的基本形式。實際上這兩個函數(shù)還有變形形式，就是添加了顯示與隱藏速度的設(shè)定及附加了回調(diào)函數(shù)。我們可以將上述代碼修改，效果如圖1和圖2所示。圖1圖22.轉(zhuǎn)換函數(shù)前面我們講解了轉(zhuǎn)換函數(shù)toggle()，這個函數(shù)對于層的顯示狀態(tài)也可進(jìn)行轉(zhuǎn)換。其語法形式如下：toggle()toggle(switch)toggle(speed,[callback])效果如圖1和圖2所示。圖1圖2

3.3.2利用jQuery的滑動效果實現(xiàn)在jQuery的眾多特效函數(shù)中，我們可以利用滑動函數(shù)來操作DIV的顯示與隱藏。1.jQuery函數(shù)slideUp()——滑動函數(shù)該函數(shù)向上減小高度動態(tài)隱藏所有匹配的元素。其語法形式如下：slideUp(speed,[callback])2.jQuery函數(shù)slideDown()——滑動函數(shù)該函數(shù)向下增大高度動態(tài)顯示所有匹配的元素。其語法形式如下：slideDown(speed,[callback])代碼中的slideUp()和slideDown()這兩個函數(shù)是實現(xiàn)jQuery特效函數(shù)的向上滑動與向下滑動。在這里給出了效果的持續(xù)時間和附加回調(diào)函數(shù)，效果如圖1和圖2所示。圖1圖23.jQuery函數(shù)slideToggle()——切換高度變化該函數(shù)通過高度變化來切換所有匹配元素的可見性。其語法形式如下：slideToggle(speed,[callback])3.3.3利用jQuery的淡入淡出效果實現(xiàn)前面提到的滑動效果是通過改變DIV的高來實現(xiàn)顯示與隱藏操作。我們還可以使用改變DIV的透明度來實現(xiàn)顯示與隱藏。這需要使用到j(luò)Query的淡入淡出函數(shù)fadeIn()、fadeout()。1.jQuery函數(shù)fadeIn()——淡入效果該函數(shù)通過不透明度變化實現(xiàn)元素的淡入。其語法形式如下：fadeIn(speed,[callback])2.jQuery函數(shù)fadeOut()——淡出效果該函數(shù)通過不透明度變化實現(xiàn)元素的淡出。其語法形式如下：fadeOut(speed,[callback])上述代碼實現(xiàn)的效果如圖1和圖2所示。圖1圖23.jQuery函數(shù)fadeTo()——淡入淡出切換該函數(shù)把所有匹配元素的不透明度以漸進(jìn)方式調(diào)整到指定的不透明度。其語法形式如下：fadeTo(speed,opacity,[callback])3.4DIV內(nèi)的內(nèi)容控制對于DIV的內(nèi)容控制我們介紹這樣幾種操作，內(nèi)容清空、內(nèi)容替換、內(nèi)容復(fù)制、內(nèi)容添加、內(nèi)容包裝等操作。這些操作都涉及到j(luò)Query的文檔處理方法。3.4.1內(nèi)容清空首先來介紹DIV中內(nèi)容的清空。在jQuery的文檔操作中具有清空文檔子內(nèi)容的方法empty()。這里可以利用它來完成我們的內(nèi)容清空。該函數(shù)刪除匹配的元素集合中所有的子節(jié)點。其語法形式如下：empty()HTML代碼和CSS樣式參考光盤內(nèi)容，直接看一下Javascript功能實現(xiàn)：1<scripttype="text/javascript">2 $(function(){3 $("#update").click(function(){4 $("#div1").empty(); //清空元素內(nèi)容5 });6 });7</script>當(dāng)我們單擊頁面上的按鈕時，jQuery就會清空DIV下所有的子內(nèi)容，效果如圖1和圖2所示。圖1圖2

3.4.2內(nèi)容替換內(nèi)容替換操作使用了jQuery工具函數(shù)中的replaceWith()函數(shù)。這個函數(shù)將參數(shù)攜帶的內(nèi)容替換掉匹配元素的內(nèi)容。1.jQuery函數(shù)replaceWith()——替換元素內(nèi)容該函數(shù)將所有匹配的元素替換成指定的HTML或DOM元素。其語法形式如下：replaceWith(content)當(dāng)我們單擊按鈕時，DIV原有內(nèi)容被替換成粗體的Paragraph，效果如圖所示。2.jQuery函數(shù)replaceAll()——元素替換該函數(shù)用匹配的元素替換掉所有selector匹配到的元素。其語法形式如下：replaceAll(selector)3.4.3內(nèi)容復(fù)制jQuery進(jìn)行內(nèi)容復(fù)制是使用了clone()這個函數(shù)，它將匹配的所有元素復(fù)制出來并返回他們。該函數(shù)克隆匹配的DOM元素（及其事件）并且選中這些克隆的副本。其語法形式如下：clone()clone(true)代碼實現(xiàn)了單擊按鈕后將DIV中的復(fù)制出來并將其文本內(nèi)容顯示到文本區(qū)域內(nèi)，效果如圖所示。下面利用前面的替換函數(shù)和這里介紹的復(fù)制函數(shù)組合起來使用。這個例子所要達(dá)到的目的是首先復(fù)制出DIV原有內(nèi)容，然后在復(fù)制出來的對象上進(jìn)行文本替換，然后再將復(fù)制出來的對象替換回原有DIV中的內(nèi)容。具體效果如圖所示。

3.4.4內(nèi)容添加jQuery本身對于內(nèi)容的添加分成內(nèi)部添加和外部添加兩種，每種方式又都有前后兩種添加位置。1.向內(nèi)部添加函數(shù)首先，來看內(nèi)部添加如何操作。DIV的內(nèi)部添加需要用到j(luò)Query的append()、prepend()函數(shù)。這兩個函數(shù)分別負(fù)責(zé)在DIV內(nèi)容的后端添加內(nèi)容和前端添加內(nèi)容。（1）jQuery函數(shù)append()——添加元素內(nèi)容該函數(shù)向每個匹配的元素內(nèi)部追加內(nèi)容。其語法形式如下：append(content|fn)（2）jQuery函數(shù)prepend()——添加元素內(nèi)容該函數(shù)向每個匹配的元素內(nèi)部前置內(nèi)容。其語法形式如下：prepend(content|fn)下面，用一個例子來演示任何向DIV中添加內(nèi)容。HTML代碼和CSS樣式參考光盤內(nèi)容，我們直接看一下Javascript功能實現(xiàn)，代碼的執(zhí)行效果如圖所示。（3）jQuery函數(shù)appendTo()——添加元素內(nèi)容該函數(shù)把所有匹配的元素追加到另一個指定的元素集合中。其語法形式如下：appendTo(content)（4）jQuery函數(shù)prependTo()——添加元素內(nèi)容該函數(shù)把所有匹配的元素前置到另一個、指定的元素集合中。其語法形式如下：prependTo(content)我們可以修改上面的代碼，效果如圖所示。2.向外部添加函數(shù)剛才見到了如何使用內(nèi)部添加函數(shù)向DIV中添加內(nèi)容。下面來看一下利用外部添加函數(shù)的實現(xiàn)。外部添加函數(shù)包括after()、before()。這兩個函數(shù)表示對當(dāng)前匹配的元素做添加操作。（1）jQuery函數(shù)after()——外部添加元素內(nèi)容該函數(shù)在每個匹配的元素之后插入內(nèi)容。其語法形式如下：after(content|fn)（2）jQuery函數(shù)before()——外部添加元素內(nèi)容該函數(shù)在每個匹配的元素之前插入內(nèi)容。其語法形式如下：before(content|fn)我們再利用這兩個函數(shù)的時候需要先獲取DIV內(nèi)的子元素才可進(jìn)行操作。利用獲取DIV內(nèi)的子元素，并在子元素外添加內(nèi)容來實現(xiàn)在DIV中添加內(nèi)容，效果如圖所示。（3）jQuery函數(shù)insertAfter()——外部插入元素內(nèi)容該函數(shù)把所有匹配的元素插入到另一個、指定的元素集合的后面。其語法形式如下：insertAfter