网页设计与制作——JavaScript+jQuery标准教程 教案 第6章 jQuery基础.docx

《网页设计与制作——JavaScript+jQuery标准教程 教案 第6章 jQuery基础.docx》由会员分享，可在线阅读，更多相关《网页设计与制作——JavaScript+jQuery标准教程 教案 第6章 jQuery基础.docx（10页珍藏版）》请在第一文库网上搜索。

1、电子商务网页设计与制作授课教案学年第学期学院(部)专业(学部)课程名称电子商务网页设计与制作任课教师课内形式理论教学课内实践口理实一体0习题复习口考核评价其他活动口学习量安排课内：课外形式调查分析团小组研讨口实践任务团理论探究口考核评价汇报展示口其他活动团课外：序号6授课日期月日月日月日月日授课班级课内教学内容：第6章jQuery基础课外学习任务：(1)课前：以小组为单位，讨论jQuery框架的相关内容并以PPT的形式记录下来。(2)课后：实现按下键盘上任意按键时文字放大，释放按键时文字恢复默认尺寸效果。实现双击图片使图片放大，再次双击图片使图片尺寸恢复。教学目标：知识目标 掌握jQuery选

2、择器； 掌握jQuery事件绑定； 掌握jQuery事件方法。能力目标 能够掌握jQuery框架的各种功能； 能够使用jQuery实现多种动态效果。素质目标 较强的专业知识和自学能力； 丰富知识结构，提升专业知识； 掌握jQuery的使用，理解并应用专业知识。重点难点及解决方法：(I)重点：选择器与事件解决方法：通过知识点讲解+课堂示例相结合的方法，教师讲解jQuery框架的选择器以及事件的相关内容内容，引导学生积极思考,掌握相应知识；同时通过课堂示例展示，使学生可以掌握jQuery框架的语法规则；培养学生的思维能力和分析问题解决问题的能力。(2)难点：jQuery框架的活学活用解决方法：通过

3、案例解析+启发式教学讲解的方式，细致讲解使用jQuery框架实现商品展示栏交互效果。帮助学生掌握jQuery框架的使用方法和技巧。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：

4、I.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应白选项打“7”。课内教学内容及过程时间分配方法及手段【导引示例】通过JavaScript可以实现丰富的用户动态交互效果，而通过jQuery技术可以使用更加精练的语句实现更加丰富的动态交互效果。例如，使用jQuery技术实现点击文本修改文本的颜色和字号。1jQuery选择器【元素选择器】元素选择器通过id属性、C1aSS属性、标签名等方式对元素进行选择，其语法形式如下所示。$(选择器”)其中，选择器可以为1个，也可以为多个。每个选择器的可选项说明如下。 *：表示选择所有元素，如$(*)。 this：表示选择当前元素，如$(”th

5、is)。 #id:表示通过id属性选择指定的元素，需要在id属性前加井号(#)o例如，$(#Div1)表示选择id属性值为DiV1的元素。 .c1ass：表示通过C1aSS属性选择指定元素，需要在C1aSS属性前加点运算符(.)o例如，$(.IefT)表示选择CIaSS属性值为Ief1的元素。 e1ement：表示通过元素的标签名选择指定元素。例如，$(div)表示选择元素标签名为div的元素。 s1s2：表示选择符合S1和s2两个选择器的元素。S1与s2之间没有间隔，其中，S1可以为标签名、id属性值或C1aSS属性值；s2可以为id属性值或c1ass属性值。例如,$(.rightefr)表

