3.2 jQuery下载与配置
要在自己的网站中应用jQuery库,是需要下载并配置的。下面来介绍如何下载与配置jQuery。
3.2.1 下载jQuery
jQuery是一个开源的脚本库,我们可以从它的官方网站(http://jquery.com)中下载。下面介绍具体的下载步骤。
(1)在浏览器的地址栏中输入http://jquery.com,按Enter键,将进入到jQuery官方网站的首页,如图3.4所示。
图3.4 jQuery官方网站的首页
(2)在jQuery官方网站的首页中,可以下载所需要的jQuery库,本书使用jQuery1.11.1版本。单击网站首页的Download jQuery按钮,在弹出的页面中单击Download the compressed, production jQuery1.11.1超链接,选择“另存为”,将弹出如图3.5所示的对话框。
图3.5 下载jquery 1.11.1.min.js
(3)单击“保存”按钮,将jquery库下载到本地计算机上。下载后的文件名为jquery-1.11.1.min.js。
3.2.2 配置jQuery
将jQuery库下载到本地计算机后,还需要在项目中配置jQuery库。即将下载后的文件放置到项目的指定文件夹中,通常放在js文件夹中,然后在需要应用jQuery的页面中使用下面的语句,将其引用到文件中。
<script language="javascript" src="js/jquery-1.11.1.min.js"></script> 或者 <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
注意
引用jQuery的<script>标签,必须放在所有的自定义脚本文件的<script>之前,否则在自定义的脚本代码中找不到jQuery脚本库。
3.2.3 我的第一个jQuery脚本
了解了如何下载和配置jQuery之后,接下来通过一个简单的实例尝试编写jQuery脚本。
【例3.1】应用jQuery弹出一个提示对话框。(实例位置:光盘\TM\sl\3\1)
(1)创建一个名称为js的文件夹,并将jquery-1.11.1.min.js复制到该文件夹中。
(2)创建一个名称为index.html的文件,在该文件的<head>标记中引用jQuery库文件,关键代码如下:
<script language="javascript" src="js/jquery-1.11.1.min.js"></script>
(3)编写jQuery代码,实现在页面载入完毕后,弹出一个提示对话框,具体代码如下:
<script> $(document).ready(function(){ alert("我的第一个jQuery脚本!"); }); </script>
图3.6 弹出的提示对话框
实际上,上面的代码还可以更简单,也就是将$(document).ready用“$”符代替,替换后的代码如下:
<script> $(function(){ alert("我的第一个jQuery脚本!"); }); </script>
运行index.html,将弹出如图3.6所示的对话框。
熟悉JavaScript的读者知道,要实现例3.1的效果,还可以通过下面的代码实现:
<script> window.onload=function(){ alert("我的第一个jQuery脚本!"); } </script>
读者可能会问,这两种方法有什么区别,究竟哪种方法更好呢?下面介绍一下二者的区别。window.load()方法是在页面所有的内容都载入完毕后才会执行的,例如图片、横幅等。而$(document).ready()方法则是在DOM元素载入就绪后执行。在一个页面中可以放置多个$(document).ready()方法,而window.onload()方法在页面上只允许放置一个(常规情况)。这两个方法可以同时在页面中执行,两者并不矛盾。不过,通过上述描述可以知道,$(document).ready()方法比window.onload()方法载入速度更快。