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 ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jQuery实现视频展示效果
May 30 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+MySql编写聊天室
2006/10/09 PHP
我用php+mysql写的留言本
2006/10/09 PHP
php 在线打包_支持子目录
2008/06/28 PHP
PHP中的float类型使用说明
2010/07/27 PHP
PHP 万年历实现代码
2012/10/18 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
javascript读取xml
2006/11/04 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
JS排序之快速排序详解
2017/04/08 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
Python中作用域的深入讲解
2018/12/10 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
Python 使用type来定义类的实现
2019/11/19 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
建议书格式
2015/02/04 职场文书
诚实守信主题班会
2015/08/13 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书