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

jQuery网页加载的不同方式的更多相关文章

  1. Jquery网页加载进度条(随笔,当然要随便写,当日记动态心情写咯)

    首先先是吐槽时间... 告诉大家一个好消息,就是有个妹子非常仰慕我的前端技术说要包养我 然后有好多羡慕嫉妒恨的童鞋一定要说,少年你太天真了,那一定是HR 然后我表示她不是HR,本宅的春天貌似要到来了. ...

  2. jQuery网页加载进度条插件

    jquery.pace.js会自动监测你的Ajax请求,事件循环滞后,记录您的页面上准备状态和元素来决定的进度情况. 将pace.js和主题css的添加到您的网页! pace.js会自动监测你的Aja ...

  3. jquery预加载的几种方式

    实际编写前端页面时,有时候希望一打开某个页面就加载一些方法.下面是4种预加载方法. ①页面加载完之前执行,与嵌入的js加载方式一样(写jquery插件的时候使用) (function ($) { al ...

  4. 前端性能优化(四)——网页加载更快的N种方式

    网站前端的用户体验,决定了用户是否想要继续使用网站以及网站的其他功能,网站的用户体验佳,可留住更多的用户.除此之外,前端优化得好,还可以为企业节约成本.那么我们应该如何对我们前端的页面进行性能优化呢? ...

  5. 《动手实现一个网页加载进度loading》

    loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...

  6. 网页加载进度的实现--JavaScript基础

    总结了一些网页加载进度的实现方式…… 1.定时器实现加载进度 <!DOCTYPE html><html lang="en"><head> < ...

  7. 分析https网页加载http资源导致的页面报错原因及其解决方案

    https网页加载http资源导致的页面报错及解决方案 https是当下的网站的主流趋势,甚至像苹果这样的大公司,则完全要求用户必须使用https地址. 然而对于以前http链接来说,我们往往就存在一 ...

  8. jquery懒加载jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  9. jQuery自动加载更多程序

    1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...

随机推荐

  1. Linux 进程控制

    分享知乎上看到的一句话,共勉: 学习周期分为学习,思考,实践,校正四个阶段,周期越短,学习效率越高. 前面讲的都是操作系统如何管理进程,接下来,看看用户如何进行进程控制. 1.进程创建 先介绍一下函数 ...

  2. HTML5 Notification

    H5的Notification特性 Web桌面通知 Notification API的通知接口用于向用户配置和显示桌面通知. 生产环境仅支持https下使用:否则会被默认禁止.开发环境可以在local ...

  3. Luogu5307 [COCI2019] Mobitel 【数论分块】【递推】

    题目分析: 对于向上取整我们总有,$\lceil \frac{\lceil \frac{n}{a} \rceil}{b} \rceil = \lceil \frac{n}{a*b} \rceil$这个 ...

  4. 开源微信小程序商城测评

    1. Java版 1)微同商城 减少重复造轮子,开源微信小程序商城 .快速搭建一个属于自己的微信小程序商城. 官网地址:https://fly2you.cn 开源地址:https://gitee.co ...

  5. SaltStack实现动态文件分发,支持脚本换行,中文乱码

    场景:将动态脚本分发到各个机器的指定目录下 说明:使用SaltStack的 file.managed file.managed 里面可以定义内容的几种方式 - source: - contents: ...

  6. 浅学CLR via C#笔记之类型转换

    我们都知道CLR最重要的一个特性就是类型安全,它在运行时就知道对象类型. 但我们会经常用到将一种类型转换成另一种类型,CLR也允许将对象转成他的实际类型,或者是它的基类型. 在C#中,支持隐士转换成它 ...

  7. Saas软件更新以及小程序更新的教训

    Saas软件即使版本更新多次,也要兼顾老客户,兼容旧功能. 对于小程序调用的接口,无法保证客户会更新小程序,因此需要兼容使用旧版本小程序的客户,更不能删除接口.

  8. 【转载】Asp.Net MVC网站提交富文本HTML标签内容抛出异常

    今天开发一个ASP.NET MVC网站时,有个页面使用到了FCKEditor富文本编辑器,通过Post方式提交内容时候抛出异常,仔细分析后得出应该是服务器阻止了带有HTML标签内容的提交操作,ASP. ...

  9. 解决mysql登录警告问题

    一.前言 我们在登录mysql的时候经常会看到一句警告: Warning: Using a password on the command line interface can be insecure ...

  10. python与mysql的数据交互

    一 Python 中操作 MySQL 步骤 1.1 安装pymysql命令 sudo pip3 install pymysql 安装软件:sudo apt-get install 软件名称 安装模块: ...