《網(wǎng)站前端技術(shù)》621-7（梁玲）課件 第五章 JQuery常用函數(shù)_第1頁
《網(wǎng)站前端技術(shù)》621-7（梁玲）課件 第五章 JQuery常用函數(shù)_第2頁
《網(wǎng)站前端技術(shù)》621-7（梁玲）課件 第五章 JQuery常用函數(shù)_第3頁
《網(wǎng)站前端技術(shù)》621-7（梁玲）課件 第五章 JQuery常用函數(shù)_第4頁
《網(wǎng)站前端技術(shù)》621-7（梁玲）課件 第五章 JQuery常用函數(shù)_第5頁
已閱讀5頁，還剩65頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

《網(wǎng)站前端技術(shù)》簽到掃碼下載文旌課堂APP掃碼簽到（2022.3.2515:00至2022.3.2515:10）簽到方式教師通過“文旌課堂APP”生成簽到二維碼，并設(shè)置簽到時(shí)間，學(xué)生通過“文旌課堂APP”掃描“簽到二維碼”進(jìn)行簽到。。全課導(dǎo)航第1章網(wǎng)站建設(shè)概述第2章HTML與HTML5第3章CSS與CSS3第4章JavaScript基礎(chǔ)第5章JQuery常用函數(shù)第6章開發(fā)者商務(wù)網(wǎng)站建設(shè)05PARTONE

第5章JQuery常用函數(shù)01*12掌握J(rèn)Query捕獲及創(chuàng)建HTML。掌握J(rèn)Query獲取及設(shè)置元素內(nèi)容、文本、屬性。掌握J(rèn)Query設(shè)置HTML元素的CSS樣式。掌握J(rèn)Query刪除、查找、克隆元素。熟悉JQuery常用事件及典型案例。掌握J(rèn)Query的基本使用方法，加強(qiáng)學(xué)生的網(wǎng)頁設(shè)計(jì)能力。制作輪播圖，鍛煉學(xué)生的實(shí)踐能力，培養(yǎng)學(xué)生的探究精神。學(xué)習(xí)目標(biāo)素質(zhì)目標(biāo)學(xué)習(xí)目標(biāo)目錄CONTNETS本章導(dǎo)航6

綜合案例——輪播圖JQuery設(shè)置HTML元素CSS樣式0305JQuery常用事件及典型案例JQuery捕獲及創(chuàng)建HTML元素01JQuery設(shè)置及獲取HTML相關(guān)內(nèi)容或?qū)傩?2JQuery刪除、查找及克隆元素0401*01JQuery捕獲及創(chuàng)建HTML元素01*5.1JQuery捕獲及創(chuàng)建HTML元素JQuery的基本使用JQuery能夠捕獲HTML元素，其中的捕獲機(jī)制與在CSS中使用選擇器匹配元素相同。此外，JQuery還能創(chuàng)建元素，其創(chuàng)建方式與捕獲元素相同，都是使用方法$()。$()方法“()”中通常使用字符串參數(shù)，參數(shù)包括HTML標(biāo)簽與CSS選擇器等。01*5.1.1捕獲元素在JQuery中捕獲元素時(shí)，捕獲不同元素的$()方法，“()”中字符串參數(shù)是不同的。根據(jù)id名稱捕獲HTML元素的語法格式如下：$("#id名稱")例如，捕獲id名稱為A的元素，代碼如下：$("#A")根據(jù)類名捕獲HTML元素的語法格式如下：$(".類名")例如，捕獲類名為B的元素，代碼如下：$(".B")根據(jù)標(biāo)簽名稱捕獲HTML元素的語法格式如下：$("標(biāo)簽名稱")例如，捕獲所有div元素，代碼如下：$("div")根據(jù)屬性捕獲HTML元素的語法格式與CSS中的屬性選擇器類似，包括以下幾種。（1）$("[屬性名]")：捕獲所有具有指定屬性的元素，不管屬性值是什么。（2）$("[屬性名='值']")：捕獲屬性為指定值的元素。（3）$("[屬性名^='值']")：捕獲屬性以值開頭的元素。（4）$("[屬性名$='值']")：捕獲屬性以值結(jié)尾的元素。（5）$("[屬性名*='值']")：捕獲屬性包含值的元素。01*【示例5-1-1】

在HTML文檔頭部添加<script>標(biāo)簽，編輯代碼如下：<script> $(function(){ $("div[class='p1']").css({ "border":"5pxgroovered" }); })</script>【效果】捕獲class屬性值為p1的所有div元素，并設(shè)置其邊框?qū)傩浴?.1.1捕獲元素01*高手點(diǎn)撥

“$(selector).css();”表示為捕獲的元素設(shè)置CSS樣式。01*【示例5-1-2】

在HTML文檔頭部添加<script>標(biāo)簽，編輯代碼如下：<script> $(function(){ $("div[class*='o']").css({ "background":"lightyellow" }); })</script>【效果】捕獲class屬性值包含字符o的所有div元素，并設(shè)置其背景顏色。5.1.1捕獲元素01*5.1.1捕獲元素根據(jù)元素的位置捕獲HTML元素，其語法格式與CSS中的偽元素類似，包括以下幾種。（1）$("selector:first")：捕獲第一個(gè)元素。（2）$("selector:last")：捕獲最后一個(gè)元素。（3）$("selector:odd")：捕獲索引值為奇數(shù)的元素。（4）$("selector:even")：捕獲索引值為偶數(shù)的元素。（5）$("selector:eq(n)")：捕獲索引值為n元素。（6）$("selector:gt(n)")：捕獲索引值大于n元素。（7）$("selector:lt(n)")：捕獲索引值小于n元素。【示例5-1-3】

在HTML文檔頭部添加<script>標(biāo)簽，編輯代碼如下：<script> $(function(){ $("tr:odd").css({ "background":"lightblue" }); })</script>【效果】捕獲表格中所有奇數(shù)行，并設(shè)置其背景色。01*【示例5-1-4】

在HTML文檔頭部添加<script>標(biāo)簽，編輯代碼如下：<script> $(function(){ $(".menu:first").css({ "color":"red" }); })</script>【效果】捕獲第一個(gè)類名為menu的元素，并設(shè)置其文本顏色。5.1.1捕獲元素01*5.1.1捕獲元素根據(jù)后代選擇器捕獲HTML元素，其語法格式與CSS中的后代選擇器類似，代碼如下：$("選擇器1選擇器2")【示例5-1-5】

在HTML文檔頭部添加<script>標(biāo)簽，編輯代碼如下：【示例5-1-5】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <ulid="zhixia"class="first">直轄市 <li>北京</li> <li>天津</li> <li>上海</li> <li>重慶</li> </ul>01*5.1.1捕獲元素<ulid="huabei"class="first">華北地區(qū) <li>內(nèi)蒙古</li> <li>河北</li> <li>山西<br> <ul> <li>太原</li> <li>大同</li> <li>運(yùn)城</li> </ul> </li> </ul>

01*5.1.1捕獲元素

<ulid="huanan"class="first">華南地區(qū) <li>香港</li> <li>澳門</li> <li>廣東<br/> <ul> <li>廣州</li> <li>深圳</li> <li>珠海</li> </ul> </li> </ul></body>01*5.1.1捕獲元素在文檔頭部添加<style>標(biāo)簽與<script>標(biāo)簽，編輯代碼如下：<style> .first{ width:200px; height:auto; float:left; margin-left:30px; }</style><script> $(function(){ $("#huabeili").css({ "margin-top":"10px" }) })</script>01*5.1.1捕獲元素【效果】捕獲id屬性值為huabei的元素，為其所有后代元素中的li元素設(shè)置10px的頂端外邊距，如圖5-1-1所示。圖5-1-1后代選擇器示例運(yùn)行結(jié)果

根據(jù)子代選擇器捕獲HTML元素，其語法格式與CSS中的子代選擇器類似，代碼如下：$("選擇器1>選擇器2")【示例5-1-6】將【示例5-1-5】中的<script>標(biāo)簽代碼修改為：<script> $(function(){ $("#huabei>li").css({ "margin-top":"10px" }); })</script>01*5.1.1捕獲元素【效果】捕獲id屬性值為huabei的ul元素，為其直接子元素中的li元素設(shè)置10px的頂端外邊距，而二層子元素的頂端外邊距不變，如圖5-1-2所示。圖5-1-2子代選擇器示例運(yùn)行結(jié)果01*5.1.2

