《JavaScript程序設(shè)計》課件-項目7-2 jQuery樣式操作和動畫

JavaScript程序設(shè)計20211課程導(dǎo)入2任務(wù)導(dǎo)入3知識講解4任務(wù)實施項目7-2jQurey樣式操作和動畫5任務(wù)總結(jié)知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)Location對象是獲取什么內(nèi)容的？Navigator對象是獲取什么內(nèi)容的？提問知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)任務(wù)重難點完成下拉菜單案例完成精品展示案例重點：初識jQueryjQuery基本選擇器jQuery層級選擇器jQuery篩選選擇器jQuery其他選擇器知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery樣式操作1.jQuery樣式操作1.1

修改樣式獲取樣式：css()方法接收參數(shù)時只寫樣式名，則返回樣式值。<style>div{width:200px;height:200px;background-color:'pink';}</style><div></div><script>console.log($("div").css("width"));//結(jié)果為：200px</script>css()方法獲取樣式知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery樣式操作設(shè)置單個樣式：css()接收的參數(shù)是屬性名和屬性值，以逗號分隔，是設(shè)置一組樣式，屬性必須加引號，值如果是數(shù)字可以不用跟單位和引號。<script>$("div").css("width","300px");//設(shè)置width為300pxconsole.log($("div").css("width")); //結(jié)果為：300px</script>css()方法設(shè)置單個樣式知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery樣式操作設(shè)置多個樣式：css()方法的參數(shù)可以是對象形式，方便設(shè)置多組樣式。$("div").css({width:400,height:400,backgroundColor:"red" //屬性名可以不加引號，但需要用駝峰法書寫})css()方法設(shè)置單個樣式知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery樣式操作1.2

類操作準(zhǔn)備工作：先準(zhǔn)備一個HTML網(wǎng)頁，然后用jQuery代碼對網(wǎng)頁進(jìn)行操作。<style>.current{background-color:red;}</style><div>添加類名</div><divclass="current">刪除類名</div><divclass="current">切換類名</div>準(zhǔn)備工作知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery樣式操作addClass()添加類：基本語法$(selector).addClass(className)。<script>$("div").click(function(){$(this).addClass("current");});</script>添加單個類名<script>$(this).addClass("currentcurrent1…");</script>添加多個類名知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery樣式操作removeClass()移除類：基本語法$(selector).removeClass(className)<script>$("div").click(function(){$(this).removeClass("current");});</script>移除current類名知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery樣式操作toggleClass()移除類：基本語法$(selector).toggleClass(className,switch)<script>$("div").click(function(){$(this).toggleClass("current");});</script>切換current類名知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery樣式操作

【案例】Tab欄切換

案例展示：案例分析：編寫頁面結(jié)構(gòu)編寫樣式通過jQuery實現(xiàn)業(yè)務(wù)邏輯知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery樣式操作案例實現(xiàn)：

<div

class="tab_list">

<ul><li

class="current">商品介紹</li>

……（此處添加右側(cè)對應(yīng)的圖片）</ul>

</div>Tab頁面標(biāo)簽欄

<div

class="tab_con">

<div

class="item"

style="display:

block;">商品介紹模塊內(nèi)容</div>

……（此處添加右側(cè)對應(yīng)的圖片）

