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 校验中国身份证号码实例详解
Apr 11 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
基于jQuery拖拽事件的封装
Nov 29 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
我常用的几个类
2006/10/09 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php生成gif动画的方法
2015/11/05 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python中的sort方法使用详解
2014/07/25 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
python中的变量如何开辟内存
2018/06/26 Python
基于python实现学生管理系统
2018/10/17 Python
使用python制作一个解压缩软件
2019/11/13 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
电气自动化自荐信
2013/10/10 职场文书
中医专业应届生求职信
2013/11/17 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers