web前端技术应用 课件 项目四 任务一 制作轮播图交互板块

项目四任务一

制作轮播图交互板块

目录说出JavaScript基础语法说出jQuery过滤的常用方法说出jQuery动画的常用方法熟练应用JavaScript控制语句及函数熟练应用DOM节点操作通过制作动态效果提升合作学习能力和自学能力预期呈现效果HTML文件中书写JavaScript代码，在body标签后书写<script></script>标签，在<script>标签之间书写JavaScript代码方式一：在<script>标签之间书写JavaScript代码1.初始JavaScript并引入文件方式一：在<script>标签之间书写JavaScript代码1.初始JavaScript并引入文件HTML文件中书写JavaScript代码，在body标签后书写<script></script>标签，在<script>标签之间书写JavaScript代码方式一：在<script>标签之间书写JavaScript代码方式二：在外部文件书写JavaScript代码1.初始JavaScript并引入文件方式二：在外部文件书写JavaScript代码1.初始JavaScript并引入文件方式二：在外部文件书写JavaScript代码1.初始JavaScript并引入文件方式二：在外部文件书写JavaScript代码1.初始JavaScript并引入文件2.数据类型JavaScript数据类型值类型（原始值）引用类型字符串（String）、数字（Number）布尔（Boolean）、空（Null）未定义（Undefined）Symbol（独一无二的值）对象（Object）数组（Array）函数（Function）3.变量与注释（1）变量变量名每一个变量都应该有一个名字变量的数据类型每一个变量都应具有一种数据类型（在定义时指定）内存中占据一定的储存空间变量的值变量对应的存贮空间中所存放的数3.变量与注释（1）变量vara=10;3.变量与注释（1）变量varname=false;3.变量与注释（2）注释单行注释JavaScript中，使用“//注释内容”进行单行注释。“//”后面即为注释的内容，不支持换行多行注释使用“/*注释内容*/”进行多行注释，在多行注释时，是可以将注释内容进行换行的4.运算符与表达式（1）JavaScript运算符赋值运算符=算术运算符+，－，*，/，%比较运算符>，<，>=，<=，!=逻辑运算符&&，||，!一元运算符++，--二元运算符+=，-=，*=，/=三元运算符（又称问号表达式）表达式为条件？真：假算数>比较>逻辑>赋值4.运算符与表达式（2）表达式JavaScript表达式是由数字、算符、数字分组符号（括号）、自由变量和约束变量等以能求得数值的有意义排列方法所得的组合。算术表达式（由+，-，*，/等组成式子）逻辑表达式（&，|，!）表达式5.条件控制语句if…else…条件判断语句switch-case条件选择语句5.条件控制语句（1）if-else格式if(条件表达式1){//当条件表达式1为真时执行的代码}elseif(条件表达式2){}…else{//当前面的表达式均不匹配时执行的代码}5.条件控制语句（2）switch-case格式switch(n){case1:break；case2:break；...casen:break；//前面表达式均不匹配时执行default代码default：break；//这里的break可写可不写}6.setInterval()函数（1）认识函数JavaScript函数是被设计为执行特定任务的代码块，函数会在某代码调用它时被执行。function

name(参数1,参数2,参数3){要执行的代码}6.setInterval()函数（2）setInterval()setInterval()方法以指定的时间间隔（以“ms”为单位）调用函数，周期性调用函数，直到调用clearInterval()或关闭窗口。setInterval(()=>{}，3000)7.DOM删除节点如需删除元素和内容，一般可使用以下两个jQuery方法：①remove()：删除被选元素（及其子元素）②empty()：从被选元素中删除子元素7.DOM删除节点7.DOM删除节点8.初识jQuery及下载安装（1）初识jQueryjQuery是一个JavaScript函数库。jQuery是一个轻量级的“写得少，做得多”的JavaScript库。jQuery的特点8.初识jQuery及下载安装（1）初识jQuery①HTML元素选取。②HTML元素操作。③CSS操作。④HTML事件函数。jQuery库包含以下功能⑤JavaScript特效和动画。⑥HTMLDOM遍历和修改。⑦AJAX。8.初识jQuery及下载安装（2）下载安装8.初识jQuery及下载安装（2）下载安装8.初识jQuery及下载安装（2）下载安装9.jQuery基础选择器及层次选择器（1）基础选择器jQuery选择器基于元素的id、类、类型、属性、属性值等“查找”（或选择）HTML元素。jQuery中所有选择器都以美元符号开头，如$()。基础选择器有以下5种类型：①ID选择器

$(“#id名”)②元素选择器

$(“元素名”)③类选择器

$(“.类名”)④通配符“*”选择器

$(“*”)⑤并集选择器

$(“选择器1，选择器2，……”)9.jQuery基础选择器及层次选择器（2）层次选择器层次选择器有以下几种类型：（下面的M，N均代表基础选择器）①后代选择器：“$("MN")”②子代选择器：语法“$("M>N")”③兄弟选择器：语法“$("M～N")”④相邻选择器：语法“$("M+N")”例：$(".page2img")10.设置CSS样式（1）CSS属性操作语法：$().css("属性名")获取一个CSS属性的取值语法：$().css("属性"，"取值")设置单个CSS属性的取值语法：$().css({"属性1"："取值1","属性2"："取值2",...,"属性n"："取值n"})设置多个CSS属性的取值10.设置CSS样式（2）CSS类名操作类名操作，指的是为元素添加一个class或删除一个class，从而整体控制元素的样式。①添加class：$().addClass("类名")②删除class：$().removeClass("类名")③切换class：$().toggleClass("类名")11.jQuery类名过滤（hasClass()）和下标过滤（eq）（1）类名过滤（hasClass()）功能：用于检查当前元素是否含有某个特定的类，如果有，则返回true值。$(selector).hasClass("className")；$(selector).hasClass("className1className2")；；11.jQuery类名过滤（hasClass()）和下标过滤（eq）（2）下标过滤（eq）功能：用于获取当前链式操作中的第N个jQuery对象，返回jQuery对象。语法：$().eq(n)$(".popup_list.nav_con").eq(index).addClass("ac")；实操setInterval(()=>{/*创建计时器函数，每隔3s进行轮播*/varindex=+$(".silie").attr("index")；/*获取图片索引值index*//*attr()方法设置或返回被选元素的属性值；通过“+”将index转为number类型*/if(index>2)index=-1；/*利用if语句实现放完最后一张图片时衔接到第一张图片*/index++；/*index变量自增*/$(".silie").attr("index"，inde