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 03 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jquery实现简单每周轮换的日历
Sep 10 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
php array_intersect()函数使用代码
2009/01/14 PHP
PHP 采集心得技巧
2009/05/15 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
Javascript学习笔记 delete运算符
2011/09/13 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
获取Django项目的全部url方法详解
2017/10/26 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
Python continue继续循环用法总结
2018/06/10 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
python3实现多线程聊天室
2018/12/12 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
DNA测试:Orig3n
2019/03/01 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
10的分与合教学反思
2014/04/30 职场文书
高中教师个人总结
2015/02/10 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
物业接待员岗位职责
2015/04/15 职场文书
小学中队委竞选稿
2015/11/20 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS