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编写textarea输入字数限制代码
Mar 23 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery Tree Multiselect使用详解
May 02 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery实现简单日历效果
Jul 05 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教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
PHP7.0版本备注
2015/07/23 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
js中cookie的使用详细分析
2008/05/28 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
0基础学习前端开发的一些建议
2020/07/14 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
Python星号*与**用法分析
2018/02/02 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
python实现多人聊天室
2020/03/31 Python
Pycharm更换python解释器的方法
2018/10/29 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
恐龙的灭绝教学反思
2014/02/12 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
人与自然的观后感
2015/06/18 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang