Jquery(十一)事件

最新推荐文章于 2025-07-13 06:13:51 发布

原创最新推荐文章于 2025-07-13 06:13:51 发布 · 270 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

本文探讨了jQuery中$(document).ready()与window.onload的区别，通过实例展示了不同事件绑定方式的效果，并介绍了如何利用jQuery处理页面元素的显示隐藏及事件绑定与解除。

☆ window.on和$(document).ready()的区别

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>window.on和$(document).ready()的区别</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
<!--window.onload的测试-->
<!--
  <script type="text/javascript">

    function demo(){
        alert("我是函数demo");
    }

    function demo2(){

        alert("我是函数demo2");
    }
    window.onload=demo;
    window.onload=demo2;

  </script>

  -->

    <!--jQuery测试-->
    <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
    <script type="text/javascript">

        function abc(){

            alert("函数abc");
        }
        function abc2(){

            alert("函数abc2");
        }


        $(document).ready(abc);
        $(document).ready(abc2);
    </script>
 </head>

 <body>

 </body>
</html>

☆ 事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">

    #dpanl{

        width:300px;
        height:300px;

    }
    .he{

        background:orange;
        font-size:30px;
    }

    #cen{

        background:green;
        display:none;
    }
  </style>

  <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
  <!--
  <script type="text/javascript">

    $(document).ready(function(){

        $(".he").bind("click",function(){

            $(this).next().show();
        });

    });
  </script>
  -->
<!--
 <script type="text/javascript">

    $(document).ready(function(){

        $(".he").bind("click",function(){

            var a=$(this).next();
            if(a.is(":visible")){

                a.hide();
            }else{

                a.show();
            }
        });

    });
  </script>

  -->
<!--
<script type="text/javascript">

    $(document).ready(function(){

        $(".he").bind("mouseover",function(){

            $(this).next().show();

        });

        $(".he").bind("mouseout",function(){

            $(this).next().hide();

        });

    });
  </script>

  -->
<script type="text/javascript">

    $(document).ready(function(){

        $(".he").mouseover(function(){

            $(this).next().show();

        });

        $(".he").mouseout(function(){

            $(this).next().hide();

        });

    });
  </script>

 </head>

 <body>

    <div id="dpanl">

        <div class="he">jQuery是什么?</div>
        <div id="cen"> 
        随着JavaScript、CSS、Ajax等技术的进步，越来越多的开发者将丰富多彩的程序及其功能进行封装，供其他人可以调用这些封装好的程序组件（框架）
        jQuery是优秀的JavaScript框架，能方便的处理html文档、事件、动画以及Ajax交互</div>
    </div>
 </body>
</html>

☆ 事件2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">

    #dpanl{

        width:300px;
        height:300px;

    }
    .he{

        background:orange;
        font-size:30px;
    }

    #cen{

        background:green;
        display:none;
    }

    .abc{

        background:#aaa;
    }
  </style>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<!--hover事件-->
<!--
<script type="text/javascript">

    $(document).ready(function(){

        $(".he").hover(function(){

            $(this).next().show();
        },function(){

            $(this).next().hide();
        });
    });
</script>
-->
<!--
<script type="text/javascript">

    $(document).ready(function(){

        $(".he").toggle(function(){

            $(this).next().show();
        },function(){

            $(this).next().hide();
        });
    });
</script>
-->
<!--
<script type="text/javascript">

    $(document).ready(function(){

        $("#cen").slideToggle("slow");
    });
</script>
-->
 <script type="text/javascript">

    $(document).ready(function(){

        $(".he").bind("click",function(){

            var a=$(this).next();
            if(a.is(":visible")){

                a.hide();
                $(".he").removeClass("abc");
            }else{

                a.show();
                $(".he").addClass("abc");

            }

            //移除事件
            $("#but").click(function(){

                $(".he").unbind("click");
            });
        });

    });
  </script>

 </head>

 <body>
 <input type="button" id="but" value="移除事件"/>
  <div id="dpanl">

        <div class="he">jQuery是什么?</div>
        <div id="cen"> 
        随着JavaScript、CSS、Ajax等技术的进步，越来越多的开发者将丰富多彩的程序及其功能进行封装，供其他人可以调用这些封装好的程序组件（框架）
        jQuery是优秀的JavaScript框架，能方便的处理html文档、事件、动画以及Ajax交互</div>
    </div>
 </body>
</html>