單元8 設(shè)計(jì)內(nèi)容展開(kāi)與折疊類(lèi)網(wǎng)頁(yè)特效

單元8設(shè)計(jì)內(nèi)容展開(kāi)與折疊類(lèi)網(wǎng)頁(yè)特效JavaScript+jQuery網(wǎng)頁(yè)特效設(shè)計(jì)任務(wù)驅(qū)動(dòng)教程（第2版）名校名師精品系列教材人民郵電出版社學(xué)會(huì)設(shè)計(jì)內(nèi)容展開(kāi)與折疊類(lèi)網(wǎng)頁(yè)特效熟悉BOM（瀏覽器對(duì)象模型），掌握瀏覽器對(duì)象模型的層次結(jié)構(gòu)重點(diǎn)掌握window對(duì)象、document對(duì)象及其屬性和方法一般掌握screen對(duì)象、location對(duì)象、history對(duì)象和navigator對(duì)象等瀏覽器對(duì)象及其屬性和方法熟悉jQuery的尺寸方法教學(xué)目標(biāo)pedagogicalobjectives目錄導(dǎo)航任務(wù)8-1應(yīng)用jQuery的each()和hasClass()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-3應(yīng)用DOM的onclick事件和parentNode屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-5應(yīng)用jQuery的bind()和css()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-6應(yīng)用jQuery的next()和toggleClass()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-2應(yīng)用jQuery的toggle()和css()等方法實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容多層折疊與展開(kāi)特效任務(wù)8-4應(yīng)用JavaScript的getElementsByTagName()方法和className屬性設(shè)計(jì)

網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-7應(yīng)用DOM的getElementById()方法和className屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與

展開(kāi)特效任務(wù)8-8應(yīng)用jQuery的hover和click事件設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-9應(yīng)用jQuery的data()和animate()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-1應(yīng)用jQuery的each()和hasClass()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效網(wǎng)頁(yè)0801.html中可折疊與展開(kāi)的網(wǎng)頁(yè)內(nèi)容如圖1所示，單擊按鈕，即可折疊網(wǎng)頁(yè)內(nèi)容，單擊按鈕，即可展開(kāi)網(wǎng)頁(yè)內(nèi)容，如圖2所示。圖1圖2網(wǎng)頁(yè)0801.html中主要應(yīng)用的CSS代碼如表所示。序號(hào)程序代碼0102030405060708091011121314#refilter{width:207px;border:2pxsolid#ddd;}#refilter.item{background:#fff;position:relative}#refilter.itemh3{border-top:#ccc1pxdotted;background:#fafafa;overflow:hidden;cursor:pointer;序號(hào)程序代碼1516171819202122232425262728line-height:24px;height:24px;padding:3px6px3px36px;}#refilter.itemb{background:url(images/search01.jpg)no-repeatbackground-position:-78px-339px;}#refilter.itemb{margin-top:1px;left:10px;overflow:hidden;任務(wù)8-1應(yīng)用jQuery的each()和hasClass()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效序號(hào)程序代碼2930313233343536373839404142434445464748width:16px;cursor:pointer;position:absolute;top:7px;height:16px}#refilter.itemul{border-top:1pxdotted#ccc;display:none;overflow:hidden;zoom:1;padding:4px0px4px18px;}#refilter.hoverb{background-position:-61px-339px}#refilter.hoverul{display:block}任務(wù)8-1應(yīng)用jQuery的each()和hasClass()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效網(wǎng)頁(yè)0801.html中折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容對(duì)應(yīng)的HTML代碼如表所示。序號(hào)程序代碼01020304050607080910111213141516171819202122232425<divclass="wmain"><divclass="left"><divclass="m"id="refilter"><divclass="mt"><h2>所有類(lèi)目</h2></div><divclass="mc"><divclass="itemforehover"><h3><b></b>圖書(shū)<span>（28）</span></h3><ul><li><s></s>教材教輔<span>（19）</span></li><li><s></s>計(jì)算機(jī)與互聯(lián)網(wǎng)<span>（6）</span></li><li><sclass="tree-last"></s>藝術(shù)<span>（1）</span></li></ul></div><divclass="item"><h3><b></b>電子書(shū)<span>（1）</span></h3><ul><li><sclass="tree-last"></s>教材教輔<span>（1）</span></li></ul></div></div></div></div></div>任務(wù)8-1應(yīng)用jQuery的each()和hasClass()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效網(wǎng)頁(yè)0801.html中實(shí)現(xiàn)折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容特效的JavaScript代碼如表所示。序號(hào)程序代碼010203040506070809101112<scripttype="text/javascript">$("#refilter.itemh3").each(function(){$(this).click(function(){vare=$(this).parent();if(e.hasClass("hover")){e.removeClass("hover")}else{e.addClass("hover")}})});</script>目錄導(dǎo)航任務(wù)8-1應(yīng)用jQuery的each()和hasClass()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-3應(yīng)用DOM的onclick事件和parentNode屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-5應(yīng)用jQuery的bind()和css()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-6應(yīng)用jQuery的next()和toggleClass()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-2應(yīng)用jQuery的toggle()和css()等方法實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容多層折疊與展開(kāi)特效任務(wù)8-4應(yīng)用JavaScript的getElementsByTagName()方法和className屬性設(shè)計(jì)

