jQuery学习笔记之四

最新推荐文章于 2024-04-19 22:31:37 发布

hello_shilei

最新推荐文章于 2024-04-19 22:31:37 发布

阅读量366

点赞数

分类专栏：笔记文章标签： html javascript jquery

本文链接：https://blog.csdn.net/hello_shilei/article/details/49333673

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、jQuery之元素的遍历

HTML代码

<body>
<div id="div1">
    <div id="div2">
        <p id="p">
            <a>
                hello world
            </a>
        </p>
    </div>
</div>
</body>

style代码

#div1{
    width: 200px;
    height: 200px;
    border: 3px solid cadetblue;
}
#div2{
    width: 150px;height: 150px; border: 3px solid chartreuse;
}
p{
    width: 100px; height: 100px;border: 3px solid chocolate;
}
a{
    border: 2px solid cornflowerblue;
}

js代码

/**

 * 向下遍历
 * children 只对标签的下一级子标签   里面的参数是可选参数
 * find（）  必须写参数，对指定的任意子标签生效
 */
$(document).ready(function(){
   //$("#div1").children().css({border:"3px solid #FF0000"});
    $("#p").find("#div1").css({border:"3px solid #FF0000"}); //
});

/**
 * 向上遍历
 * parent 只对直接父元素
 * parents  可以填写参数元素对指定的元素都有效  不指定参数对其所有的父元素都有效果
 * parentsUntil 填写参数对其之间（区间）的元素有效  不指定参数对其所有父元素都有效果
 */
$(document).ready(function(){
   //$("a").parent().css({border:"3px solid #FF0000"}); //a标签的直接父元素有效
   $("a").parents("#div1").css({border:"3px solid #FF0000"}); //a标签之上所有父元素都有效
   // $("a").parentsUntil("#div2").css({border:"3px solid #FF0000"}); //a元素和div2元素之间的p元素有效果
});

/**
 * 同级遍历
 * sibings 同级
 * next 下一个
 * nextAll 下边所有
 * nextUntil 向下区间
 * prev 上一个
 * prevAll  上边所有
 * preUntil 向上区间
 */
$(document).ready(function(){
   //$("h1").siblings("h2").css({border:"3px solid #FF0000"}); //同级元素生效  如果填写参数对指定的参数生效
   // $("h1").next().css({border:"3px solid #FF0000"});//只对下一个元素 参数不生效
   // $("h2").nextAll().css({border:"3px solid #FF0000"});//h2下边所有的元素
   // $("h1").nextUntil("h3").css({border:"3px solid #FF0000"});//元素区间的生效  只对向下区间的元素  没有参数默认向下所有
   // $("h3").prev().css({border:"3px solid #FF0000"});//上一个元素
   // $("h3").prevAll("h1").css({border:"3px solid #FF0000"});//只对h3上边所有的元素生效
    $("h3").prevUntil().css({border:"3px solid #FF0000"});//元素区间的生效  只对向上区间的元素 没有参数默认向上所有
});

/**
 * 遍历之过滤
 * first() last()  eq()  filter() not()
 */
$(document).ready(function(){
    //$("div p").first().css("background-color","#FF0000"); //p元素的同级元素的第一个
    //$("div p").last().css("background-color","#FF0000"); //p元素的同级元素中德最后一个
    //$("div p").eq(4).css("background-color","#FF0000"); //在p元素的同级元素中寻找索引为4的元素
    //$("div p").filter(".p2").css("background-color","#FF0000"); //类是p2的元素
    $("div p").not(".p2").css("background-color","#FF0000");  //class类不是p2的元素
});