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获取radio选中的值
May 05 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
html中两种获取标签内的值的方法
Jun 16 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中引用符号(&amp;)的使用详解
2013/11/13 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
Python中SQLite如何使用
2020/05/27 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
python Timer 类使用介绍
2020/12/28 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
卫校中专生个人自我评价
2013/09/19 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
感恩老师主题班会
2015/08/12 职场文书