第1章 jQuery开发入门

本章内容

❑ jQuery概述

❑ jQuery的简单应用

❑ 本章小结

随着互联网的迅速发展，Web页面得到了广泛应用，但人们的需求已不仅限于页面的功能，而更多地注重页面展示形式和用户体验度。JavaScript语言可以很好地满足程序开发者的需求，帮助程序开发者开发出用户体验度很高的页面，因而越来越受到广大程序员的关注。jQuery是JavaScript库中的优秀一员，代码高效、兼容性强等特点使得它近年来风靡全球，越来越多的开发者痴迷其中。

1.1 jQuery概述

1.1.1 认识jQuery

jQuery是由美国人John Resig于2006年创建的一个开源项目，随着被人们熟知，越来越多的程序高手加入其中，完善并壮大其项目内容，如今已发展成为集JavaScript、CSS、DOM、Ajax于一体的强大框架体系。它的主旨是：以更少的代码，实现更多的功能（Write less，do more）。

1.1.2 jQuery基本功能

1.访问和操作DOM元素

使用jQuery库，可以很方便地获取和修改页面中的某元素，无论是删除、移动还是复制某元素，jQuery都提供了一整套方便、快捷的方法，既减少了代码的编写，又大大提高了用户对页面的体验度；其具体示例，我们将在后面的章节中陆续展示。

2. 控制页面样式

通过引入jQuery，程序开发人员可以很便捷地控制页面的CSS文件。浏览器对页面文件的兼容性，一直以来都是页面开发者最为头痛的事，而使用jQuery操作页面的样式却可以很好地兼容各种浏览器。

3. 对页面事件的处理

引入jQuery库后，可以使页面的表现层与功能开发分离，开发者更多地专注于程序的逻辑与功效；页面设计者侧重于页面的优化与用户体验。然后，通过事件绑定机制，可以很轻松地实现二者的结合。

4.大量插件在页面中的运用

在引入jQuery库后，还可以使用大量的插件来完善页面的功能和效果，如表单插件、UI插件，这些插件的使用极大地丰富了页的展示效果，使原来使用JavaScript代码遥不可及的功能通过插件的引入而轻松地实现。

5.与Ajax技术的完美结合

Ajax的异步读取服务器数据的方法，极大地方便了程序的开发，加深了用户的页面体验度；而引入jQuery库后，不仅完善了原有的功能，而且减少了代码的书写，通过其内部对象或函数，加上几行代码就可以实现复杂的功能。

综上所述，jQuery在页面中的功能还有很多，我们将在接下来的章节中一一介绍。

1.1.3 搭建jQuery开发环境

1.下载jQuery文件库

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

在网站中，选择大小为24KB的压缩包，单击Download（下载）按钮，便可以将最新版的jQuery框架下载到本地。目前（截止到2010年7月）最新版本为V1.4.2。

2.引入jQuery文件库

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

        ＜script language="javascript" type="text/javascript"
        src="Jscript/jquery-1.4.2.min.js"＞＜/script＞

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

1.1.4 编写第一个简单的jQuery应用

首先，我们来编写一个简单的程序，参见下面的示例。

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

（1）功能描述

在页面加载时，弹出一个模式对话框，显示“您好，欢迎来到jQuery世界”字样，单击“确定”按钮后关闭该窗口。

（2）实现代码

新建一个HTML文件1-1.html，加入如代码清单1-1所示的代码。

代码清单1-1第一个简单的jQuery应用

        ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
        Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
        ＜html xmlns="http://www.w3.org/1999/xhtml"＞
        ＜head＞
            ＜title＞第一个简单的jQuery程序＜/title＞
            ＜script language="javascript" type="text/javascript"
                    src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
            ＜script type="text/javascript"＞
                    $(document).ready(function(){
                      alert("您好，欢迎来到jQuery世界")；
                    })
            ＜/script＞
        ＜/head＞
        ＜body＞
        ＜/body＞
        ＜/html＞

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

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

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

