本节主要讲jQuery的元素遍历的方法，每个重点都配备案例，写笔记不易，希望大家多多支持，多多关注！亲爱的号友们，互粉哈，本机最后有福利啊！

jQuery遍历之children()方法

.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）

$("div").children()通过在DOM树中对这些元素的直接子元素进行搜索，并且构造一个新的匹配元素的jQuery对象

$("div").children(".selected") 方法选择性地接受同一类型选择器表达式

例： $(".div").children().css('border','1px solid red')

$('.div').children(':last').css('border', '3px solid blue')

jQuery遍历之find()方法

.find()快速查找DOM树中的这些元素的后代元素 children是父子关系查找，find是后代关系（包含父子关系）

$(".left").find("li:last").css('border','1px solid red')

jQuery遍历之parent()方法

.parent()查找父元素 只查找一级

例： $(".level-3").parent().css('border','1px solid red');//查找.level-3的父元素

$('.item-a').parent(':last').css('border', '1px solid blue') //找到所有.item-a的父元素（.item-a不止

一个）选择最后一个

jQuery遍历之parents()方法

.parents() 查找合集里面的每一个元素的所有祖辈元素

parents()方法也可选择性地接受同一型选择器表达式

1、 .parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找

2、$( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。（html文档中的根元素，所有是空）

例： $(".item-b").parents().css('border','1px solid red') 选取全部父元素

$('.item-b').parents('.first-div').css('border', '2px solid blue') 选取父元素class="first-div"的

jQuery遍历之closest()方法

closest()方法接受一个匹配元素的选择器字符串 ，从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素。$("div").closet("li') 表示在div元素中 往上查找所有的li元素

.parents()和.closest()区别：

1、起始位置不同：.closest开始于当前元素 .parents开始于父元素

2、遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合

3、结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

例：$(".item-1").closest(".level-2").css('border','1px solid red')

jQuery遍历之next()方法

.next()查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合

next()无参数允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素，并根据匹配的元素创建一个新的 jQuery 对象，也可以选择性地接，同一类型选择器表达式。

例：$(".item-2").next().css("border",'1px solid red')

$('.item-2').next(':first').css('border', '1px solid blue')//选出item-2下的第一个兄弟元素

等同于： $('.item-2').find(':eq(1)').css('border','1px solid red');

jQuery遍历之prev()方法

.prev()查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合(同辈)，也可以选择性地接受同一类型选择器表达式

例：$(".item-2").prev().css('border','1px solid red')

$('.item-3').prev(':last').css('border', '1px solid blue')//找到item-3最后一个元素的兄弟节点（.item-3可能存在多个，所以选择最后一个）

jQuery遍历之siblings()

.siblings()查找指定元素集合中每一个元素的同辈元素,也可以选择性地接受同一类型选择器表达式

例： $(".item-2").siblings().css('border','1px solid red')

$('.item-2').siblings(':last').css('border', '2px solid blue')//筛选最后一个兄弟节点

jQuery遍历之add()方法

add() 将元素添加到匹配的元素集合中

处理一：传递选择器 $('li').add('p') 先选择li ，再加上p。组成一个合集；

处理二：传递dom元素 $('li').add(document.getElementsByTagName('p')[0])

处理三：动态创建P标签 $('li').add('<p>新的p元素</p>').appendTo(目标位置)

例：$('li').add('p').css('background', 'red')//既选择li又选择p 都加上红色背景

$('li').add('<p>新的p元素</p>').appendTo($('.right')) //既选择li又新创建p 都追加到.right里边

jQuery遍历之each()

.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数

1、each是一个for循环的包装迭代器

2、each通过回调的方式处理，并且会有2个固定的实参，索引与元素

3、each回调方法中的this指向当前迭代的dom元素

例：<ul>

<li>百度</li>

<li>谷歌</li>

</ul>

$("li").each(function(index, element) {

index 索引 0,1

element是对应的li节点 li,li

this 指向的是li

})

如果需要提前退出，可以以通过返回 false以便在回调函数内中止循

例：$("li").each(function(index, element) {

$(this).css('color','red')

})//遍历所有li

至此所有的jQuery的dom操作教程算是学完了，学到现在，基本的jquery小特效应该都可以自己去写了！后续仍有笔记，大家关注我，我会每天发布学习笔记的！粉我必粉！

学累了，福利来一波