学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>jQuery>>基础教程>>

jQuery DOM 操作之遍历DOM树

点击:

    在jQuery中我们可以根据某个元素的在DOM树中的位置,然后根据这个节点的某个关系来查找相关的HTML元素节点,从而来使用其他的操作方法。

    在jQuery中用来查找HTML元素的方法不仅有标签选择器、类选择器以及id选择器,还有以下方法可以用来查找HTML元素:

    • parent() - 返回被选元素的直接父元素
    • parents() - 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)
    • parentsUntil() - 返回介于两个给定元素之间的所有祖先元素
    • children() - 返回被选元素的所有直接子元素
    • find() - 返回被选元素的后代元素,一路向下直到最后一个后代
    • siblings() - 返回被选元素的所有同胞元素
    • next() - 返回被选元素的下一个同胞元素
    • nextAll() - 返回被选元素的所有跟随的同胞元素
    • nextUntil() - 返回介于两个给定参数之间的所有跟随的同胞元素
    • prev() - 返回被选元素的上一个同胞元素
    • prevAll() - 返回被选元素的所有前面的同胞元素
    • prevUntil() - 返回介于两个给定参数之间的所有前面的同胞元素
    • first() - 返回被选元素的首个元素
    • last()返回被选元素的最后一个元素
    • eq()返回被选元素中带有指定索引号的元素
    • filter()方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
    • not()返回不匹配标准的所有元素

    假设网页源码为:
    <html>
    <head>
    <title>这里是jQuery操作DOM节点的实例</title>
    </head>
    <body>
    <div name='div1' id='id3'>
    <div name='div2' id='id1'><p name='p1'></p></div>
    <div name='div3' id='id2'></div>
    </div>
    </body>
    </html>

    一、使用jQuery的parent()方法返回被选元素的直接父元素

    $("p").parent();
    如果p元素使用parent()方法将会返回:name为div2的元素;

    二、使用jQuery的parents()方法返回被选元素的所有祖先元素

    $("p").parents();
    如果p元素使用parents()方法将会返回:name为div2、div1的元素以及body和html节点;

    三、使用jQuery的parentsUntil()方法返回介于两个给定元素之间的所有祖先元素

    $("p").parentsUntil('body');

    如果p元素使用parentsUntil()方法将会返回:name为div2、div1的元素节点;

    四、使用jQuery的children()方法获取被选元素的所有直接子元素

    $("div").children();
    如果div元素使用children()方法将会返回:name为div3、div2、div1的元素节点;

    五、使用jQuery的find()方法获取被选元素的后代元素

    $("div").find();
    如果div元素使用find()方法将会返回:name为div3、div2、div1的元素以及p元素节点;

    六、使用jQuery的siblings()方法获取被选元素的所有同胞元素

    $("#id1").siblings();
    如果id为id1的div元素使用sibling()方法将会返回:name为div3、div1的元素节点;

    七、使用jQuery的next()方法获取被选元素的下一个同胞元素

    $("#id1").next();
    将会返回:name为div3的元素节点;

    八、使用jQuery的nextAll()方法获取被选元素的所有跟随的同胞元素

    $("#id1").nextAll();

    将会返回:id1后面所有同级的div,即:div3的元素节点;

    九、使用jQuery的nextUntil()方法获取介于两个给定参数之间的所有跟随的同胞元素

    $("#id3").nextUntil('#id2');
    将会返回id2的div元素节点;

    十、至于jQuery prev(), prevAll() 以及prevUntil() 方法刚好与next()、nextAll()、nextUntil()三个方法的遍历方向相反,这里就不做介绍了。

    十一、使用jQuery的first()方法获取被选元素的首个元素

    $("div").first();
    将会返回name为div1的元素节点;

    十二、使用jQuery的last()方法获取被选元素的最后一个元素

    $("div").last();

    十三、使用jQuery的eq()方法获取被选元素中带有指定索引号的元素

    $("div").eq(1);

    江南汇返回name为div2的元素(PS:索引号从0开始而不是1);

    十四、使用jQuery的filter()方法获取匹配元素

    $("div").filter(".css1");
    将会返回类名中有css1的div;

    十五、使用jQuery的not()方法获取不匹配的所有元素

    $("div").filter(".css1");

    将会返回类名中不含有css1的div;


赞一个(0)     踩一个(0)