jQuery学习笔记（三）jQuery遍历

罗大宝

于 2014-03-15 20:02:22 发布

阅读量598

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/sharleneluo/article/details/21244901

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery遍历是什么？用来干什么？

HTML中的标签元素之间可能有包含关系，所有的标签元素就会构成一个树形结构，根是<html>.

jquery遍历允许我们从某个标签元素开始，沿着树去寻找其他标签。（就像OS中的文件系统的相对路径一样）

这种遍历叫做“对DOM进行遍历”

1、找祖先（向上遍历）

parent() //返回当前tag的【直接】父元素
parents() //返回向上直到树根<html>标签的【所有】祖先元素
parentsUntil() //返回向上直到树根<html>标签的【所有】祖先元素

下面一一进行介绍：

parent() //返回当前tag的【直接】父元素

$(document).ready(function(){
$("span").parent();
});

//以上返回<span>元素的直接父元素

parents() //返回向上直到树根<html>标签的【所有】祖先元素

$(document).ready(function(){
$("span").parents();
});

//以上返回<span>元素的所有祖先元素

parents()中可以在括号中添加过滤功能：

$(document).ready(function(){
$("span").parents(“ul”);
});

//以上返回<span>的所有为<ul>的祖先

parentsUntil()//返回介于2个tag【之间】的所有祖先

$(document).ready(function(){
$("span").parentsUntil(“div”);
});

//上述返回结余当前tag<span>与其祖先<div>之间的所有tag

2. 找后代（向下遍历）

children()//返回当前tag的所有【直接】子元素；即只针对DOM树的下一级
find()//【一路向下】直到【最后一个】后代，全部返回

下面一一进行介绍：

children()

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

//以上返回<div>的所有直接后代

$(document).ready(function(){
$("div").children(“p.1”);
});

//以上返回<div>的直接后代中所有类名为“1”的<p>元素

find()

$(document).ready(function(){
$("div").find(“span”);
});

//以上返回<div>后代中所有的<span>元素

$(document).ready(function(){
$("div").find(“*”);
});

//以上返回<div>的【所有后代】

3. 找兄弟

siblings()

$("h2").siblings();//返回<h2>的所有同胞元素

$("h2").siblings("p");//返回属于 <h2> 的同胞元素的所有 <p> 元素

next()

$("h2").next();//返回<h2>的下一个同胞元素

nextAll()

$("h2").nextAll();//返回 <h2> 的所有跟随的(后面所有的)同胞元素

nextUntil()

$("h2").nextUntil("h6");//返回介于 <h2> 与 <h6> 元素之间的所有同胞元素

prev()//返回前一个
prevAll()//返回前面所有
prevUntil()//返回向前直到某个元素之间的所有同胞元素

4. 过滤

在选出了一组元素时，如何选定某个元素：

first()//选出了一组元素时，返回元素组中的首个元素//$("div p").first();
last()//选出了一组元素时，返回元素组中的最后一个元素//$("div p").last();
eq() //选出了一组元素时，返回某个索引号的元素（索引号类似于数组下标；也是从0开始）//$("p").eq(3);

是否匹配某项指定标准：

filter()//返回匹配的//$("p").filter(".intro");//返回带有类名intro的所有<p>
not()//返回不匹配的//$("p").not(".intro");//返回不带有类名intro的所有<p>

罗大宝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记（三）jQuery遍历

jQuery遍历是什么东东？用来干什么？HTML中的标签元素之间可能有包含关系，所有的标签元素就会构成一个树形结构，根是.jquery遍历允许我们从某个标签元素开始，沿着树去寻找其他标签。（就像OS中的文件系统的相对路径一样）这种遍历叫做“对DOM进行遍历”1、找祖先（向上遍历）parent() //返回当前tag的【直接】父元素parents()
复制链接

扫一扫

专栏目录