任务1-2 jQuery实现网页收藏
网页中包含如下所示的HTML代码。
<div class="topLinks"> <span><a id="favorite" href="#">添加收藏</a></span> </div>
用IE 11浏览器浏览该网页时,单击网页中的“添加收藏”超链接,会弹出如图1-2所示的【添加收藏】对话框,在该对话框中单击【添加】按钮,则会将对应网页添加到收藏夹。
用非IE浏览器浏览该网页时,单击网页中的“添加收藏”超链接,会弹出如图1-3所示的【添加失败】对话框。
图1-2 【添加收藏】对话框
图1-3 【添加失败】对话框
这里的“添加收藏”功能采用jQuery方式实现,代码如表1-3所示。
表1-3 实现网页收藏功能的JavaScript代码
表1-3中的代码解释如下。
(1)01行引用了一个外部的JS文件jquery.js。
(2)为了防止文档在完全加载(就绪)之前运行jQuery代码,jQuery函数应位于ready方法中,如下所示。
$(document).ready(function(){ //函数代码 }) ;
(3)05行表示单击id="favorite"的按钮时,触发该按钮的单击事件,调用一个函数,执行该函数中的程序代码。
(4)if…else…语句为选择结构,针对IE浏览器和非IE浏览器执行不同的语句。
(5)06行中的表达式“window.ActiveXObject || "ActiveXObject"in window”用于判断当前浏览器的类型为IE浏览器。
(6)07行使用window.external.addFavorite方法实现IE浏览器的添加收藏功能。
(7)09行的alert()方法用于打开一个信息对话框,该方法是window对象的常用方法之一,可以写作window.alert()。其作用是弹出一个对话框,显示所指定的内容。括号中的字符串参数为对话框将要显示的内容,该对话框只有一个【确定】按钮。
知识必备
1.1 JavaScript简介
JavaScript是一种基于对象和事件驱动的脚本语言。使用它的目的是与HTML(超文本标记语言)一起实现网页中的动态交互功能。通过嵌入或调用JavaScript代码在标准的HTML中实现其功能。它与HTML标签结合在一起,弥补了HTML的不足,使网页变得更加生动。
JavaScript是一种轻量级的编程语言,JavaScript插入HTML页面后,可由所有的主流浏览器执行。JavaScript由布兰登·艾奇(Brendan Eich)发明,于1995年出现在Netscape中(该浏览器已停止更新),并于1997年被ECMA(欧洲计算机制造协会)采纳,将JavaScript制订为标准,称为ECMAScript,ECMA-262是JavaScript标准的官方名称。
JavaScript的基本语法与C语言类似,但运行过程中不需要单独编译,而是逐行解释执行,运行快。JavaScript具有跨平台性,与操作环境无关,只依赖于浏览器本身,只要浏览器支持JavaScript就能正确执行。
由于JavaScript具有复杂的文档对象模型(DOM),不同浏览器实现的方式不一样,以及缺乏便捷的开发、调试工具,所以JavaScript的应用并未真正推广开,正当JavaScript从开发者的视线中渐渐隐去时,一种新型的基于JavaScript的Web技术——AJAX(Asynchronous JavaScript And XML,异步JavaScript和XML)诞生了,使互联网中基于JavaScript的应用越来越多,从而使JavaScript不再是一种仅仅用于制作Web页面的脚本语言,JavaScript越来越受到重视,互联网领域正在掀起一场JavaScript风暴。
1.2 JavaScript主要的语法规则
(1)在网页中插入脚本程序的方式是使用script标记,把脚本标记<script></script>置于网页上的head部分或body部分,然后在其中加入脚本程序。其一般语法形式如下。
<script language="JavaScript" type="text/javascript"> <!-- 在此编写 JavaScript 代码 //--> </script>
通过标识<script></script>指明其间是JavaScript脚本源代码。
使用script标记时,一般使用language属性说明使用何种语言,使用type属性标识脚本程序的类型,也可以只使用其中一种,以适应不同的浏览器。如果需要,还可以在language属性中标明JavaScript的版本号,那么,所使用的JavaScript脚本程序就可以应用该版本中的功能和特性,如“language=JavaScript1.2”。
对于老式的浏览器可能会在<script>标签中使用type="text/javascript",现在已经不必这样做了,JavaScript是所有现代浏览器以及HTML 5中的默认脚本语言。
并非所有的浏览器都支持JavaScript,另外,由于浏览器版本和JavaScript脚本程序之间存在兼容性问题,可能会导致某些JavaScript脚本程序在某些版本浏览器中无法正确执行。如果浏览不能识别<script>标签,就会将<script>与</script>标签之间的JavaScript脚本程序当作普通的HTML字符显示在浏览器中。针对此类问题,可以将JavaScript脚本程序代码置于HTML注释符之间,这样对于不支持JavaScript的浏览器就不会把代码内容当作文本显示在页面上,而是把它们当作注释,不会做任何操作。
“<!--”是HTML注释符的起始标签,“//-->”是HTML注释符的结束标签。对于不支持JavaScript脚本程序的浏览器,标签<!--和//-->之间的内容被当作注释内容,对于支持JavaScript程序的浏览器,这对标签将不起任何作用。另外,需要注意的是,HTML注释符的结束标记之前有两个斜杠“//”,这两个斜杠是JavaScript语言中的注释符号,如果没有这两个斜杠,JavaScript解释器试图将HTML注释的结束标记作为JavaScript来解释,从而有可能导致出错。
(2)所有的JavaScript语句都以分号“;”结束。
(3)JavaScript语言对大小写是敏感的。
1.3 JavaScript常用的开发工具
编写与调试JavaScript脚本程序的工具有多种,目前常用的工具有Dreamweaver、Firebug、Visual Studio、Aptana、JavaScript Editor等。
1.Dreamweaver
Dreamweaver是世界顶级软件厂商Adobe推出的一套制作并编辑网站和移动应用程序的专业网页设计软件,其最新推出的版本为Dreamweaver CC。它支持以代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页,无须编写任何代码就能快速创建Web页面。
Dreamweaver CC支持jQuery代码自动提示功能,借助jQuery代码提示加入高级交互性功能,jQuery可轻松为网页添加互动内容,借助针对手机的启动模板快速开始设计。
2.Firebug
Firebug是一个用于网站前端开发的工具,它是Firefox浏览器的一个扩展插件,它集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体,可以用于调试JavaScript、查看DOM、分析CSS以及AJAX交互等。
3.Visual Studio
Visual Studio是Microsoft公司推出的程序集成开发环境,Visual Studio 2008版本之后就可以使用jQuery智能提示功能了。
4.Aptana
Aptana是一个功能非常强大、开源和专注于JavaScript的AJAX开发,它支持jQuery代码自动提示功能。
1.4 在HTML文档中嵌入JavaScript代码的方法
HTML中的JavaScript脚本必须位于<script>与</script>标签之间,脚本可被放置在HTML页面的<body>或<head>部分中,或者同时存在于两个部分中。通常的做法是把函数放入<head>部分中,或者放在页面底部,这样就可以把它们安置到同一处位置,不会干扰页面的内容。
JavaScript代码嵌入HTML文档的形式有以下几种。
(1)在head部分添加JavaScript脚本。
将JavaScript脚本置于head部分,使之在其余代码之前装载,快速实现其功能,并且容易维护。
有时在head部分定义JavaScript脚本,在body部分调用JavaScript脚本。
(2)直接在body部分添加JavaScript脚本。
由于某些脚本程序在网页中特定部分显示其效果,此时脚本代码就会位于body中的特定位置。也可以直接在HTML表单的<input>标签内添加脚本,以响应输入元素的事件。
(3)链接JavaScript脚本文件。
引用外部脚本文件,应使用script标签的src属性来指定外部脚本文件的URL。这种方式可以使脚本得到重复利用,从而降低维护的工作量。
外部JavaScript文件是最常见的包含JavaScript代码的方式,其主要原因有以下几点。
①HTML页面中代码越少,搜索引擎就能够以越快的速度来抓取网站并建立索引。
②保持JavaScript代码和HTML的分离,这样代码显得更清晰,且最终更易于管理。
③因为可以在HTML代码中包含多个JavaScript文件,因此可以把JavaScript文件分开放在Web服务器上不同的文件目录结构中,这类似于图像的存放方式,是一种更容易管理代码的做法。清晰、有条理的代码始终是让网站管理变容易的关键。
1.5 JavaScript的注释
JavaScript的注释用于对JavaScript代码进行解释,以提高程序的可读性。调试JavaScript程序时,还可以使用注释阻止代码块的执行。
JavaScript有两种类型的注释。
(1)单行注释以双斜杠开头(//)。
例如:
//this is a single-line comment
(2)多行注释以单斜杠和星号开头(/*),以星号和单斜杠结尾(*/)。例如:
/*this is a multi
line comment*/
注释可以单独一行,也可以在行末。
1.6 JavaScript的数据类型
JavaScript的基本数据类型主要有字符串(String)、数字(Number)、布尔(Boolean)、Null、Undefined,引用类型主要有数组和对象。
JavaScript拥有动态类型。这意味着相同的变量可用作不同的类型。
例如:
var x; // x 为 undefined var x = 26 ; // x 为数字 var x = "Good" ; // x 为字符串
1.字符串
JavaScript的字符串可以是引号中的任意文本,可以使用单引号或双引号。例如:
var name="Good"; var name='Good';
2.数字
JavaScript只有一种数字类型,数字可以带小数点,也可以不带。
例如:
var x1=34.00 ; //使用小数点来写 var x2=34 ; //不使用小数点来写
较大或较小的数字可以通过科学计数法(指数)来书写。
例如:
var y=123e5; // 12 300 000 var z=123e-5; // 0.001 23
JavaScript不是类型语言,与许多其他编程语言不同,JavaScript不定义不同类型的数字,如整数、短整型、长整型、浮点型等。
JavaScript中的所有数字均为64位,都存储为根为10的64位数字(8比特)。
整数(不使用小数点或指数计数法)的精度最多为15位,小数的最大位数是17位,但是浮点运算并不总是百分之百准确。
如果数字的前缀为0,则JavaScript会把数值常量解释为八进制数,如果数字的前缀为0x,则解释为十六进制数。
例如:
var y=0377;
var z=0xFF;
说明 绝不要在数字前面写0,除非需要进行八进制转换。
NaN是JavaScript的全局常量,本意表示某个值不是数值,但其本身却又是数值,且不等于其自身,看下面的代码。
alert(typeof NaN); //显示为'Number' alert(NaN == NaN); //显示为 false
实际上NaN不等于任何东西。要确认是不是NaN只能使用isNaN,如以下代码。
alert(isNaN(NaN)) ; //显示为 true
3.布尔
JavaScript的布尔(逻辑)类型只能有两个值:true或false。布尔类型值常用在条件测试中。
例如:
var x=true;
var y=false;
Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true或者false)。使用关键词new来定义Boolean对象。
下面的代码定义了一个名为myBoolean的逻辑对象。
var myBoolean=new Boolean();
注意 如果逻辑对象无初始值或者其值为0、-0、null、""、false、undefined或者NaN,那么对象的值为false。否则,其值为true(即使当自变量为字符串"false"时)。
4.null
可以通过将变量的值设置为null来清空变量。
例如:
book=null;
5.Undefined
Undefined表示变量不含有值。
1.7 JavaScript的常量
JavaScript有6种基本类型的常量。
1.字符型常量
字符型常量是使用单引号('')或双引号("")括起来的一个或几个字符。
2.整型常量
整型常量是不能改变的数据,可以使用十进制、十六进制、八进制表示其值。
3.实型常量
实型常量由整数部分加小数部分表示,可以使用科学或标准方法表示。
4.布尔值
布尔常量只有两种值:true或false,主要用来说明或代表一种状态或标志。
5.空值
JavaScript中有一种空值类型null,表示什么也没有,可以理解为对象占位符。如果试图引用没有定义的变量,则返回一个null值。
说明 null是个对象。JavaScript有一种空值类型,它有一个唯一的值null,即它的字面量,定义为完全没有任何意义的值,其表现得像个对象。
例如:
alert(typeof null); //显示为'object'
尽管typeof值显示为"object",但null并不认为是一个对象实例。要知道,JavaScript中的值都是对象实例,每个数值都是Number对象,每个对象都是Object对象。因为null是没有值的,所以null不是任何东西的实例。
例如:
alert(null instanceof Object); //显示为 false
6.特殊字符
JavaScript中包含以反斜杠(/)开头的特殊字符,通常称为控制字符。
1.8 JavaScript的变量
1.变量的概念与命名
变量是内存中存取数据的容器。
例如:
var x=2; var y=3; var z=x+y;
在JavaScript中,这些字母被称为变量。
JavaScript变量可用于存放常量数值(如x=2)和表达式的值(如z=x+y)。
变量可以使用短名称(如x和y),也可以使用描述性更好的名称(如name、age、sum、total、volume)。
变量名必须以字母开头,中间可以出现字母、数字、下划线(_),变量名不能有空格、+、-等字符,JavaScript的关键字不能作变量名。JavaScript变量的名称也允许以$和_符号开头,不过不推荐这么做。
变量名称对大小写敏感(如y和Y是不同的变量),JavaScript语句和JavaScript变量都对大小写敏感。
变量的基本类型有4种:字符串变量、整型变量、实型变量和布尔型变量。
2.JavaScript变量的声明
(1)单个变量的声明与赋值。
在JavaScript中创建变量通常称为“声明”变量。
使用var关键词来声明变量。
例如:
var name;
变量声明之后,该变量是空的(它没有值)。使用赋值号(=)向变量赋值。
例如:
name="李明";
也可以在声明变量时对其赋值。例如:
var name="李明";
提示 一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。
(2)多个变量的声明与赋值。
可以在一条语句中声明多个变量。该语句以var开头,并使用逗号分隔变量即可。例如:
var name="李明",age=26,job="程序员";
多个变量的声明也可横跨多行。
例如:
var name="李明", age=26, job="程序员" ;
(3)声明无值的变量。
声明变量时可以只用var标识符声明无值的变量。未赋值的变量,其值实际上是undefined。在执行过以下语句后,变量name的值将是undefined。
例如:
var name;
(4)重复声明JavaScript变量。
如果重复声明JavaScript变量,该变量的值不会丢失。在以下两条语句执行后,变量name的值依然是"李明"。
例如:
var name="李明";
var name;
由于JavaScript的变量是弱类型的,可以将变量初始化为任意值。因此,可以随时改变变量所存数据的类型,但尽量避免这样做。
3.JavaScript变量类型的声明
声明新变量时,可以使用关键词“new”来声明其类型。
例如:
var name=new String;
var x=new Number;
var y=new Boolean;
var color=new Array;
var book=new Object;
JavaScript变量均为对象,当声明一个变量时,就创建了一个新的对象。
4.局部JavaScript变量
在JavaScript函数内部使用var声明的变量是局部变量,该变量的作用域是局部的,即只能在函数内部访问它。
可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。该函数运行完毕,局部变量就会被删除。
5.全局JavaScript变量
在函数外声明的变量是全局变量,网页中的所有脚本和函数都能访问它。JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除,而全局变量会在页面关闭后被删除。
如果直接将值赋给尚未声明的变量,该变量将被自动作为全局变量声明。
例如:
name="李明";
将声明一个全局变量name,即使它在函数内执行。
注意 局部变量使用var这一关键字来声明,声明全局变量则不需要使用var关键字。
使用了var关键字的变量被看成是局部的,因为只能在声明它的地方所处的范围内访问,不能在其他任何地方访问。
例如,如果在一个函数内部声明了一个局部变量的话,该变量就不能在该函数之外访问,这就使得它是这一函数局部的。如果没有使用var关键字声明同一变量的话,它在整个脚本中就都是可被访问到的,而不仅限定于只能在那个函数中被访问。
1.9 JavaScript的消息框
可以在JavaScript中创建3种形式的消息框,即警告框、确认框、提示框。
1.警告框
警告框是一个带有提示信息和“确定”按钮的对话框,经常用于输出提示信息,当警告框出现后,用户需要单击【确定】按钮才能继续进行操作。
语法格式:alert("文本")
例如:
alert("感谢你光临本网站");
如果警告框中输出的提示信息要分为多行,则使用“\n”分行。
2.确认框
确认框是一个带有提示信息以及【确定】和【取消】按钮的对话框,用于使用户可以验证或者接受某些信息。当确认框出现后,用户只有单击【确定】或者【取消】按钮才能继续进行操作。
语法格式:confirm("文本")
例如:
var r=confirm("Press a button!");
当弹出确认框后,如果用户单击【确认】按钮,那么其返回值为true,即r的值为true。如果用户单击【取消】按钮,那么其返回值为false,即r的值为false。
3.提示框
提示框是一个提示用户输入的对话框,经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,然后单击【确认】按钮或【取消】按钮才能继续操作。
语法格式:prompt("文本","默认值")
例如:
var name=prompt("请输入您的姓名","李明");
如果用户单击【确认】按钮,那么返回值为输入的值;如果用户单击【取消】按钮,那么返回值为null。
1.10 JavaScript的异常处理
当JavaScript引擎执行JavaScript代码时,会发生各种错误,如下所列。
(1)可能是语法错误,通常是程序员造成的编码错误或错别字。
(2)可能是拼写错误或语言中缺少的功能(可能由于浏览器差异导致)。
(3)可能是由于来自服务器或用户的错误输入而导致的错误。
(4)也可能是由于许多其他不可预知的原因导致。
当错误发生或当事件出现问题时,JavaScript将抛出一个错误。JavaScript使用try…catch…语句处理这些异常,try语句和catch语句总是成对出现的。
语法格式:
try { //在这里运行代码 } catch(err) { //在这里处理错误 }
try语句用于测试代码块的错误,允许用户定义在执行时进行错误测试的代码块。
catch语句用于处理错误,允许定义当try代码块发生错误时所执行的代码块。
在下面的示例代码中,我们故意在try块的代码中将“alert”写成了“Alert”,即首字母写成大写“A”。catch块会捕捉到try块中的错误,并执行代码来处理它。
例如:
var txt=""; try { Alert("欢迎您!"); } catch(err) { txt="本页有一个错误。\n"; txt+="错误描述:" + err.message ; alert(txt); }
throw语句允许用户自行定义错误或抛出异常(exception)。
如果把throw与try和catch一起使用,就能够控制程序流,并生成自定义的错误消息。语法格式:throw exception
异常可以是JavaScript字符串、数字、逻辑值或对象。
例如:
<script> function myFunction() { try { var x=document.getElementById("demo").value; if(x=="") throw "值为空"; if(isNaN(x)) throw "不是数字"; } catch(err) { var y=document.getElementById("mess"); y.innerHTML="错误:" + err + "。"; } } </script> <input id="demo" type="text"> <button type="button" onclick="myFunction()">测试输入值</button> <p id="mess"></p>
以上实例代码用于检测输入的值。如果值是错误的,会抛出一个异常(错误)。catch会捕捉到这个错误,并显示一段自定义的错误消息。
以上实例代码中如果getElementById函数出错,也会抛出一个错误。
1.11 JavaScript库
JavaScript高级程序设计(特别是对浏览器差异的复杂处理)通常很困难也很耗时,为了简化JavaScript的开发,许多JavaScript库应运而生。这些JavaScript库常被称为JavaScript框架。这些库封装了很多预定义的对象和实用函数,能帮助使用者轻松建立有高难度交互的富客户端页面,并且兼容各大浏览器。jQuery是继Prototype之后又一个优秀的JavaScript库,是一个由约翰·瑞齐格(John Resig)创建于2006年1月的开源项目。
广受欢迎的JavaScript框架有jQuery、Prototype、MooTools,所有这些框架都提供针对常见JavaScript任务的函数,包括动画、DOM操作以及AJAX处理。
1.jQuery
jQuery是目前最受欢迎的JavaScript库,它使用CSS选择器来访问和操作网页上的HTML元素(DOM对象),jQuery同时提供companion UI(用户界面)和插件。目前Google、Microsoft、IBM、Netflix等许多大公司在网站上都使用了jQuery。
2.Prototype
Prototype是一种JavaScript库,提供用于执行常见Web任务的简单API。API是应用程序编程接口(Application Programming Interface)的缩写,它是包含属性和方法的库,用于操作HTML DOM。Prototype通过提供类和继承实现对JavaScript的增强。
3.MooTools
MooTools也是一个JavaScript库,提供了可使常见的JavaScript编程更为简单的API,也包含一些轻量级的效果和动画函数。
1.12 下载和替代jQuery库
进入jQuery的官方网站可以下载各个版本的jQuery库文件。jQuery不需要安装,把下载的JS文件存入网站上的一个公共位置,想要在某个页面中使用jQuery时,只需要在相关的HTML文档中引入该库文件即可。
有以下两个版本的jQuery库可供下载:一个版本用于实际的网站中,是已被精简和压缩的;另一个版本用于测试和开发,是未压缩的(是可读的代码,供调试或阅读)。
这两个版本都可以从jQuery官方网站上下载。可以把下载文件放到与页面相同的文件夹中,这样更方便使用。
如果许多不同的网站使用相同的JavaScript库,那么把框架库存放在一个通用的位置供每个网页分享就变得很有意义了。CDN(Content Delivery Network)解决了这个问题。CDN是包含可分享代码库的网络服务器。
Google和Microsoft公司的网站对jQuery的支持都很好。如果不希望下载并存放jQuery库,那么也可以通过Google或Microsoft的CDN(内容分发网络)引用它,Google和Microsoft的服务器都存有jQuery库。
如需从Google或Microsoft引用jQuery,使用以下代码之一。
(1)使用Google的CDN。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
(2)使用Microsoft的CDN。
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
提示 使用Google或Microsoft的jQuery有一个很大的优势:许多用户在访问其他站点时,已经从Google或Microsoft加载过jQuery。所以当用户访问使用jQuery的站点时,会从缓存中加载jQuery,这样可以减少加载时间。同时,大多数CDN都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。
1.13 jQuery简介
jQuery是一个JavaScript函数库,是一个“写得更少,但做得更多”的轻量级JavaScript库,jQuery极大地简化了JavaScript编程。
1.jQuery的引用方法
如需使用jQuery,需要先下载jQuery库,然后使用HTML的<script>标签引用它。
<script type="text/javascript"src="jquery.js"></script>
在HTML 5中,<script>标签中的type="text/javascript"可以省略不写,因为JavaScript是HTML 5以及所有现代浏览器中的默认脚本语言。
2.jQuery函数的类别
jQuery库是一个JavaScript文件,其中包含了所有的jQuery函数。jQuery库包含以下类别的函数。
(1)HTML元素选取函数。
(2)HTML元素操作函数。
(3)CSS操作函数。
(4)HTML事件函数。
(5)JavaScript特效和动画函数。
(6)HTML DOM遍历和修改函数。
(7)AJAX函数。
(8)Utilities函数。
3.jQuery的基础语法
通过jQuery,可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。
jQuery语法是为HTML元素的选取编制的,可以对元素执行某些操作。
其基础语法是:$(selector).action()
(1)美元符号$定义jQuery。jQuery库只建立一个名为jQuery的对象,其所有函数都在该对象之下,其别名为$。
(2)选择符(selector)用于“查询”或“查找”HTML元素。
(3)jQuery的action()用于执行对元素的操作。
例如:
$(this).hide() //隐藏当前元素
4.文档就绪函数ready
jQuery使用$(document).ready()方法代替传统JavaScript的window.onload事件,通过使用该方法,可以在DOM载入就绪时就对其进行操纵并调用执行它所绑定的函数。$(document).ready()方法和window.onload事件有相似的功能,但是在执行时机方面有细微区别。window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行,即JavaScript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法注册的事件处理程序,在DOM完全就绪时就可以被调用。此时,网页的所有元素对jQuery而言都是可以访问的,但是,这并不意味着这些元素关联的文件都已经下载完毕。
jQuery函数应位于ready方法中。
例如:
$(document).ready(function(){ //函数代码 }) ;
这是为了防止文档在完全加载(就绪)之前运行jQuery代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。例如,试图隐藏一个不存在的元素或者获得未完全加载的图像的大小。
以上代码可简写为以下形式。
$(function(){ //函数代码 }) ;
另外,由于$(document)也可以简写为$()。当$()不带参数时,默认参数就是“document”,因此也可以简写为以下形式。
$().ready(function(){ //函数代码 }) ;
以上3种形式的功能相同,用户可以根据喜好进行选择。
引导训练