《JavaScript程序设计》课件——项目7-2 jQuery样式操作和动画.pptx
JavaScript程序设计2021
1课程导入2任务导入3知识讲解4任务实施项目7-2jQurey样式操作和动画5任务总结
知识回顾任务导入知识讲解任务实施任务总结Location对象是获取什么内容的?Navigator对象是获取什么内容的?提问
知识回顾任务导入知识讲解任务实施任务总结任务重难点完成下拉菜单案例完成精品展示案例重点:初识jQueryjQuery基本选择器jQuery层级选择器jQuery筛选选择器jQuery其他选择器
知识回顾任务导入知识讲解任务实施任务总结jQuery样式操作1.jQuery样式操作1.1修改样式获取样式:css()方法接收参数时只写样式名,则返回样式值。stylediv{width:200px;height:200px;background-color:pink;}/stylediv/divscriptconsole.log($(div).css(width));//结果为:200px/scriptcss()方法获取样式
知识回顾任务导入知识讲解任务实施任务总结jQuery样式操作设置单个样式:css()接收的参数是属性名和属性值,以逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号。script$(div).css(width,300px);//设置width为300pxconsole.log($(div).css(width)); //结果为:300px/scriptcss()方法设置单个样式
知识回顾任务导入知识讲解任务实施任务总结jQuery样式操作设置多个样式:css()方法的参数可以是对象形式,方便设置多组样式。$(div).css({width:400,height:400,backgroundColor:red //属性名可以不加引号,但需要用驼峰法书写})css()方法设置单个样式
知识回顾任务导入知识讲解任务实施任务总结jQuery样式操作1.2类操作准备工作:先准备一个HTML网页,然后用jQuery代码对网页进行操作。style.current{background-color:red;}/stylediv添加类名/divdivclass=current删除类名/divdivclass=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????ulli?class=current商品介绍/li……(此处添加右侧对应的图片)/ul??/divTab页面标签栏??div?class=tab_con????div?class=item?style=display:?block;商品介绍模块内容/div……(此处添加右侧对应的图片)??/divTab页面内容结构
知识回顾任务导入知识讲解任务实施任务总结jQu