jQuery教学设计-jQuery操作DOM

jQuery开发卖战教学设计镌程名称：jQuery开发卖战 授镌年级： 授镌学期： 教师雄名： 20xx年03月01日课程名称第3章jQuery操作DOM计划学时4学时

内容分析本章主要介绍查找DOM元素、操作DOM元素、DOM高级方法教学目标与教学要求要求学生了解jQuery中的高级用法、掌握jQuery查找DOM节点的方法、掌握jQuery操作DOM节点的方法教学重点查找DOM元素、操作DOM元素、DOM高级方法教学难点DOM高级方法教学方式课堂讲解及ppt演示教学过程第一课时（DOM元素、操作DOM元素）内容回顾回顾上节内容，引出本课时主题。上一章中讲到的jQuery选择器英实也可以算作是查找DOM元素的一种方式，除此之外，还有很多査找DOM元素的方法。在学习查找DOM元素之前，先要搞淸楚什么是子节点、父节点以及兄弟节点。在元素中内嵌了＜hcad＞与＜body＞元素，所以＜head＞和＜body＞元素为＜himl＞元素的子节点，元素为＜head＞和＜body＞元素的父卩点，因为＜head＞与＜body＞元素拥有共同的父元素节点，所以它们互为兄弟节点。从而引出本节的内容。明确学习目标（1） 能够掌握子节点查找（2） 能够掌握父节点査找＜3）能够掌握兄弟节点查找（4） 能够掌握创建节点（5） 能够掌握添加节点（6） 能够掌握替换节点知识讲解＞子节点査找cluldren（selector）在jQuery中，children。方法返回被选元素的所有直接子盯点。selector作为可选参数，值为字符串，表示包含匹配元素的选择器表达式。子节点查找的示例代码参考教材3丄1节。＞父节点査找pareiit（selector）在jQuery中,parent。方法获得当前匹配元素集合中每个元素的父元素，selector作为可选参数，值为字符串，表示包含匹配元素的选择器表达式。父节点查找的示例代码参考教材3.1.2节。pareiits（selector）在jQuery中，parents()方法获得当前匹配元素集合中每个元素的祖先元素，selector作为可选参数，值为字符串，表示包含匹配元素的选择器表达式。祖先节点查找的示例代码参考教材3.1.2节。offsetParent()在jQuery中，offsetParent()方法获得有左位的最近祖先元素。有立位祖先节点査找的示例代码参考教材3.1.2节。offsetparent()方法跟CSS中的absolute绝对定位用法类似，如果所有的祖先*l'j点都没有定位方式，那么offsetparent()就会选中htnil标签。>兄弟节点査找next(selector)、preMselector)在jQuery中,nextO方法获得匹配元素集合中某个元素紧邻的兄弟元素。如果提供选择器，则取回匹配该选择器的下一个兄弟元素。prev()方法获得匹配元素集合中某个元素紧邻的前一个兄弟元素。如果提供选择器，则取回匹配该选择器的前一个兄弟元素。兄弟节点查找的示例代码参考教材3.13节。nextAll(selector)、pre\'All(selector)在jQuety中，nextAllO方法获得匹配元素集合中某个元素后面的所有兄弟元素。如果提供选择器，则取回匹配该选择器的后而的所有兄弟元素。prevAllO方法获得匹配元素集合中某个元素前而的所有兄弟元素。如果提供选择器，则取回匹配该选择器的前而的所有兄弟元素。兄弟节点查找的示例代码参考教材3.13节。sibluigs(selector)在jQuery中，siblings。方法获得匹配集合中某个元素的所有兄弟元素。如果提供选择器，则取回匹配该选择器的所有兄弟元素。兄弟盯点查找的示例代码参考教材3.1.3节。>创建节点在原生JavaScript中创建一个节点是比较麻烦的，需要通过document.createElementO方法来实现。而在jQuery中创建一个i'j点是非常方便的，采用$()方法实现，代码如下所示。<script>//创建li标签$('<div>') //创建div标签</script>这里要注意，$0中添加11的时候需要带上左右尖括号，这表示创建11节点，若不带左右类括号则表示选择11节点。jQuery中除了可以快速创建一个标签外，还可以快速创建标签里的内容，演示代码如下所示。<script>varli=$「列表项);vardiv=$('<div>块容器</div>r);<script>可以创建标签以及标签内容都是非常灵活的，注意，创建出来的新元素为jQuery对象，并不是原生的D0M对象。＞添加节点创建的肖点暂时存储在JavaScript内存中，如果想把创建的节点添加到页而中，需要通过添加肖点的方法来实现。在jQueiy中添加节点的操作模式较多，下面一一进行讲解。append。和appendTo（）这两个方法都是把新巧点添加到指沱巧点内部的末尾位垃，语法分别为：指定节点.append（新节点）新节点.append"（指定节点）在代码中的具体应用代码参考教材3-2.2节。两种方法都可以实现添加操作，并且显示的效果相同，那么它们之间的区别是什么呢？就是后续操作所针对的肖点是不同的，演示代码参考教材3.2.2节。prepend。和prepeiidTo（）这两个方法都是把新节点添加到指眾肖点内部的起始位置，语法分別为：指定节点.prepend（新节点）新节点.prependTo（指定节点）在代码中的具体应用代码参考教材3-2.2节。before（）和msertBefbreO这两个方法都是把新节点添加到指定节点的前而，语法分别为：指定节点.insert（新节点）新节点.insertBefore（抬定节点）在代码中的具体应用代码参考教材3.2.2节。这两个方法也是针对后续操作有区别，苴他使用没有太大差异。after（）和insertAfter（）这两个方法都是把新节点添加到指泄节点的后面，语法分别为：指定节点.after（新节点）新节点.insertAf匸er（抬定节点）在代码中的具体应用参考教材3.2.2节。添加节点的方法，除了用于创建石点，也可以用于操作页而中已有的节点，对已有节点进行剪切操作，代码参考教材3.2.2节。＞替换节点有时候需要对节点进行替换操作，jQuery提供了两种替换肖点的方法。replaceWithO和replaceAll（）这两个方法都是用新节点或已有节点替换掉指定巧点，语法分别为：指定节点.replaceWith（新节点）新节点.replaceAll（指定节点〉在代码中的具体应用代码参考教材3.2.3节。第二课时（操作DOM元素.DOM高级方法）内容回顾回顾上节内容，引出本课时主题。上节已经介绍了查找DOM元素、创建肖点、添加节点、替换节点，下面将介绍删除节点、克隆节点和DOM高级方法，引岀本课时的内容。明确学习目标能够掌握删除节点能够掌握克隆节点<3)能够掌握closest。方法能够掌握包裹方法能够掌握截取范围方法知识讲解>删除节点有时候需要对肖点进行删除操作，jQuery中提供了两种删除节点的方法。remo\-e()、detachO这两个方法都是对指泄节点进行删除操作的，语法分别为：指定节点.remove()指定节点.detachO在代码中的具体应用代码参考教材3-2.4节。remove()方法和detach()方法的都是删除节点的操作，区别在于将已删除巧点再次添加到页而后，detachO方法会保留节点删除前的事件行为，而removeO方法不会保留肖点删除前的事件行为，将删掉的步点重新添加，代码参考教材324节。jQuery中还提供了一个淸除指泄节点内所有内容的方法，即empty()方法。代码参考教材324节。克隆节点对已有节点进行添加的时候，使用的是剪切操作。如果想对已有节点进行克隆，就需要用到clone。方法。clone()这个方法用于克隆节点的，语法为：指定节点.clone()在代码中的具体应用代码参考教材3.2.5节。cloneO方法接收一个参数，类型为布尔值。参数为true,表示同时克隆节点的事件行为，参数为fhlse的，表示不克隆丹点的事件行为，默认码数为false,现将cion亡()的参数设置为true,应用代码参考教材3.2.5节。closest。方法在jQuery中，closest。方法从当前元素开始沿DOM树向上査找，获得匹配选择器的第一个祖先元素，语法为：指定节点.closest(满足条件的祖先节点).具体代码代码参考教材331节。closestO方法在特泄的情况下，要比parentO方法灵活的多，下而是一个具体案例，找到按钮所对应的列表项，并对其进行样式操作，先看parent。的代码参考教材331节。接下来演示closestO方法的代码参考教材33.1节。可以看到，closestO方法处理问题更加的简洁与灵活，不用一层层进行査找，只需要指泄最近的满足条件的节点即可。＞包裹方法有时候需要对指泄的节点进行包裹操作，即在标签的外面添加一个父标签。wrap。\vrapO方法将所选元素用某个标签包裹起来，语法为：指定节点.wrap(包裹节点)具体代码参考教材33.2节。wrapAllOwrapAllO方法会将所有匹配的元素用某个元素包裹起来，语法为：指定节点.x^rapAll(包裹节点)具体代码参考教材332节。\vraplnner0\vrapInnerO方法将所选元素的所有内部元素用某个标签包裹起来，语法为：指定节点.wraplnner(包裹节点)具体代码参考教材33.2节。un\vrap()umvrapO方法删除包裹节点，即删除父节点，但是删除的包裹节点不包含body元素，语法为：指定节点.unwrap()具体代码参考教材33.2节。＞截取范围方法有时候需要对指左的节点进行截取操作，即取得整个节点集合中的某一部分节点。slice()slice()方法把匹配元素集合缩减为指定范围的子集，语法为：指定节点.slice(起始节点，结束位置)具体代码参考教材333节。nextUntilOnextUntilO方法获得某个元素后而的所有兄弟元素，当有第一个参数时,遇到该参数所匹配的元素时会停止搜索。当有第二个参数时，则筛选由该参数指建的节点，语法：指定节点.nextUntil 止元素，筛选条件｝具体代码参考教材333节。pre\-Until()prevUntiK)方法获得某个元素前而的所有兄弟元素，使用方式跟nextUntilO类似，只是截取的方向不同，语法：

指定节点.prevUntil（截止元素，筛选条件｝具体代码参考教材333节。pareiitsUntil（）pareiitsUntilO方法获得某个元素所有祖先元素，跟parents。的区别在于截取到指定的位置，语法：指定节点.parentsUntil（截止元素。筛选条件）具体代码参考教材333节。第