[第七季]6.实现DIV的显示和隐藏

最新推荐文章于 2024-10-29 09:12:55 发布

低调的嚣张的程序员

最新推荐文章于 2024-10-29 09:12:55 发布

阅读量394

点赞数

CC 4.0 BY-SA版权

分类专栏： 009 JQuery

本文链接：https://blog.youkuaiyun.com/zeephom/article/details/77170026

009 JQuery 专栏收录该内容

14 篇文章

订阅专栏

本文档通过实例演示了如何使用jQuery实现DIV元素的显示、隐藏及尺寸动态变化。包括了链式操作、动画效果、回调函数等知识点，并探讨了布局调整与元素分离的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

①让一个500*500的div进行显示和隐藏,还有高宽进行变换,测试分开变换和链式变换的区别.
②让一个300*300的div进行显示和隐藏,然后用标签进行显示.

5.自测代码

2.课堂笔记

(1)测试按钮id=btn,一个div id=div1,设置div1的背景颜色是红色,高度和宽度都是10px
(2)给btn打开的就绑定一个函数,让div1动态变化为高度和宽度动态变化为500,第二种方法是用链式操作的方法,但是这个方法有点不一样,他是分先后顺序的
<style type="text/css">
    #div1
    {
        height:10px;
        width:10px;
        background-color:red;
    }
</style>

<script type="text/javascript">

    $(function(){
        $("#btn").click(function(){
            //$("#div1").animate({width:500,height:500},4000);
            $("#div1").animate({height:300},4000).animate({width:300},2000);
        });
    });
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>6.实现DIV的显示和隐藏</title>
</head>

<body>
<input type="button" value="测试" id="btn" />
<div id="div1">
</div>
</body>
</html>
2.按钮后标签也跟着显示
(1)新建一个html,设置一个btn,一个div=info=正在显示
新建一个div=div1=长宽为300,颜色为红色.
(2)btn和info(就是上面一行字)设置为浮动(让这两个元素进行浮动).
(3)这个时候,div和上面的btn以及info都杂糅在一起了,想要把div1分开,就要设置div1的clear属性,使其周围不能有浮动元素,分开之后仍然不满意,想要分开

20px,但是百度发现clear和margin-属性是矛盾的.
(4)直接设置btn和info边距为20,显示出了效果.
clear会和margin冲突,重置为零
http://www.cnblogs.com/rainman/archive/2008/05/07/1186932.html
<style type="text/css">
    #div1
    {
        width:300px;
        height:300px;
        background-color:red;
        clear:both;
        <!--使用了clear,那么margin-top就会失效-->

    }
    #btn,info
    {
        float:left;
        margin-bottom:20px;
    }

    #info
    {
        margin-left:20px;
    }
</style>
(5)回调函数的应用,我还真是不大懂
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
            if($("#div1").css("display")=="none"){
                $("#info").html("正在显示......");
                $("#div1").show(1000,function(){
                    //这个函数叫做回调函数,
                    //也就是这个函数调用完成之后
                    //他会回来调用这个函数.
                    $("#info").html("显示完毕......");
                });

            }
            else
            {
                $("#info").html("正在隐藏......");
                $("#div1").hide(1000,function(){
                    $("#info").html("隐藏完毕......");
                });
            };
        });
    });


</script>