《网站前端技术》（梁玲）621-7 教案 第24课 JQuery常用函数（一）_第1页
《网站前端技术》（梁玲）621-7 教案 第24课 JQuery常用函数（一）_第2页
《网站前端技术》（梁玲）621-7 教案 第24课 JQuery常用函数（一）_第3页
《网站前端技术》（梁玲）621-7 教案 第24课 JQuery常用函数（一）_第4页
《网站前端技术》（梁玲）621-7 教案 第24课 JQuery常用函数（一）_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

课题第24课JQuery常用函数（一）课时2课时（90min）教学目标知识技能目标：（1）掌握JQuery捕获及创建HTML（2）掌握JQuery获取及设置元素内容、文本、属性（3）掌握JQuery设置HTML元素的CSS样式素质目标：掌握JQuery的基本使用方法，加强学生的网页设计能力教学重难点教学重点：JQuery捕获及创建HTML元素，JQuery设置及获取HTML相关内容或属性教学难点：JQuery设置HTML元素CSS样式教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→→传授新知（30min）→头脑风暴（8min）第2节课：→传授新知（25min）→上机操作（10min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家了解JQuery基本使用方法的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题Jquery具有什么功能？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

（30min）5.1JQuery捕获及创建HTML元素【教师】讲解捕获元素、创建HTML元素、获取同类名元素的下标值等内容✈【多媒体】组织学生扫码播放“JQuery的基本使用”视频（详见教材），让学生对这部分内容有一个大致地了解JQuery能够捕获HTML元素，其中的捕获机制与在CSS中使用选择器匹配元素相同。此外，JQuery还能创建元素，其创建方式与捕获元素相同，都是使用方法$()。该方法“()”中通常使用字符串参数，参数包括HTML标签与CSS选择器等。5.1.1捕获元素在JQuery中捕获元素时，捕获不同元素的$()方法，“()”中字符串参数是不同的。根据id名称捕获HTML元素的语法格式如下：$("#id名称")例如，捕获id名称为A的元素，代码如下：$("#A")根据类名捕获HTML元素的语法格式如下：$(".类名")例如，捕获类名为B的元素，代码如下：$(".B")根据标签名称捕获HTML元素的语法格式如下：$("标签名称")例如，捕获所有div元素，代码如下：$("div")【课堂互动】✈【教师】提问根据属性捕获HTML元素的语法格式是什么样的？✈【学生】聆听、思考、回答根据属性捕获HTML元素的语法格式与CSS中的属性选择器类似，包括以下几种。（1）$("[属性名]")：捕获所有具有指定属性的元素，不管属性值是什么。（2）$("[属性名='值']")：捕获属性为指定值的元素。（3）$("[属性名^='值']")：捕获属性以值开头的元素。（4）$("[属性名$='值']")：捕获属性以值结尾的元素。（5）$("[属性名*='值']")：捕获属性包含值的元素。【示例5-1-1】在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ $("div[class='p1']").css({ "border":"5pxgroovered" }); })</script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：捕获class属性值为p1的所有div元素，并设置其边框属性。【高手点拨】“$(selector).css();”表示为捕获的元素设置CSS样式。【示例5-1-2】在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ $("div[class*='o']").css({ "background":"lightyellow" }); })</script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：捕获class属性值包含字符o的所有div元素，并设置其背景颜色。【课堂互动】✈【教师】提问根据元素的位置捕获HTML元素的语法格式是什么样的？✈【学生】聆听、思考、回答根据元素的位置捕获HTML元素，其语法格式与CSS中的伪元素类似，包括以下几种。（1）$("selector:first")：捕获第一个元素。（2）$("selector:last")：捕获最后一个元素。（3）$("selector:odd")：捕获索引值为奇数的元素。（4）$("selector:even")：捕获索引值为偶数的元素。（5）$("selector:eq(n)")：捕获索引值为n元素。（6）$("selector:gt(n)")：捕获索引值大于n元素。（7）$("selector:lt(n)")：捕获索引值小于n元素。【示例5-1-3】在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ $("tr:odd").css({ "background":"lightblue" }); })</script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：捕获表格中所有奇数行，并设置其背景色。【示例5-1-4】在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ $(".menu:first").css({ "color":"red" }); })</script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：捕获第一个类名为menu的元素，并设置其文本颜色。根据后代选择器捕获HTML元素，其语法格式与CSS中的后代选择器类似，代码如下：$("选择器1选择器2")【示例5-1-5】编辑HTML文档<body>标签的内容，代码如下：<body> <ulid="zhixia"class="first">直辖市 <li>北京</li> <li>天津</li> <li>上海</li> <li>重庆</li> </ul> <ulid="huabei"class="first">华北地区 <li>内蒙古</li> <li>河北</li> <li>山西<br> <ul>……（详见教材）在文档头部添加<style>标签与<script>标签，编辑代码如下：<style> .first{ width:200px; height:auto; float:left; margin-left:30px; }</style><script> $(function(){ $("#huabeili").css({ "margin-top":"10px" }) })</script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“后代选择器示例运行结果”图片（详见教材），并讲解效果：捕获id属性值为huabei的元素，为其所有后代元素中的li元素设置10px的顶端外边距。根据子代选择器捕获HTML元素，其语法格式与CSS中的子代选择器类似，代码如下：$("选择器1>选择器2")【示例5-1-6】将【示例5-1-5】中的<script>标签代码修改为：<script> $(function(){ $("#huabei>li").css({ "margin-top":"10px" }); })</script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“子代选择器示例运行结果”图片（详见教材），并讲解效果：捕获id属性值为huabei的ul元素，为其直接子元素中的li元素设置10px的顶端外边距，而二层子元素的顶端外边距不变。5.1.2创建HTML元素【课堂互动】✈【教师】提问HTML的主要功能有哪些？✈【学生】聆听、思考、回答使用JQuery创建HTML元素的语法格式如下：varHTML元素对象名称=$("HTML标签代码");【示例5-1-7】在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ varbox=$("<divclass='box'></div>"); box.appendTo('body'); })</script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：创建一个类名为box的div元素。【高手点拨】使用JQuery创建HTML元素之后，还必须编辑追加元素对象的代码才能将其添加到页面流中，追加方法将在5.4.4节中详细介绍。5.1.3获取同类名元素的下标值使用JQuery函数可以非常方便地获取当前被访问元素在同一类名元素中的下标值，能够大大提高选项卡这类交互效果的效率，其语法格式如下：varindex=$(this).index(".类名");【示例5-1-8】在HTML文档<body>标签内添加6个类名为select-title的div元素，并设置基本样式。【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评，并讲解代码然后在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ $(".select-title").click(function(){ varindex=$(this).index(".select-title"); alert(index); }); })</script>效果：在浏览器中打开网页，网页标题显示“我的第一个网页”，网页内容显示“我的段落”。【高手点拨】（1）click()是JQuery中的鼠标事件函数，鼠标单击对应元素后，即会执行其中设置的事件代码。（2）alert()能够弹出一个带有指定消息和确定按钮的警告框，该消息可以是字符串，也可以是通过JQuery获取的内容。【学生】聆听、记录、理解通过教师讲解、课堂互动、演示操作等方式，使学生了解JQuery捕获及创建HTML元素的相关方法头脑风暴（8min）【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题，讨论如何创建表格，并捕获表格中所有奇数行，设置其背景色。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入（5min）【教师】提出以下问题在JQuery中如何设置及获取HTML相关内容或属性？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知

