jquery網(wǎng)頁開發(fā)實(shí)例精解教學(xué)-第4章設(shè)計列表

第4章設(shè)計列表列表是網(wǎng)頁陳述信息的一種方式。它由一定格式的文字和圖片元素構(gòu)成。在靜態(tài)頁面中可以設(shè)計列表的內(nèi)容、列表的嵌套等。但是，對于列表一些其他特性控制起來相對困難。本章將講解如何使用jQuery更有效的控制列表。4.1控制列表寬度在實(shí)際應(yīng)用中，列表的創(chuàng)建有多種不同的形式。在這里列舉兩種創(chuàng)建形式：一是直接使用HTML標(biāo)記中的<OL>或者<UL>與<LI>搭配使用創(chuàng)建列表；二是使用<DIV>的嵌套來創(chuàng)建。下面將講解以這兩種形式創(chuàng)建的列表如何控制列表寬度。4.1.1參差不齊的列表在我們創(chuàng)建列表的時候，由于不同列表項(xiàng)的文字內(nèi)容不同，必然造成列表項(xiàng)寬度不同。其得到的結(jié)果如圖所示。4.1.2

截取文字內(nèi)容實(shí)現(xiàn)控制列表寬度這種方式的原理為：可以把所有列表項(xiàng)截取長度相同。這樣截取出來的列表項(xiàng)寬度就一致了。其中，使用到j(luò)Query的ready()、each()和text()方法以及Javascript的substr()函數(shù)。1．jQuery的ready()函數(shù)——文檔加載完成事件該函數(shù)在文檔就緒后，添加特殊效果，或者加入動態(tài)事件。其語法如下：語法一$(document).ready(function)語法二$().ready(function)語法三$(function)2．jQuery的each()函數(shù)——遍歷jQuery對象該函數(shù)是對jQuery對象進(jìn)行遍歷，為每個匹配元素執(zhí)行函數(shù)。其語法如下：語法一each(function)語法二each(object,function)3．jQuery的text()函數(shù)——所有匹配元素的內(nèi)容該函數(shù)可以獲取并設(shè)置所有匹配包含的文本內(nèi)容所組合起來的文本。其語法如下：text([val|function])4．功能實(shí)現(xiàn)控制列表寬度的步驟如下：（1）需要利用jQuery的ready()函數(shù)來實(shí)現(xiàn)在頁面整體加載完成后執(zhí)行特效效果。（2）在function()內(nèi)部使用each()函數(shù)遍歷列表項(xiàng)。（3）在each()函數(shù)中獲取當(dāng)前被遍歷的<li>中嵌套的<span>元素對象的文本內(nèi)容。（4）如果文本長度超出范圍則通過substr()函數(shù)截取并加上刪節(jié)號。首先，把jQuery庫引入進(jìn)來：<scriptsrc="jslib/jquery-1.6.min.js"type="text/javascript"></script>然后，添加Javascript代碼，利用jQuery的選擇器找出每個列表項(xiàng)，獲取文字長度，并按照要求來進(jìn)行截取。下圖是加入jQuery代碼調(diào)整列表項(xiàng)長度后得出來的效果。4.1.3修改層的寬度控制列表寬度修改層的寬度控制列表寬度的原理為：可以把所有列表項(xiàng)所在的層設(shè)置成長度相同。這樣截取出來的列表項(xiàng)寬度就一致了。這種解決方式與字符寬度無關(guān)，所以字符寬度不同不會影響到列表項(xiàng)的寬度。先創(chuàng)建列表，列表的創(chuàng)建需使用DIV創(chuàng)建列表，步驟如下。（1）在頁面頭部添加下面的樣式定義代碼：（2）下面的代碼利用DIV標(biāo)記創(chuàng)建列表：下圖是列表的實(shí)際效果。要實(shí)現(xiàn)控制列表項(xiàng)長度的效果所用到的函數(shù)有：jQuery的ready()、each()、width()和CSS()函數(shù)。1．jQuery的width()函數(shù)——元素寬度該函數(shù)取得或者設(shè)置匹配元素當(dāng)前計算的寬度值（px）。其語法形式如下：語法一width()語法二width(val)2．jQuery的CSS()函數(shù)——元素的層疊樣式該函數(shù)取得或者設(shè)置匹配元素的層疊樣式。其語法形式如下：語法一CSS(name) //訪問第一個匹配元素的樣式屬性語法二CSS(properties) //把一個“名/值對”對象設(shè)置為所有匹配元素的樣式屬性語法三CSS(name,value|fn) //在所有匹配元素中，設(shè)置一個樣式的值，數(shù)字自動轉(zhuǎn)換為像素值3．功能實(shí)現(xiàn)控制列表項(xiàng)的寬度步驟如下：（1）需要利用jQuery的ready()函數(shù)來實(shí)現(xiàn)在頁面整體加載完成后執(zhí)行特效效果。（2）在function()內(nèi)部使用each()函數(shù)遍歷列表項(xiàng)。（3）判斷每一個列表項(xiàng)的整體寬度是否大于預(yù)定寬度。（4）如果大于，計算出列表項(xiàng)第一部分需要的長度并設(shè)置。（5）適當(dāng)調(diào)整每個列表項(xiàng)高度。首先，把jQuery庫引入進(jìn)來：<scriptsrc="jslib/jquery-1.6.min.js"type="text/javascript"></script>然后，添加Javascript代碼，利用jQuery的選擇器找出每個列表項(xiàng)，獲取需要的長度，并按照要求來進(jìn)行設(shè)置。下圖為應(yīng)用了jQuery調(diào)整列表項(xiàng)寬度后的效果。4.2控制列表項(xiàng)符號圖片本節(jié)將討論列表項(xiàng)符號的靈活運(yùn)用問題，主要是將原來死板的列表項(xiàng)符號用各種新穎的圖片來代替。以圖片代替原來的列表項(xiàng)符號，使列表看起來更美觀生動。4.2.1樣式死板的列表項(xiàng)符號在創(chuàng)建列表的時候，<UL>中有type屬性可以指定列表項(xiàng)符號樣式。但是，單純依靠該屬性指定列表項(xiàng)樣式的話效果過于單調(diào)死板。例如，下面這個靜態(tài)頁面。1<ulid="ulstyle">2 <li>jQuery是一個JavaScript庫。</li>3<li>jQuery極大地簡化了JavaScript編程。</li>4<li>jQuery很容易學(xué)習(xí)。</li>5<li>jQuery擁有供AJAX開發(fā)的豐富函數(shù)（方法）庫。</li>6</ul>其得到的結(jié)果如圖所示。4.2.2利用jQuery與CSS控制列表項(xiàng)符號圖片利用jQuery與CSS控制列表項(xiàng)符號圖片的原理是：利用jQuery為每個列表項(xiàng)動態(tài)加載CSS樣式背景圖片，并把原有的列表項(xiàng)標(biāo)號隱藏。其中，使用到j(luò)Query的addClass()函數(shù)。1．jQuery的addClass()函數(shù)——添加樣式類選擇該函數(shù)為每個匹配的元素添加指定的類名。其語法形式如下：

addClass(class|fn)2．功能實(shí)現(xiàn)控制列表項(xiàng)的圖片符號步驟如下。（1）添加含有指定背景圖片的CSS樣式類。（2）需要利用jQuery的ready()函數(shù)來實(shí)現(xiàn)在頁面整體加載完成后執(zhí)行特效效果。（3）在function()內(nèi)部使用each()函數(shù)遍歷列表項(xiàng)。（4）為每一個列表項(xiàng)添加CSS樣式類。首先，加入CSS樣式類定義然后，把jQuery庫引入進(jìn)來：<scriptsrc="jslib/jquery-1.6.min.js"type="text/javascript"></script>最后，添加Javascript代碼，利用jQuery的選擇器找出每個列表項(xiàng)，并將CSS類添加到列表項(xiàng)上。下圖是最后顯示的效果。4.3列表項(xiàng)的滾動使用jQuery產(chǎn)生滾動列表的原理是：隱藏與添加這么兩個動作。即首先需要取得列表的滾動區(qū)間，然后獲取滾動內(nèi)容的第一列表項(xiàng)并隱藏第一列表項(xiàng)，將隱藏的第一列表項(xiàng)添加到整個列表結(jié)尾。其中，使用到j(luò)Query的hover()、find()、height()、animate()、appendTo()、trigger()函數(shù)以及:first屬性、mouseleave事件和Javascript的clearInterval()、setInterval()函數(shù)，如表所示。（1）jQuery的animate()函數(shù)——自定義動畫該函數(shù)負(fù)責(zé)創(chuàng)建自定義動畫。其語法形式如下：語法形式一animate(params,option)語法形式二animate(params,[duration],[easing],[fn])（2）jQuery的屬性:first——獲取第一個子元素該屬性獲取當(dāng)前匹配元素的第一個子元素。其語法形式如下：Selector:first（3）Javascript函數(shù)setInterval()——設(shè)定一定時間間隔調(diào)用函數(shù)該函數(shù)將不停地按照指定的周期調(diào)用函數(shù)或者表達(dá)式，直到窗口關(guān)閉或者調(diào)用了clearInterval()函數(shù)。其語法形式如下：setInterval(fn,millsecond)1．功能實(shí)現(xiàn)實(shí)現(xiàn)列表項(xiàng)滾動的步驟如下。（1）取得整個列表的滾動區(qū)間。（2）使用jQuery的hover()函數(shù)分別響應(yīng)鼠標(biāo)的懸停與離開事件。（3）在鼠標(biāo)的懸停時間中獲取滾動內(nèi)容的第一列表項(xiàng)并隱藏第一列表項(xiàng)，將隱藏的第一列表項(xiàng)添加到整個列表結(jié)尾。（4）設(shè)定滾動間隔，及滾動過程中動畫持續(xù)時間。首先，加入CSS樣式定義：1<styletype="text/CSS">2ul.scrollline{height:90px;}3</style>然后，把jQuery庫引入進(jìn)來：<scriptsrc="jslib/jquery-1.6.min.js"type="text/javascript"></script>最后，添加完整代碼。4.4圖片列表圖片是網(wǎng)頁中傳達(dá)信息的基本元素，也是設(shè)計網(wǎng)頁時最常用到的信息表現(xiàn)形式。但是，在頁面布局中圖片的擺放與排列卻是很讓人頭疼的問題。本節(jié)主要介紹使用jQuery控制圖片以列表形式規(guī)則擺放。4.4.1大小不一的圖片不規(guī)則排列如果單純依靠<li>和<img>標(biāo)記來擺放圖片的話，實(shí)現(xiàn)圖片大小統(tǒng)一并規(guī)則擺放是件很麻煩的事情。具體效果如圖所示。4.4.2利用jQuery控制圖片列表利用jQuery控制圖片列表的原理是：為每張圖片設(shè)定一個相同大小的顯示區(qū)域，并把這些顯示區(qū)域通過列表的形式規(guī)則擺放。其中使用到j(luò)Query的ready()、each()函數(shù)和Javascript對象屬性style。1．Javascript對象屬性：style——CSS屬性該屬性獲取或者設(shè)置匹配的標(biāo)簽的CSS屬性。其語法形式如下：object.style2．功能實(shí)現(xiàn)實(shí)現(xiàn)圖片列表步驟如下。（1）通過設(shè)定圖片在列表中排列的格式。（2）通過jQuery選擇器及函數(shù)獲取每一個圖片元素對象。（3）為每一個圖片元素對象設(shè)定一定尺寸。首先，加入CSS樣式定義。然后，把jQuery庫引入進(jìn)來：<scriptsrc="jslib/jquery-1.6.js"type="text/javascript"></script>并對原來的列表的代碼部分進(jìn)行修改。最后，添加完整代碼下圖是最后顯示的效果。4.5列表的顯示與收縮本節(jié)主要介紹列表的顯示與收縮。在很多網(wǎng)站中都會出現(xiàn)類似的網(wǎng)頁特效，即：頁面加載完成后，某一部分只顯示大的標(biāo)題。當(dāng)把鼠標(biāo)移動到標(biāo)題上時，會在標(biāo)題下動態(tài)出現(xiàn)列表信息項(xiàng)。例如，網(wǎng)站信息，產(chǎn)品分類說明等都可以使用這種效果。4.5.1占用頁面空間的靜態(tài)列表當(dāng)需要對頁面中的某些信息分項(xiàng)描述時，列表是最有效的手段。但是，在靜態(tài)頁面中過分使用列表會占用大量空間，而且不易布局，影響頁面美觀。這種通過HTML標(biāo)記產(chǎn)生的靜態(tài)頁面如圖所示。4.5.2利用jQuery動態(tài)控制列表內(nèi)容展開與收縮利用jQuery動態(tài)控制列表內(nèi)容展開與收縮的原理是：通過jQuery的滑動效果函數(shù)將原本隱藏的列表內(nèi)容滑動顯示或者將原本顯示的列表內(nèi)容滑動隱藏。其中使用到的jQuery的函數(shù)有：ready()、hover()、toggle()、slideDown()、slideUp()函數(shù)。1．jQuery函數(shù)介紹（1）jQuery的toggle()函數(shù)——事件切換該函數(shù)每次單擊后依次調(diào)用函數(shù)。其語法形式如下：toggle(fn1,fn2,[fn3,fun4,…])（2）jQuery的slideDown()函數(shù)——向下滑動該函數(shù)通過高度變化（向下增大）來動態(tài)地顯示所有匹配的元素，在顯示完成后可選地觸發(fā)一個回調(diào)函數(shù)。其語法形式如下：slideDown(speed,[callback])（3）jQuery的slideUp()函數(shù)——向上滑動該函數(shù)通過高度變化（向上減?。﹣韯討B(tài)地隱藏所有匹配的元素，在隱藏完成后可選地觸發(fā)一個回調(diào)函數(shù)。其語法形式如下：slideUp(speed,[callback])2．功能實(shí)現(xiàn)實(shí)現(xiàn)列表內(nèi)容展開與收縮的步驟如下：（1）選定需要動態(tài)觸發(fā)隱藏與顯示列表內(nèi)容的事件，hover()事件或者toggle()事件。（2）在事件中編寫隱藏與顯示的具體動作，并設(shè)置動作持續(xù)時間。首先，把jQuery庫引入進(jìn)來：<scriptlanguage="javascript"src="jslib/jquery-1.6.js"></script>然后添加完整代碼。當(dāng)頁面加載完畢時，效果如圖所示。4.6列表項(xiàng)動態(tài)排序本節(jié)主要介紹如何通過jQuery在客戶端實(shí)現(xiàn)對無序列表項(xiàng)排序。這種做法雖然不是應(yīng)用廣泛，但是就從減輕服務(wù)器負(fù)載的角度來看還是有其優(yōu)點(diǎn)的。4.6.1構(gòu)建一個無序列表首先創(chuàng)建一個無序列表，代碼如下。1<ulclass="orderobj">2<li>Tom</li>3<li>Snoopy</li>4<li>Jerry</li>5<li>Micky</li>6</ul>效果如圖所示。4.6.2利用jQuery對無序列表排序利用jQuery對無序列表排序的原理是：獲取到無序列表中的所有列表項(xiàng)，并轉(zhuǎn)成數(shù)組形式，使用Javascript函數(shù)對其進(jìn)行排序后再次輸出。其中使用到的jQuery函數(shù)ready()、get()、text()、each()、append()和Javascript函數(shù)sort()。1．jQuery函數(shù)介紹（1）jQuery函數(shù)get()——獲取匹配元素集合該函數(shù)取得所有匹配元素的一種向后兼容的方式（不同于jQuery對象，而實(shí)際上是元素數(shù)組）。其語法形式如下：object.get()（2）jQuery函數(shù)text()——獲取和設(shè)置元素內(nèi)容該函數(shù)獲取和設(shè)置匹配元素的文本內(nèi)容。其語法形式如下：object.te