jQuery 显示和隐藏-冒泡传播点击

来源：互联网发布：未来国际局势知乎编辑：程序博客网时间：2024/06/05 09:15

显示和隐藏HTML代码

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            #content{display: none;width: 200px;height: 20px;}        </style>    </head>    <script src="js/jquery-1.12.4.js" type="text/javascript">    </script>    <body>        <div id="panel">            <h4 class="head">什么是jQuery</h4>            <div id="content">jQuery是一个前端的js框架</div>        </div>    </body></html>

显示和隐藏jQuery代码

        <script type="text/javascript">            $(function(){                //点击显示                $('.head').bind("click",function(){                    $("#content").show();                });                //点击显示再次点击隐藏 1                $('.head').click(function(){                    $("#content").toggle(1000);                });                //点击显示和隐藏toggle替代方法 2                $(".head").bind("click",function(){                    var $con=$("#content");                    if($con.is(":visible")){                        $("#content").hide();                    }else{                        $("#content").show();                    }                });                //显示和隐藏hover事件                $(".head").hover(function(){                    $("#content").show();                },function(){                    $("#content").hide();                  });            });        </script>

冒泡传播-HTML代码

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <script src="js/jquery-3.2.1.js"></script>    <body>        <div id="content">            外层DIV元素            <span>内层DIV元素</span>        </div>        <div id="msg"></div>    </body></html>

冒泡传播jQuery代码

        <script type="text/javascript">            //冒泡行为            //冒泡事件show(),hide(),fadeIn(),fadeOut()            $(function(){                //阻止冒泡传播function（）中添加event                $("span").click(function(event){                    $("#msg").html($("#msg").html()+"<strong>span元素被单击</strong>");                    //停止事件传播                    event.stopPropagation();                });                $("#content").click(function(){                    $("#msg").html($("#msg").html()+"<strong>外层DIV被点击</strong>");                });                $("body").click(function(){                    $("#msg").html($("#msg").html()+"<strong>body被点击</strong>");                });                         });        </script>

阅读全文

0 0