網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-7應(yīng)用DOM的getElementById()方法和className屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與

展開(kāi)特效任務(wù)8-8應(yīng)用jQuery的hover和click事件設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-9應(yīng)用jQuery的data()和animate()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-2應(yīng)用jQuery的toggle()和css()等方法實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容多層折疊與展開(kāi)特效網(wǎng)頁(yè)0802.html中商品類(lèi)型的初始狀態(tài)如圖1所示。單擊“展開(kāi)”超鏈接，展開(kāi)商品類(lèi)型的第一層，如圖2所示。圖1網(wǎng)頁(yè)0802.html中商品類(lèi)型的初始狀態(tài)圖2展開(kāi)商品類(lèi)型的第一層單擊“展開(kāi)更多”超鏈接，展開(kāi)每一種商品分類(lèi)的全部?jī)?nèi)容，如圖3所示。圖3展開(kāi)每一種商品分類(lèi)的全部?jī)?nèi)容任務(wù)8-2應(yīng)用jQuery的toggle()和css()等方法實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容多層折疊與展開(kāi)特效網(wǎng)頁(yè)0801.html中實(shí)現(xiàn)折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容特效的JavaScript代碼如表所示。序號(hào)程序代碼0102030405060708091011121314151617181920212223<divid="z_index_201208"><divclass="z_product_nav"><aclass="qubu"href="">全部特賣(mài)</a><aclass=""href="">護(hù)膚<span>(632)</span></a><aclass=""href="">彩妝<span>(90)</span></a><aclass=""href="">香水<span>(72)</span></a><aclass=""href="">洗浴護(hù)體<span>(55)</span></a><aclass=""href="">美發(fā)護(hù)發(fā)<span>(22)</span></a><aclass=""href="">男士護(hù)理<span>(30)</span></a><aclass=""href="">精油芳療<span>(2)</span></a><aclass=""href="">美容工具<span>(7)</span></a><!--當(dāng)是全部時(shí)，顯示“展開(kāi)”--><aclass="zhankai"id="parentFilterPucker"onclick="showMore(this,'subFilterList’)”href="javascript:void(0)">展開(kāi)</a></div><divclass="clear"></div><divclass="z_product_nav_open"id="subFilterList"style="display:none;"><!--品牌篩選--><divclass="nav_open"><pclass="nav_open_tit"><aclass="nav_open_tit1">按品牌篩選</a><aclass="nav_open_tit2"href="">全部</a></p><pclass="nav_open_con"><aclass=""href="">玫琳凱</a><aclass=""href="">歐萊雅</a><aclass=""href="">美寶蓮</a><aclass=""href="">迪奧</a>任務(wù)8-2應(yīng)用jQuery的toggle()和css()等方法實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容多層折疊與展開(kāi)特效序號(hào)程序代碼2425262728293031323334353637383940414243444546<aclass=""href="">雅詩(shī)蘭黛</a><aclass=""href="">美體小鋪（進(jìn)口）</a><aclass=""href="">THEFACESHOP</a><aclass=""href="">謎尚</a><aclass=""href="">韓國(guó)SKINFOOD</a><aclass=""href="">蒙芭拉</a><aclass=""href="">查名</a><!--全部數(shù)據(jù)--><aclass="dis_brand"style="display:none"href=""isshow="false">娥佩蘭</a><aclass="dis_brand"style="display:none"href=""isshow="false">火烈鳥(niǎo)</a><aclass="dis_brand"style="display:none"href=""isshow="false">貝玲妃</a><aclass="dis_brand"style="display:none"href=""isshow="false">卡姿蘭</a></p><!--當(dāng)總數(shù)大于8時(shí)，才顯示“展開(kāi)更多”--><pclass="nav_open_open"><aclass="more"id="more_brand"onclick="showFilter(this,'dis_brand')"href="javascript:void(0)">展開(kāi)更多</a></p></div><!--分類(lèi)篩選--><divclass="nav_opennav_center"><pclass="nav_open_tit"><aclass="nav_open_tit1">按分類(lèi)篩選</a><aclass="nav_open_tit2"href="">全部</a></p><p>……</p><pclass="nav_open_open"><aclass="more"id="more_type"onclick="showFilter(this,'dis_type')"href="javascript:void(0)">展開(kāi)更多</a></p></div><!--功效篩選--><divclass="nav_open">任務(wù)8-2應(yīng)用jQuery的toggle()和css()等方法實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容多層折疊與展開(kāi)特效序號(hào)程序代碼474849505152535455<pclass="nav_open_tit"><aclass="nav_open_tit1">按功效篩選</a><aclass="nav_open_tit2"href="">全部</a></p><p>……</p><pclass="nav_open_open"><aclass="more"id="more_efficacy"onclick="showFilter(this,'dis_efficacy')"href="javascript:void(0)">展開(kāi)更多</a></p></div></div></div>網(wǎng)頁(yè)0802.html中實(shí)現(xiàn)多層折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容的JavaScript代碼如表所示。序號(hào)程序代碼010203040506070809101112//大類(lèi)目收起functionshowMore(me,id){vartxt=$(me).text();varcls=$(me).attr('class’);$("#"+id).toggle();if(txt=="展開(kāi)"){txt="收起";cls="shouqi";}elseif(txt=="收起"){任務(wù)8-2應(yīng)用jQuery的toggle()和css()等方法實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容多層折疊與展開(kāi)特效序號(hào)程序代碼131415161718192021222324252627282930313233343536txt="展開(kāi)";cls="zhankai";}$(me).text(txt);$(me).attr('class',cls);}//篩選項(xiàng)控制functionshowFilter(me,id){vartxt=$(me).text();$('.'+id).each(function(){if($(this).attr('isshow')=='true’){$(this).css('display','none’);$(this).attr('isshow','false’);txt="展開(kāi)更多";}else{$(this).css('display','block’);$(this).attr('isshow','true’);txt="收起更多";}});$(me).text(txt);}8.1BOM（瀏覽器對(duì)象模型）瀏覽器對(duì)象就是網(wǎng)頁(yè)瀏覽器本身各種實(shí)體元素在JavaScript代碼中的體現(xiàn)。使用瀏覽器對(duì)象可以與HTML文檔進(jìn)行交互，其作用是將相關(guān)元素組織起來(lái)，提供給程序設(shè)計(jì)人員使用，從而減輕編程工作量。當(dāng)打開(kāi)網(wǎng)頁(yè)時(shí)，首先看到瀏覽器窗口，即window對(duì)象，window對(duì)象指的是瀏覽器本身。瀏覽器會(huì)自動(dòng)創(chuàng)建文檔對(duì)象模型中的一些對(duì)象，這些對(duì)象存放了HTML頁(yè)面的屬性和其他相關(guān)信息。01OPTION瀏覽器對(duì)象模型的層次結(jié)構(gòu)8.1BOM（瀏覽器對(duì)象模型）JavaScript對(duì)象的層次結(jié)構(gòu)中，最頂層的對(duì)象是窗口對(duì)（window），它代表當(dāng)前的瀏覽器窗口。第1層次窗口對(duì)象window之下是地址（location）、屏幕（screen）、文檔（document）、歷史（history）、事件（event）等對(duì)象第2層次文檔對(duì)象之下包括鏈接（link）、圖像（image）、表單（form）、錨對(duì)象（anchor）、MIME類(lèi)型對(duì)象（mimeType）等對(duì)象第3層次表單對(duì)象之下包括文本框（text）、按鈕（button）、復(fù)選框（checkbox）、提交按鈕（submit）、單選按鈕（radio）等對(duì)象。第4層次8.1BOM（瀏覽器對(duì)象模型）window對(duì)象代表當(dāng)前窗口，是每一個(gè)已打開(kāi)的瀏覽器窗口的父對(duì)象，包含了document、navigator、location、history等子對(duì)象。所有瀏覽器都支持window對(duì)象，所有JavaScript全局對(duì)象、函數(shù)以及變量均自動(dòng)成為window對(duì)象的成員。甚至HTMLDOM的document也是window對(duì)象的屬性之一。window對(duì)象及其屬性和方法02OPTIONwindow.document.getElementById("demo");也可以寫(xiě)成以下形式。document.getElementById("demo");8.1BOM（瀏覽器對(duì)象模型）document對(duì)象代表當(dāng)前瀏覽器窗口中的文檔，使用它可以訪問(wèn)到文檔中的所有其他對(duì)象，如圖像、表單等。document對(duì)象及其屬性和方法03OPTIONall屬性：表示文檔中所有HTML標(biāo)記符的數(shù)組。bgColor屬性：用于獲取或設(shè)置網(wǎng)頁(yè)文檔的背景顏色。fgColor屬性：用于獲取或設(shè)置網(wǎng)頁(yè)文本顏色（前景色）。linkColor屬性：用于獲取或設(shè)置未單擊過(guò)的鏈接顏色。alinkColor屬性：用于獲取或設(shè)置激活鏈接的顏色。vlinkColor屬性：用于獲取或設(shè)置已單擊過(guò)鏈接的顏色。title屬性：用于獲取或設(shè)置網(wǎng)頁(yè)文檔的標(biāo)題，等價(jià)于HTML的<title>標(biāo)記。forms屬性：表示網(wǎng)頁(yè)文檔中所有表單的數(shù)組。write()方法：其功能是將字符或變量值輸出到窗口。close()方法：將窗口關(guān)閉。8.1BOM（瀏覽器對(duì)象模型）window.screen對(duì)象包含有關(guān)用戶(hù)屏幕的信息，window.screen對(duì)象在編寫(xiě)程序時(shí)可以不使用window這個(gè)前綴。screen對(duì)象及其屬性04OPTIONwidth和height屬性分別返回屏幕的最大寬度和高度，與屏幕分辨率對(duì)應(yīng)。availWidth屬性返回用戶(hù)屏幕可用工作區(qū)的寬度，單位為像素，其值為屏幕寬度減去界面特性，如窗口滾動(dòng)條的寬度。availHeight屬性返回用戶(hù)屏幕可用工作區(qū)的高度，單位為像素，其值為屏幕高度減去界面特性，如窗口任務(wù)欄的高度。8.1BOM（瀏覽器對(duì)象模型）location對(duì)象表示窗口中顯示的當(dāng)前網(wǎng)頁(yè)的URL，可以使用該對(duì)象讓瀏覽器打開(kāi)某網(wǎng)頁(yè)。window.location對(duì)象用于獲得當(dāng)前頁(yè)面的URL，并把瀏覽器重定向到新的頁(yè)面。window.location對(duì)象在編寫(xiě)時(shí)可不使用window這個(gè)前綴。location對(duì)象及其屬性和方法05OPTIONhostname屬性：返回Web主機(jī)的域名。path屬性：返回當(dāng)前頁(yè)面的路徑和文件名。port屬性：返回Web主機(jī)的端口（80或443）。protocol屬性：返回所使用的Web協(xié)議（網(wǎng)址中的http://或https://）。href屬性：設(shè)置或返回當(dāng)前頁(yè)面的URL。pathname屬性：返回URL的路徑名。assign()方法：加載新的文檔。reload()方法：重新加載當(dāng)前頁(yè)。8.1BOM（瀏覽器對(duì)象模型）history對(duì)象表示窗口中最近訪問(wèn)網(wǎng)頁(yè)的URL。window.history對(duì)象包含瀏覽器的歷史，window.history對(duì)象在編寫(xiě)程序時(shí)可不使用window這個(gè)前綴。為了保護(hù)用戶(hù)的隱私，對(duì)JavaScript訪問(wèn)該對(duì)象的方法做出了限制。history對(duì)象及其屬性和方法back()方法：加載歷史列表中的前一個(gè)URL，這與在瀏覽器中單擊“后退”按鈕相同。forward()方法：加載歷史列表中的下一個(gè)URL，這與在瀏覽器中單擊“前進(jìn)”按鈕相同。06OPTIONnavigator對(duì)象提供了瀏覽器環(huán)境的信息，包括瀏覽器的版本號(hào)、運(yùn)行的平臺(tái)等信息。window.navigator對(duì)象包含訪問(wèn)者瀏覽器的有關(guān)信息，window.navigator對(duì)象在編寫(xiě)時(shí)可不使用window這個(gè)前綴。navigator對(duì)象07OPTION8.2jQuery的尺寸方法通過(guò)jQuery處理元素和瀏覽器窗口的尺寸很容易，jQuery提供了多個(gè)處理尺寸的重要方法，頁(yè)面div元素的HTML代碼如下所示。<divid="div1"style="height:100px;width:300px;padding:10px;margin:3px;border:1pxsolidblue;background-color:lightblue;"></div>尺寸方法名稱(chēng)示例代碼代碼對(duì)應(yīng)的尺寸值width()$("#div1").width()300height()$("#div1").height()100innerWidth()$("#div1").innerWidth()320innerHeight()$("#div1").innerHeight()120outerWidth()$("#div1").outerWidth()322outerHeight()$("#div1").outerHeight()122outerWidth(true)$("#div1").outerWidth(true)328outerHeight(true)$("#div1").outerHeight(true)128目錄導(dǎo)航任務(wù)8-1應(yīng)用jQuery的each()和hasClass()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-3應(yīng)用DOM的onclick事件和parentNode屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-5應(yīng)用jQuery的bind()和css()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-6應(yīng)用jQuery的next()和toggleClass()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-2應(yīng)用jQuery的toggle()和css()等方法實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容多層折疊與展開(kāi)特效任務(wù)8-4應(yīng)用JavaScript的getElementsByTagName()方法和className屬性設(shè)計(jì)

