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

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

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

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

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

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