JQuery（遍历方法及增删改查方法）

前言

  jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
  本文仅是部分常用方法

1 jQuery遍历-过滤（位置）

在jquery中对象的元素数组过滤出一部分元素

1.1 first()：返回被选元素的第一个元素。

1.2 last()：返回被选元素的最后一个元素。

1.3 eq(index)：返回带有被选元素的指定索引号的元素。

index整数，指示元素的位置（最小为 0）。
如果是负数，则从集合中的最后一个元素往回计数。

1.4 filter()：将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。

1.5 not()：方法返回不符合一定条件的元素。

该方法让您规定一个条件。不符合条件的元素将从选择中返回，符合条件的元素将被移除。
该方法通常用于从被选元素组合中移除一个或多个元素。

提示：not() 方法是与 filter() 方法相对的。

1.6 has()：返回拥有一个或多个元素在其内的所有元素。

测试源码

<script src="js/jquery-1.10.1.js"></script>
<script>
    var $list = $("ul li")
    //1 ul下的第一个li
    $list.first().css("background","red")   
    //2 ul下的最后一个li 
    $list.last().css("background","yellow") 
    //3 ul下的第三个li  
    $list.eq(2).css("background","blue")
    //4 ul下的标签中的title属性为hello的
    $list.filter('[title=hello]').css("background","pink")
    //5 ul下的标签中的title属性不为hello的
    $list.filter('[title!=hello]').css("background","blue")
    //6 ul下的除id为d的标签添加样式
    $list.not('#d').css("background","blue")
    //7 ul下的li标签中含有span子标签的
    $list.has("span").css("background","grey")
</script>

2 jQuery遍历-查找（孩子/父母/兄弟标签）

2.1 children() 返回被选元素的所有直接子元素

2.2 find() 返回被选元素的后代元素

2.3 parent() 返回被选元素的直接父元素

2.4 prevAll() 前边所有的兄弟（同级元素） prev()前一个

2.5 nextAll() 后边所有的兄弟（同级元素） next()后一个

2.6 siblings() 前后所有的兄弟标签（同级元素）

<script src="js/jquery-1.10.1.js"></script>
<script>
   var $ul = $("ul")
   // 1 ul的标签的第二个span子标签
   $ul.children("span:eq(1)").css("background","pink")
   // 2  ul标签的第二个span后代标签
   $ul.find("span").eq(1).css("background","red")
   // 3 ul的父标签
   $ul.parent().css("background",'grey') 
   //$ul.parent().parent()  //jquery的链式操作
   //4 id为cc的li标签的前面的所有的li标签
   //$("#cc").prev().css("background","green")
   //$("#cc").next().next().css("background","blue")
   $("#cc").prevAll().css("background","green")
   //5 id为cc的li标签的所有的兄弟li标签
   $("#cc").siblings().css("background","purple")
</script>

测试代码

3 文档-增删改查

3.1 添加和替换元素

3.1.1 append(content)

  向当前匹配的所有元素内部的最后插入指定内容

3.1.2 prepend(content)

  向当前匹配的所有元素内部的最前边插入指定内容

3.1.3 before(content)

  将指定内容插入到当前所有匹配元素的前面替换节点

3.1.4 after(content)

  将指定内容插入到当前所有匹配元素的后面替换节点

3.1.5 replaceWith

  用指定内容替换所有匹配的后边的删除节点

3.2 删除元素

3.2.1 empty()

  删除所有匹配元素的子元素

3.2.2 remove()

  删除被选元素（及其子元素）

测试代码

<script src="js/jquery-1.10.1.js"></script>
<script>
$(function(){
    var $ul1=$("#ul1")
    //1 向id为ul1的ul添加一个span(最后)
    $ul1.append("<span style=\"color:red\">我是新增的span标签</span>")
    // 2 向id为ul1的ul添加一个span(最前)
    $ul1.prepend("<span style=\"color:red\">我是新增的span标签</span>")
    //3 在id为ul1的ul下的li(title为hello)的前面添加span
    $ul1.children("li[title=hello]").before("<span style=\"color:red\">我是before的span标签</span>")
    //4 在id为ul1的ul下的li(title为hello)的后边添加span
    $ul1.children("li[title=hello]").after("<span style=\"color:red\">我是after的span标签</span>")
    //5 将在id为ul1的ul下的li(title为hello)全部替换为p
    $ul1.children("li[title=hello]").replaceWith("<p>我是替换的p标签内容</p>")
   // 6 删除id为ul2的ul下的所有的li
   $("#ul2").remove()
   //$("#ul2").empty()
})
</script>

4 更多的遍历方法

参考菜鸟教程