網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-7應(yīng)用DOM的getElementById()方法和className屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與

展開(kāi)特效任務(wù)8-8應(yīng)用jQuery的hover和click事件設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-9應(yīng)用jQuery的data()和animate()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-3應(yīng)用DOM的onclick事件和parentNode屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效網(wǎng)頁(yè)0803.html中包含可折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容。單擊“收起”超鏈接，如圖1所示，折疊對(duì)應(yīng)的網(wǎng)頁(yè)內(nèi)容。單擊“展開(kāi)”超鏈接，如圖2所示，展開(kāi)對(duì)應(yīng)的網(wǎng)頁(yè)內(nèi)容。【任務(wù)描述】圖1在網(wǎng)頁(yè)0803.html中單擊“收起”超鏈接圖2在網(wǎng)頁(yè)0803.html中單擊“展開(kāi)”超鏈接任務(wù)8-3應(yīng)用DOM的onclick事件和parentNode屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效為每一個(gè)name屬性值為jHide的超鏈接設(shè)置觸發(fā)onclick事件時(shí)調(diào)用的無(wú)名函數(shù)。通過(guò)設(shè)置網(wǎng)頁(yè)元素的className屬性隱藏與顯示對(duì)應(yīng)的網(wǎng)頁(yè)元素，同時(shí)通過(guò)設(shè)置超鏈接的innerHTML屬性，動(dòng)態(tài)改變其文本內(nèi)容。【思路探析】【特效實(shí)現(xiàn)】網(wǎng)頁(yè)0803.html中折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容特效主要應(yīng)用的CSS代碼如所示。序號(hào)程序代碼010203040506.rankSB-cate.expAdldd{display:block;float:none;width:155px}.rankSB-cate.expA.dlA-hidedd{display:none}任務(wù)8-3應(yīng)用DOM的onclick事件和parentNode屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效網(wǎng)頁(yè)0803.html中折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容特效對(duì)應(yīng)的HTML代碼如表所示。序號(hào)程序代碼010203040506070809101112131415161718192021222324<divclass="sidebar"><divclass="modbrandOutmb10rankSB-cate"><divclass="modbrand"><divclass="thA"><spanclass="mark">筆記本電腦排行榜</span></div><divclass="tbA"><divclass="expA"><dlclass="dlAclearfix"><dt><i>關(guān)注最高</i><aclass="btn"href="javascript://"name="jHide">收起</a></dt><dd><ahref="">熱門(mén)筆記本電腦排行</a></dd><dd><ahref="">筆記本電腦品牌排行</a></dd><dd><ahref="">熱門(mén)筆記本電腦系列排行</a></dd><dd><ahref="">上升最快筆記本電腦排行</a></dd></dl><dlclass="dlAclearfix"><dt><i>熱門(mén)品牌</i><aclass="btn"href="javascript://"name="jHide">收起</a></dt><dd><ahref="">聯(lián)想筆記本電腦排行</a></dd><dd><ahref="">華碩筆記本電腦排行</a></dd><dd><ahref="">戴爾筆記本電腦排行</a></dd></dl></div>任務(wù)8-3應(yīng)用DOM的onclick事件和parentNode屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效網(wǎng)頁(yè)0803.html中實(shí)現(xiàn)折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容特效的JavaScript代碼如表所示。序號(hào)程序代碼25262728</div></div></div></div>序號(hào)程序代碼010203040506070809101112131415161718<script>(function(){varhides=document.getElementsByName("jHide");for(vari=0;i<hides.length;i++){hides[i].onclick=function(){varbox=this.parentNode.parentNode;if(box.className.indexOf("dlA-hide")<0){box.className+="dlA-hide";this.innerHTML="展開(kāi)"}else{box.className=box.className.replace(/dlA-hide/,"");this.innerHTML="收起"}};};})();</script>目錄導(dǎo)航任務(wù)8-1應(yīng)用jQuery的each()和hasClass()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-3應(yīng)用DOM的onclick事件和parentNode屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-5應(yīng)用jQuery的bind()和css()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-6應(yīng)用jQuery的next()和toggleClass()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-2應(yīng)用jQuery的toggle()和css()等方法實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容多層折疊與展開(kāi)特效任務(wù)8-4應(yīng)用JavaScript的getElementsByTagName()方法和className屬性設(shè)計(jì)

