使用JavaScriptjQuery实现页面特效第七章-实践.pptVIP

* 实践七 初识jQuery 实践目标 设置指定元素的样式 制作指定元素的显示隐藏效果 （1）要求使用jQuery设置标题“Web前端”标题的字体颜色是红色。 （2）第一层的无序列表ul即“使用DIV+CSS设计前端页面”、“使用JavaScript+jQuery制作页面特效”列表符号是 。 （3）第二层无序列表是说明具体章节内容的，其列表符号是 。 任务一：设置指定元素的样式 要求用jQuery选择器获取页面元素后，然后利用jQuery对象的css()方法设置其样式。 （1）在html页面中导入jQuery框架。 （2）在页面加载完毕事件中，获取标题对象，调用css()方法，设置字体颜色是红色。 （3）在页面加载完毕事件中，获取第一层的无序列表对象，调用css()方法，设置列表符号 。 （4）在页面加载完毕事件中，获取第二层的无序列表对象，调用css()方法，设置列表符号 。 任务一：设置指定元素的样式 任务一：设置指定元素的样式 $(function(){ //页面加载事件 $(:header).css(color,red); //标题 $(:header+ul).css(list-style,url(images/list.gif));//第一层ul $(:header+ulliul).css(list-style,url(images/list_icon.gif));//第二层ul }); ...... ul li使用DIV+CSS设计前端页面 ul li页面布局/li li美化页面/li li页面特效/li /ul /li ...... 根据老师提供的html静态页面，使用jQuery动态设置span、a标签的样式。具体要求如图： 任务一：设置指定元素的样式 获取dl列表中前两个a标签，然后删除默认的下划线，jQuery代码提示如下： $(#movie a:not([title])).css(text-decoration, none); 任务一：设置指定元素的样式 要求使用jQuery选择器获取页面元素，然后利用jQuery对象的css()方法设置其display样式属性，从而实现显示隐藏效果。 （1）在页面中显示近期电影排行榜。 任务二：制作指定元素的显示隐藏效果 （2）当单击“（收起）”的链接时，排行榜中，后三项的电影名称隐藏而且链接的文本改为“（展开）”。 （3）当单击“（展开）”的链接时，后三项的电影名称重新显示且链接的文本改为“（收起）”。 任务二：制作指定元素的显示隐藏效果 （1）新建html页面，使用h3和ul等标签制作页面加载时的初始效果，如下图所示： （2）在页面加载完毕事件中，给a href=#（收起）/a标签的单击事件绑定方法，在事件方法中首先判断无序列表的后三项是否可见。如果可见，利用css()方法把后三项的display属性设置成“none”，再利用text()方法，改变a标签的文本为“展开”；如果不可见，利用css()方法把后三项的display属性设置成“block”，再利用text()方法，改变a标签的文本为“收起”。 任务二：制作指定元素的显示隐藏效果 任务二：制作指定元素的显示隐藏效果 $(function () { $(h3 a).click(function () { var flag = $(ul li:gt(4)).is(:visible);//获取索引大于4的列表项是否可见 if (flag) { $(ul li:gt(4)).css(display,none);//隐藏 $(this).text((展开)); } else { $(ul li:gt(4)).css(display,block);//显示 $(this).text((收起)); } }); }); ...... h3近期电影排行榜......a href=#（收起）/a/h3 ul li爸爸去哪儿/li ....... （1）页面加载完毕后，在页面中显示图书分类的内容。 任务二：制作指定元素的显示隐藏效果 （2）当单击“图书分类”标题时，可以显示隐藏图书分类的内容，同时，标题中的提示图片也随之改