- jQuery权威指南
- 陶国荣
- 7字
- 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库的详细对象和方法奠定基础。