網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-7應(yīng)用DOM的getElementById()方法和className屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與

展開(kāi)特效任務(wù)8-8應(yīng)用jQuery的hover和click事件設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-9應(yīng)用jQuery的data()和animate()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-4應(yīng)用JavaScript的getElementsByTagName()方法和className屬性

設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效網(wǎng)頁(yè)0804.html中包含可折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容。單擊按鈕，如圖1所示，即可展開(kāi)對(duì)應(yīng)的網(wǎng)頁(yè)內(nèi)容。單擊按鈕，如圖2所示，即可隱藏對(duì)應(yīng)的網(wǎng)頁(yè)內(nèi)容?！救蝿?wù)描述】圖1在網(wǎng)頁(yè)0804.html中單擊“+”按鈕圖2在網(wǎng)頁(yè)0804.html中單擊“-”按鈕應(yīng)用jQuery的addClass()方法為網(wǎng)頁(yè)元素添加樣式類(lèi)，應(yīng)用jQuery的removeClass()方法為網(wǎng)頁(yè)元素移去樣式類(lèi)。應(yīng)用replace()方法，將字符串中的空白字符替換為1個(gè)空格字符，應(yīng)用split()方法，將字符串分割成字符串?dāng)?shù)組。應(yīng)用JavaScript的className屬性為網(wǎng)頁(yè)元素設(shè)置樣式類(lèi)?！舅悸诽轿觥咳蝿?wù)8-4應(yīng)用JavaScript的getElementsByTagName()方法和className屬性

設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效【特效實(shí)現(xiàn)】網(wǎng)頁(yè)0804.html中折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容特效主要應(yīng)用的CSS代碼如表所示。序號(hào)程序代碼01020304050607080910111213141516171819.sort_boxli.m.icon{display:inline-block;vertical-align:middle;float:right;background:url(images/sort_box_bg.png)no-repeat-16px-134px;width:14px;height:14px;margin-top:6px;cursor:pointer;}.sort_box.hover.m.icon{background-position:0-134px;}.sort_box.m.add{background-position:0-118px!important;}.sort_box.m.minu{background-position:-16px-134px!important;}.sort_boxli.show{display:block;}.sort_boxli{position:relative;}.sort_boxlia:hover{text-decoration:underline!important;}.sort_boxli.linka:hover{text-decoration:none!important;}.sort_box.hover.m{cursor:pointer!important;}.sort_boxli.link{margin:0;}任務(wù)8-4應(yīng)用JavaScript的getElementsByTagName()方法和className屬性

設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效網(wǎng)頁(yè)0804.html中折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容特效對(duì)應(yīng)的HTML代碼如表所示。序號(hào)程序代碼0102030405060708091011121314151617181920212223<divclass="spacer"></div><divid=""class="con"name="4030"><divid=""class="colaside"name="4031"><divid="component_78140"></div><divclass="sort_box"name=""><h3align="center">童裝童鞋</h3><ul><li><spanonclick="change(4009391,this)"class="m"name="C2"><spanclass="iconminu"></span></span><ahref=""class="t"title="套裝">套裝</a><divid="4009391"class="linkhide"name="C1"><span><ahref=""title="運(yùn)動(dòng)套裝">運(yùn)動(dòng)套裝</a></span><span><ahref=""title="內(nèi)衣套裝">內(nèi)衣套裝</a></span><span><ahref=""title="禮服套裝">禮服套裝</a></span><span><ahref=""title="其他">其他</a></span></div></li><li><spanclass="m"name="C2"><spanclass="iconadd"></span></span>任務(wù)8-4應(yīng)用JavaScript的getElementsByTagName()方法和className屬性

