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扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jquery实现穿梭框功能
Jan 19 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/10/09 PHP
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
js动态切换图片的方法
2015/01/20 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
python实现倒计时的示例
2014/02/14 Python
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
利用Python如何生成随机密码
2016/04/20 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
python查看模块,对象的函数方法
2018/10/16 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
高三自我评价
2014/02/01 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书