码迷,mamicode.com
首页 > Web开发 > 详细

jquery的查找筛选器

时间:2019-06-30 12:47:59      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:doctype   mamicode   spl   span   first   info   oct   view   bsp   

$("li").eq(2)

$(".outer").children("p") 子代  $(".outer").find("p") 后代

$("li").eq(2).next() 下一个(向下找)    $("li").eq(2).nextAll() 所有的  $("li").eq(2).nextUntil("#end") 范围

$("li").eq(2).prev() 上一个(向上找)    $("li").eq(2).prevAll() 所有的  $("li").eq(2).prevUntil("#end") 范围

$().parent() 父标签

$().parents() 所有祖先标签

$().parentsUntil()

$().siblings() 所有兄弟节点

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<a href="">click</a>

<p id="p1" alex="sb">pppp</p>
<p id="p2" alex="sb">pppp</p>

<div class="outer">outer
    <div class="inner">
        inner
        <p>inner p</p>
    </div>
    <p>alex</p>
</div>
<div class="outer2">Yuan</div>
<p>xialv</p>

<ul>
    <li class="begin">1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>4444</li>
    <li id="end">4444</li>
    <li>4444</li>
</ul>

<input type="text">
<input type="checkbox">
<input type="submit">


<script src="jquery-3.1.1.js"></script>
<script>
    //筛选器
    //$("li").eq(2).css("color","red");
    //$("li").first().css("color","red");
    //$("li").last().css("color","red");

    //查找筛选器

    //$(".outer").children("p").css("color","red");
    //$(".outer").find("p").css("color","red");

    //$("li").eq(2).next().css("color","red");
    //$("li").eq(2).nextAll().css("color","red");
    //$("li").eq(2).nextUntil("#end").css("color","red");

    //$("li").eq(4).prev().css("color","red");
    //$("li").eq(4).prevAll().css("color","red");
    //$("li").eq(4).prevUntil("li:eq(0)").css("color","red");

    //console.log($(".outer .inner p").parent().html())
   //$(".outer .inner p").parents().css("color","red");
   //$(".outer .inner p").parentsUntil("body").css("color","red");

    $(".outer").siblings().css("color","red")

</script>
</body>
</html>
View Code

 

 

 

技术图片技术图片技术图片

 

jquery的查找筛选器

标签:doctype   mamicode   spl   span   first   info   oct   view   bsp   

原文地址:https://www.cnblogs.com/jintian/p/11109207.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!