jQuery学习笔记.docx

1、jQuery学习笔记一、jQuery 教程jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。每一章中用到的实例$(document).ready(function() $(p).click(function() $(this).hide(); ););If you click on me, I will disappear. 亲自试一试代码：$(document).ready(function() $(p).click(function() $(this).hide(); ););如果您点击我，我会消失。点击我，我

2、会消失。也要点击我哦。通过点击 TIY 按钮来看看它是如何运行的。您将学到什么在本教程中，您将通过教程以及许多在线实例，学到如何通过使用 jQuery 应用 JavaScript 效果。jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。基本上，您将学习到如何选取 HTML 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务。您需要具备的基础知识在您开始学习 jQuery 之前，您应该对以下知识有基本的了解： HTML CSS JavaScript如果您需要首先学习这些科目，请在我们的首页查找这些教程。jQuery 实例jQuery 参考手册二、jQuery

3、 简介jQuery 库可以通过一行简单的标记被添加到网页中。jQuery 库 - 特性jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities向您的页面添加 jQuery 库jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。可以通过下面的标记把 jQuery 添加到网页中：请注意， 标签应该位于页面的 部分。基础 jQuery 实例下面的例子演示了 jQuer

4、y 的 hide() 函数，隐藏了 HTML 文档中所有的 元素。实例$(document).ready(function()$(button).click(function()$(p).hide();););This is a headingThis is a paragraph.This is another paragraph.Click me亲自试一试代码：$(document).ready(function()$(button).click(function()$(p).hide();););This is a headingThis is a paragraph.This is a

5、nother paragraph.Click me下载 jQuery共有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读）。这两个版本都可从jQ下载。库的替代Google 和 Microsoft 对 jQuery 的支持都很好。如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。使用 Google 的 CDN使用 Microsoft 的 CDN三、jQuery 安装把 jQuery 添加到您的网页如需使用 jQuery，您需要下载 jQuery 库（会在下面为您讲解），然后

6、把它包含在希望使用的网页中。jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 标签引用它：请注意， 标签应该位于页面的 部分。提示：您是否很疑惑为什么我们没有在 标签中使用 type=text/javascript ？在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！下载 jQuery有两个版本的 jQuery 可供下载： Production version - 用于实际的网站中，已被精简和压缩。 Development version - 用于测试和开发（未压缩，是可读的代码）这两个版本都可以从jQ下载。

7、提示：您可以把下载文件放到与页面相同的目录中，这样更方便使用。替代方案如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。谷歌和微软的服务器都存有 jQuery 。如需从谷歌或微软引用 jQuery，请使用以下代码之一：Google CDN:script src=亲自试一试代码：$(document).ready(function() $(button).click(function() $(p).hide(); ););这是标题这是一个段落。这是另一个段落。点击这里提示：通过 Google CDN 来获得最新可用的版本：如果您观察上什么的 Google UR

8、L - 在 URL 中规定了 jQuery 版本 (1.8.0)。如果您希望使用最新版本的 jQuery，也可以从版本字符串的末尾（比如本例 1.8）删除一个数字，谷歌会返回 1.8 系列中最新的可用版本（1.8.0、1.8.1 等等），或者也可以只剩第一个数字，那么谷歌会返回 1 系列中最新的可用版本（从 1.1.0 到 1.9.9）。Microsoft CDN:script src=亲自试一试代码：script src=/$(document).ready(function() $(button).click(function() $(p).hide(); ););这是标题这是一个段落。这

9、是另一个段落。点击这里提示：使用谷歌或微软的 jQuery，有一个很大的优势：许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。四、jQuery 语法通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。jQuery 语法实例1、$(this).hide()演示 jQuery hide() 函数，隐藏当前的 HTML 元素。代码：$

10、(document).ready(function() $(button).click(function() $(this).hide();););Click me2、$(#test).hide()演示 jQuery hide() 函数，隐藏 id=test 的元素。代码：$(document).ready(function() $(button).click(function() $(#test).hide(); ););This is a headingThis is a paragraph.This is another paragraph.Click me3、$(p).hide()演示

11、 jQuery hide() 函数，隐藏所有 元素。代码：$(document).ready(function()$(button).click(function()$(p).hide();););This is a headingThis is a paragraph.This is another paragraph.Click me4、$(.test).hide()演示 jQuery hide() 函数，隐藏所有 class=test 的元素。代码：$(document).ready(function() $(button).click(function() $(.test).hide(

12、); ););This is a headingThis is a paragraph.This is another paragraph.Click mejQuery 语法jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。基础语法是：$(selector).action() 美元符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作示例$(this).hide() - 隐藏当前元素$(p).hide() - 隐藏所有段落$(.test).hide() - 隐藏所有 class=tes

13、t 的所有元素$(#test).hide() - 隐藏所有 id=test 的元素提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。文档就绪函数您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：$(document).ready(function()- jQuery functions go here -);这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子： 试图隐藏一个不存

14、在的元素 获得未完全加载的图像的大小五、jQuery 选择器选择器允许您对元素组或单个元素进行操作。jQuery 选择器在前面的章节中，我们展示了一些有关如何选取 HTML 元素的实例。关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。选择器允许您对 HTML 元素组或单个元素进行操作。在 HTML DOM 术语中：选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。jQuery 元素选择器jQuery 使用 CSS 选择器来选取 HTML 元素。$(p) 选取 元素。$

15、(p.intro) 选取所有 class=intro 的 元素。$(p#demo) 选取所有 id=demo 的 元素。jQuery 属性选择器jQuery 使用 XPath 表达式来选择带有给定属性的元素。$(href) 选取所有带有 href 属性的元素。$(href=#) 选取所有带有 href 值等于 # 的元素。$(href!=#) 选取所有带有 href 值不等于 # 的元素。$(href$=.jpg) 选取所有 href 值以 .jpg 结尾的元素。jQuery CSS 选择器jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。下面的例子把所有 p 元素的背景

16、颜色更改为红色：实例$(p).css(background-color,red);亲自试一试代码：$(document).ready(function() $(button).click(function() $(p).css(background-color,red); ););This is a headingThis is a paragraph.This is another paragraph.Click me更多的选择器实例语法描述$(this)当前 HTML 元素$(p)所有 元素$(p.intro)所有 class=intro 的 元素$(.intro)所有 class=int

17、ro 的元素$(#intro)id=intro 的元素$(ul li:first)每个 的第一个 元素$(href$=.jpg)所有带有以 .jpg 结尾的属性值的 href 属性$(div#intro .head)id=intro 的 元素中的所有 class=head 的元素六、jQuery 事件jQuery 是为事件处理特别设计的。jQuery 事件函数jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。通常会把 jQuery 代码放到 部分的事件处理方法中：实例$(docu

18、ment).ready(function() $(button).click(function() $(p).hide(); ););This is a headingThis is a paragraph.This is another paragraph.Click me亲自试一试代码：$(document).ready(function()$(button).click(function()$(p).hide();););This is a headingThis is a paragraph.This is another paragraph.Click me在上面的例子中，当按钮的点

19、击事件被触发时会调用一个函数：$(button).click(function() .some code. )该方法隐藏所有 元素：$(p).hide();单独文件中的函数如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。当我们在教程中演示 jQuery 时，会将函数直接添加到 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：实例jQuery 名称冲突jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。j