jQuery网页加载的不同方式
2024-08-27 09:20:43
一、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">
最新文章
- PHP中instanceof关键字
- 笔记：MAC OS X下配置PHP开发、调试环境
- ORA-29275: partial multibyte character
- mysql 批量导出建表语句 (视图,函数同理)
- ADO.NET与ORM的比较:NHibernate实现CRUD(转)
- VS2012 InstallShield2013LimitedEdition激活
- 理解ip和端口
- WPF 资源字典【转】
- iOS创建子工程
- python星号变量
- Yii2中自带分页类实现分页
- 百度，人人，新浪，腾讯等分享Js代码
- SOAP详解
- Cocos2d-x 3.0 场景切换
- 改错+GetMemory问题
- SpringCloud Eureka 报错 无法启动问题
- 一文带你了解 Spring 5.0 WebFlux 应用场景
- PHP用户输入数据进行过滤
- swagger2 如何匹配多个controller
- IntelliJ IDEA插件 - ApiDebugger