jquery-基础-遍历-04

1、jquery遍历

遍历，通俗点说的话，就是将目标中存在的一个个找出来晾一遍；根据规律将目标中所有的项逐步获取，称为遍历

遍历的对象通常都有共通的地方，例如在同一DOM树上。

2、jquery遍历-祖先

祖先，顾名思义，就是当前对象的上层元素，统称为祖先元素；通过jquery可以向上遍历寻找需要的祖先元素

向上遍历DOM树：

遍历的方法：parent()||parents()||parentsUntil()

jQuery parent()方法：

作用：返回当前元素的直接父元素，该方法只会向上遍历一级

$(document).ready(()=>{
    $('span').parent();
})

jQuery parents()方法：

使用方法：

方法一：直接使用，不加参数

方式二：加入参数【选择器】

作用：

方法一的作用：遍历除当前元素的所有祖先元素知道到达标签【HTML】

$(document).ready(()=>{
    $('span').parents();
})

方法二的作用：遍历除当前元素的所有祖先元素，且指定选择器为【选择器】的元素

$(document).ready(()=>{
    $('span').parents('ul');//选定祖先元素中为ul的元素
})

jQuery 的parentsUntil()方法：

使用方法：parentsUntil（【选择器】）

作用：查询当前元素的祖先元素，到达指定的选择器【选择器】为止

$(document).ready(()=>{
    $('span').parentsUntil('ul');//遍历祖先元素到达ul为止
})

3、jQuery遍历-后代

同理jQuery向下遍历就是后代遍历，获取后代元素

向下遍历DOM树：

遍历方法：children()||find()

jQuery children()方法：

使用方法：

方法一：不加参数，直接获取

方法二：加入参数【选择器】

作用：

方法一作用：直接获取所有的后代元素的集合对象

$(document).ready(()=>{
    $('body').children();//获取所有的后代元素
})

方法二作用：直接获取指定的选择器的后代元素的集合对象

$(document).ready(()=>{
    $('body').children('span');//获取所有的后代span元素
})

jQuery find()方法：

使用方法：

方法一：参数选择器【选择器】

方法二：参数通用选择器

作用：

方法一作用：遍历选择所有满足选择器的后代元素的集合

$(document).ready(()=>{
    $('body').find('p .1');//获取所有类为1 的后代元素p
})

方法二作用：遍历选择器所有的后代元素的集合

$(document).ready(()=>{
    $('body').find('*');//获取所有的后代元素
})

4、jQuery遍历-同胞

同胞顾名思义就是与你通级的，在这里就是同级的元素

遍历同胞的jquery方法：siblings()||next()||nextAll()||nextUntil()||prev()||prevAll()||prevUntil()

jquery  siblings()方法：‘

作用：查询所有的同胞元素

$(document).ready(()=>{
    $('#div1').siblings();//获取所有同胞元素
})
$(document).ready(()=>{
    $('body').siblings(‘p’);//获取所有的后代元素中为p的元素
})

’jquery next()/prev()方法：

作用：返回当前元素的下一个/上一个同胞元素

$(document).ready(()=>{
    $('body').next();//获取当前元素的下一个同胞元素
})
$(document).ready(()=>{
    $('body').next('p');//返回当前元素的下一个是p的同胞元素
})

$(document).ready(()=>{
    $('body').prev();//获取当前元素的上一个同胞元素
})
$(document).ready(()=>{
    $('body').prev('p');//返回当前元素的上一个是p的同胞元素
})

jquery nextAll()/prevAll()方法：

作用：返回当前元素之后/之前的所有的同级别元素

$(document).ready(()=>{
    $('body').nextAll();//获取当前元素之后的所有同级别元素
})

$(document).ready(()=>{
    $('body').prevAll();//获取当前元素之前的所有同级别元素
})

jquery nextUntil()/prevUntil()方法：

作用：返回同级别元素直到【选择器】为止

$(document).ready(()=>{
    $('body').nextUntil('span');
})

$(document).ready(()=>{
    $('body').prevUntil('span');
})

5、jquery遍历-过滤

jQuery first() 方法：

作用：first() 方法返回被选元素的首个元素。

$(document).ready(function(){
  $("div p").first();
});

jQuery last() 方法：

last() 方法返回被选元素的最后一个元素。

$(document).ready(function(){
  $("div p").last();
});

jQuery eq() 方法：

eq() 方法返回被选元素中带有指定索引号的元素。

$(document).ready(function(){
  $("p").eq(1);
});

jQuery filter() 方法：

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。筛选：

$(document).ready(function(){
  $("p").filter(".url");
});

jQuery not() 方法：

not() 方法返回不匹配标准的所有元素。

$(document).ready(function(){
  $("p").not(".url");
});