6、示选择c1ass属性值为right,并且C1aSS属性值为1eft的元素。 s1,s2,s3:表示选择符合多个选择器要求的所有元素。例如1,$(#DiVI,.匕加(1加”)表示选择id属性值为DivI或c1ass属性值为1eft或元素标签名为div的所有元素。【属性选择器】属性选择器是通过属性值选择对应元素的一种选择器。例如，通过属性选择器可以选择文本颜色相同的元素。属性选择器的语法形式如下所/Jo$(表达式”)其中，表达式需要用方括号()括起来，在方括号外需要使用双引号。表达式可以为属性名或属性值比较表达式，具体如下所示。 属性名：表示选择包含对应属性的所有元素。例如，$(”name)表示选

7、择带有name属性的所有元素。 属性名=属性值：表示选择指定属性值为指定值的元素。例如，$(Tid=DiV丁)表示选择id属性值为“Div”的元素。 属性名!=属性值：表示选择指定属性值不为指定值的元素。例如，$(id!=DWr)表示选择id属性值不为“Div”的元素。 属性名A=属性值：表示选择指定属性值以一个特定值开始的元素。例如，$(hrefATWWWT)表示选择href属性值以“www”开头的元素。 【属性名$=属性值：表示选择指定属性值以指定内容结尾的元素。例如，$(href$hjpgT)表示选择href属性值以“Jpg”结尾的元素。 属性名*=属性值：表示选择指定属性值包含特定值的

8、元素。例如，$(Tname*=EbcT)表示选择name属性值包含rtabcw的元素。【关系选择器】1 .子孙选择器子孙选择器也可以称为后代选择器。它可以选择元素指定的子孙元素。子孙选择器的语法形式如下所示。$(选择器I选择器2)2 .孩子选择器孩子选择器只能从父元素中选取其直接的子元素。孩子选择器在指定子元素时需要使用到符号,其语法形式如下所示。$(选择器选择器2”)3 .兄弟选择器兄弟选择器可以选择相邻的元素。兄弟选择器在选择元素时需要使用到加号(+),其语法形式如下所示。$(选择器1+选择器2”)【过滤器】过滤器在使用时需要使用到冒号(:)，其语法形式如下所示。$(”选择器:过滤器”)【

9、表单过滤器】表单过滤器可以对不同类型的表单元素进行选择。通过表单过滤器可以实现对表单输入内容进行获取、显示和隐藏表单等多种交互操作。表单过漉器介绍如下。 input：用于选择表单元素。例如，$(:input)表示选择所有input元素。 text：用于选择类型为text的表单元素，如 password：用于选择类型为password的表单元素，如$(!password)o radio：用于选择类型为radio的表单元素，如$(:radio)。 checkbox：用于选择类型为checkbox的表单元素，如$(:checkbox)o submit：用于选择类型为SUbmit的表单元素，如$(:S

10、Ubmit)。 reset：用于选择类型为rese1的表单元素,S0$(:reset)o button：用于选择类型为button的表单元素，如$(:button)。 image：用于选择类型为image的表单元素，如$(:image)。 fi1e：用于选择类型为fi1e的表单元素,如 enab1ed：用于选择激活的表单元素，如$(:enab1ed)。 disab1ed：用于选择禁用的表单元素，如$(:disab1ed)。 se1ected：用于选择被选取的表单元素(适用于下拉列表的表单)，如$(:SeIeCted checked：用于选择被选中的表单元素(适用于复选框)，如$(:checke

11、d)o【案例分析6-1】选项卡选项卡是一种十分常见的网页布局模块。通过不同的选项卡可以在同一块空间展示多个分类清晰的内容。选项卡之间的切换效果通过设置对应元素的显示和隐藏来实现。2.jQuery事件【事件方法的基础语法】事件方法的基础语法形式如下所示。$(se1ector).event(function();事件方法可以一次性添加多个，其语法形式如下所示。S(,se1ector).event(func1ion().event(function();jQuery的事件方法包括绑定事件、注销事件、鼠标事件、键盘事件、页面事件以及表单事件。这些事件都是可以直接使用对应的元素进行调用的。例如，read

12、y。事件方法属于页面事件方法，c1ick()事件方法属于鼠标事件方法。【绑定事件】1.bind()使用bind。方法可以将一个或多个事件绑定到元素。绑定单个事件到元素的语法形式如下所示。$(se1ector).bind(event,data,function)其中，eventdata和function之间用英文逗号分隔。se1ector表示选择器，用于选择要绑定事件和函数的元素；event表示要绑定的DOM事件，常见的DOM事件如表6.1所示；data表示传递的额外数据；function表示要绑定的函数。鼠标事件键盘事件表单事件文;当/窗口事件c1ickkeypresssubmitIoaiC1

13、b1c1ickkeydownchangeresIAmmenterkevnfnrrr川iyoiikp1pvphim*nCad为匹配元素绑定多个事件的语法形式如下所示。$(se1ector).bind(event:functionevent:function|)其中，event和function之间用冒号(:)分隔，每组事件和函数之间用英文逗号分隔。多个事件和函数总体要使用花括号()括起来。2. 1ive()使用1ive()方法可以实现将一个或多个事件绑定到当前或未来创建的指定元素。未来创建的元素一般是指通过脚本动态创建的元素。使用本方法绑定单个事件的语法形式如下所示。S(se1ector).1i

14、ve(event,data,function)使用该方法绑定多个事件的语法形式如下所示。$(se1ector).1ive(event:fiinction,.,event:function)IiVeo方法在jQuery1.7中被废弃，在1.9版本中被删除，使用on()方法代替。在使用该方法时要注意引入的jQuery的版本。注意3. de1egate()使用de1egate。方法可以将一个或多个事件绑定到当前或未来创建的子元素。使用de1egate。方法绑定单个事件的语法形式如下所示。$(se1ector).de1egate(chi1dSe1ector,event,data,function)其中，Chi1dSe1ector表示指定要绑定事件的子元素。使用该方法绑定多个事件的语法形式如下所示。$(se1ector).de1egate(chi1dSe1ector,event:functionv.,event:function)jQuery1.7及以上版本推荐使用on()方法代替de1egate。方法。注意4. on()使用on()方法可以实现将一个或多个事件绑定到被选元素及子元素。使用on()方法绑定单个事件的语法形式如下所示。$(se1ector).on(event,Chi1dSe1ector,