jQuery网页加载的不同方式

一、window.onload

• 代码是从上而下执行的,通过window.onload可以使事件在页面加载完毕再执行

• 注意:window.onload事件多个只会执行最下面的一个,前面的会被覆盖

    <script>
        window.onload=function(){
            document.getElementById("btn").onclick=function(){
                console.log("哈哈");//哈哈
            }
        };
        window.onload=function(){
            document.getElementById("btn").onclick=function(){
                console.log("嘿嘿");
            }
        };
    </script>
    <input type="button" value="点击" id="btn">

二、jQuery（window）.load或者$（window）.load

• jQuery(window).load(简写$(window).load)可以使事件在页面加载完毕再执行,效果和window.onload一样

• 注意:jQuery(window).load事件多个会执行多个,这一点和window.onload不一样

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(window).load(function(){
            $("#btn").click(function(){
                console.log("哈哈");
            });
        });
        $(window).load(function(){
            $("#btn").click(function(){
                console.log("嘿嘿");
            });
        });
    </script>
    <input type="button" value="点击" id="btn">

三、jQuery（document）.ready或者$（document）.ready

• jQuery(document).ready(简写$(document).ready)可以使事件在页面基本加载完毕再执行,速度比前两种快

• 注意:$(document).ready事件也是多个会执行多个

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                console.log("哈哈");
            });
        });
        $(document).ready(function(){
            $("#btn").click(function(){
                console.log("嘿嘿");
            });
        });
    </script>
    <input type="button" value="点击" id="btn">

四、jQuery（）或者$（）

• jQuery( )(简写$( ))可以使事件在页面基本加载完毕再执行,和jQuery(document).ready一样

• 注意:$( )事件也是多个会执行多个

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                console.log("哈哈");
            });
        });
        $(function(){
            $("#btn").click(function(){
                console.log("嘿嘿");
            });
        });
    </script>
    <input type="button" value="点击" id="btn">

五、案例

    <!-- 点击按钮显示一句话 -->
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                console.log("一句话一句话");
            });
        });
    </script>
    <input type="button" value="点击" id="btn">