創(chuàng)建HTML元素使用JQuery創(chuàng)建HTML元素的語法格式如下：varHTML元素對(duì)象名稱=$("HTML標(biāo)簽代碼");【示例5-1-7】在HTML文檔頭部添加<script>標(biāo)簽，編輯代碼如下：<script> $(function(){ varbox=$("<divclass='box'></div>"); box.appendTo('body'); })</script>【效果】創(chuàng)建一個(gè)類名為box的div元素。01*高手點(diǎn)撥

使用JQuery創(chuàng)建HTML元素之后，還必須編輯追加元素對(duì)象的代碼才能將其添加到頁面流中，追加方法將在5.4.4節(jié)中詳細(xì)介紹。01*5.1.3

獲取同類名元素的下標(biāo)值

使用JQuery函數(shù)可以非常方便地獲取當(dāng)前被訪問元素在同一類名元素中的下標(biāo)值，能夠大大提高選項(xiàng)卡這類交互效果的效率，其語法格式如下：varindex=$(this).index(".類名");【示例5-1-8】在HTML文檔<body>標(biāo)簽內(nèi)添加6個(gè)類名為select-title的div元素，并設(shè)置基本樣式。然后在HTML文檔頭部添加<script>標(biāo)簽，編輯代碼如下：<script> $(function(){ $(".select-title").click(function(){ varindex=$(this).index(".select-title"); alert(index); }); })</script>【效果】當(dāng)單擊類名為select-title的元素時(shí)，獲得當(dāng)前元素在所有同類名元素中的下標(biāo)并將其彈出。此下標(biāo)值從0開始計(jì)算，即單擊第3個(gè)元素時(shí)，彈出的內(nèi)容為2。01*高手點(diǎn)撥

（1）click()是JQuery中的鼠標(biāo)事件函數(shù)，鼠標(biāo)單擊對(duì)應(yīng)元素后，即會(huì)執(zhí)行其中設(shè)置的事件代碼。（2）alert()能夠彈出一個(gè)帶有指定消息和確定按鈕的警告框，該消息可以是字符串，也可以是通過JQuery獲取的內(nèi)容。02*02JQuery設(shè)置及獲取HTML相關(guān)內(nèi)容或?qū)傩?2*5.2.1

設(shè)置及獲取文本text()將HTML元素的文本設(shè)置為指定字符串的語法格式如下：元素對(duì)象.text("字符串");【示例5-2-1】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <divid="box"> <span>我的中國(guó)心</span> </div></body>在HTML文檔頭部添加<script>標(biāo)簽，編輯代碼如下：<script> $(function(){ varbox=$("#box"); box.text("我的愛國(guó)心"); })</script>【效果】id屬性值為box的div元素文本被修改為“我的愛國(guó)心”。02*5.2.1

設(shè)置及獲取文本text()獲取HTML元素文本的語法格式如下：元素對(duì)象.text()；【示例5-2-2】將【示例5-2-1】中<script>標(biāo)簽修改為如下代碼：<script> $(function(){ varbox=$("#box"); alert(box.text()); })</script>【效果】彈出警告框，顯示id屬性值為box的div元素文本，即“我的中國(guó)心”。02*5.2.2

設(shè)置及獲取內(nèi)容html()使用html()設(shè)置HTML元素文本的語法格式如下：元素對(duì)象.html("字符串");【示例5-2-3】將【示例5-2-1】中<script>標(biāo)簽修改為如下代碼：<script> $(function(){ varbox=$("#box"); box.html("我的愛國(guó)心"); })</script>【效果】與示例5-2-1效果相同。html()與text()類似，都可以設(shè)置HTML元素的文本，但它們?cè)讷@取內(nèi)容時(shí)功能有所區(qū)別。text()只能獲取文本，而html()能夠獲取所有HTML內(nèi)容。02*5.2.2

設(shè)置及獲取內(nèi)容html()使用html()獲取HTML元素HTML內(nèi)容的語法格式如下：元素對(duì)象.html()【示例5-2-3】將【示例5-2-1】中<script>標(biāo)簽修改為如下代碼：<script> $(function(){ varbox=$("#box"); alert(box.html()); })</script>【效果】彈出警告框，顯示id屬性值為box的div元素的HTML內(nèi)容，即“<span>我的中國(guó)心</span>”。02*5.2.3

設(shè)置及獲取屬性attr()attr()能夠?yàn)樵貙?duì)象設(shè)置屬性，也能夠獲取元素對(duì)象指定屬性的值為HTML元素設(shè)置屬性的語法格式如下：元素對(duì)象.attr("屬性名稱","屬性的值");【示例5-2-5】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <inputtype="text"name="userName"value="請(qǐng)輸入用戶名"id="input1"></body>在HTML文檔頭部添加<script>標(biāo)簽，編輯代碼如下：<script> $(function(){ varinput1=$("#input1"); input1.attr("type","password"); })</script>【效果】文本框的type屬性值被修改為password，即文本框中的文本以黑色圓點(diǎn)顯示。02*5.2.3

設(shè)置及獲取屬性attr()獲取HTML元素指定屬性值的語法格式如下：元素對(duì)象.attr("屬性名稱")【示例5-2-6】將【示例5-2-5】中<script>標(biāo)簽修改為如下代碼：<script> $(function(){ varinput1=$("#input1"); alert(input1.attr("type")); })</script>【效果】彈出警告框，顯示文本框的type屬性值，即“text”。02*5.2.4

設(shè)置及獲取窗口滾動(dòng)條頂端位置scrollTop()設(shè)置窗口滾動(dòng)條頂端位置的語法格式如下：$(window).scrollTop(數(shù)值);【示例5-2-7】在頁面中添加一個(gè)超過頁面大小的div元素，以顯示窗口滾動(dòng)條。在HTML文檔頭部添加<script>標(biāo)簽，編輯代碼如下：<script> $(function(){ $(window).scrollTop(300); })</script>【效果】頁面中的窗口滾動(dòng)條處于距離頁面頂端300px處。如果頁面的內(nèi)容超出了可視范圍，頁面會(huì)自動(dòng)顯示窗口滾動(dòng)條，用于滑動(dòng)屏幕瀏覽內(nèi)容。scrollTop()就是設(shè)置滾動(dòng)條位置的方法，它能夠設(shè)置及獲取豎向窗口滾動(dòng)條距離窗口頂端的位置02*5.2.4

設(shè)置及獲取窗口滾動(dòng)條頂端位置scrollTop()獲取窗口滾動(dòng)條頂端位置的語法格式如下：$(window).scrollTop();其中，獲取到的數(shù)值單位為px?！臼纠?-2-8】在頁面中添加一個(gè)超過頁面大小的div元素，以顯示窗口滾動(dòng)條。繼續(xù)在<body>標(biāo)簽中編輯如下代碼：<inputtype="button"value="頂端位置"onclick="alert($(window).scrollTop());">【效果】滾動(dòng)鼠標(biāo)移動(dòng)窗口滾動(dòng)條，單擊“頂端位置”按鈕，彈出警告框，顯示當(dāng)前窗口滾動(dòng)條頂端位置的數(shù)值。如果頁面的內(nèi)容超出了可視范圍，頁面會(huì)自動(dòng)顯示窗口滾動(dòng)條，用于滑動(dòng)屏幕瀏覽內(nèi)容。scrollTop()就是設(shè)置滾動(dòng)條位置的方法，它能夠設(shè)置及獲取豎向窗口滾動(dòng)條距離窗口頂端的位置02*5.2.5

獲取窗口寬度width()與高度height()獲取窗口寬度的語法格式如下：$(window).width();其中，獲取到的數(shù)值單位為px。獲取窗口高度的語法格式如下：$(window).height();其中，獲取到的數(shù)值單位為px。03*03JQuery設(shè)置HTML元素CSS樣式03*5.3.1

隱藏和顯示元素在JQuery中，隱藏和顯示元素的方法有很多種，使用這些方法的語法格式如下：元素對(duì)象.方法名稱();其中，常見的方法有以下9種。（1）隱藏元素hide()：隱藏指定的元素對(duì)象?！臼纠?-3-1】將【示例5-2-1】中<script>標(biāo)簽修改為如下代碼：<script> $(function(){ varbox=$("#box"); box.hide(); })</script>【效果】id屬性值為box的元素被隱藏。03*方法描述隱藏元素hide()隱藏指定的元素對(duì)象。顯示元素show()顯示指定元素對(duì)象淡入fadeIn()淡入指定元素對(duì)象。淡出fadeOut()淡出指定元素對(duì)象。淡入淡出切換fadeToggle()切換元素對(duì)象的淡入淡出效果。漸變到指定透明度fadeTo()元素對(duì)象按照指定時(shí)間曲線漸變?yōu)橹付ㄍ该鞫龋瓿珊髨?zhí)行callback回調(diào)函數(shù)。使用該方法的語法格式如下：$(selector).fadeTo(speed,opacity,callback);向下滑動(dòng)slideDown()向下滑動(dòng)指定元素對(duì)象。向下滑動(dòng)slideUp()向上滑動(dòng)指定元素對(duì)象。向上向下滑動(dòng)切換slideTogle()切換元素對(duì)象的向上向下滑動(dòng)效果。表5-3-1隱藏和顯示元素的方法5.3.1

隱藏和顯示元素03*5.3.1

設(shè)置HTML元素的CSS樣式css()方法設(shè)置HTML元素的CSS樣式，語法格式如下：元素對(duì)象.css({"屬性名稱1":"屬性值1","屬性名稱2":"屬性值2",…,"屬性名稱n":"屬性值n"});【示例5-3-2】將【示例5-2-1】中<script>標(biāo)簽修改為如下代碼：<script> $(function(){ varbox=$("#box"); box.css({ "width":"300px", "height":"200px", "background":"red" }); })</script>【效果】為id屬性值為box的元素設(shè)置CSS樣式。04*04JQuery刪除、查找及克隆元素04*5.4.1

刪除元素remove()使用remove()刪除元素，其語法格式如下：元素對(duì)象.remove();【示例5-4-1】將【示例5-2-1】中<script>標(biāo)簽修改為如下代碼：<script> $(function(){ varspan=$("span"); span.remove(); })</script>【效果】span元素的內(nèi)容被刪除。04*5.4.2

查找父元素parent()使用parent()查找父元素，其語法格式如下：元素對(duì)象.parent();【示例5-4-2】將【示例5-4-1】中<script>標(biāo)簽修改為如下代碼：<script> $(function(){ varspan=$("span"); alert(span.parent().html()); })</script>【效果】彈出警告框，顯示span元素父元素的HTML內(nèi)容，即“<span>我的中國(guó)心</span>”。04*5.4.3

查找子元素find()使用find()查找子元素，其語法格式如下：元素對(duì)象.find();【示例5-4-2】將【示例5-4-1】中<script>標(biāo)簽修改為如下代碼：<script> $(function(){ varbox=$("#box"); box.find("span").html("我的愛國(guó)心"); })</script>【效果】查找id屬性值為box的元素的子元素，將其中的span元素文本替換為“我的愛國(guó)心”。04*5.4.4

克隆元素clone()和追加元素appendTo()、append()在JQuery中含有一些方法可以克隆和追加元素。clone()用于克隆指定的元素對(duì)象，其語法格式如下：元素對(duì)象.clone();克隆元素之后還必須追加元素才能讓克隆出來的元素出現(xiàn)在頁面流中。小提示

appendTo()能夠?qū)⒁粋€(gè)元素對(duì)象作為子元素追加到另一個(gè)元素對(duì)象中，其語法格式如下：元素對(duì)象1.appendTo(元素對(duì)象2);其中，元素對(duì)象1作為子元素被追加到元素對(duì)象2中。append()能夠在一個(gè)元素對(duì)象中追加一個(gè)子元素，其語法格式如下：元素對(duì)象1.append(元素對(duì)象2);其中，元素對(duì)象2作為子元素被追加到元素對(duì)象1中。04*【效果】復(fù)制span元素并追加到id屬性值為box的元素內(nèi)部末尾，將其中的文本設(shè)置為“我的愛國(guó)心”，即顯示為“我的中國(guó)心我的愛國(guó)心”?！臼纠?-4-4】

