开发者学堂课程【jQuery 开发教程：jQuery 遍历_其他遍历】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4302
jQuery 遍历_其他遍历
目录
一、 常用的方法
二、 演示
一、 常用的方法
其他遍历有很多方法，常用的有三种。
1、.add()：
添加元素到匹配的元素集合。
2、.contents()：
获得匹配元素集合中每个元素的子元素，包括文字和注释节点。.contents 方法和 children 方法是类似的，他们都是获取每个元素的子元素，不同的是 contents 包括文字和注释节点，而 children 不包括。
3、.end()：
终止在当前链的最新过滤操作，并返回匹配的元素的以前状态。
二、 演示
打开集成开发环境 webstorm 新建一个 html 文件，命名为 other
1、.add()方法演示：
<div></div> <div></div> <div></div> <div></div> <div></div> <p>addaddadd</p> <script> $(function(){ $("div").add("p").css("background-color","red");
给 div 和 p 标签同时添加一个 css 样式，add 方法可以接受几乎所有的参数，比如选择器，元素，stmll，jQueryobjuct，对象等等。在形成之前需要给 div 和 p 标签一个大小。
<style> Div,p{ Width:100px; Height:100px; Float:left; }
执行效果如下:
前面的是 div 后面的是 p 标签，都被加上了红色的效果。$("div").add("p").css("background-color","red");表示div和p标签的样式是红色背景的意思。
上面是为 div 和 p 标签添加同一种格式。在实际开发中，Div 与 p 标签都有各自的样式，又有相同的样式，先设置 div 设置完之后，再设置 div 与 p 标签同样的样式
$("div").css("background-color","yellow").add("p").css("border","1px solid green");演示效果如下：
2、.contents()方法演示：
<p>hello<a href="#">John</a>,how are you doing? </p> <script> $(function(){
要获取 p 标签中所有的子节点，用 contents 方法，可以获取 hello ，以及 a 标签中的内容，以及 how are you doing? 给子节点为文本节点，给它嵌套一个 b 标签，给它一个加粗强调的效果。Contents 方法不接受任何的参数。用 . nodeType 方法可以判断节点是否为文本节点，这个属性是以数字的形式返回节点的类型，当它为元素节点时返回1，为属性节点时返回的是2，文本节点返回的是3.这里只需要让他的节点不是标签节点即可。
$("p").contents().filter(function() { return this.nodeType!=1; }).wrap("<b/>")；
Wrap方法是在一个匹配元素的外层包上一个 html 元素，这里包上一个 b 标签。执行结果中除了 a 标签以外其他标签都加上了加粗的效果一个 b 标签，通过审查元素检查到 hello 和 how are you doing? 都被添加上了一个 b 标签。
3、.end 方法演示：
<ul> <lil class="foo">li 1</li> <li>li 2</li> <11 class="bar">li 3</li> </ul> <script> $(function(){ $("ul").find(".foo").css("backgroundcolor","yellow").end().find(".bar").css("background-color’’,red)
上述做的是只用一次调用的方法，给第一个 li 标签添加样式后，再给第二个 li 标签添加样式。用 end 方法可以实现用一条语句同时为 li1 标签和 li3 标签添加一个样式，这个方法不接受任何参数。
演示效果如下：
Li1 标签添加了黄色的效果，li3 标签添加了红色的效果。end 方法可以一次性调用所有的方法，使用 end 方法可以返回匹配元素的以前状态，意思是匹配到第一个 li 标签并设置完后，使用 end 方法，就可以结束过滤操作，返回到 ul 这一层，然后继续向下找，找到li3标签并设置li3标签的样式。
