javaScript和jQuery自动加载简单代码实现方法
更新时间：2017年11月24日 12:08:34 投稿：laozhang
给大家介绍一下利用javaScript和jQuery实现自动加载最简单的代码写法。
在此之前我们给大家整理过用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自定义表单验证插件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
本篇文章主要是对JQuery实现全选与取消的两种简单方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
最近在学习JQuery，其实也不叫学习，很久以前就学过，只是有一段时间没用，有些生疏了，于是就做几个小例子来练习练习，为了方便以后查找就将这些小示例记录下来2012-09-09
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
这篇文章主要介绍了JQuery+Bootstrap 自定义全屏Loading插件，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-07-07
用jquery.load的方法载入新的页面，以实现局部刷新，可结果发现载入进来的页面与原来单独的页面不一样，样式没了，关于这个问题，下面有个不错的解决方法2014-01-01
这篇文章主要为大家详细介绍了jQuery实现淡入淡出的模态框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了jQuery插件Validate实现自定义校验结果样式的方法，感兴趣的小伙伴们可以参考一下2016-01-01
选择器的意义就是将众多html代码中准确的找出我们想找的单元。接下来将常见的选择器以及作用列举出来，对jQuery常见的选择器及用法感兴趣的朋友一起看看吧2016-12-12
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
这篇文章主要介绍了使用JQuery快速实现Tab的AJAX动态载入(实例讲解)需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了jquery实现的仿天猫侧导航tab切换效果,涉及jquery鼠标事件及链式操作实现页面元素样式遍历切换效果的技巧,非常具有实用价值,需要的朋友可以参考下2015-08-08
最新评论