將【示例5-4-3】中<script>標(biāo)簽修改為如下代碼：<script> $(function(){ varspan=$("span:eq(0)"); span.clone().appendTo("#box").html("我的愛國(guó)心"); })</script>5.4.4

克隆元素clone()和追加元素appendTo()、append()05*05JQuery常用事件及典型案例05*5.5

JQuery常用事件及典型案例JQuery有很多事件與JavaScript相匹配，下面介紹幾種常用的DOM元素事件和窗口監(jiān)聽事件。常用的DOM元素事件。使用DOM元素事件的語法格式如下：元素對(duì)象.事件名稱(function(){事件觸發(fā)行為});其中，常用的DOM元素事件有鼠標(biāo)單擊事件click()、鼠標(biāo)移至事件mouseover()、鼠標(biāo)移出事件mouseout()、獲取焦點(diǎn)事件focus()、失去焦點(diǎn)事件blur()等。常用的窗口監(jiān)聽事件。使用窗口監(jiān)聽事件的語法格式如下：$(window).事件名稱(function(){事件觸發(fā)行為});其中，常用的窗口監(jiān)聽事件有窗口滾動(dòng)事件scrollTop()、窗口尺寸變化事件resize()等。05*5.5.1

案例——選項(xiàng)卡效果【場(chǎng)景描述】選項(xiàng)卡效果應(yīng)用廣泛，在許多網(wǎng)頁中都能看到它的影子，它能夠?qū)⑼瑢蛹?jí)的內(nèi)容折疊在一起，使用更小的頁面空間展示更多的內(nèi)容，如圖5-5-1所示。圖5-5-1選項(xiàng)卡交互前后效果【思路分析】（1）設(shè)置所有的選項(xiàng)卡元素為同一個(gè)類名，所有的內(nèi)容元素為另一個(gè)相同的類名。（2）默認(rèn)凸顯第一個(gè)選項(xiàng)卡及相應(yīng)內(nèi)容。（3）在單擊其中一個(gè)選項(xiàng)卡時(shí)，獲取當(dāng)前選項(xiàng)卡在該類元素中的下標(biāo)index。同時(shí)，顯示第index個(gè)內(nèi)容元素并凸顯第index選項(xiàng)卡，隱藏其他內(nèi)容元素。05*5.5.1

案例——選項(xiàng)卡效果【實(shí)現(xiàn)步驟】小提示注意引入JQuery函數(shù)庫。1.編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <divclass="title">標(biāo)題一</div> <divclass="title">標(biāo)題二</div> <divclass="title">標(biāo)題三</div> <divclass="title">標(biāo)題四</div> <divclass="content">內(nèi)容一</div> <divclass="content">內(nèi)容二</div> <divclass="content">內(nèi)容三</div> <divclass="content">內(nèi)容四</div> </body>05*5.5.1

案例——選項(xiàng)卡效果2.設(shè)置選項(xiàng)卡元素與內(nèi)容元素的基本樣式。3.在相關(guān)聯(lián)的JS文件中輸入如下代碼：$(function(){ $(".content").hide(); $(".content:eq(0)").show(); $(".title:eq(0)").css({ "background":"#B91720" }); $(".title").click(function(){ varindex=$(this).index(".title"); $(".content").hide(); $(".content:eq("+index+")").show(); 05*【實(shí)現(xiàn)效果】頁面加載后，顯示“內(nèi)容一”面板，單擊“標(biāo)題二”選項(xiàng)卡，顯示“內(nèi)容二”面板，依次類推。5.5.1

案例——選項(xiàng)卡效果$(".title").css({ "background":"blue" });$(".title:eq("+index+")").css({ "background":"#B91720" }); })})18*5.5.2

案例——自動(dòng)顯示與隱藏的返回頂部按鈕【場(chǎng)景描述】許多網(wǎng)頁都設(shè)有“返回頂部”按鈕，當(dāng)窗口滾動(dòng)條向下移動(dòng)至一定位置時(shí)，單擊該按鈕可以快速返回窗口頂部。而在沒有向下移動(dòng)窗口滾動(dòng)條時(shí)，該按鈕應(yīng)自動(dòng)隱藏?！舅悸贩治觥慷x檢測(cè)窗口滾動(dòng)條位置的事件，在窗口滾動(dòng)條頂端位置大于一定數(shù)值時(shí)，顯示“返回頂部”按鈕，當(dāng)滾動(dòng)條頂端位置小于一定數(shù)值時(shí)，隱藏“返回頂部”按鈕?！緦?shí)現(xiàn)步驟】1.在HTML文檔中添加“返回頂部”按鈕。2.通過CSS控制按鈕為固定定位。3.在相關(guān)聯(lián)的JS文檔中輸入如下代碼：window.onload=function(){ varbackTop=$("#back-Top"); backTop.hide();18*5.5.2

案例——自動(dòng)顯示與隱藏的返回頂部按鈕

$(window).scroll(function(){ if($(window).scrollTop()>300){ backTop.show(); }else{ backTop.hide(); } }) backTop.click(function(){ $(window).scrollTop(0); })}【實(shí)現(xiàn)效果】頁面加載后，顯示頁面內(nèi)容及窗口滾動(dòng)條。當(dāng)向下移動(dòng)300px后，頁面右下角顯示“返回頂部”按鈕；當(dāng)滾動(dòng)條距離頂端位置小于300px時(shí)，“返回頂部”按鈕自動(dòng)隱藏。05*5.5.3

案例——彈性布局的圖片展示【場(chǎng)景描述】網(wǎng)站在設(shè)計(jì)時(shí)需要考慮適用性，為了能夠讓網(wǎng)站中的圖片清晰地呈現(xiàn)在大多數(shù)電子產(chǎn)品上，程序員會(huì)根據(jù)不同的窗口寬度引用不同的圖片源，并且隨著窗口大小的改變動(dòng)態(tài)適應(yīng)。例如，蘋果官網(wǎng)展示的手機(jī)圖片，在寬屏顯示時(shí)，顯示為橫向圖片，如圖5-5-2所示；在窄屏顯示時(shí)，顯示為縱向圖片，如圖5-5-3所示。

圖5-5-2寬屏顯示效果

圖5-5-3窄屏顯示效果18*【思路分析】首先判斷窗口的寬度，為該狀態(tài)設(shè)置合適的圖片源。當(dāng)窗口大小每次發(fā)生變化時(shí)，都重新判斷窗口寬度，為此狀態(tài)設(shè)置合適的圖片源?！緦?shí)現(xiàn)步驟】1.在HTML文檔中添加一個(gè)img元素，其src屬性值為空，id屬性值為img1。2.在相關(guān)的JS文件中輸入以下代碼：window.onload=function(){ functionresizeShow(){ if($(window).width()>700){ $("img").attr("src","img/iphone1.jpg").css({ "width":"80%" }); }else{ $("img").attr("src","img/iphone2.jpg").css({ "width":"40%" }); } }5.5.3

案例——彈性布局的圖片展示18* $(window).resize(function(){ resizeShow(); }) resizeShow();}5.5.3

案例——彈性布局的圖片展示【實(shí)現(xiàn)效果】頁面首次加載后判斷窗口寬度是否大于700px，如果是，則顯示圖片“iphone1.jpg”；如果不是，則顯示圖片“iphone2.jpg”。在改變窗口大小時(shí)，隨時(shí)判斷窗口寬度是否大于700px，并應(yīng)用相對(duì)應(yīng)的圖片源。小提示（1）為方便測(cè)試窗口寬度，該案例封裝了尺寸顯示函數(shù)resizeShow。（2）resize()為響應(yīng)窗口尺寸變化的事件函數(shù)。06*06綜合案例——輪播圖06*5.6

綜合案例——輪播圖【案例分析】JQuery配合CSS3共同使用，能夠?yàn)槠戒佒睌⒌木W(wǎng)頁添加許多生動(dòng)的動(dòng)態(tài)效果。例如，許多網(wǎng)站頭部都有的輪播圖效果，就是使用了JQuery中的時(shí)間間隔函數(shù)，讓廣告圖片自動(dòng)輪播，實(shí)現(xiàn)更加亮眼的宣傳效果。案例瞬間效果如圖5-6-1所示。具體制作要求有以下幾點(diǎn)。圖5-6-1

