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中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery实现全选按钮
Jan 01 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
php输入数据统一类实例
2015/02/23 PHP
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
Prototype框架详解
2015/11/25 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
python实现验证码识别功能
2018/06/07 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
Python随机数函数代码实例解析
2020/02/09 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
刚毕业大学生自荐信范文
2014/02/20 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
九年级语文教学反思
2016/03/03 职场文书
创业计划书之水果店
2019/07/18 职场文书
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL