原生JS与jQuery文档加载完毕的写法
HTML是有执行顺序的,默认是自上而下执行。所以当我们的js代码在html代码下边的时候,可以正常执行,而当我们的js代码在html代码上边的时候,可以就无法正常执行了,这时,我们需要在文档加载完毕的时候才去执行js代码,所以通常我们会这样做:
一、当不引入jQuery框架,只写原生JS代码时,需要用window对象的onload事件
window.onload = function(){
//要执行的js代码段
}
(注:在使用时,window.onload可直接简写成onload,但是为了不发生歧义及造成不必要的错误,最好是把window写上)
二、在引入jQuery时,可以有多种写法,这里只列出一种最复杂(其他写法基本都是此种的变形)的,和2种最常见的写法
1、最复杂的一种写法:
;(function($,window,document,undefined){
//要执行的js代码段
})(jQuery,window,document);
(1)、在最开始使用分号的目的是为了防止多个文件压缩合并时,因为其他文件最后一行语句没加分号,而引起合并后的语法错误(如果能确保不会有多个文件压缩合并的情况,可以不写这个分号)
(2)、这就是一个匿名函数的自执行,一般js库都采用这种自执行的匿名函数来保护内部变量
(3)、形参中的$是jQuery的简写,很多方法和类库也使用$,这里$接收jQuery对象,也是为了避免$变量冲突,保证多个插件之间可以正常运行(如果只引入了jQuery这一个插件,可以不写这个)
(4)、实参分别接收window,document这两个对象,window,document这两个对象都是全局环境下的,而在函数体内的window,document其实是局部变量,不是指全局的window,或是document对象。这样做有个好处就是可以提高性能,减少作用域的查询时间(如果在函数体内需要多次调用window,或是document对象,这样把window或是document对象作为参数传进去,是非常有必要的。如果代码中没有用到这两个对象,那么就不需要传这两个参数了)
(5)、使用undefined的原因:
①因为undefined是window的属性,声明为局部变量之后,在函数中如果再有变量与undefined做比较的话,程序就可以不用到window下搜索undefined,可以提高程序的性能
②undefined在有些版本较旧的浏览器是不被支持的,直接使用会报错,js框架就要考虑到兼容性问题,所以增加一个形参undefined
2、比较常用的写法:
$(document).ready(function(){
//要执行的js代码段
});
(注:①在不确定是否只引入jQuery一个js框架的时候,代码中的$可以像复杂写法那样通过参数的形式传递,②代码中的document可省略)
3、最简单的一种写法:
$(function(){
//要执行的js代码段
});
(注:细节情况与上种方法相同)
三、总结:文档加载完毕的写法可以有多种,需要按照实际情况和个人习惯使用。
(注:文章内容部分来源于网络,如有侵权,请与博主联系)
原生JS与jQuery文档加载完毕的写法的更多相关文章
- jQuery文档加载完毕的几种写法
js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...
- jquery文档加载几种写法,图片加载写法
jquery文档加载写法: $(function(){ }) ; //个人最常使用方式 $(document).ready(function(){ }); //调用文档对象下的ready方法传入一个函 ...
- JQuery文档加载完成执行js的几种方法
js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...
- JS/JQuery 文档加载完成
1. $(function(){...}); 文档树加载完执行的方法:(注意:不包括图片.css.js等文件): 一个页面中可以有多个$(function(){...}); 方法: 两种写法: //第 ...
- jQuery文档加载事件
$(document).ready(handler) $().ready(handler) (this is not recommended) $(handler) 相当于: $(document). ...
- jQuery在HTML文档加载完毕后自动执行某个事件;
原来onchange=“fucntionname(parms)”: <select name="country" id="selCountries_{$sn}&qu ...
- 用document.onreadystatechange和document.readyState确保文档加载完毕才获取DOM
document.onreadystatechange = function(){ //document.readyState有“interactive”和“complate”两个值 if(docum ...
- html文档加载顺序简单理解
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件
使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件
随机推荐
- hadoop 各种counter 解读
http://blog.sina.com.cn/s/blog_61ef49250100uxwh.html 经过了两天的休息与放松,精神饱满了吧?上星期我们学习了MapReduce的过程,了解了其基本过 ...
- E: Write error - write (28 No space left on device)
1:在终端中运行cd命令,提示: e: Write error - write (28 No space left on device) E: Cant mmap an empty file 2:使用 ...
- Two-phase Termination模式
停止线程是一个目标简单而实现却不那么简单的任务.首先,Java没有提供直接的API用于停止线程.此外,停止线程时还有一些额外的细节需要考虑,如待停止的线程处于阻塞(等待锁)或者等待状态(等待其它线程) ...
- mysql主从配置(清晰的思路)
mysql主从配置.鄙人是在如下环境测试的: 主数据库所在的操作系统:win7 主数据库的版本:5.0 主数据库的ip地址:192.168.1.111 从数据库所在的操作系统:linux 从数据的版本 ...
- lc面试准备:Reverse Bits
1 题目 Reverse bits of a given 32 bits unsigned integer. For example, given input 43261596 (represente ...
- java HastTable实现
public class HashTable{ private String[] name; //关键字 private int sum; //容量 public static void ...
- Spark SQL inferSchema实现原理探微(Python)
使用Spark SQL的基础是“注册”(Register)若干表,表的一个重要组成部分就是模式,Spark SQL提供两种选项供用户选择: (1)applySchema applySche ...
- DD-WRT相关资源
版本网站下载:Other Downloads,进入betas->2014 FTP下载:如ftp://ftp.dd-wrt.com/betas/2014/06-23-2014-r24461/ Re ...
- MongoDB基础知识 01
MongoDB基础知识 1. 文档 文档是MongoDB中的数据的基本单元,类似于关系型数据库管理系统的行. 文档是键值对的一个有序集.通常包含一个或者多个键值对. 例如: {”greeting& ...
- Circle - SGU 130(递推)
题目大意:一个圆上有2K个点,用K个线把他们连接起来,求出这些线最少可以把这个圆分成P部分,有N种分割方法.输出N和P. 分析:分割线一定是相互不相交的线,所以可以把这写分成两部分,f[i] += f ...