本文介绍 jQuery 作为 JavaScript 函数库的核心特性,包括元素选取、操作、CSS处理及 AJAX 支持。详细讲解如何通过本地文件或 Google、Microsoft 提供的 CDN 将 jQuery 添加到网页中,并提供了基础的使用实例与下载建议,帮助开发者快速上手。
jQuery 核心特性概览
只需添加一行简单的代码标记,即可将 jQuery 库集成到网页中。
jQuery 本质上是一个 JavaScript 函数库。
该库具备以下主要功能特性:
- HTML 元素的选择
- HTML 元素的交互操作
- CSS 样式的控制
- HTML 事件的处理函数
- JavaScript 特效与动画效果
- HTML DOM 的遍历与修改
- AJAX 异步请求支持
- 通用工具函数
jQuery 库的引入方式
在页面中引入 jQuery 库的方法
jQuery 库封装在一个独立的 JavaScript 文件中,其中包含了所有可用的 jQuery 函数。
可以通过以下代码标记将 jQuery 引入到网页中:
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
基础 jQuery 实例演示
请注意,<script> 标签应当放置在页面的 <head> 部分内。
以下示例演示了如何使用 jQuery 的 hide() 函数来隐藏 HTML 文档中所有的 <p> 元素。
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
您可以尝试运行以下代码。
下载与 CDN 加速方案
目前提供两个版本的 jQuery 供下载:一个是经过精简的版本,另一个是未压缩的版本(适用于调试或阅读源码)。
这两个版本均可从 jQuery 官方网站获取。
Google 和 Microsoft 均对 jQuery 提供了良好的支持。
如果您选择不将 jQuery 库存储在自己的服务器上,可以直接从 Google 或 Microsoft 加载 CDN 版本的 jQuery 核心文件。
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
以下是使用 Google CDN 的代码示例。
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>