网页设计与制作——JavaScript+jQuery标准教程 教案 第7章 jQuery页面操作.docx

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

1、电子商务网页设计与制作授课教案学年第学期学院(部)专业(学部)课程名称电子商务网页设计与制作任课教师课内形式理论教学课内实践口理实一体回习题复习口考核评价其他活动口学习量安排课内：课外形式调查分析回/J考核评价口?、组研讨实践任务0理论探究口:报展示其他活动目课外：序号7授课日期月日月日月日月日授课班级课内教学内容：第7章jQuery页面操作课外学习任务：(1)课前：以小组为单位，讨论如何使用JQuery框架实现对文档的页面操作并以PPT的形式记录下来。(2)课后:实现点击按钮实现为div元素添加边框和背景色。实现点击按钮在div元素之后添加新的p元素。教学目标：知识目标 掌握获取和设置元素内

2、容。 掌握获取和设置元素属性。 掌握元素的添加、删除、替换。 掌握CSS类的添加和删除。 掌握CSS类的切换。 掌握CSS样式的获取和设置。能力目标 能够掌握jQuery方法的使用方法； 能够通过jQuery对DOM对象进行操作。素质目标 较强的专业知识和自学能力； 丰富知识结构，提升专业知识； 掌握使用jQuery对文档元素的操作能力，理解并应用专业知识。重点难点及解决方法：(1)重点：使用jQuery实现对元素的操作解决方法：通过知识点讲解+课堂示例相结合的方法，教师讲解使用jQuery对文档元素的内容和属性等内容进行操作，引导学生积极思考，掌握相应知识；同时通过课堂示例展示，使学生可以掌

3、握使用jQuery框架对元素的操作;培养学生的思维能力和分析问题解决问题的能力。(2)难点：多图片商品展示框解决方法：通过案例解析+启发式教学讲解的方式，细致讲解使用jQuery语言通过对元素的操作实现多图片商品展示框的效果。帮助学生掌握jQuery框架对元素的操作方法和技巧。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；

4、对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应体选项打“J”。课内教学内容及过程时间分配方法及手段【导引示例】jQuery提供了比JavaScript更加强大的页面操控能力。通过jQuery可以更加轻松地对页面元素进行获取和设置。例如，使用jQuery控制元素的显示和隐藏。1.HTM1元素操作【获取和设置元素内容】在jQuery中分别使用text。、htm1()和VaIo这3种事件方法实现对元素内容的获取和设置。1.text(

5、)text()事件方法用于获取或设置元素的文本内容，获取文本内容的语法形式如下所示。$(se1ector).text()其中，se1ector表示选择器。使用该事件方法设置元素文本内容的语法形式如下所示。$(se1ector).text(content)其中，coniem表示要设置的新文本内容，一般为字符串，需要用双引号引导。2. htm1()him1()事件方法用于获取或设置元素的内容，获取元素内容的语法形式如下所示。$(Se1eCtor).htm1()设置匹配元素内容的语法形式如下所示。$(se1ector).htm1(content)其中，ComenI的内容是指要添加到指定元素中的内容，

6、除了可以添加文本内容，还可以添加HTM1标签等内容。3. va1()Va1o事件方法用于获取或设置匹配元素的值,通常匹配的元素为input元素。获取元素值的语法形式如下所示。$(se1ector).va1()设置匹配元素值的语法形式如下所示。$(se1ector).va1(va1ue)【操作元素属性】1. attr()attr()方法可以用于获取或设置指定元素的属性，如果没有获取到对应的属性，则返回值为Undefined。获取元素指定属性的语法形式如下所示。$(se1ector).attr(attribute)其中，attribute表示要获取的属性。设置元素属性的语法形式如下所小O$(se1

7、ector).attr(attribute:va1ue,.,attributeva1ue)设置元素属性时，可以一次设置一个，也可以一次设置多个。在设置多个属性时，属性和值之间用冒号(:)分隔，每组属性之间用逗号(,)分隔。其中，如果属性值为字符串，则需要用双引号引起来。2. prop()ProP()方法也可以用于实现获取或设置指定元素的属性，如果没有获取到对应的属性，则返回值为空字符串。如果属性有true和fa1se两个值，则默认使用PrOPo方法。获取元素指定属性的语法形式如下所示。S(se1ector).prop(property)设置元素属性的语法形式如下所示。$(se1ector).p

