WEB入门之十二 jquery简介

2023-07-18 23:38:22

学习内容

jQuery简介
搭建jQuery开发环境
jQuery基本选择器

能力目标

熟悉jQuery开发环境
能编写简单的jQuery代码

本章简介

在前面两章，我们学习了JavaScript面向对象编程，从而对JavaScript这门编程语言有了更进一步的认识。JavaScript是目前世界最流行的编程语言之一，在Web前端开发中，起着无可替代的作用。虽然进过多年的改进，但是开发人员仍然觉得直接使用JavaScript困难重重，为了简化JavaScript并提高开发效率，各种JavaScript库应运而生，本章开始学习其中的jQuery。

核心技能部分

3.1 JavaScript库

随着WEB2.0的兴起，JavaScript越来越受到重视，与之相关的JavaScript库也蓬勃发展起来。这些JavaScript库封装了很多预定义的对象及实用函数，能帮助开发人员快速、轻松的实现高难度的富客户端页面，并能兼容大部分浏览器。

下面是目前几种流行的JavaScript库：

Ø Prototype：这是最早成型的JavaScript库之一，它对JavaScript内置对象做了大量封装和扩展。由于Prototype成型年代早，从整体上对面向对象的编程思想运用不到位，导致其结构松散，不过现在Prototype也在慢慢改进。

Ø Dojo：这是一个重量级的JavaScript库，功能全面且强悍，例如支持离线存储、支持基于SVG/VML的矢量图形库等等。Dojo是一个适合企业级应用的JavaScript库，但是它的缺点也比较明显：学习成本较高、文档不全、API不稳定，每次更新容易导致以前的代码不能运行，从1.0版本后情况有所好转。

Ø YUI：这是由雅虎（Yahoo）公司开发的一个功能完备、扩展性良好的的JavaScript库。

Ø Ext JS：简称Ext，原本是对YUI的一个扩展，主要用于创建Web前端界面。现在通过Ext可以开发富有华丽外观的用户界面，使Web前端更具活力。但是由于Ext侧重于前端界面，所以本身比较臃肿，并且Ext如果用于商业用途是需要付费的。

Ø MooTools：这是一个完全采用面向对象编程思想实现的JavaScript库，采用模块化结构，使用方便。

Ø jQuery：这是一个轻量级的JavaScript库，拥有强大的选择器和完善的UI，从诞生的那天起就吸引大批开发人员去关注和学习，目前已经成为Web开发人员的必备技能。

3.2 jQuery简介

jQuery是创建于2006年1月的开源项目，主要包括核心库、UI和插件三部分。jQuery凭借简洁、优雅的语法和跨平台的兼容性，极大的简化了JavaScript的开发难度。jQuery强调的理念是：写得少、做得多（write less, do more）。jQuery独特的选择器、链式的DOM操作、可靠成熟的事件处理机制都是其他JavaScript库无法比拟的，其优势如下所示：

轻量级

jQuery非常轻巧，核心库大小不到100K。

强大的选择器

选择器是进行JavaScript编程的基础，而jQuery提供了功能全面、强大、灵活的选择器供开发者使用。

出色的DOM封装

jQuery封装了大量的DOM操作，使原本复杂的的DOM操作变得非常简单。

可靠成熟的事件处理机制

jQuery的事件处理机制充分吸收了循序渐进、非侵入式等优秀的编程思想，非常稳定可靠，便于使用。非侵入式的设计使得行为层和表现层互相分离，有利于管理维护。

优秀的浏览器兼容性

作为一个流行的JavaScript库，浏览器的兼容性是必须具备的硬性标准。jQuery能够在IE 6.0+、FF 2+、Safari 2+、Opera 9+和Chrome下正常运行。

链式操作方式

链式操作是指对发生在同一jQuery对象上的一组动作，可以直接连写而无需重复获得对象，这是jQuery的特色，使得jQuery编码无比优雅。

丰富的插件支持

jQuery的优秀设计使其非常容易扩展，这吸引了全球大量的开发人员编写jQuery插件，目前已经有超过百种的插件获得jQuery官方支持，极大增强了jQuery的广度。

3.3 搭建jQuery开发环境

通过访问http://jquery.com/进入jQuery官方网站并下载最新的jQuery库，目前最新版本是1.7.2。jQuery库分为两种：Production和Development，如图3.1.1所示。

Production是经过压缩的，体积只有32K，程序正式投入使用时建议使用这种jQuery库。

Development是没有经过压缩的源码，体积有247K，适合开发过程中学习、测试。

下载下来的jQuery库就是一个后缀名是js的文件，哪个页面需要使用jQuery，就通过<script>标签导入即可，参考代码如下所示。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导入jQuery库</title>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

3.1 jQuery开发工具

jQuery本身就是纯文本的JavaScript代码，所以使用一般的文本编辑器都可以编写jQuery代码。但是为了提高编码效率，推荐使用如下几种开发工具：

Dreamweaver

Dreamweaver简称DW，是传统而又专业的Web前端开发工具，对HTML、CSS和JavaScript编码支持的比较完善。为了使Dreamweaver具备jQuery代码自动提示功能，我们需要从互联网上下载一些Dreamweaver插件，只不过目前Dreamweaver官方没有发布支持jQuery代码自动提示的插件，我们只能通过第三方（个人或团体）来获得该插件。获得插件后需要进行安装，运行DW

Eclipse插件

如果你需要在Eclipse中编写jQuery代码，那么可以安装jQueryWTP或Spket插件，这两个插件都可以使Eclipse支持jQuery代码

3.1 jQuery初体验

我们先看一段原生JavaScript代码，如下所示：

示例3.1

<body>
<div id="title"><h3>示例3.1</h3></div>
<a href="www.baidu.com">百度</a>
<a href="www.163.com">网易</a>
<input type="text" class="txt" value="1"/>
<input type="text" class="txt" value="2" />
<input type="button" id="btn" value="ok" />
</body>
</html>
<script>
alert(document.getElementById("btn").value);
alert(document.getElementsByTagName("a").length);
alert(document.getElementById("title").innerHTML);
</script>

上述代码分别通过id、标签名获得了相关元素，并使用value、length和innerHTML属性输出了相关信息。下面我们使用jQuery实现与示例3.1相同的功能，代码如下所示：

示例3.2

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例3.2</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="title"><h3>示例3.2</h3></div>
<a href="www.baidu.com">百度</a>
<a href="www.163.com">网易</a>
<input type="text" class="txt" value="1"/>
<input type="text" class="txt" value="2" />
<input type="button" id="btn" value="ok" />
</body>
</html>
<script>
alert(jQuery("#btn").val());
alert(jQuery("a").size());
alert(jQuery(".txt").size());
alert(jQuery("#title").html());
</script>

上述加粗部分是使用jQuery编写的代码，首先必须要通过<script>标签导入jQuery库，然后再编写jQuery代码。

jQuery( )函数是jQuery的核心函数，主要用来获得页面元素，jQuery的核心功能都基于该函数实现。jQuery( )函数支持多种选择器，包括基本选择器、层次选择器、属性选择器、表单选择器等等，示例3.2使用了基本选择器，其他选择器我们会在后面的章节中学习。

jQuery选择器完全继承了CSS选择器的风格，在前面的学习中，我们已经学习了CSS选择器，所以jQuery选择器对于我们来说就比较简单了。基本选择器是最基本、最常用的选择器，具体见表3-1-1所示。

表3-1-1 基本选择器

基本选择器	说明
#id	根据CSS id选择器的名字来获取页面元素，相当于 document.getElementById( )
.class	根据CSS类选择器的名字来获取页面元素
element	根据CSS标签选择器的名字来获取页面元素，相当于 document.getElementsByTagName( )
*	获取页面所有元素
selector1,selector2, ...	获取每一个选择器所匹配的元素

示例3.2是jQuery基本选择器的具体应用，其中还牵涉到平时最常用的三个函数：

val( )：用来获得元素value属性的值

html( )：用来获得元素标签内的所有信息，包括标签和文本，相当于DOM中的innerHTML

size( )：用来获得集合/数组的长度

jQuery( )函数还可以进一步简写成$( )，即使用$来代替jQuery，使得代码编写更加简洁，示例3.3使用简写的方式重新实现了示例3.2，代码如下所示。

示例3.3

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例3.3</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="title"><h3>示例3.3</h3></div>
<a href="www.baidu.com">百度</a>
<a href="www.163.com">网易</a>
<input type="text" class="txt" value="1"/>
<input type="text" class="txt" value="2" />
<input type="button" id="btn" value="ok" />
</body>
</html>
<script>
alert($("#btn").val());
alert($("a").size());
alert($(".txt").size());
alert($("#title").html());
</script>

由于$( )这种写法非常简洁，所以在实际开发中通常都使用这种写法。通过示例3.1、3.2和3.3的对比，我们会发现jQuery相对于原生JavaScript在代码编写上变得非常简洁、优雅，能大大提高编码效率，减低出错次数。

html( )和val( )函数除了可以获得相关信息外，我们还可以通过这两个函数来设置相关信息，只需要通过参数传值即可，例如下面的代码。

$("#btn").val("确定");

$("#title").html("<h3>hello</h3>");

</script>

jQuery中的很多函数都像html()和val()一样，无参时用来获取信息，带参时用来设置信息。

jQuery基本选择器中的最后一种“selector1,selector2, ...”是选择器集合，适合对页面多个元素进行集中控制，例如下面的代码。

示例3.4

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例3.4</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<input type="text" class="txt" value="1"/>
<input type="text" class="txt" value="2" />
<input type="button" id="btn" value="ok" />
</body>
</html>
<script>
alert($(".txt,#btn").size());
</script>

上述代码的粗体部分是选择器集合的具体写法，所有的选择器都放在一对引号里，中间用逗号隔开即可。

3.2 jQuery注释

给代码添加注释是良好的编码习惯，jQuery的注释分为以下两种：

单行注释：//

//alert($("#btn").val());

//alert($("a").size());

//alert($(".txt").size());

//alert($("#title").html());

</script>

Ø 多行注释：/* */

alert($("#btn").val());

alert($("a").size());

alert($(".txt").size());

alert($("#title").html());

</script>

3.3 jQuery对象和DOM对象

初次学习jQuery，很多开发人员经常遇到的问题是分不清哪些是JS中的DOM对象、哪些是jQuery对象，很容易混淆，所以在这里需要重点强调一下这个问题。

我们在前面的课程中已经学习了DOM，它是通过文档对象模型以面向对象的方式来操纵HTML元素。通常使用document对象的相关方法来获取HTML元素，这时获得的是DOM对象，例如下面的代码。

示例3.5

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例3.5</title>
</head>
<body>
<div id="title"><h3>示例3.5</h3></div>
<input type="button" id="btn" value="ok" />
</body>
</html>
<script>
alert(document.getElementById("btn").value);
alert(document.getElementById("title").innerHTML);
</script>

通过document对象的getElementById方法获得的就是DOM对象，接下来就可以调用value或innerHTML这些DOM对象的属性了。

jQuery对象实际上是通过jQuery对DOM对象进行封装后产生的对象，它是jQuery独有的。例如下面的代码：

示例3.6
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例3.6</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="title"><h3>示例3.6</h3></div>
<input type="button" id="btn" value="ok" />
</body>
</html>
<script>
alert($("#btn").val());
alert($("#title").html());
</script>

虽然$("#btn")和document.getElementById("btn")所起的作用都是一样的，但两者不能等价。document.getElementById("btn")获得的是DOM对象，它不能调用jQuery中的html()和val()方法；$("#btn")获得的是jQuery对象，它不能调用DOM中的innerHTML和value属性。

DOM对象和jQuery对象不能混用，但是这两者之间却可以相互转换。下面介绍两者之间的转换方法。

1．jQuery对象转换成DOM对象

jQuery提供了两种方式来实现jQuery对象转换成DOM对象，分别是[下标] 和get(索引)方法，例如下面的代码。

示例3.7

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例3.7</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="title"><h3>示例3.7</h3></div>
<input type="button" id="btn" value="ok" />
</body>
</html>
<script>
var btn=$("#btn");       //jQuery对象
alert(btn[0].value);    //DOM对象
var div=$("#title");   //jQuery对象
alert(div.get(0).innerHTML);   //DOM对象
</script>

2. DOM对象转换成jQuery对象

对于一个DOM对象，只需要使用$( )把它包裹起来即可转换成jQuery对象，即$(DOM对象)，例如下面的代码。

示例3.8

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例3.8</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="title"><h3>示例3.8</h3></div>
<input type="button" id="btn" value="ok" />
</body>
</html>
<script>
var btn=$(document.getElementById("btn"));
alert(btn.val());
var div=$(document.getElementById("title"));
alert(div.html());
</script>

3.4 each( )

在Web前端开发中，经常需要进行循环或遍历操作，以前在使用JavaScript时一般都是通过for循环来实现的，例如下面的代码。

示例3.9

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例3.9</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<table width="35%" height="160" border="0" align="center">
  <tr>
    <td height="32" colspan="2" align="center">用户登录</td>
    </tr>
  <tr>
    <td width="29%" height="36">登录名称：</td>
    <td width="71%"><input class="text" type="text"/></td>
  </tr>
  <tr>
    <td height="38">登录密码：</td>
    <td><input class="text" type="password" /></td>
  </tr>
  <tr>
<td colspan="2" align="center"><input type="submit" id="btn"
value="登录" onclick="check()"/>
</td>
    </tr>
</table>
</body>
</html>
<script>
function check()
{
var txtArray=document.getElementsByTagName("input");
for(var j=0;j<txtArray.length;j++)
{
if(txtArray[j].type!="submit")
{
if(txtArray[j].value=="")
{
alert("所有的文本框都必须填写！");
return false;
}
}
}
}
</script>

上述代码使用for循环实现了非空验证，当用户单击【登录】按钮时，只要登录名称和登录密码有一个未填就会给出提示信息。

jQuery中的each( )和JavaScript中的for循环很相似，但是使用起来更加简洁、高效。下面我们使用jQuery中的each( )实现示例3.9的功能，代码如下所示。

示例3.10

$("#btn").click(

function()

{

$(".text").each(

function()

{

if($(this).val()=="")

{

alert("所有的文本框都必须填写！");

return false;

}

)

}

)

</script>

页面中文本框和密码框的class属性的值都是text，因此可以使用jQuery基本选择器$(".text")获取到包含这两个元素的集合，接下来直接使用each( )开始对集合循环遍历，这需要一个匿名回调函数来实现，循环遍历过程中可以通过$(this)获取集合中当次遍历的元素对象。

在使用each( )时，可以通过return语句控制循环流程，return true表示直接开始下一次循环；return false表示直接退出循环。

上述代码还涉及到了jQuery中的鼠标单击事件click。与前面所学的DOM事件相比，jQuery事件的名字把“on”去掉了，例如DOM事件onclick在jQuery中是click；DOM事件onmouseover在jQuery中是mouseover。在给jQuery事件绑定函数时通常都使用匿名回调函数，具体语法如下所示，jQuery事件会在后续章节中做具体讲解。

jQuery对象 . jQuery事件名(

function ( )

{

//代码

}

)

3.5 学习jQuery库

jQuery库就是一个js文本文件，建议在以后的学习中经常打开jQuery源文件进行学习，这会使你对JavaScript和jQuery有更深入的了解。图3.1.7显示了源文件中jQuery函数的定义。

3.1 jQuery代码调试

jQuery代码本质上就是纯文本的JavaScript，所以都是由浏览器负责解释、执行。JavaScript的调试一直都是让开发人员头疼的问题，现在一些高版本的浏览器已经增强了断点调试功能，下面我们以示例3.8为例分别演示使用IE 8和FF 9如何进行断点调试。

3.1.1 IE 8

1. 使用IE8打开示例3.8 。

单击浏览器菜单栏中的【工具】|【开发人员工具】菜单项，或快捷键F12打开开发人员工具界面

3.1.1 FF 9

1. 火狐浏览器主要是通过它的一个插件来实现JavaScript断点调试功能的，该插件的名字是Firebug，需要单独安装。安装过后，单击菜单栏【工具】|【Web开发者】|【Firebug】|【打开Firebug】，或者快捷键F12来启动调试器

IE 8和FF 9都提供了相对成熟、完善的断点调试功能，这给广大Web前端开发人员带来了极大的好处，非常有利于代码排错和调试。

本章总结

本章的内容比较简单，主要介绍jQuery的入门知识，包括开发环境、开发工具、代码框架和代码调试等，这些都是jQuery编码的基础，必须掌握熟练。在后面的学习中，我们会陆续学习到jQuery方方面面的知识，在编码过程中要注意使用浏览器就行代码调试，积累调试经验。

任务实训部分

1：实现简易计算器

训练技能点

jQuery库的使用

jQuery基本选择器

需求说明

按照图3.2.1所示的界面实现计算器功能，文本框中的值使用jQuery选择器获取。

图3.2.1 计算器

2：实现简易计算器

训练技能点

jQuery库的使用

jQuery对象转换

需求说明

在上个任务的基础上使用document对象的相关方法获得文本框元素，然后转换成

jQuery对象，并实现计算器功能。

3：实现表单验证

训练技能点

jQuery库的使用

jQuery基本选择器

需求说明

按图3.2.2所示的界面使用jQuery实现表单即时验证。

实现树形菜单

训练技能点

jQuery库的使用

jQuery基本选择器

jQuery对象转换

需求说明

仿照下图所示界面，用jQuery获得元素，然后转换成DOM对象并实现树形菜单效果。

实现步骤

（1）实现树形菜单界面，二级子菜单默认隐藏，参考代码如下所示。

<div id="g1"><img src="img/jia.gif" onclick="show()"/><a href="#" >国产</a>
  <div>
<div class="sec"><img src="img/jia.gif" onclick="show()"/><a href="#" >北京奔驰</a></div>
<div class="sec"><img src="img/jia.gif" onclick="show()"/><a href="#" >北京现代</a>
  <div>
<div class="three"><img src="img/flag.gif"/><a href="#" onclick="ji()">悦翔</a></div>
<div class="three"><img src="img/flag.gif"/><a href="#" onclick="ji()">索纳塔</a></div>
<div class="three"><img src="img/flag.gif"/><a href="#" onclick="ji()">途胜</a></div>
<div class="three"><img src="img/flag.gif"/><a href="#" onclick="ji()">伊兰特</a></div>
  </div>
</div>
<div class="sec"><img src="img/jia.gif" onclick="show()"/><a href="#" >比亚迪</a></div>
  </div>
</div>

（2）按照需求说明实现二级子菜单的显示/隐藏

巩固练习

一、选择题

1. 以下（）属于JavaScript库。

A. Prototype

B. jQuery

C. Ext

D. Dojo

2. 以下关于jQuery的说法正确的是（）。

A. jQuery侧重于用户界面，属于重量级的JS库

B. 编写jQuery代码时必须安装相关插件

C. jQuery对象和DOM对象完全一样，只不过是API不同

3. 以下关于jQuery函数说法正确的是（）。

A. html()函数只能用来获取信息

B. val()函数只能用来获取value属性的值

C. jQuery对象拥有innerHTML属性

D. jQuery对象和DOM对象可以相互转换

4. 下列代码正确的是（）。

var btn=$(document.getElementById("btn"));

alert(btn.value);

alert(jQuery("#title").innerHTML);

alert(document.getElementById("btn").val());

alert(document.getElementById("title").html());

var btn=$(document.getElementById("btn"));

alert(btn.val());

二、上机练习

自己制作一个登录界面并使用jQuery实现登录验证。

码农公寓

3.1 JavaScript库

3.2 jQuery简介

3.3 搭建jQuery开发环境

3.1 jQuery开发工具

3.1 jQuery初体验

3.2 jQuery注释

3.3 jQuery对象和DOM对象

3.4 each( )

3.5 学习jQuery库

3.1 jQuery代码调试

3.1.1 IE 8

3.1.1 FF 9

1：实现简易计算器

2：实现简易计算器

3：实现表单验证

实现树形菜单

相关文章