- jQuery权威指南
- 陶国荣
- 611字
- 2024-12-20 23:58:55
第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所示。
图1-1 jQuery的官方网站
在网站中，选择大小为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-2 第一个jQuery程序运行后的页面效果
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-3 DIV元素单击前后的页面对比效果
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-4 控制jQuery对象
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所示。
图1-5 jQuery控制CSS
在jQuery库中，通过简单的几行代码，就可以实现传统JavaScript大量代码完成的功能，节省开发者的时间，提高工作效率。
1.3 本章小结
本章通过循续渐进的方式，先从jQuery的基础概念入手，介绍jQuery库的下载，引入简单应用方法；后部分侧重于jQuery控制DOM对象和页面CSS样式的介绍，通过一些简单的小示例，使读者对jQuery在页面中的功能应用有一个大致的了解，为下一章节进一步学习jQuery库的详细对象和方法奠定基础。