jQuery 实验教程（1）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-10-19 20:40 | 只看该作者

jQuery 实验教程（1）

jQuery 简介：为什么使用 jQuery 用jQuery 是一个跨浏览器的免费开源 JavaScript 库。其核心设计思想是“写更少的代码，做更多的事情”(Write Less Do More)。jQuery 提供了一套易于使用的 API。这些 API 极大地简化了客户端(浏览器)编程过程中的许多方面，包括：

HTML DOM 的遍历与操作
浏览器事件处理
AJAX（Asynchronous JavaScript And XML）编程
特效（如动画效果）

在直接使用 JavaScropt+DHTML 的传统客户端编程方式下，开发人员不得不编写冗长的代码。并且，为了使这些代码能够兼容不同的浏览器，我们还得编写额外的代码来处理这些跨浏览器问题。jQuery 的设计目标正是在于简化客户端编程。让我们能够编写简练的代码，节约开发时间，而这些代码却一样可以功能强大，并且兼容多种浏览器。
获取 jQuery：开始使用 jQueryjQuery 网站上提供了两种方式的发布文件。一种是内容经过压缩的文件；另一种是原始文件。前者文件中不包含代码注释以及代码运行过程中不需要的空白字符，它适合于生产环境(正式使用的环境)中使用，可以减少文件加载所需时间。后者文件中包含详细的代码注释，适合于开发和测试环境中使用。
jQuery 的下载地址：

下载 jQuery 之后，在相应的网页中通过 script 元素引用 jQuery 代码即可使用它。如清单 1 所示：
清单 1. 从本地站点引用 jQuery

1
2
3
4
5
6
7
8

<html>
<head>
<title>使用 jQuery</title>
<script src="../js/lib/jQuery/1.9.1/jQuery.js"></script>
</head>
<body>
</body>
</html>

我们还可以通过 Google、Microsoft 等公司提供的 CDN 服务直接获取 jQuery。其方法是在需要使用 jQuery 的网页中直接引用 CDN 服务的 URL。比如，使用 Google 的 CDN 的一个网页清单 2 所示：
清单 2. 从 CDN 引用 jQuery

1
2
3
4
5
6
7
8
9
10

<html>
<head>
<title>使用 jQuery</title>
<script
src='//ajax.googleapis.com/ajax/libs/jQuery/1.9.1/jQuery.min.js'>
</script>
</head>
<body>
</body>
</html>

Microsoft 提供的 CDN 的 URL 为： http://ajax.aspnetcdn.com/ajax/jQuery/jQuery-1.9.1.js
Hello World：jQuery 第一个实例下面的例子中，我们使用 jQuery 实现在页面上显示当前时间的功能。
清单 3. Hello World

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="../js/lib/jQuery/1.9.1/jQuery.js"></script>
<script>
function initPage(){
//jQuery 代码：调用 jQuery 的核心函数－－－$函数
$("#message").html("Hello World, it is now:"+new Date().toLocaleString());
}
</script>
</head>
<body onload="initPage()">
<span id="message"></span>
</body>
</html>

从上面例子（在线例子：http://blog.viscenthuang.info/jQ ... code=HelloWorld.htm）
的代码中我们可以看到， initPage 这个函数会在页面加载完毕后被调用。而该函数在执行后会在 ID 为 message 的 HTML 结点内添加表示客户端当前时间的字符串。您可以不必急着去理解上面代码的具体意思。下一节将介绍 jQuery 的语法。另外，这个例子中我们使用 body 元素的 onload 属性来绑定事件处理器（initPage）只是为了方便讨论。在本章的后面内容中会介绍 jQuery 中用于处理页面 load 事件绑定的简便 API。

收藏分享评分

回复引用

订阅 TOP

返回列表