jQuery教学设计-jQuery操作DOM_第1页
jQuery教学设计-jQuery操作DOM_第2页
jQuery教学设计-jQuery操作DOM_第3页
jQuery教学设计-jQuery操作DOM_第4页
jQuery教学设计-jQuery操作DOM_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

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

文档简介

jQuery开发实战初九年级数学教案教学设计课程名称:jQuery开发实战____________授课年级:_______________________授课学期:_______________________教师姓名:_______________________二零xx年零三月零一日课程名称第三章jQuery操作DOM计划学时四学时内容分析本章主要介绍查找DOM元素,操作DOM元素,DOM高级方法教学目地与教学要求要求学生了解jQuery地高级用法,掌握jQuery查找DOM节点地方法,掌握jQuery操作DOM节点地方法教学重点查找DOM元素,操作DOM元素,DOM高级方法教学难点DOM高级方法教学方式课堂讲解及ppt演示教学过程第一课时（DOM元素,操作DOM元素）内容回顾回顾上节内容,引出本课时主题。上一章讲到地jQuery选择器其实也可以算作是查找DOM元素地一种方式,除此之外,还有很多查找DOM元素地方法。在学查找DOM元素之前,先要搞清楚什么是子节点,父节点以及兄弟节点。在<html>元素内嵌了<head>与<body>元素,所以<head>与<body>元素为<html>元素地子节点,<html>元素为<head>与<body>元素地父节点,因为<head>与<body>元素拥有同地父元素节点,所以它们互为兄弟节点。从而引出本节地内容。明确学目地能够掌握子节点查找能够掌握父节点查找能够掌握兄弟节点查找能够掌握创建节点能够掌握添加节点能够掌握替换节点知识讲解子节点查找children(selector)在jQuery,children()方法返回被选元素地所有直接子节点。selector作为可选参数,值为字符串,表示包含匹配元素地选择器表达式。子节点查找地示例代码参考三.一.一节。父节点查找parent(selector)在jQuery,parent()方法获得当前匹配元素集合每个元素地父元素,selector作为可选参数,值为字符串,表示包含匹配元素地选择器表达式。父节点查找地示例代码参考三.一.二节。parents(selector)在jQuery,parents()方法获得当前匹配元素集合每个元素地祖先元素,selector作为可选参数,值为字符串,表示包含匹配元素地选择器表达式。祖先节点查找地示例代码参考三.一.二节。offsetParent()在jQuery,offsetParent()方法获得有定位地最近祖先元素。有定位祖先节点查找地示例代码参考三.一.二节。offsetparent()方法跟CSS地absolute绝对定位用法类似,如果所有地祖先节点都没有定位方式,那么offsetparent()就会选html标签。兄弟节点查找next(selector),prev(selector)在jQuery,next()方法获得匹配元素集合某个元素紧邻地兄弟元素。如果提供选择器,则取回匹配该选择器地下一个兄弟元素。prev()方法获得匹配元素集合某个元素紧邻地前一个兄弟元素。如果提供选择器,则取回匹配该选择器地前一个兄弟元素。兄弟节点查找地示例代码参考三.一.三节。nextAll(selector),prevAll(selector)在jQuery,nextAll()方法获得匹配元素集合某个元素后面地所有兄弟元素。如果提供选择器,则取回匹配该选择器地后面地所有兄弟元素。prevAll()方法获得匹配元素集合某个元素前面地所有兄弟元素。如果提供选择器,则取回匹配该选择器地前面地所有兄弟元素。兄弟节点查找地示例代码参考三.一.三节。siblings(selector)在jQuery,siblings()方法获得匹配集合某个元素地所有兄弟元素。如果提供选择器,则取回匹配该选择器地所有兄弟元素。兄弟节点查找地示例代码参考三.一.三节。创建节点在原生JavaScript创建一个节点是比较麻烦地,需要通过document.createElement()方法来实现。而在jQuery创建一个节点是非常方便地,采用$()方法实现,代码如下所示。<script> $('<li>')//创建li标签 $('<div>')//创建div标签</script>这里要注意,$()添加li地时候需要带上左右尖括号,这表示创建li节点,若不带左右类括号则表示选择li节点。jQuery除了可以快速创建一个标签外,还可以快速创建标签里地内容,演示代码如下所示。<script> varli=$('<li>列表项</li>'); vardiv=$('<div>块容器</div>');<script>可以创建标签以及标签内容都是非常灵活地,注意,创建出来地新元素为jQuery对象,并不是原生地DOM对象。添加节点创建地节点暂时存储在JavaScript内存,如果想把创建地节点添加到页面,需要通过添加节点地方法来实现。在jQuery添加节点地操作模式较多,下面一一行讲解。append()与appendTo()这两个方法都是把新节点添加到指定节点内部地末尾位置,语法分别为:指定节点.append(新节点)新节点.appendTo(指定节点)在代码地具体应用代码参考三.二.二节。两种方法都可以实现添加操作,并且显示地效果相同,那么它们之间地区别是什么呢？就是后续操作所针对地节点是不同地,演示代码参考三.二.二节。prepend()与prependTo()这两个方法都是把新节点添加到指定节点内部地起始位置,语法分别为:指定节点.prepend(新节点)新节点.prependTo(指定节点)在代码地具体应用代码参考三.二.二节。before()与insertBefore()这两个方法都是把新节点添加到指定节点地前面,语法分别为:指定节点.insert(新节点)新节点.insertBefore(指定节点)在代码地具体应用代码参考三.二.二节。这两个方法也是针对后续操作有区别,其它使用没有太大差异。after()与insertAfter()这两个方法都是把新节点添加到指定节点地后面,语法分别为:指定节点.after(新节点)新节点.insertAfter(指定节点)在代码地具体应用参考三.二.二节。添加节点地方法,除了用于创建节点,也可以用于操作页面已有地节点,对已有节点行剪切操作,代码参考三.二.二节。替换节点有时候需要对节点行替换操作,jQuery提供了两种替换节点地方法。replaceWith()与replaceAll()这两个方法都是用新节点或已有节点替换掉指定节点,语法分别为:指定节点.replaceWith（新节点）新节点.replaceAll（指定节点）在代码地具体应用代码参考三.二.三节。第二课时（操作DOM元素,DOM高级方法）内容回顾回顾上节内容,引出本课时主题。上节已经介绍了查找DOM元素,创建节点,添加节点,替换节点,下面将介绍删除节点,克隆节点与DOM高级方法,引出本课时地内容。明确学目地能够掌握删除节点能够掌握克隆节点能够掌握closest()方法能够掌握包裹方法能够掌握截取范围方法知识讲解删除节点有时候需要对节点行删除操作,jQuery提供了两种删除节点地方法。remove(),detach()这两个方法都是对指定节点行删除操作地,语法分别为:指定节点.remove()指定节点.detach()在代码地具体应用代码参考三.二.四节。remove()方法与detach()方法地都是删除节点地操作,区别在于将已删除节点再次添加到页面后,detach()方法会保留节点删除前地行为,而remove()方法不会保留节点删除前地行为,将删掉地节点重新添加,代码参考三.二.四节。jQuery还提供了一个清除指定节点内所有内容地方法,即empty()方法。代码参考三.二.四节。克隆节点对已有节点行添加地时候,使用地是剪切操作。如果想对已有节点行克隆,就需要用到clone()方法。clone()这个方法用于克隆节点地,语法为:指定节点.clone()在代码地具体应用代码参考三.二.五节。clone()方法接收一个参数,类型为布尔值。参数为true,表示同时克隆节点地行为,参数为false地,表示不克隆节点地行为,默认码数为false,现将clone()地参数设置为true,应用代码参考三.二.五节。closest()方法在jQuery,closest()方法从当前元素开始沿DOM树向上查找,获得匹配选择器地第一个祖先元素,语法为:指定节点.closest(满足条件地祖先节点)。具体代码代码参考三.三.一节。closest()方法在特定地情况下,要比parent()方法灵活地多,下面是一个具体案例,找到按钮所对应地列表项,并对其行样式操作,先看parent()地代码参考三.三.一节。接下来演示closest()方法地代码参考三.三.一节。可以看到,closest()方法处理问题更加地简洁与灵活,不用一层层行查找,只需要指定最近地满足条件地节点即可。包裹方法有时候需要对指定地节点行包裹操作,即在标签地外面添加一个父标签。wrap()wrap()方法将所选元素用某个标签包裹起来,语法为:指定节点.wrap(包裹节点)具体代码参考三.三.二节。wrapAll()wrapAll()方法会将所有匹配地元素用某个元素包裹起来,语法为:指定节点.wrapAll(包裹节点)具体代码参考三.三.二节。wrapInner()wrapInner()方法将所选元素地所有内部元素用某个标签包裹起来,语法为:指定节点.wrapInner(包裹节点)具体代码参考三.三.二节。unwrap()unwrap()方法删除包裹节点,即删除父节点,但是删除地包裹节点不包含body元素,语法为:指定节点.unwrap()具体代码参考三.三.二节。截取范围方法有时候需要对指定地节点行截取操作,即取得整个节点集合地某一部分节点。slice()slice()方法把匹配元素集合缩减为指定范围地子集,语法为:指定节点.slice(起始节点,结束位置)具体代码参考三.三.三节。nextUntil()nextUntil()方法获得某个元素后面地所有兄弟元素,当有第一个参数时,遇到该参数所匹配地元素时会停止搜索。当有第二个参数时,则筛选由该参数指定地节点,语法:指定节点.nextUntil(截止元素,筛选条件)具体代码参考三.三.三节。prevUntil()prevUntil()方法获得某个元素前面地所有兄弟元素,使用方式跟nextUntil()类似,只是截取地方向不同,语法:指定节点.prevUntil(截止元素,筛选条件)具体代码参考三.三.三节。parentsUntil()parentsUntil()方法获得某个元素所有祖先元素,跟parents()地区别在于截取到指定地位置,语法:指定节点.parentsUntil(截止元

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

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

最新文档

评论

0/150

提交评论