第1章 jQuery开发入门
1.1 jQuery 概述
1.1.1 认识 jQuery
jQuery 是由美国人 John Resig 于 2006 年创建的一个开源项目,随着被人们熟知,越来越多的程序高手加入其中,完善并壮大其项目内容,如今已发展成为集 JavaScript、CSS、DOM、Ajax 于一体的强大框架体系。它的主旨是:以更少的代码,实现更多的功能(Write less,do more)。
1.1.2 jQuery 基本功能
- 访问和操作 DOM 元素
使用 jQuery 库,可以很方便地获取和修改页面中的某元素,无论是删除、移动还是复制某元素,jQuery 都提供了一整套方便、快捷的方法,既减少了代码的编写,又大大提高了用户对页面的体验度。
- 控制页面样式
通过引入 jQuery,程序开发人员可以很便捷地控制页面的 CSS 文件。浏览器对页面文件的兼容性,一直以来都是页面开发者最为头痛的事,而使用 jQuery 操作页面的样式却可以很好地兼容各种浏览器。
- 对页面事件的处理
引入 jQuery 库后,可以使页面的表现层与功能开发分离,开发者更多地专注于程序的逻辑与功效;页面设计者侧重于页面的优化与用户体验。然后,通过事件绑定机制,可以很轻松地实现二者的结合。
- 大量插件在页面中的运用
在引入 jQuery 库后,还可以使用大量的插件来完善页面的功能和效果,如表单插件、UI 插件,这些插件的使用极大地丰富了页的展示效果,使原来使用 JavaScript 代码遥不可及的功能通过插件的引入而轻松地实现。
- 与 Ajax 技术的完美结合
Ajax 的异步读取服务器数据的方法,极大地方便了程序的开发,加深了用户的页面体验度;而引入 jQuery 库后,不仅完善了原有的功能,而且减少了代码的书写,通过其内部对象或函数,加上几行代码就可以实现复杂的功能。
1.1.3 搭建 jQuery 开发环境
- 下载 jQuery 文件库
在 jQuery 的官方网站(http://jquery.com) 中,下载最新版本的 jQuery 文件库,其网站页面如下图所示。
在网站中,选择大小为 24KB 的压缩包,单击 Download(下载)按钮,便可以将最新版的 jQuery 框架下载到本地。
- 引入jQuery文件库
下载完 jQuery 框架文件后,并不需要任何安装,仅需要使用<script>
文件导入标记,将 jQuery 框架文件 jquery-3.6.0.min.js 导入页面中即可。假设该文件下载后保存在项目文件夹中,那么,在页面的<head></head>
中加入如下代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>引入 jQuery 文件库</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language="javascript" type="text/javascript" src="./jquery-3.6.0.min.js"></script>
</head>
<body>
</body>
</html>
在页面的头部分,加入上述代码后,便完成了 jQuery 框架的引入,就可以开始我们的 jQuery 之旅了。
1.1.4 编写第一个简单的 jQuery 应用
首先,我们来编写一个简单的程序,参见下面的示例。
示例1-1 编写第一个简单的 jQuery 程序
(1)功能描述
在页面加载时,弹出一个模式对话框,显示“您好,欢迎来到黄子涵世界”字样,单击“确定”按钮后关闭该窗口。
(2)实现代码
新建一个 HTML 文件 1-1.html,加入如代码清单 1-1 所示的代码。
代码清单1-1 第一个简单的 jQuery 应用
<!DOCTYPE html>
<html lang="zh">
<head>
<title>第一个简单的 jQuery 应用</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language="javascript" type="text/javascript" src="./jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert('您好,欢迎来到黄子涵的世界');
})
</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)页面效果
1.1.5 jQuery 程序的代码风格
“$”
美元符的使用
在 jQuery 程序中,使用最多的莫过于“$”
美元符了,无论是页面元素的选择、功能函数的前缀,都必须使用该符号,可以说它是 jQuery 程序的标志。
- 事件操作链接式书写
在编写页面某元素事件时,jQuery 程序可以使用链接式的方式编写该元素的所有事件。为了更好地说明该书写方法的使用,我们通过一个示例加以阐述。
示例 1-2 jQuery 事件的链式写法
(1)功能描述
在页面中,有一个
<div>
标记,在该标记内,包含二个<div>
标记,一个为主题,另一个为内容,页面首次加载时,被包含的内容<div>
标记是不可见的,当用户单击主题<div>
标记时,改变自身的背景色,并将内容<div>
标记显示出来。
(2)实现代码
新建一个 HTML 文件,加入如代码清单 1-2 所示的代码。
代码清单1-2 jQuery 事件的链式写法
<!DOCTYPE html>
<html lang="zh">
<head>
<title>jQuery 事件的链式写法</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language="javascript" type="text/javascript" src="./jquery-3.6.0.min.js"></script>
<style type="text/css">
.hzhFrame {
width: 260px;
border: solid 1px #666;
font-size: 10pt;
}
.hzhTitle {
background-color: #eee;
padding: 5px;
}
.hzhContent {
padding: 5px;
display: none;
}
.hzhColor {
background-color: red;
}
</style>
<script type="text/javascript">
$(function() {
$(".hzhTitle").click(function() {
$(this).addClass("hzhColor").next(".hzhContent").css("display", "block");
});
});
</script>
</head>
<body>
<div class="hzhFrame">
<div class="hzhTitle">黄子涵</div>
<div class="hzhContent">
<a href="#">黄子涵一号链接</a><br/>
<a href="#">黄子涵二号链接</a><br/>
<a href="#">黄子涵三号链接</a>
</div>
</div>
</body>
</html>