8、rop(property:va1ue,.,property:va1ue()3. removeAttr()removeAttr()方法可以用于删除备选元素的一个或多个属性,其语法形式如下所示。S(se1ector).removeAttr(attribute)其中，attribute表示要删除的属性，如果属性值是字符串，则要使用双引号引起来。如果要删除多个属性，则用空格分隔。4. removeProp()removeProp()方法可以用于删除由ProPo方法设置的属性，其语法形式如下所示。$(se1ector).removeProp(property)【创建元素】在jQuery中实现元素的创建十

9、分简单，只需要使用jQuery的构造函数$()即可。创建元素的语法形式如下所示。$(htm1)其中，htm1表示标签字符串，需要用双引号引起来，并且要求标签为闭合状态。如果是双标签，则需要由开始标签和闭合标签组成，ft:如果是单独标签，则需要在开始标签中添加斜杠(/)表示闭合如Vi叩Ut/。例如，创建一个div元素的代码如下所示。S(44);在创建元素的同时可以直接创建文本内容，只需要在标签字符串中添加对应的文本内容即可。例如，创建一个带文本内容的div元素的代码如下所示。$(vdiv新的div元素vdiv);在创建元素的同时也可以为元素创建新属性，只需要在开始标签中添加对应的属性即可。例如，

10、创建一个带id属性的div元素的代码如下所示。S(t4新的div元素);【添加元素】1.append。和prepend()使用append。方法可以将新元素添加到指定元素内部的结尾处，也就是在指定元素的最后一个子元素的后面插入新元素。其语法形式如下所示。$(se1ector).append(content)其中，content表示要添加的元素。另外，还可以通过函数实现元素添力口，其语法形式如下所示。$(se1ector).append(function(index,htm1)returncontent)其中，参数IndeX表示所选元素的索引，参数htm1表示所选元素的内容，这两个参数可以省略。

11、COntent表示新元素，return语句会返回要插入的新元素。使用PrePend()方法可以将新元素添加到指定元素内部的开头处，也就是将新元素插入指定元素的第1个子元素之前。其语法形式如下所示。$(se1ector).prepend(content)使用函数方式插入元素的语法形式如下所示。$(se1ector).prepend(function(index,htm1)returncontent)使用append。和PrePend()方法将a元素插入P元素后的效果如图7.4所示。P元素p元素的内容ai方法p元素的内容append()方法插入的a元素Prq)(JO梃prepend()方法插入的a

12、元素p元素的内容图7.4使用append()和prepend()方法将a元素插入P元素后的效果2.after。和before()使用after。方法可以将新元素添加到指定元素外部的结尾处，也就是将新元素插入指定元素之后，它们之间有兄弟元素的关系。其语法形式如下所示。$(se1ector).after(content)其中，Comem为要插入的元素。通过afer()方法也可以使用函数插入元素，其语法形式如下所示。$(se1ector).after(function(index)(returncontent)其中，index表示选中元素的索引值。使用before。方法可以将新元素添加到指定元素外部

13、的开头处，也就是将新元素插入指定元素之前，它们之间有兄弟元素的关系。其语法形式如下所示。$(se1ector).befbre(content)其中，coment为要插入的元素。通过before()方法也可以使用函数插入元素，其语法形式如下所示。$(se1ector).befbre(func1ion(index)returncontent)其中，index表示选中元素的索引值。使用after。和before。方法将a元素插入P元素后的效果如图7.5所示。P元奈p元素的内容Ift0方p无索的内容after()方法插入的a元素befcwo方法beforQ()方法插入的a元素p元素的内容【替换和克隆元

14、素】1. r叩IaCeWith()repIaceWith()方法用于将被选中的元素替换为指定元素或新元素。其语法形式如下所示。$(se1ector).rep1aceWith(Content)通过该方法还可以使用函数实现元素替换，其语法形式如下所示。$(se1ector).rep1aceVith(function()returncontent)2. r叩IaCeAHorep1aceAH()方法也可以用于将被选中的元素替换为指定元素或新元素。其语法形式如下所示。S(content).rep1aceA(se1ector)3. c1one()克隆元素是指将指定元素进行复制，复制完成后可以将复制得到的元素通过添加元素的方法添加到任意位置。其语法形式如下所示。S(se1ector).c1one(incIudeEvents)【删除元素】1. remove()remove。方法用于删除指定的元素，包括该元素的所有文本、子节点、事件以及数据。其语法形式如下所示。$(se1ector).remove()2. detach()detach。方法用于将指定元素从DOM中分离，分离的内容