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的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery 选择器用法基础入门示例
Jan 04 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 session处理的定制
2009/03/16 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
如何使用Pytorch搭建模型
2020/10/26 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
教师自我鉴定
2013/12/13 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
鸦片战争观后感
2015/06/09 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis