WEB入门之十二 jquery简介

2025-07-28 03:18:47

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

WEB入门之十二 jquery简介

本章简介

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

核心技能部分

.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开发人员的必备技能。

.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的广度。

. 搭建jQuery开发环境

通过访问/进入jQuery并下载最新的jQuery库，目前最新版本是1.7.2。jQuery库分为两种：Production和Development，如图.1.1所示。

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

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

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

代码语言：javascript代码运行次数：0运行复制

<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>

WEB入门之十二 jquery简介_web.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代码

WEB入门之十二 jquery简介_web_02

WEB入门之十二 jquery简介_css_0

WEB入门之十二 jquery简介_html_04

WEB入门之十二 jquery简介_xhtml_05

WEB入门之十二 jquery简介_javascript_06.1 jQuery初体验

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

示例.1

代码语言：javascript代码运行次数：0运行复制

<body>
<div id="title"><h>示例.1</h></div>
<a href="www.baidu">百度</a>
<a href="www.16">网易</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.getElementsByTagame("a").length);
alert(document.getElementById("title").innerHTML);
</script>

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

示例.2

代码语言：javascript代码运行次数：0运行复制

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb212" />
<title>示例.2</title>
<script src="jquery-1.7.js"></script>
</head>
<body>
<div id="title"><h>示例.2</h></div>
<a href="www.baidu">百度</a>
<a href="www.16">网易</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( )函数支持多种选择器，包括基本选择器、层次选择器、属性选择器、表单选择器等等，示例.2使用了基本选择器，其他选择器我们会在后面的章节中学习。

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

表-1-1 基本选择器

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

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

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

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

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

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

示例.

代码语言：javascript代码运行次数：0运行复制

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb212" />
<title>示例.</title>
<script src="jquery-1.7.js"></script>
</head>
<body>
<div id="title"><h>示例.</h></div>
<a href="www.baidu">百度</a>
<a href="www.16">网易</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>

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

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

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

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

</script>

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

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

示例.4

代码语言：javascript代码运行次数：0运行复制

<html xmlns=";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb212" />
<title>示例.4</title>
<script src="jquery-1.7.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>

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

.2 jQuery注释

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

单行注释：//

代码语言：javascript代码运行次数：0运行复制

<script>
//alert($("#btn").val());
//alert($("a").size());
//alert($(".txt").size());
//alert($("#title").html());
</script>
Ø 多行注释：/*   */
<script>
    /*
alert($("#btn").val());
alert($("a").size());
alert($(".txt").size());
alert($("#title").html());
*/
</script>

. jQuery对象和DOM对象

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

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

示例.5

代码语言：javascript代码运行次数：0运行复制

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb212" />
<title>示例.5</title>
</head>
<body>
<div id="title"><h>示例.5</h></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独有的。例如下面的代码：

代码语言：javascript代码运行次数：0运行复制

示例.6
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb212" />
<title>示例.6</title>
<script src="jquery-1.7.js"></script>
</head>
<body>
<div id="title"><h>示例.6</h></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()方法；

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

1．jQuery对象转换成DOM对象

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

示例.7

代码语言：javascript代码运行次数：0运行复制

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb212" />
<title>示例.7</title>
<script src="jquery-1.7.js"></script>
</head>
<body>
<div id="title"><h>示例.7</h></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对象)，例如下面的代码。

示例.8

代码语言：javascript代码运行次数：0运行复制

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb212" />
<title>示例.8</title>
<script src="jquery-1.7.js"></script>
</head>
<body>
<div id="title"><h>示例.8</h></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>

.4 each( )

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

示例.9

代码语言：javascript代码运行次数：0运行复制

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb212" />
<title>示例.9</title>
<script src="jquery-1.7.js"></script>
</head>
<body>
<table width="5%" height="160" border="0" align="center">
  <tr>
    <td height="2" colspan="2" align="center">用户登录</td>
    </tr>
  <tr>
    <td width="29%" height="6">登录名称：</td>
    <td width="71%"><input class="text" type="text"/></td>
  </tr>
  <tr>
    <td height="8">登录密码：</td>
    <td><input class="text" type="password" /></td>
  </tr>
  <tr>
<td colspan="2" align="center"><input type="submit" id="btn"
value="登录" οnclick="check()"/>
</td>
    </tr>
</table>
</body>
</html>
<script>
function check()
{
var txtArray=document.getElementsByTagame("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( )实现示例.9的功能，代码如下所示。

示例.10

代码语言：javascript代码运行次数：0运行复制

<script>
$("#btn").click(
function()
{
$(".text").each(
function()
{
if($(this).val()=="")
{
alert("所有的文本框都必须填写！");
return false;
}
}
)
}
)
</script>

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

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

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

jQuery对象 . jQuery事件名(

function ( )

{

//代码

}

)

.5 学习jQuery库

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

WEB入门之十二 jquery简介_xhtml_07.1 jQuery代码调试

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

.1.1 IE 8

1. 使用IE8打开示例.8 。

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

WEB入门之十二 jquery简介_javascript_08

.1.1 FF 9

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

WEB入门之十二 jquery简介_xhtml_09

WEB入门之十二 jquery简介_web_10

WEB入门之十二 jquery简介_xhtml_11

WEB入门之十二 jquery简介_web_12

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

本章总结

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

任务实训部分

1：实现简易计算器

训练技能点

jQuery库的使用

jQuery基本选择器

需求说明

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

WEB入门之十二 jquery简介_xhtml_1

图.2.1 计算器

2：实现简易计算器

训练技能点

jQuery库的使用

jQuery对象转换

需求说明

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

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

：实现表单验证

训练技能点

jQuery库的使用

jQuery基本选择器

需求说明

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

WEB入门之十二 jquery简介_html_14

实现树形菜单

训练技能点

jQuery库的使用

jQuery基本选择器

jQuery对象转换

需求说明

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

实现步骤

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

代码语言：javascript代码运行次数：0运行复制

<div id="g1"><img src="img/jia.gif" οnclick="show()"/><a href="#" >国产</a>
  <div>
<div class="sec"><img src="img/jia.gif" οnclick="show()"/><a href="#" >北京奔驰</a></div>
<div class="sec"><img src="img/jia.gif" οnclick="show()"/><a href="#" >北京现代</a>
  <div>
<div class="three"><img src="img/flag.gif"/><a href="#" οnclick="ji()">悦翔</a></div>
<div class="three"><img src="img/flag.gif"/><a href="#" οnclick="ji()">索纳塔</a></div>
<div class="three"><img src="img/flag.gif"/><a href="#" οnclick="ji()">途胜</a></div>
<div class="three"><img src="img/flag.gif"/><a href="#" οnclick="ji()">伊兰特</a></div>
  </div>
</div>
<div class="sec"><img src="img/jia.gif" οnclick="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不同

. 以下关于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实现登录验证。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2022-0-16，如有侵权请联系 cloudcommunity@tencent 删除入门jqueryweb对象函数

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1254153.html

本站网友最好的证券公司	1分钟前发表
. 搭建jQuery开发环境通过访问/进入jQuery并下载最新的jQuery库
本站网友鼻翼	24分钟前发表
安装过后
本站网友去痘痘小妙招	15分钟前发表
主要用于创建Web前端界面
本站网友 qvob	29分钟前发表
jQuery凭借简洁
本站网友龙的传人加点	11分钟前发表
所以本身比较臃肿
本站网友学历低怎么找工作	28分钟前发表
链式的DOM操作
本站网友邯郸房产吧	16分钟前发表
jQuery中的each( )和JavaScript中的for循环很相似
本站网友水晶论坛	6分钟前发表
#btn").size()); </script>上述代码的粗体部分是选择器集合的具体写法
本站网友端午吃什么	1秒前发表
Dojo：这是一个重量级的JavaScript库
本站网友北京房价走势2013	21分钟前发表
并使用value
本站网友 ibmx3250	2分钟前发表
与之相关的JavaScript库也蓬勃发展起来
本站网友阿片网怎么找	9分钟前发表
通过示例.1
本站网友袁海林	13分钟前发表
. 搭建jQuery开发环境通过访问/进入jQuery并下载最新的jQuery库

WEB入门之十二 jquery简介