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.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jquery实现点击弹出对话框
Feb 08 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 split()函数的用法详解
2013/06/05 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
php导出excel格式数据问题
2014/03/11 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
php分页查询的简单实现代码
2017/03/14 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
javascript 原型继承介绍
2011/08/30 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
python使用建议技巧分享(三)
2020/08/18 Python
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
世界最大的票务市场:viagogo
2017/02/16 全球购物
最新计算机专业自荐信
2013/10/16 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
情人节活动策划方案
2014/02/27 职场文书
高中生操行评语
2014/04/25 职场文书
消防安全承诺书
2014/05/22 职场文书
党员民主评议总结
2014/10/20 职场文书
2014年政教处工作总结
2014/12/20 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript