一、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">