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 DataTable实现前后台动态分页
Jun 17 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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初学者们头痛的十四个问题
2007/01/15 PHP
PHP 验证码的实现代码
2011/07/17 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
javascript 打印内容方法小结
2009/11/04 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
删除节点的jquery代码
2014/01/13 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
python中异常捕获方法详解
2017/03/03 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
Python装饰器结合递归原理解析
2020/07/02 Python
python脚本定时发送邮件
2020/12/22 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
2014学雷锋活动心得体会
2014/03/10 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
Python实现列表拼接和去重的三种方式
2021/07/02 Python