jQuery_DOM查找

1.1 each方法遍历DOM节点

JQuery对象的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值时，就需要自己迭代作用:遍历JQuery对象集合，为每一个匹配元素执行一个函数

$(selector).each(function(index,element){})
index:当前元素在所有匹配元素中的索引号
element：当前DOM对象

某个容器中，引入指定目录里的图片

 <div class="box">
    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="">
</div>

 <script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            //对盒子中的图像进行路径渲染
            //对图像进行遍历
            //i代表每个图的索引
            $(".box img").each(function(i,element){
                console.log(i);

                $(this).attr('src',`/img/${i+1}.jpeg`);
                $(this).css('width','200px')
               

            })
        })
    </script>

预览：

注意：function(i){ } 这个函数，不能用 箭头函数表示。

1.2 同级节点之间的查找

next() 是在兄弟节点中，紧邻着往后匹配;

取得一个 包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素 集合。

 <div class="box">
        <p>我是p标签</p>
        <p>我是p标签</p>
        <p>我是p标签</p>
        <div>
            <p>我是p标签</p>
            <span>我是span</span>
        </div>
    </div>

 

<script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){

            //修饰同辈兄弟节点
            $('.box p').next().css('color','red')
        })
    </script>

预览：

 prev() 是在兄弟节点中，往前匹配。

 <p>Hello</p><div>Hello Again</div><p>Hello Again</p>

    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
    
            $('p').prev().css("color","orange");
    
        })
    </script>

1.3 父级/子级节点的检索

children()是在子节点中，往后匹配。

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

parent()是在父节点中，往前匹配。

取得一个包含着所有匹配元素的唯一父元素的元素集合。

ps：请注意了---子节点和父节点都是相邻的，深度为1的节点，也就是标题提到的检索深度为1

<p>Hello</p>
    <div>
        <span>Hello Again!!!</span>
    </div>
    <p>And Again</p>

    <div class="box">
        <p>Hello</p>
        <p>Hello</p>
    </div>

<script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function () {

            $('div').children().css('color', 'red');

            $('.box p').parent().css('background-color', 'skyblue');

        })
    </script>

预览：

1.4 后代节点的检索

find() 检索的是子代元素和后代元素，不会检索兄弟节点。(注意：一定要指定 后代是谁？否则查找不到！！)

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

<div class="parent">
    <div class="box">
        <ul>
            <li>1 aaa</li>
            <li>2 aaa</li>
            <li>3 aaa</li>
            <li>4 aaa</li>
        </ul>
    </div>
</div>

 

<script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            //里面写的祖先是谁，它找到的就是谁
            $('.box ul li').closest('.box').css('border','3px solid blue')
        })
    </script>

预览：