設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效序號(hào)程序代碼242526272829<ahref=""class="t"title="親子裝">親子裝</a></li></ul></div></div></div>網(wǎng)頁(yè)0804.html中折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容特效主要應(yīng)用的CSS代碼如表所示。序號(hào)程序代碼0102030405060708091011<scripttype="text/javascript">$('.sort_boxli.m').hover(function(){$(this).parent().addClass('hover’);},function(){$(this).parent().removeClass('hover’);});functionchange(id,node){vard=document.getElementById(id);varchildNode=node.getElementsByTagName('span’);node=childNode[0];varc=node.className;序號(hào)程序代碼1213141516171819202122c=c.replace(/\s+/ig,'‘);varcList=c.split('‘);if(cList[1]=='add’){node.className='iconminu’;d.className='linkhide’;}else{node.className='iconadd’;d.className='linkshow’;}}</script>目錄導(dǎo)航任務(wù)8-1應(yīng)用jQuery的each()和hasClass()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-3應(yīng)用DOM的onclick事件和parentNode屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-5應(yīng)用jQuery的bind()和css()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-6應(yīng)用jQuery的next()和toggleClass()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-2應(yīng)用jQuery的toggle()和css()等方法實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容多層折疊與展開(kāi)特效任務(wù)8-4應(yīng)用JavaScript的getElementsByTagName()方法和className屬性設(shè)計(jì)

網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-7應(yīng)用DOM的getElementById()方法和className屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與

展開(kāi)特效任務(wù)8-8應(yīng)用jQuery的hover和click事件設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-9應(yīng)用jQuery的data()和animate()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-5應(yīng)用jQuery的bind()和css()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效網(wǎng)頁(yè)0805.html中包含可折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容。單擊“展開(kāi)”超鏈接，如圖1所示，展開(kāi)隱藏的網(wǎng)頁(yè)內(nèi)容。此時(shí)單擊“收起”超鏈接，如圖2所示，會(huì)折疊部分網(wǎng)頁(yè)內(nèi)容?！救蝿?wù)描述】圖1在網(wǎng)頁(yè)0805.html中單擊“展開(kāi)”超鏈接圖2在網(wǎng)頁(yè)0805.html中單擊“隱藏”超鏈接任務(wù)8-5應(yīng)用jQuery的bind()和css()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效應(yīng)用offset()方法的top屬性獲取對(duì)應(yīng)網(wǎng)頁(yè)元素的縱向坐標(biāo)，通過(guò)2個(gè)元素縱向坐標(biāo)的差值計(jì)算高度。當(dāng)商品品牌名稱(chēng)超過(guò)5行時(shí)，設(shè)置類(lèi)樣式名稱(chēng)為“allbrand”的網(wǎng)頁(yè)元素高度為指定值，并且顯示“展開(kāi)”超鏈接，同時(shí)將該超鏈接的click事件與自定義函數(shù)togglebrand()進(jìn)行綁定。自定義函數(shù)togglebrand()用于展開(kāi)與折疊網(wǎng)頁(yè)內(nèi)容?！舅悸诽轿觥俊咎匦?shí)現(xiàn)】網(wǎng)頁(yè)0805.html中折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容特效主要應(yīng)用的CSS代碼如表所示。序號(hào)程序代碼0102030405060708091011.filtrate_box.list.height{overflow:hidden;height:18px;margin-bottom:4px;padding-bottom:0;}.filtrate_box.list.brand_height{overflow:hidden;height:24px;margin-bottom:4px;序號(hào)程序代碼1213141516171819padding-bottom:0;}.filtrate_box.list.brand_opt.btn_b{background:url(images/arrow_t.png)no-repeat02px;}.filtrate_box.list.brand_opt.hover{background-position:0-20px;}任務(wù)8-5應(yīng)用jQuery的bind()和css()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效網(wǎng)頁(yè)0805.html中折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容特效主要應(yīng)用的CSS代碼如表所示。序號(hào)程序代碼01020304050607080910111213141516171819202122232425<divclass="filtrate_box"name=""><divclass="head"><h3>商品篩選：</h3><divclass="opt_list"style=""><ul><liclass="all_sort"><spanclass="tt">童裝童鞋</span></li></ul></div></div><dlclass="list"><dtclass=“brand_t”style=“”><b>品牌：</b><ahref=“#”class=“redall”>全</a></dt><ddclass="brand_optbrand_heightallbrand"style=""><span><aname="brand"class=""title="巴拉巴拉"href="#">巴拉巴拉</a></span><span><aname="brand"class=""title="笛莎"href="#">笛莎</a></span><span><aname="brand"class=""title="愛(ài)·制造"href="#">愛(ài)·制造</a></span><span><aname="brand"class=""title="安奈兒"href="#">安奈兒</a></span><span><aname="brand"class=""title="小豬班納"href="#">小豬班納</a></span><span><aname="brand"class=""title="馬拉丁"href="#">馬拉丁</a></span>……<span><aname="brand"class=""title="瓢蟲(chóng)之家"href="#">瓢蟲(chóng)之家</a></span><span><aname="brand"class=""title="belbaby"href="#">belbaby</a></span><spanclass="button"style="display:none;"id="tjbtn">展開(kāi)</span></dd></dl></div>任務(wù)8-5應(yīng)用jQuery的bind()和css()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效網(wǎng)頁(yè)0805.html中實(shí)現(xiàn)折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容特效對(duì)應(yīng)的JavaScript代碼如表所示。序號(hào)程序代碼0102030405060708091011121314151617181920212223242526<scripttype="text/javascript">varfilter_brand_height=64;$(function(){varbrand_top=$('.allbrand').offset().top;varbrand_bottom=$('.brand_bottom').offset().top;if(brand_bottom-brand_top<filter_brand_height){//全部品牌未超過(guò)5行$('.allbrand').removeClass('brand_height');}else{$(".allbrand").css("height",filter_brand_height);$('#tjbtn').show();$('#tjbtn').bind("click",togglebrand);}});functiontogglebrand(){if($('.allbrand').hasClass('brand_height')){$('.allbrand').css("height","");$('.allbrand').removeClass('brand_height’);$('#tjbtn').addClass("btn_b");$('#tjbtn').html('收起');}else{$('.allbrand').addClass('brand_height’);$('#tjbtn').removeClass("btn_b");$(".allbrand").css("height",filter_brand_height);$('#tjbtn').html('展開(kāi)');}}</script>目錄導(dǎo)航任務(wù)8-1應(yīng)用jQuery的each()和hasClass()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-3應(yīng)用DOM的onclick事件和parentNode屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-5應(yīng)用jQuery的bind()和css()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-6應(yīng)用jQuery的next()和toggleClass()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-2應(yīng)用jQuery的toggle()和css()等方法實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容多層折疊與展開(kāi)特效任務(wù)8-4應(yīng)用JavaScript的getElementsByTagName()方法和className屬性設(shè)計(jì)

網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-7應(yīng)用DOM的getElementById()方法和className屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與

展開(kāi)特效任務(wù)8-8應(yīng)用jQuery的hover和click事件設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-9應(yīng)用jQuery的data()和animate()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效任務(wù)8-6應(yīng)用jQuery的next()和toggleClass()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與

展開(kāi)特效網(wǎng)頁(yè)0806.html中折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)如圖1所示，單擊超鏈接則顯示對(duì)應(yīng)的網(wǎng)頁(yè)內(nèi)容，如圖2所示?！救蝿?wù)描述】圖1網(wǎng)頁(yè)0806.html中折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容特效的初始狀態(tài)圖2在網(wǎng)頁(yè)0806.html中單擊超鏈接顯示對(duì)應(yīng)的網(wǎng)頁(yè)內(nèi)容應(yīng)用is()方法判斷所單擊的網(wǎng)頁(yè)元素當(dāng)前是否處于隱藏（:hidden）狀態(tài)。應(yīng)用slideUp()方法滑動(dòng)隱藏被選元素，應(yīng)用slideDown()方法滑動(dòng)顯示被選元素。應(yīng)用toggleClass()方法從匹配的元素中添加或刪除一個(gè)樣式類(lèi)?！舅悸诽轿觥咳蝿?wù)8-6應(yīng)用jQuery的next()和toggleClass()等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與

展開(kāi)特效【特效實(shí)現(xiàn)】網(wǎng)頁(yè)0806.html中折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容特效對(duì)應(yīng)的HTML代碼如表所示。序號(hào)程序代碼0102030405060708091011121314151617181920<divclass="container"><h2class="acc_trigger"><ahref="#">WebDesign&Development</a></h2><divclass="acc_container"><divclass="block"><h3>NeedaWebsite?</h3></div></div><h2class="acc_trigger"><ahref="#">L