❑ 执行时间不同：$(document).ready在页面框架下载完毕后就执行；而window.onload必须在页面全部加载完毕（包含图片下载）后才能执行。很明显，前者的执行效率高于后者。

❑ 执行数量不同：$(document).ready可以重复写多个，并且每次执行结果不同；而window. onload尽管可以执行多个，但仅输出最后一个执行结果，无法完成多个结果的输出。

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

        $(document).ready(function(){
                      //程序段
        })

等价于

        $(function(){
                      //程序段
        })

（3）页面效果

HTML文件1-1.html最后实现的页面效果如图1-2所示。

1.1.5 jQuery程序的代码风格

1.“$”美元符的使用

在jQuery程序中，使用最多的莫过于“$”美元符了，无论是页面元素的选择、功能函数的前缀，都必须使用该符号，可以说它是jQuery程序的标志。

2. 事件操作链接式书写

在编写页面某元素事件时，jQuery程序可以使用链接式的方式编写该元素的所有事件。为了更好地说明该书写方法的使用，我们通过一个示例加以阐述。

示例1-2 jQuery事件的链式写法

（1）功能描述

在页面中，有一个＜div＞标记，在该标记内，包含二个＜div＞标记，一个为主题，另一个为内容，页面首次加载时，被包含的内容＜div＞标记是不可见的，当用户单击主题＜div＞标记时，改变自身的背景色，并将内容＜div＞标记显示出来。

（2）实现代码

新建一个HTML文件1-2.html，加入如代码清单1-2所示的代码。

代码清单1-2 jQuery事件的链式写法

        ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
        Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
        ＜html xmlns="http://www.w3.org/1999/xhtml"＞
        ＜head＞
            ＜title＞jQuery事件的链式写法＜/title＞
            ＜script language="javascript" type="text/javascript"
                    src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
            ＜style type="text/css"＞
                    .divFrame{width:260px；border:solid 1px #666；
                            font-size:10pt}
                    .divTitle{background-color:#eee；padding:5px}
                    .divContent{padding:5px；display:none}
                    .divCurrColor{ background-color:Red}
            ＜/style＞
            ＜script type="text/javascript"＞
                $(function(){
                  $(".divTitle").click(function(){
                    $(this).addClass("divCurrColor")
                          .next(".divContent").css("display","block");
                  });
                });
            ＜/script＞
        ＜/head＞
        ＜body＞
            ＜div class="divFrame"＞
                  ＜div class="divTitle"＞主题＜/div＞
                  ＜div class="divContent"＞
                    ＜a href="#"＞链接一＜/a＞＜br /＞
                    ＜a href="#"＞链接二＜/a＞＜br /＞
                    ＜a href="#"＞链接三＜/a＞
                  ＜/div＞
            ＜/div＞
        ＜/body＞
        ＜/html＞

在上述文件的代码中，加粗的代码是链式写法。

代码功能说明：当用户单击Class名称为"divTitle"的元素时，自身增加名称为"divCurrColor"的样式；同时，将接下来的Class名称为"divContent"元素显示出来。可以看出，两个功能的实现通过"."符号链接在一起。

（3）页面效果

执行HTML文件1-2.html，实现的页面效果如图1-3所示。

1.2 jQuery的简单应用

1.2.1 jQuery访问DOM对象

1. 什么是DOM对象

DOM（Document Object Model，文本对象模型）的每一个页面都是一个DOM对象，通过传统的JavaScript方法访问页面中的元素，就是访问DOM对象。

例如：在页面中2个＜div＞标记元素，其代码如下：

        ＜div id="divTmp"＞测试文本＜/div＞
        ＜div id="divOut"＞＜/div＞

通过下面的JavaScript代码可以访问DOM对象和获取或设置其内容值：

        var tDiv=document.getElementById("divTmp")；//获取DOM对象
        var oDiv=document.getElementById("divOut")；//获取DOM对象
        var cDiv=tDiv.innerHTML；//获取DOM对象中的内容
        oDiv.innerHTML=cDiv；//设置DOM对象中的内容

如果执行上面的JavaScript代码，将在ID为"divOut"的标记中显示ID为"divTmp"的标记内容。

2. 什么是jQuery对象

在jQuery库中，通过本身自带的方法获取页面元素的对象，我们称之为jQuery对象；为了同样实现在ID为"divOut"的标记中显示ID为"divTmp"的标记内容，采用jQuery访问页面元素的方法，其实现的代码如下：

        var tDiv=$("#divTmp")；//获取jQuery对象
        var oDiv=$("#divOut")；//获取jQuery对象
        var cDiv=tDiv.html()；//获取jQuery对象中的内容
        oDiv.html(cDiv)；//设置jQuery对象中的内容

通过代码的对比，可以看出jQuery对象访问方法比DOM对象访问方法更简单、高效，它们都实现同样的功能。

1.2.2 jQuery控制DOM对象

在介绍使用jQuery控制DOM对象前，先通过一个简单的示例，说明如何用传统的JavaScript方法访问DOM对象。

示例1-3 控制DOM对象

（1）功能描述

在页面中，用户输入姓名、性别和婚姻状况，单击“提交”按钮后，将获取到的数据信息显示在页面＜div＞标记中。

（2）实现代码

新建一个HTML文件1-3.html,加入如代码清单1-3所示的代码。

代码清单1-3使用传统的JavaScript方法访问DOM对象

        ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
        Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
        ＜html xmlns="http://www.w3.org/1999/xhtml"＞
        ＜head＞
            ＜title＞控制DOM对象＜/title＞
            ＜style type="text/css"＞
                    .divFrame{width:260px；border:solid 1px #666；
                            font-size:10pt}
                    .divTitle{background-color:#eee；padding:5px}
                    .divContent{padding:8px；font-size:9pt}
                    .divTip{width:244px；border:solid 1px #666；
                          padding:8px；font-size:9pt；
                          margin-top:5px；display:none}
                    .txtCss{border:solid 1px #ccc}
                    .divBtn{padding-top:5px}
                    .divBtn .btnCss{border:solid 1px #535353；width:60px}
            ＜/style＞
            ＜script type="text/javascript"＞
                function btnClick(){
                //获取文本框的值
                var oTxtValue=document.getElementById("Text1").value；
                //获取单选框按钮值
                var oRdoValue=(Radio1.checked)?"男":"女"；
                //获取复选框按钮值
                var oChkValue=(Checkbox1.checked)?"已婚":"未婚"；
                //显示提示文本元素
                document.getElementById("divTip").style.display="block"；
                //设置文本元素的内容
                document.getElementById("divTip").innerHTML=oTxtValue+"＜br＞"
                +oRdoValue+"＜br＞"+oChkValue；
                }
            ＜/script＞
        ＜/head＞
        ＜body＞
        ＜div class="divFrame"＞
            ＜div class="divTitle"＞请输入如下信息＜/div＞
            ＜div class="divContent"＞
                姓名：＜input id="Text1" type="text" class="txtCss"/＞＜br /＞
                性别：＜input id="Radio1" name="rdoSex" type="radio"
                            value="男" /＞男
                    ＜input id="Radio2" name="rdoSex" type="radio"
                            value="女" /＞女＜br /＞
                婚否：＜input id="Checkbox1" type="checkbox" /＞
                ＜div class="divBtn"＞＜input id="Button1" type="button"
                            value="提交" class="btnCss"
                            onclick="btnClick()；" /＞
                ＜/div＞
            ＜/div＞
        ＜/div＞
        ＜div id="divTip" class="divTip"＞＜/div＞
        ＜/body＞
        ＜/html＞

在上面的代码中，使用传统的JavaScript方法获取用户输入的信息，并保存到变量中，最后通过document.getElementById("divTip").innerHTML方法显示所有的数据信息。下面将示例1-3中的JavaScript代码进行修改，引入jQuery库，通过jQuery中的方法获取元素的值，并将获取的数据显示出来。修改后的JavaScript代码如下所示：

        ...
        ＜script language="javascript" type="text/javascript"
                    src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
        ＜script type="text/javascript"＞
        $(function(){
            $("#btnSubmit").click(function(){
              //获取文本框的值
              var oTxtValue=$("#Text1").val()；
              //获取单选框按钮值
              var oRdoValue=$("#Radio1").is (":checked")?"男":"女"；
              //获取复选框按钮值
              var oChkValue=$("#Checkbox1").is (":checked")?"已婚":"未婚"；
              //显示提示文本元素和内容
              $("#divTip").css("display"，"block").html(oTxtValue+"＜br＞"+oRdoValue+"＜br＞"+
              oChkValue)；
              })
        })
        ＜/script＞
        ...

在修改后的JavaScript代码中，$("#Text1").val()在jQuery库中表示获取ID号为“Text1”的值；$("#Radio1").is (":checked")表示ID号为“Radio1”的单选按钮是否被选中，如果选中，则返回“男”，否则，返回“女”。可以看出，通过jQuery库中的方法访问或控制页面中的元素，比使用传统的JavaScript代码要简洁得多，并且还兼容各种浏览器。

（3）页面效果

最终实现的页面效果如图1-4所示。

1.2.3 jQuery控制页面CSS

在jQuery框架中，通过自带的JavaScript编程，提供全部的CSS3下的选择器，开发者可以首先定义自己的样式文件，然后通过jQuery中的addClass()方法将该样式轻松地添加到页面指定的某元素中，而不用考虑浏览器的兼容性。

下面通过一个简单的示例来介绍如何使用jQuery中的toggleClass(className)方法来实现页面样式的动态切换功能。

示例1-4 jQuery控制CSS样式

（1）功能描述

在页面中，增加一个＜div＞元素标记，当用户单击该元素时，变换其文本内容和背景色，再次单击时，恢复其初始的内容和背景色。

（2）实现代码

新建一个HTML文件1-4.html，加入如代码清单1-4所示的代码。

代码清单1-4 jQuery控制CSS样式

        ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
        Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
        ＜html xmlns="http://www.w3.org/1999/xhtml"＞
        ＜head＞
            ＜title＞jQuery控制CSS样式＜/title＞
            ＜script language="javascript" type="text/javascript"
                      src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
            ＜style type="text/css"＞
                    .divDefalut{width:260px；font-size:10pt；padding:5px}
                    .divClick{width:260px；border:solid 1px #666；
                    font-size:10pt；background-color:#eee；padding:5px}
            ＜/style＞
            ＜script type="text/javascript"＞
                $(function(){
                      $(".divDefalut").click(function(){
                      $(this).toggleClass("divClick").html("点击后的样式")；
                      })；
                })；
            ＜/script＞
        ＜/head＞
        ＜body＞
            ＜div class="divDefalut"＞点击前的样式＜/div＞
        ＜/body＞
        ＜/html＞

（3）页面效果

HTML文件1-4.html执行后，最终实现的页面效果如图1-5所示。

在jQuery库中，通过简单的几行代码，就可以实现传统JavaScript大量代码完成的功能，节省开发者的时间，提高工作效率。

1.3 本章小结

本章通过循续渐进的方式，先从jQuery的基础概念入手，介绍jQuery库的下载，引入简单应用方法；后部分侧重于jQuery控制DOM对象和页面CSS样式的介绍，通过一些简单的小示例，使读者对jQuery在页面中的功能应用有一个大致的了解，为下一章节进一步学习jQuery库的详细对象和方法奠定基础。