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