javaScript和jQuery自动加载简单代码实现方法


Posted in jQuery onNovember 24, 2017

在此之前我们给大家整理过用javaScript和jQuery自动加载的几种方法,大家可以参考一下:javaScript 页面自动加载事件详解

一、JavaScript自动加载

①在文本中用onload: 当页面中所有内容(包括图片)加载完后再执行onload,如下:

<body onload="alert(1)"></body>          <!-- 当有一个onload -->
<body onload="alert(2);alert(3);alert(4)"></body> <!-- 当有多个onload用分号隔开,依次弹出 2 3 4 -->

②在脚本中用window.onload: 当页面中的所有内容(包括图片)加载完后再执行window.onload,如下:

window.onload = function(){...}; //正确写法,这是匿名函数

//------------↓多个window.onload的错误写法-------------
window.onload = function(){alert("text1");}; //不执行
window.onload = function(){alert("text2");}; //执行
//------------↑---------------------------------------

//------------↓多个window.onload的正确写法---------------------------
window.attachEvent("onload",function(){alert('a')});
window.attachEvent("onload",function(){alert('b')});
window.attachEvent("onload",function(){alert('c')});
//重点提示:在IE浏览器下用 (window.attachEvent),会弹出 c b a 
//重点提示:其他浏览器下用 (window.addEventListener),会弹出 a b c
//------------↑-----------------------------------------------------

二、jQuery自动加载

①当页面中DOM结构(不包含图片)加载完后再执行(可能DOM元素关联的东西并没有加载完),有三种写法,如下:

$(document).ready(function(){...});//写法1,全称 
$(function(){...});        //写法2,简写 
jQuery(function($){...});     //写法3,简写

②页面中所有元素(包括图片)加载完成才执行,如下。

$(window).load(function() {...}); //等于JavaScript的写法,如window.onload = function(){...};

③立即执行匿名函数。 当一个匿名函数被括起来,然后再在后面加一个括号,这个匿名函数就能立即运行起来,有两种写法,如下:

(function(){...})();    //写法1,不加参数
(function($){...})(jQuery); //写法2,加参数,避免与其他变量发生冲突
jQuery 相关文章推荐
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 #jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 #jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 #jQuery
jquery ajaxfileupload异步上传插件
Nov 21 #jQuery
jquery中有哪些api jQuery主要API
Nov 20 #jQuery
jquery ztree实现右键收藏功能
Nov 20 #jQuery
jQuery实现checkbox的简单操作
Nov 18 #jQuery
You might like
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
python使用socket向客户端发送数据的方法
2015/04/29 Python
Python的Django框架中的数据过滤功能
2015/07/17 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
python下载图片实现方法(超简单)
2017/07/21 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python中四舍五入的正确打开方式
2021/01/18 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
C#实现启动一个进程
2016/10/01 面试题
安全生产实施方案
2014/02/23 职场文书
安全生产活动月方案
2014/03/09 职场文书
师德师风剖析材料
2014/09/30 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技