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自动或手动图片切换效果
Oct 11 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jquery实现上传图片功能
Jun 29 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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环境搭建最新方法
2006/09/05 PHP
php字符串过滤与替换小结
2015/01/26 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
总结python实现父类调用两种方法的不同
2017/01/15 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
python中scikit-learn机器代码实例
2018/08/05 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
python实现飞机大战游戏
2020/10/26 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
python 调用Google翻译接口的方法
2020/12/09 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
腾讯公司的一个sql题
2013/01/22 面试题
女方回门宴答谢词
2014/01/14 职场文书
关于做家务的心得体会
2016/01/23 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书