輪播圖瞬間效果（1）輪播圖放置在頁面正中央。（2）輪播圖每次播放三張圖片，其中第一張圖片繞自身中心旋轉(zhuǎn)“45度”，第二張圖片沿紙面向外方向前移200px，第三張圖片繞自身中心旋轉(zhuǎn)“?45度”。（3）每次輪播向左移一張圖片。06*高手點(diǎn)撥

為了讓元素永遠(yuǎn)放置在窗口正中央，應(yīng)同時(shí)設(shè)置固定定位、外邊距屬性值為auto、左右上下偏移量均為0。06*5.6

綜合案例——輪播圖【案例實(shí)現(xiàn)】步驟11．搭建網(wǎng)站，創(chuàng)建相關(guān)HTML、CSS、JS文件（1）在C盤創(chuàng)建文件夾“l(fā)unbo”，并在其中創(chuàng)建目錄“css”“js”“img”。（2）將素材“img”文件夾整體復(fù)制到“C:/lunbo”。（3）創(chuàng)建“index.html”文件并保存在“C:/lunbo”。（4）創(chuàng)建“index.css”文件并保存在“C:/lunbo/css”。（5）創(chuàng)建“index.js”文件并保存在“C:/lunbo/js”。（6）將“jquery-1.12.1.js”文件復(fù)制并粘貼到“C:/lunbo/js”。（7）編輯“index.html”文檔頭部，將“index.css”“index.js”“jquery-1.12.1.js”文件關(guān)聯(lián)至本頁面。06*5.6

綜合案例——輪播圖步驟33．在div元素中添加一個(gè)子元素（1）在剛添加的div元素中再添加一個(gè)div元素，id屬性值為lunbo-boxs。（2）在index.css中設(shè)置該元素的大小為3200×200（單位為px）。步驟22．在頁面中添加div元素并使其處于窗口中央（1）在index.html中添加div元素，設(shè)置id屬性值為lunbo-box。（2）在index.css中設(shè)置該元素的大小為1200×200（單位為px），固定在窗口的正中央，隱藏溢出部分。06*5.6

綜合案例——輪播圖步驟44．循環(huán)加載8個(gè)div元素并在其中添加img元素在index.js文件的窗口加載事件中，使用循環(huán)語句在id屬性值為lunbo-boxs的div元素中添加8個(gè)類名為lunbo的div子元素，且每個(gè)div子元素內(nèi)都添加一個(gè)img元素，其中引用的圖片地址為“banner1.jpg”～“banner8.jpg”。具體代碼如下：for(vari=1;i<=8;i++){ varimgs=$("<divclass='lunbo'><imgsrc='img/banner"+i+".jpg'></div>"); imgs.appendTo("#lunbo-boxs");}步驟55．設(shè)置8個(gè)div子元素的CSS樣式（1）設(shè)置它們的大小為400×130（單位為px），上邊距為30px，向左浮動(dòng)。（2）設(shè)置它們的透視焦距為800px，透視中心為“centercenter”。06*6．設(shè)置前三張圖片的3D轉(zhuǎn)換樣式并封裝show函數(shù)（1）在index.js的文件中封裝show函數(shù)，設(shè)置前三張圖片的初始化狀態(tài)。即第一張圖片繞Y軸旋轉(zhuǎn)“45deg”，第二張圖片沿屏幕向外平移200px，第三張圖片繞Y軸旋轉(zhuǎn)“-45deg”。具體代碼如下：functionshow(){ $(".lunbo:eq(0)img").css({ "transform":"rotateY(45deg)" }); $(".lunbo:eq(1)img").css({ "transform":"translateZ(200px)" }); $(".lunbo:eq(2)img").css({ "transform":"rotateY(-45deg)" });}（2）在index.js文件的窗口加載事件中調(diào)用show函數(shù)。步驟65.6

綜合案例——輪播圖06*7．實(shí)現(xiàn)輪播效果。（1）在index.js文件中使用間隔函數(shù)，使得每2s輪播一張banner圖片。間隔函數(shù)的語法格式如下：setInterval(function(){ 代碼塊},2000);（2）在時(shí)間間隔函數(shù)中，將第一個(gè)輪播的圖片移動(dòng)到其父元素末尾，并再次調(diào)用show函數(shù)，完成輪播的動(dòng)作。具體代碼如下

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論