1.2 搭建jQuery开发环境

由于jQuery是一个完整的JavaScript文件库，因此，搭建jQuery开发环境十分简单，无须安装任何文件，只需要先在jQuery官方网站下载最新的文件库，然后将该文件库引入页面中的<head>元素间即可。

1.2.1 下载jQuery文件库

在jQuery的官方网站（http:// jquery.com）下载最新版本的jQuery文件库，其网站页面如图1-1所示。

在网站中，选择大小为32KB的压缩包，单击下载按钮，便可以将最新版的jQuery框架下载到本地；目前最新版本为v1.8.2。

图1-1 jQuery官方网站

1.2.2 引入jQuery文件库

下载完jQuery框架文件后，并不需要任何的安装，仅需要使用<script>文件导入标记，将jQuery框架文件jquery-1.8.2.min.js导入页面中即可。假设该文件下载后保存在项目文件夹Jscript中，那么，在页面的<head></head>中加入如下代码：

<script language="javascript" type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>

在页面的头部分加入上述代码后，便完成了jQuery框架的引入，现在可以开始我们的jQuery之旅了。

1.2.3 编写第一个简单的jQuery程序

首先，我们来编写一个简单的程序，见示例1-1。

示例1-1 编写第一个简单的jQuery程序

（1）功能描述

当页面加载时，以居中的方式在页面中显示“您好！欢迎来到jQuery的精彩世界。”字样。

（2）实现代码

新建一个HTML文件1-1.html,加入如下代码：

<!DOCTYPE html>
<html>
<head>
    <title>第一个简单的jQuery程序</title>
    <style type="text/css">
       div{padding:8px 0px;font-size:12px;text-align:center;border:solid 1px #888;}
    </style>
    <script src="JScript/jquery-1.8.2.min.js"
            type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("div").html("您好！欢迎来到jQuery的精彩世界。");
        });
    </script>
</head>
<body>
    <div></div>
</body>
</html>

（3）页面效果

页面效果如图1-2所示。

图1-2 第一个jQuery程序

（4）代码分析

在上述文件的代码中，有一段如下的代码：

$(document).ready(function(){
                //程序段
           })
该段代码类似于传统的JavaScript代码：
window.onload=function(){
             //程序段
           }

虽然上述两段代码在功能上可以互换，但它们之间又有许多区别：

  • 执行时间不同：$(document).ready在页面框架下载完毕后就执行；而window.onload 必须在页面全部加载完毕（包含图片下载）后才能执行。很明显前者的执行效率高于后者。
  • 执行数量不同：$(document).ready可以重复写多个，并且每次执行结果不同；而 window.onload尽管可以执行多个，但仅输出最后一个执行结果，无法完成多个结果的输出。

$(document).ready(function(){})可以简写成$(function(){})，因此下面的代码是等价的。

$(document).ready(function(){
              //程序段
           })
//等价于
$(function(){
              //程序段
           })
上一章目录下一章