前言
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 更多的遍历方法
参考菜鸟教程