[第七季]12.遍历元素的后代和同胞

最新推荐文章于 2022-09-21 19:29:04 发布

低调的嚣张的程序员

最新推荐文章于 2022-09-21 19:29:04 发布

阅读量267

点赞数

分类专栏： 009 JQuery

本文链接：https://blog.csdn.net/zeephom/article/details/77448493

版权

009 JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

4.复习笔记(这个就是课后习题以及课程所呈现的需求)

①遍历直接后代,遍历所有后代,同胞元素的过滤.
②遍历前一个,后一个,前面所有,后面所有,直到哪个元素(4)next and nextAll and nextUntil(参数)
③JQuery的过滤:第一个,第某个,包含共同属性的(比方说同class的)

5.自测代码

2.课堂笔记

1.遍历
(1)遍历a1下面的所有子元素,然后标签放在info里面
<script type="text/javascript">
    $(function()
    {
        $(":button").click(function()
        {
            $("#a1").children().each(function(index, element) 
            {
                //$("#info").html($("#info").html()+"\t"+element.tagName);
                $("#info").html($("#info").html()+"\t"+$(element)[0].tagName);     
            });;
        });
    });
</script>
</head>

<body>
    <button id="btn">测试</button><div id="info"></div>
    <div id="a1">
        <p>今天天气不错</p>
        <div id="a2">
            <div id="a3">
                <div id="a4">
                </div>
            </div>
        </div>
    </div>
</body>
</html>
(2)find函数,必须加过滤参数(是一个选择器)
<script type="text/javascript">
    $(function()
    {
        $(":button").click(function()
        {
            $("#a1").find("*").each(function(index, element) 
            {
                //$("#info").html($("#info").html()+"\t"+element.tagName);
                $("#info").html($("#info").html()+"\t"+$(element)[0].tagName);     
            });;
        });
    });
</script>
</head>

<body>
    <button id="btn">测试</button><div id="info"></div>
    <div id="a1">
        <p>今天天气不错</p>
        <div id="a2">
            <div id="a3">
                <div id="a4">
                </div>
            </div>
        </div>
    </div>
</body>
</html>
(3)同胞元素的过滤
<script type="text/javascript">
    $(function()
    {
        $(":button").click(function()
        {
            $("#a3").siblings().each(function(index, element) 
            {
                $("#info").html($("#info").html()+"\t"+element.tagName+$(element).attr("id"));
            });
        });
    });
</script>
</head>

<body>
    <button id="btn">测试</button><div id="info"></div>
    <div id="a1">
        <p>今天天气不错</p>
        <div id="a2">
            <div id="a3">
                <div id="a4">
                </div>
            </div>
            <div id="a5">
            </div>
            <div id="a6">
            </div>
        </div>
    </div>
</body>
</html>
(4)next and nextAll and nextUntil(参数)
在下面这句话进行更改就好了.
$("#a3").siblings()
(5)prev前一个元素
2.JQuery的过滤
jQuery first() 方法
jQuery last() 方法
jQuery eq() 方法
jQuery filter() 方法
jQuery not() 方法
(1)first()方法
<script type="text/javascript">
    $(function()
    {
        $("#btn").click(function()
        {
            $("div p").first().css("background-color","red");
        });
    });
</script>
</head>

<body>
    <button id="btn">测试</button><div id="info"></div>
    <h1>欢迎来到我的主页</h1>
    <div>
        <p>这是 div 中的一个段落。</p>
        <p>这是 div 中的一个段落。</p>
    </div>

    <div>
        <p>这是 div 中的另一个段落。</p>
    </div>

    <p>这也是段落。</p>
</body>
</html>
(2)eq方法
$("div p").eq(2).css("background-color","red");
(3)filter(".class")这个是选择多个
<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").filter(".intro").css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎来到我的主页</h1>
<p>我是唐老鸭。</p>
<p class="intro">我住在 Duckburg。</p>
<p class="intro">我爱 Duckburg。</p>
<p>我最好的朋友是 Mickey。</p>

</body>
</html>



6:50

3.课程效果图

这里写图片描述

1.代码

低调的嚣张的程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[第七季]12.遍历元素的后代和同胞

4.复习笔记(这个就是课后习题以及课程所呈现的需求)①遍历直接后代,遍历所有后代,同胞元素的过滤. ②遍历前一个,后一个,前面所有,后面所有,直到哪个元素(4)next and nextAll and nextUntil(参数) ③JQuery的过滤:第一个,第某个,包含共同属性的(比方说同class的)5.自测代码2.课堂笔记1.遍历(1)遍历a1下面的所有子元素,然后标签放在info里面
复制链接

扫一扫