《JavaScript程序设计》课件-项目7-2 jQuery样式操作和动画

JavaScript程序设计20211课程导入2任务导入3知识讲解4任务实施项目7-2jQurey样式操作和动画5任务总结知识回顾任务导入知识讲解任务实施任务总结Location对象是获取什么内容的？Navigator对象是获取什么内容的？提问知识回顾任务导入知识讲解任务实施任务总结任务重难点完成下拉菜单案例完成精品展示案例重点：初识jQueryjQuery基本选择器jQuery层级选择器jQuery筛选选择器jQuery其他选择器知识回顾任务导入知识讲解任务实施任务总结jQuery样式操作1.jQuery样式操作1.1

修改样式获取样式：css()方法接收参数时只写样式名，则返回样式值。<style>div{width:200px;height:200px;background-color:'pink';}</style><div></div><script>console.log($("div").css("width"));//结果为：200px</script>css()方法获取样式知识回顾任务导入知识讲解任务实施任务总结jQuery样式操作设置单个样式：css()接收的参数是属性名和属性值，以逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号。<script>$("div").css("width","300px");//设置width为300pxconsole.log($("div").css("width")); //结果为：300px</script>css()方法设置单个样式知识回顾任务导入知识讲解任务实施任务总结jQuery样式操作设置多个样式：css()方法的参数可以是对象形式，方便设置多组样式。$("div").css({width:400,height:400,backgroundColor:"red" //属性名可以不加引号，但需要用驼峰法书写})css()方法设置单个样式知识回顾任务导入知识讲解任务实施任务总结jQuery样式操作1.2

类操作准备工作：先准备一个HTML网页，然后用jQuery代码对网页进行操作。<style>.current{background-color:red;}</style><div>添加类名</div><divclass="current">删除类名</div><divclass="current">切换类名</div>准备工作知识回顾任务导入知识讲解任务实施任务总结jQuery样式操作addClass()添加类：基本语法$(selector).addClass(className)。<script>$("div").click(function(){$(this).addClass("current");});</script>添加单个类名<script>$(this).addClass("currentcurrent1…");</script>添加多个类名知识回顾任务导入知识讲解任务实施任务总结jQuery样式操作removeClass()移除类：基本语法$(selector).removeClass(className)<script>$("div").click(function(){$(this).removeClass("current");});</script>移除current类名知识回顾任务导入知识讲解任务实施任务总结jQuery样式操作toggleClass()移除类：基本语法$(selector).toggleClass(className,switch)<script>$("div").click(function(){$(this).toggleClass("current");});</script>切换current类名知识回顾任务导入知识讲解任务实施任务总结jQuery样式操作

【案例】Tab栏切换

案例展示：案例分析：编写页面结构编写样式通过jQuery实现业务逻辑知识回顾任务导入知识讲解任务实施任务总结jQuery样式操作案例实现：

<div

class="tab_list">

<ul><li

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

……（此处添加右侧对应的图片）</ul>

</div>Tab页面标签栏

<div

class="tab_con">

<div

class="item"

style="display:

block;">商品介绍模块内容</div>

……（此处添加右侧对应的图片）

</div>Tab页面内容结构知识回顾任务导入知识讲解任务实施任务总结jQuery样式操作案例实现：<script>$(".tab_listli").click(function(){$(this).addClass("current").siblings().removeClass("current");varindex=$(this).index();console.log(index);//让内容区域里相应索引号的item显示，其余的item隐藏$(".tab_con.item").eq(index).show().siblings().hide();});</script>功能逻辑代码知识回顾任务导入知识讲解任务实施任务总结jQuery动画2.jQuery动画2.1

显示与隐藏效果显示与隐藏的方法：方法说明show([speed,[easing],[fn]])显示被隐藏的匹配元素hide([speed,[easing],[fn]])隐藏已显示的匹配元素toggle([speed],[easing],[fn])元素显示与隐藏切换知识回顾任务导入知识讲解任务实施任务总结jQuery动画案例展示：案例页面结构和样式：div{width:150px;height:300px;background-color:pink;}<button>显示</button><button>隐藏</button><button>切换</button><div></div>结构样式代码知识回顾任务导入知识讲解任务实施任务总结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>功能逻辑代码知识回顾任务导入知识讲解任务实施任务总结jQuery动画2.2

滑动效果滑动效果常用方法：方法说明slideDown([speed],[easing],[fn])垂直滑动显示匹配元素（向下增大）slideUp([speed,[easing],[fn]])垂直滑动显示匹配元素（向上减小）slideToggle([speed],[easing],[fn])在slideUp()和slideDown()两种效果间切换知识回顾任务导入知识讲解任务实施任务总结jQuery动画下拉菜单展示：下拉菜单结构样式：<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>...（省略了结构代码，可以参考源代码）</ul>结构样式代码知识回顾任务导入知识讲解任务实施任务总结jQuery动画下拉菜单功能逻辑：$(".nav>li").mouseover(function(){$(this).children("ul").slideDown(200);});$(".nav>li").mouseout(function(){$(this).children("ul").slideUp(200);});功能逻辑知识回顾任务导入知识讲解任务实施任务总结jQuery动画hover()方法实现上述功能：基本语法$(selector).hover([over,]out)$(".nav>li").hover(function(){$(this).children("ul").slideToggle(200);});功能逻辑知识回顾任务导入知识讲解任务实施任务总结jQuery动画2.3

停止动画stop()方法：基本语法$(selector).stop(stopAll,goToEnd);$("div").stop();//停止当前动画，继续下一个动画$("div").stop(true); //清除div元素动画队列中的所有动画$("div").stop(true,true);//停止当前动画，清除动画队列中的所有动画$("div").stop(false,true);//停止当前动画，继续执行下一个动画stop()方法知识回顾任务导入知识讲解任务实施任务总结jQuery动画2.4

淡入淡出淡入淡出常用方法：方法说明fadeIn([speed],[easing],[fn])淡入显示匹配元素fadeOut([speed],[easing],[fn])淡出隐藏匹配元素fadeTo([[speed],opacity,[easing],[fn]])以淡入淡出方式将匹配元素调整到指定的透明度fadeToggle([speed,[easing],[fn]])在fadeIn()和fadeOut()两种效果间的切换知识回顾任务导入知识讲解任务实施任务总结jQuery动画案例展示：知识回顾任务导入知识讲解任务实施任务总结jQuery动画案例页面结构和样式：<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>结构样式代码知识回顾任务导入知识讲解任务实施任务总结jQuery动画案例页面功能代码：<script>$(".boxdiv").fadeTo(2000,0.2);$(".boxdiv").hover(function(){$(this).fadeTo(1,1);},function(){$(this).fadeTo(1,0.2);});</script>功能代码知识回顾任务导入知识讲解任务实施任务总结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>创建自定义动画知识回顾任务导入知识讲解任务实施任务总结jQuery动画

【案例】手风琴

案例展示：案例分析：编写手风琴效果的页面结构。为不同的方块设置不同的背景颜色。通过jQuery实现交互效果。知识回顾任务导入知识讲解任务实施任务总结jQuery动画案例实现：<style>/*清除元素的margin和padding*/*

{margin:

0;padding:

0;}/*设置最外层盒子的样式*/

.king

{

width:

852px;margin:

100px

auto;background:

url(images/bg.png)

no-repeat;

overflow:

hidden;padding:

10px;

}……（省略大量样式代码）

</style>样式代码知识回顾任务导入知识讲解任务实施任务总结jQuery动画案例实现：<div

class="king"><ul><li

class="current"><div

class="small

red1"></div><div

class="big

red2"></div></li>…..（省略重复的结构代码）

</ul></div>结构代码知识回顾任务导入知识讲解任务实施任务总结jQuery动画案例实现小图片淡出大图片淡入：<script

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