</div>Tab頁面內(nèi)容結(jié)構(gòu)知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery樣式操作案例實現(xiàn)：<script>$(".tab_listli").click(function(){$(this).addClass("current").siblings().removeClass("current");varindex=$(this).index();console.log(index);//讓內(nèi)容區(qū)域里相應(yīng)索引號的item顯示，其余的item隱藏$(".tab_con.item").eq(index).show().siblings().hide();});</script>功能邏輯代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery動畫2.jQuery動畫2.1

顯示與隱藏效果顯示與隱藏的方法：方法說明show([speed,[easing],[fn]])顯示被隱藏的匹配元素hide([speed,[easing],[fn]])隱藏已顯示的匹配元素toggle([speed],[easing],[fn])元素顯示與隱藏切換知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery動畫案例展示：案例頁面結(jié)構(gòu)和樣式：div{width:150px;height:300px;background-color:pink;}<button>顯示</button><button>隱藏</button><button>切換</button><div></div>結(jié)構(gòu)樣式代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery動畫案例顯示和隱藏：<script>$("button").eq(0).click(function(){$("div").show(1000,function(){alert("已顯示")});});$("button").eq(1).click(function(){$("div").hide(1000,function(){alert("已隱藏");});});$("button").eq(2).click(function(){$("div").toggle(1000);});</script>功能邏輯代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery動畫2.2

滑動效果滑動效果常用方法：方法說明slideDown([speed],[easing],[fn])垂直滑動顯示匹配元素（向下增大）slideUp([speed,[easing],[fn]])垂直滑動顯示匹配元素（向上減?。﹕lideToggle([speed],[easing],[fn])在slideUp()和slideDown()兩種效果間切換知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery動畫下拉菜單展示：下拉菜單結(jié)構(gòu)樣式：<ul

class="nav">

<li>

<a

href="#">微博</a>

<ul>

<li><a

href="">私信</a></li>

<li><a

href="">評論</a></li>

<li><a

href="">@我</a></li>

</ul>

</li>...（省略了結(jié)構(gòu)代碼，可以參考源代碼）</ul>結(jié)構(gòu)樣式代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery動畫下拉菜單功能邏輯：$(".nav>li").mouseover(function(){$(this).children("ul").slideDown(200);});$(".nav>li").mouseout(function(){$(this).children("ul").slideUp(200);});功能邏輯知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery動畫hover()方法實現(xiàn)上述功能：基本語法$(selector).hover([over,]out)$(".nav>li").hover(function(){$(this).children("ul").slideToggle(200);});功能邏輯知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery動畫2.3

停止動畫stop()方法：基本語法$(selector).stop(stopAll,goToEnd);$("div").stop();//停止當(dāng)前動畫，繼續(xù)下一個動畫$("div").stop(true); //清除div元素動畫隊列中的所有動畫$("div").stop(true,true);//停止當(dāng)前動畫，清除動畫隊列中的所有動畫$("div").stop(false,true);//停止當(dāng)前動畫，繼續(xù)執(zhí)行下一個動畫stop()方法知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery動畫2.4

淡入淡出淡入淡出常用方法：方法說明fadeIn([speed],[easing],[fn])淡入顯示匹配元素fadeOut([speed],[easing],[fn])淡出隱藏匹配元素fadeTo([[speed],opacity,[easing],[fn]])以淡入淡出方式將匹配元素調(diào)整到指定的透明度fadeToggle([speed,[easing],[fn]])在fadeIn()和fadeOut()兩種效果間的切換知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery動畫案例展示：知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery動畫案例頁面結(jié)構(gòu)和樣式：<style>div{width:100px;height:100px;float:left;margin-left:5px;}……（省略樣式代碼）</style><divclass="box"><divclass="red"></div><divclass="green"></div><divclass="yellow"></div><divclass="orange"></div></div>結(jié)構(gòu)樣式代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery動畫案例頁面功能代碼：<script>$(".boxdiv").fadeTo(2000,0.2);$(".boxdiv").hover(function(){$(this).fadeTo(1,1);},function(){$(this).fadeTo(1,0.2);});</script>功能代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery動畫2.5

自定義動畫animate()方法：基本語法$(selector).animate(params[,speed][,easing][,fn])<style>div{width:50px;height:50px;background-color:pink;position:absolute;}</style><button>動起來</button><div></div><script>$("button").click(function(){$("div").animate({left:500,top:300,opacity:.4,width:500},500);});</script>創(chuàng)建自定義動畫知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery動畫

【案例】手風(fēng)琴

案例展示：案例分析：編寫手風(fēng)琴效果的頁面結(jié)構(gòu)。為不同的方塊設(shè)置不同的背景顏色。通過jQuery實現(xiàn)交互效果。知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery動畫案例實現(xiàn)：<style>/*清除元素的margin和padding*/*

{margin:

0;padding:

0;}/*設(shè)置最外層盒子的樣式*/

.king

{

width:

852px;margin:

100px

auto;background:

url(images/bg.png)

no-repeat;

overflow:

hidden;padding:

10px;

}……（省略大量樣式代碼）

</style>樣式代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery動畫案例實現(xiàn)：<div

class="king"><ul><li

class="current"><div

class="small

red1"></div><div

class="big

red2"></div></li>…..（省略重復(fù)的結(jié)構(gòu)代碼）

</ul></div>結(jié)構(gòu)代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery動畫案例實現(xiàn)小圖片淡出大圖片淡入：<script

src="jquery.min.js"></script><script