（25min）5.2JQuery设置及获取HTML相关内容或属性【教师】讲解JQuery获取及设置元素内容、文本、属性等内容5.2.1设置及获取文本text()text()既可以设置HTML元素的文本，也可以获取它。将HTML元素的文本设置为指定字符串的语法格式如下：元素对象.text("字符串");【示例5-2-1】编辑HTML文档<body>标签的内容，代码如下：<body> <divid="box"> <span>我的中国心</span> </div></body>在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ varbox=$("#box"); box.text("我的爱国心"); })</script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：id属性值为box的div元素文本被修改为“我的爱国心”。获取HTML元素文本的语法格式如下：元素对象.text()；【示例5-2-2】将【示例5-2-1】中<script>标签修改为如下代码：<script> $(function(){ varbox=$("#box"); alert(box.text()); })</script>在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ varbox=$("#box"); box.text("我的爱国心"); })</script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：弹出警告框，显示id属性值为box的div元素文本，即“我的中国心”。5.2.2设置及获取内容html()【课堂互动】✈【教师】提问html()与text()有哪些异同点？✈【学生】聆听、思考、回答html()与text()类似，都可以设置HTML元素的文本，但它们在获取内容时功能有所区别。text()只能获取文本，而html()能够获取所有HTML内容。使用html()设置HTML元素文本的语法格式如下：元素对象.html("字符串");【示例5-2-3】将【示例5-2-1】中<script>标签修改为如下代码：<script> $(function(){ varbox=$("#box"); box.html("我的爱国心"); })</script>效果：与示例5-2-1效果相同。使用html()获取HTML元素HTML内容的语法格式如下：元素对象.html()【示例5-2-4】将【示例5-2-1】中<script>标签修改为如下代码：<script> $(function(){ varbox=$("#box"); alert(box.html()); })</script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：弹出警告框，显示id属性值为box的div元素的HTML内容，即“<span>我的中国心</span>”。5.2.3设置及获取属性attr()attr()能够为元素对象设置属性，也能够获取元素对象指定属性的值。为HTML元素设置属性的语法格式如下：元素对象.attr("属性名称","属性的值");【示例5-2-5】编辑HTML文档<body>标签的内容，代码如下：<body> <inputtype="text"name="userName"value="请输入用户名"id="input1"></body>在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ varinput1=$("#input1"); input1.attr("type","password"); })</script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：文本框的type属性值被修改为password，即文本框中的文本以黑色圆点显示。获取HTML元素指定属性值的语法格式如下：元素对象.attr("属性名称")【示例5-2-6】将【示例5-2-5】中<script>标签修改为如下代码：<script> $(function(){ varinput1=$("#input1"); alert(input1.attr("type")); })</script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：弹出警告框，显示文本框的type属性值，即“text”。5.2.4设置及获取窗口滚动条顶端位置scrollTop()如果页面的内容超出了可视范围，页面会自动显示窗口滚动条，用于滑动屏幕浏览内容。scrollTop()就是设置滚动条位置的方法，它能够设置及获取竖向窗口滚动条距离窗口顶端的位置。设置窗口滚动条顶端位置的语法格式如下：$(window).scrollTop(数值);其中，数值一般为正整数，单位为px。【示例5-2-7】在页面中添加一个超过页面大小的div元素，以显示窗口滚动条。在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ $(window).scrollTop(300); })</script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面中的窗口滚动条处于距离页面顶端300px处。获取窗口滚动条顶端位置的语法格式如下：$(window).scrollTop();其中，获取到的数值单位为px。【示例5-2-8】在页面中添加一个超过页面大小的div元素，以显示窗口滚动条。继续在<body>标签中编辑如下代码：<inputtype="button"value="顶端位置"onclick="alert($(window).

scrollTop());">【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：滚动鼠标移动窗口滚动条，单击“顶端位置”按钮，弹出警告框，显示当前窗口滚动条顶端位置的数值。5.2.5获取窗口宽度width()与高度height()获取窗口宽度的语法格式如下：$(window).width();其中，获取到的数值单位为px。获取窗口高度的语法格式如下：$(window).height();其中，获取到的数值单位为px。【学生】聆听、记录、理解5.3JQuery设置HTML元素CSS样式【教师】讲解隐藏和显示元素、设置HTML元素的CSS样式等内容5.3.1隐藏和显示元素在JQuery中，隐藏和显示元素的方法有很多种，使用这些方法的语法格式如下：元素对象.方法名称();【课堂互动】✈【教师】提问在JQuery中，隐藏和显示元素的方法有哪些？✈【学生】聆听、思考、回答（1）隐藏元素hide()：隐藏指定的元素对象。【示例5-3-1】将【示例5-2-1】中<script>标签修改为如下代码：<script> $(function(){ varbox=$("#box"); box.hide(); })</script>效果：id属性值为box的元素被隐藏。（2）显示元素show()：显示指定元素对象。（3）淡入fadeIn()：淡入指定元素对象。（4）淡出fadeOut()：淡出指定元素对象。（5）淡入淡出切换fadeToggle()：切换元素对象的淡入淡出效果。（6）渐变到指定透明度fadeTo()：元素对象按照指定时间曲线渐变为指定透明度，完成后执行callback回调函数。使用该方法的语法格式如下：$(selector).fadeTo(speed,opacity,callback);（7）向下滑动slideDown()：向下滑动指定元素对象。（8）向下滑动slideUp()：向上滑动指定元素对象。（9）向上向下滑动切换slideTogle()：切换元素对象的向上向下滑动效果。5.3.2设置HTML元素的CSS样式css()方法能够设置HTML元素的CSS样式，语法格式如下：元素对象.css({"属性名称1":"属性值1","属性名称2":"属性值2",…,"属性名称n":"属性值n"});【示例5-3-2】将【示例5-2-1】中<script>标

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论