笙亿网络策划

jQuery快速入门指南怎么用？新手必看jQuery速成教程？

约 102 分钟读完 3 阅
文章导读
Previous Quiz Next jQuery - 概述 什么是 jQuery？ jQuery 是一个快速、简洁的 JavaScript 库，由 John Resig 于 2006 年创建，口号是：写得少，做得多。jQuery 简化了 HTML 文档遍历、事件处理、动画
📋 目录
  1. Ⅰ 什么是 jQuery？
  2. Ⅱ 如何使用 jQuery？
  3. Ⅲ 本地安装
  4. Ⅳ 基于 CDN 的版本
  5. Ⅴ 如何调用 jQuery 库函数？
  6. Ⅵ 如何使用自定义脚本？
  7. Ⅶ $() 工厂函数
  8. Ⅷ 设置属性值
  9. Ⅸ 应用样式
  10. Ⅹ 属性方法
A A

jQuery - 快速指南

Previous
Quiz
Next

jQuery - 概述

什么是 jQuery？

jQuery 是一个快速、简洁的 JavaScript 库，由 John Resig 于 2006 年创建，口号是：写得少，做得多。jQuery 简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互，从而实现快速 Web 开发。jQuery 是一个 JavaScript 工具包，旨在通过编写更少的代码来简化各种任务。以下是 jQuery 支持的重要核心特性列表 −

  • DOM 操作 − jQuery 通过使用跨浏览器的开源选择器引擎 Sizzle，使选择 DOM 元素、遍历它们并修改其内容变得简单。

  • 事件处理 − jQuery 提供了一种优雅的方式来捕获各种事件，例如用户点击链接，而无需在 HTML 代码中杂乱地添加事件处理器。

  • AJAX 支持 − jQuery 通过 AJAX 技术帮助您开发响应迅速且功能丰富的网站。

  • 动画 − jQuery 自带大量内置动画效果，您可以在网站中使用它们。

  • 轻量级 − jQuery 是一个非常轻量级的库，大小约为 19KB（已压缩和 gzip）。

  • 跨浏览器支持 − jQuery 具有跨浏览器支持，在 IE 6.0+、FF 2.0+、Safari 3.0+、Chrome 和 Opera 9.0+ 上运行良好。

  • 最新技术 − jQuery 支持 CSS3 选择器和基本的 XPath 语法。

如何使用 jQuery？

有两种方式可以使用 jQuery。

  • 本地安装 − 您可以将 jQuery 库下载到本地机器，并在 HTML 代码中包含它。

  • 基于 CDN 的版本 − 您可以直接从内容分发网络 (CDN) 将 jQuery 库包含到 HTML 代码中。

本地安装

  • 访问 https://jquery.com/download/ 下载最新可用版本。

  • 现在将下载的 jquery-2.1.3.min.js 文件放入网站目录中，例如 /jquery。

示例

现在您可以将 jquery 库包含到 HTML 文件中，如下所示 −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

这将产生以下结果 −

基于 CDN 的版本

您可以直接从内容分发网络 (CDN) 将 jQuery 库包含到 HTML 代码中。Google 和 Microsoft 提供最新版本的内容分发。

本教程全程使用 Google CDN 版本的库。

示例

现在让我们使用来自 Google CDN 的 jQuery 库重写上面的示例。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

这将产生以下结果 −

如何调用 jQuery 库函数？

与使用 jQuery 时所做的几乎所有操作一样，我们读取或操作文档对象模型 (DOM)，因此我们需要确保在 DOM 准备就绪时立即开始添加事件等操作。

如果您希望某个事件在页面上生效，则应在 $(document).ready() 函数内部调用它。其内部的一切内容将在 DOM 加载完成后立即加载，且在页面内容加载之前。

为此，我们为文档注册一个 ready 事件，如下所示 −

$(document).ready(function() {
   // 当 DOM 准备就绪时执行操作
});

要调用任何 jQuery 库函数，请使用以下 HTML script 标签 −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

这将产生以下结果 −

如何使用自定义脚本？

最好将我们的自定义代码写入自定义 JavaScript 文件：custom.js，如下所示 −

/* 文件名：custom.js */
$(document).ready(function() {

   $("div").click(function() {
      alert("Hello, world!");
   });
});

现在我们可以在 HTML 文件中包含 custom.js 文件，如下所示 −

<html>
   <head>
      <title>The jQuery Example</title>
   </head>
	
   <body>
      <div>
         <p>This is a paragraph.</p>
         <p>This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

这将产生以下结果 −

以上树形结构的重要要点如下 −

  • <html> 是所有其他元素的老祖宗；换句话说，所有其他元素都是 <html> 的后代。

  • <head> 和 <body> 元素不仅是 <html> 的后代，而且还是其子元素。

  • 同样，除了是 <head> 和 <body> 的老祖宗之外，<html> 也是它们的父元素。

  • <p> 元素是 <div> 的子元素（也是后代），是 <body> 和 <html> 的后代，并且彼此是兄弟 <p> 元素。

在学习 jQuery 概念时，了解 DOM 将很有帮助。如果您不了解 DOM，我建议您阅读我们的 DOM Tutorial 简单教程。

jQuery - 选择器

jQuery 库利用 CSS 选择器的强大功能，让我们能够快速轻松地在文档对象模型 (DOM) 中访问元素或元素组。

jQuery 选择器是一个函数，它使用表达式根据给定的条件从 DOM 中找出匹配的元素。简单来说，选择器用于使用 jQuery 选择一个或多个 HTML 元素。一旦选择了元素，我们就可以对选中的元素执行各种操作。

$() 工厂函数

jQuery 选择器以美元符号和括号开头 − $()。工厂函数 $() 在给定文档中选择元素时，使用以下三个构建块 −

序号 选择器 & 描述
1

标签名

表示 DOM 中存在的标签名。例如 $('p') 选择文档中所有的段落 <p>。
2

标签 ID

表示 DOM 中具有指定 ID 的标签。例如 $('#some-id') 选择文档中具有 ID 为 some-id 的单个元素。
3

标签类

表示 DOM 中具有指定 class 的标签。例如 $('.some-class') 选择文档中所有具有 class 为 some-class 的元素。

上述所有项目可以单独使用，也可以与其他选择器组合使用。除了某些调整外，所有 jQuery 选择器都基于相同的原理。

注意 − 工厂函数 $() 是 jQuery() 函数的同义词。因此，如果您使用其他 JavaScript 库，其中 $ 符号与其他内容冲突，您可以将 $ 符号替换为 jQuery 名称，并使用函数 jQuery() 代替 $()。

示例

以下是一个简单的示例，使用标签选择器。这将选择所有标签名为 p 的元素。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>
	
   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

这将产生以下结果 −

设置属性值

attr(name, value) 方法可用于将传递的值设置到包装集中的所有元素上的指定属性。

示例

以下是一个简单的示例，它将图像标签的 src 属性设置为正确的位置 −

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.example.com" />
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>
	
   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
      </div>
   </body>
</html>

这将产生以下结果 −

应用样式

addClass( classes ) 方法可用于将定义的样式表应用到所有匹配的元素上。您可以指定多个用空格分隔的 class。

示例

以下是一个简单的示例，它为段落 <p> 标签设置 class 属性 −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("em").addClass("selected");
            $("#myid").addClass("highlight");
         });
      </script>
		
      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>	
   </head>
	
   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

这将产生以下结果 −

属性方法

下表列出了几个有用的方法，您可以使用它们来操作属性和属性 −

序号 方法与描述
1 attr( properties )

将键/值对象设置为所有匹配元素的 properties。
2 attr( key, fn )

为所有匹配元素设置单个 property 为计算值。
3 removeAttr( name )

从每个匹配元素中移除一个 attribute。
4 hasClass( class )

如果指定的 class 存在于至少一个匹配元素集中，则返回 true。
5 removeClass( class )

从匹配元素集中移除所有或指定的 class(es)。
6 toggleClass( class )

如果指定的 class 不存在则添加，如果存在则移除。
7 html( )

获取第一个匹配元素的 html 内容（innerHTML）。
8 html( val )

设置每个匹配元素的 html 内容。
9 text( )

获取所有匹配元素的组合文本内容。
10 text( val )

设置所有匹配元素的文本内容。
11 val( )

获取第一个匹配元素的 input 值。
12 val( val )

如果在 <input> 上调用，则设置每个匹配元素的 value attribute；但如果在 <select> 上调用并传递 <option> 值，则将传递的 option 选中；如果在复选框或单选框上调用，则所有匹配的复选框和单选框将被选中。

示例

类似于上面的语法和示例，以下示例将帮助您理解在不同情况下使用各种 attribute methods −

序号 选择器 & 描述
1

$("#myID").attr("custom")

这将返回与 ID myID 匹配的第一个元素的 custom 属性值。
2

$("img").attr("alt", "Sample Image")

这将把所有图片的 alt 属性设置为新值 "Sample Image"。
3

$("input").attr({ value: "", title: "Please enter a value" });

将所有 <input> 元素的值设置为字符串，同时将 The jQuery Example 设置为字符串 Please enter a value。
4

$("a[href^=https://]").attr("target","_blank")

选择所有 href 属性以 https:// 开头的链接，并将其 target 属性设置为 _blank。
5

$("a").removeAttr("target")

这将移除所有链接的 target 属性。
6

$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");});

这将在点击提交按钮时将 disabled 属性修改为值 "disabled"。
7

$("p:last").hasClass("selected")

如果最后一个 <p> 标签具有关联的 class selected，则返回 true。
8

$("p").text()

返回包含所有匹配 <p> 元素组合文本内容的字符串。
9

$("p").text("<i>Hello World</i>")

这将把 "<I>Hello World</I>" 设置为匹配 <p> 元素的文本内容。
10

$("p").html()

这将返回所有匹配段落的 HTML 内容。
11

$("div").html("Hello World")

这将把所有匹配 <div> 的 HTML 内容设置为 Hello World。
12

$("input:checkbox:checked").val()

从选中的复选框中获取第一个值。
13

$("input:radio[name=bar]:checked").val()

从一组单选按钮中获取第一个值。
14

$("button").val("Hello")

设置每个匹配元素 <button> 的 value 属性。
15

$("input").val("on")

这将选中所有值为 "on" 的单选按钮或复选框。
16

$("select").val("Orange")

这将在包含 Orange、Mango 和 Banana 选项的下拉框中选择 Orange 选项。
17

$("select").val("Orange", "Mango")

这将在包含 Orange、Mango 和 Banana 选项的下拉框中选择 Orange 和 Mango 选项。

jQuery - DOM Traversing

jQuery 是一个非常强大的工具，它提供多种 DOM traversal methods，帮助我们在文档中随机或按顺序选择元素。大多数 DOM Traversal Methods 不会修改 jQuery 对象，它们用于根据给定条件从文档中过滤元素。

通过索引查找元素

考虑一个包含以下 HTML 内容的简单文档 −

<html>
   <head>
      <title>The JQuery Example</title>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

这将产生以下结果 −

  • 上面的每个列表都有自己的索引，可以直接使用 eq(index) 方法定位，如以下示例所示。

  • 每个子元素的索引从零开始，因此，list item 2 可以通过 $("li").eq(1) 访问，以此类推。

示例

以下是一个简单的示例，它为第二个列表项添加颜色。

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

这将产生以下结果 −

过滤元素

filter( selector ) 方法可用于从匹配元素集合中过滤出不匹配指定 selector(s) 的所有元素。selector 可以使用任何 selector 语法编写。

示例

以下是一个简单的示例，它为与 middle class 关联的列表应用颜色 −

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").filter(".middle").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li class = "top">list item 1</li>
            <li class = "top">list item 2</li>
            <li class = "middle">list item 3</li>
            <li class = "middle">list item 4</li>
            <li class = "bottom">list item 5</li>
            <li class = "bottom">list item 6</li>
         </ul>
      </div>
   </body>
</html>

这将产生以下结果 −

定位后代元素

find( selector ) 方法可用于定位特定类型元素的全部后代元素。selector 可以使用任何选择器语法编写。

示例

以下示例选择不同 <p> 元素内部的所有 <span> 元素 −

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").find("span").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <p>This is 1st paragraph and <span>THIS IS RED</span></p>
      <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
   </body>
</html>

这将产生以下结果 −

jQuery DOM 过滤方法

下表列出了用于从 DOM 元素列表中过滤各种元素的实用方法 −

序号 方法与描述
1 eq( index )

将匹配元素集缩小到单个元素。
2 filter( selector )

从匹配元素集中移除不匹配指定选择器（们）的所有元素。
3 filter( fn )

从匹配元素集中移除不匹配指定函数的所有元素。
4 is( selector )

将当前选择与表达式进行检查，如果选择中至少一个元素符合给定选择器，则返回 true。
5 map( callback )

将 jQuery 对象中的元素集转换为 jQuery 数组中的另一组值（可能包含或不包含元素）。
6 not( selector )

从匹配元素集中移除匹配指定选择器的元素。
7 slice( start, [end] )

选择匹配元素的一个子集。

jQuery DOM 遍历方法

下表列出了其他有用的方法，您可以使用它们来定位 DOM 中的各种元素 −

序号 方法 & 描述
1 add( selector )

将由给定 selector 匹配的更多元素添加到匹配元素集合中。
2 andSelf( )

将之前的选择添加到当前选择中。
3 children( [selector])

获取包含每个匹配元素的所有唯一直接子元素的元素集合。
4 closest( selector )

获取包含最接近匹配指定 selector 的父元素的元素集合，包括起始元素。
5 contents( )

查找匹配元素内部的所有子节点（包括文本节点），或者如果元素是 iframe，则查找内容文档。
6 end( )

还原最近的“破坏性”操作，将匹配元素集合恢复到之前的状态。
7 find( selector )

搜索匹配指定 selector 的后代元素。
8 next( [selector] )

获取包含给定元素集合中每个元素的唯一下一个兄弟元素的元素集合。
9 nextAll( [selector] )

查找当前元素之后的所有的兄弟元素。
10 offsetParent( )

返回第一个匹配元素的定位父元素的 jQuery 集合。
11 parent( [selector] )

获取元素的直接父元素。如果在元素集合上调用，则返回它们的唯一直接父元素集合。
12 parents( [selector] )

获取包含匹配元素集合的唯一祖先元素的元素集合（不包括根元素）。
13 prev( [selector] )

获取包含每个匹配元素集合的唯一前一个兄弟元素的元素集合。
14 prevAll( [selector] )

查找当前元素前面的所有的兄弟元素。
15 siblings( [selector] )

获取包含每个匹配元素的所有唯一兄弟元素的元素集合。

jQuery - CSS 选择器方法

jQuery 库支持几乎所有 Cascading Style Sheet (CSS) 规范 1 到 3 中包含的选择器，如 World Wide Web Consortium 的网站所述。

使用 jQuery 库，开发者可以增强他们的网站，而无需担心浏览器及其版本，只要浏览器启用了 JavaScript。

大多数 jQuery CSS 方法不会修改 jQuery 对象的 content，它们用于在 DOM 元素上应用 CSS 属性。

应用 CSS 属性

使用 jQuery 方法 css( PropertyName, PropertyValue ) 应用任何 CSS 属性非常简单。

以下是该方法的语法 −

selector.css( PropertyName, PropertyValue );

这里您可以将 PropertyName 作为 javascript 字符串传递，根据其值，PropertyValue 可以是字符串或整数。

示例

以下示例为第二个列表项添加字体颜色。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css("color", "red");
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

这将产生以下结果 −

应用多个 CSS 属性

您可以使用单个 jQuery 方法 CSS( {key1:val1, key2:val2....) 来应用多个 CSS 属性。您可以在一次调用中应用任意数量的属性。

以下是该方法的语法 −

selector.css( {key1:val1, key2:val2....keyN:valN})

这里您可以将 key 作为属性，val 作为其值，如上所述。

示例

以下示例为第二个列表项添加字体颜色和背景颜色。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css({"color":"red", "background-color":"green"});
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

这将产生以下结果 −

设置元素宽度和高度

width( val ) 和 height( val ) 方法可分别用于设置任何元素的宽度和高度。

示例

以下是一个简单示例，它为第一个 div 元素设置宽度，而其他元素的宽度由样式表设置

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div:first").width(100);
            $("div:first").css("background-color", "blue");
         });
      </script>
		
      <style>
         div { 
            width:70px; height:50px; float:left; 
            margin:5px; background:red; cursor:pointer; 
         }
      </style>
   </head>
	
   <body>
      <div></div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
   </body>
</html>

这将产生以下结果 −

jQuery CSS 方法

下表列出了所有可以用来操作 CSS 属性的方法 −

序号 方法 & 描述
1 css( name )

返回第一个匹配元素上的样式属性。
2 css( name, value )

为所有匹配元素设置单个样式属性为指定值。
3 css( properties )

为所有匹配元素设置键/值对象作为样式属性。
4 height( val )

设置每个匹配元素的 CSS height。
5 height( )

获取第一个匹配元素的当前计算的像素 height。
6 innerHeight( )

获取第一个匹配元素的内部高度（不包括边框，包括 padding）。
7 innerWidth( )

获取第一个匹配元素的内部宽度（不包括边框，包括 padding）。
8 offset( )

获取第一个匹配元素的当前 offset，以像素为单位，相对于文档。
9 offsetParent( )

返回包含第一个匹配元素的定位父元素的 jQuery 集合。
10 outerHeight( [margin] )

获取第一个匹配元素的外部高度（默认包括边框和 padding）。
11 outerWidth( [margin] )

获取第一个匹配元素的外部宽度（默认包括边框和 padding）。
12 position( )

获取元素相对于其 offset parent 的 top 和 left 位置。
13 scrollLeft( val )

当传入值时，将所有匹配元素的 scroll left offset 设置为该值。
14 scrollLeft( )

获取第一个匹配元素的 scroll left offset。
15 scrollTop( val )

当传入值时，将所有匹配元素的 scroll top offset 设置为该值。
16 scrollTop( )

获取第一个匹配元素的 scroll top offset。
17 width( val )

设置每个匹配元素的 CSS width。
18 width( )

获取第一个匹配元素的当前计算的像素 width。

jQuery - DOM 操作

jQuery 提供了高效操作 DOM 的方法。您无需编写大量代码来修改任何元素的属性值，或从段落或 div 中提取 HTML 代码。

jQuery 提供了诸如 .attr()、.html() 和 .val() 等方法，这些方法作为 getter，从 DOM 元素中检索信息以供后续使用。

内容操作

html( ) 方法获取第一个匹配元素的 html 内容（innerHTML）。

以下是该方法的语法 −

selector.html( )

示例

以下示例使用了 .html() 和 .text(val) 方法。其中 .html() 从对象中检索 HTML 内容，然后 .text( val ) 方法使用传入的参数设置对象的值 −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               var content = $(this).html();
               $("#result").text( content );
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

这将产生以下结果 −

DOM 元素替换

您可以使用指定的 HTML 或 DOM 元素来替换完整的 DOM 元素。replaceWith( content ) 方法非常适合实现此目的。

以下是该方法的语法 −

selector.replaceWith( content )

这里的 content 是您想要用来替换原始元素的内容。这可以是 HTML 或简单文本。

示例

以下示例会在点击 div 元素时将其替换为 "<h1>JQuery is Great </h1>" −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).replaceWith("<h1>JQuery is Great</h1>");
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

这将产生以下结果 −

移除 DOM 元素

有时您可能需要从文档中移除一个或多个 DOM 元素。jQuery 提供了两种方法来处理这种情况。

empty( ) 方法会从匹配的元素集合中移除所有子节点，而 remove( expr ) 方法会从 DOM 中移除所有匹配的元素。

以下是该方法的语法 −

selector.remove( [ expr ])

or 

selector.empty( )

您可以传递可选参数 expr 来过滤要移除的元素集合。

示例

以下示例会在元素被点击时立即移除它们 −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).remove( );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

这将产生以下结果 −

插入 DOM 元素

有时你可能需要在现有文档中插入新的一个或多个 DOM 元素。jQuery 提供了各种方法来在不同位置插入元素。

after( content ) 方法将内容插入到每个匹配元素之后，而 before( content ) 方法则将内容插入到每个匹配元素之前。

以下是该方法的语法 −

selector.after( content )

or

selector.before( content )

这里的 content 是你想要插入的内容。这可以是 HTML 或简单文本。

示例

以下示例在点击的元素之前插入 <div> 元素 −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

这将产生以下结果 −

DOM 操作方法

下表列出了所有可用于操作 DOM 元素的方法 −

序号 方法 & 描述
1 after( content )

在每个匹配元素之后插入 content。
2 append( content )

将 content 追加到每个匹配元素的内部。
3 appendTo( selector )

将所有匹配元素追加到指定的另一组元素中。
4 before( content )

在每个匹配元素之前插入 content。
5 clone( bool )

克隆匹配的 DOM 元素及其所有事件处理器，并选择这些克隆元素。
6 clone( )

克隆匹配的 DOM 元素，并选择这些克隆元素。
7 empty( )

从匹配元素集中移除所有子节点。
8 html( val )

设置每个匹配元素的 html 内容。
9 html( )

获取第一个匹配元素的 html 内容（innerHTML）。
10 insertAfter( selector )

将所有匹配元素插入到指定的另一组元素之后。
11 insertBefore( selector )

将所有匹配元素插入到指定的另一组元素之前。
12 prepend( content )

将 content 前置到每个匹配元素的内部。
13 prependTo( selector )

将所有匹配元素前置到指定的另一组元素中。
14 remove( expr )

从 DOM 中移除所有匹配元素。
15 replaceAll( selector )

用匹配元素替换由指定 selector 匹配的元素。
16 replaceWith( content )

用指定的 HTML 或 DOM 元素替换所有匹配元素。
17 text( val )

设置所有匹配元素的文本内容。
18 text( )

获取所有匹配元素的组合文本内容。
19 wrap( elem )

用指定的元素包装每个匹配元素。
20 wrap( html )

用指定的 HTML 内容包装每个匹配元素。
21 wrapAll( elem )

将匹配集中所有的元素包装到一个单一的包装元素中。
22 wrapAll( html )

将匹配集中所有的元素包装到一个单一的包装元素中。
23 wrapInner( elem )

用一个 DOM 元素包装每个匹配元素的内部子内容（包括文本节点）。
24 wrapInner( html )

用 HTML 结构包装每个匹配元素的内部子内容（包括文本节点）。

jQuery - 事件处理

我们可以通过事件来创建动态网页。事件是 Web 应用程序可以检测到的动作。

以下是示例事件 −

  • 鼠标点击
  • 网页加载
  • 鼠标悬停在元素上
  • 提交 HTML 表单
  • 键盘上的按键等。

当这些事件被触发时，您可以使用自定义函数来处理事件。这些自定义函数称为 Event Handlers。

绑定事件处理程序

使用 jQuery 事件模型，我们可以使用 bind() 方法在 DOM 元素上建立事件处理程序，如下所示 −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

此代码将使 div 元素响应点击事件；此后当用户点击该 div 内部时，将显示 alert 对话框。

这将产生以下结果 −

bind() 命令的完整语法如下 −

selector.bind( eventType[, eventData], handler)

以下是参数的说明 −

  • eventType − 包含 JavaScript 事件类型的字符串，例如 click 或 submit。请参阅下一节以获取完整的事件类型列表。

  • eventData − 此可选参数是一个数据映射，将传递给事件处理程序。

  • handler − 每次事件触发时要执行的 function。

移除事件处理程序

通常，一旦建立了事件处理程序，它将在页面生命周期的剩余时间内一直有效。有时您可能需要移除事件处理程序。

jQuery 提供了 unbind() 命令来移除已存在的事件处理程序。unbind() 的语法如下 −

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

以下是参数的说明 −

  • eventType − 包含 JavaScript 事件类型的字符串，例如 click 或 submit。请参阅下一节以获取完整的事件类型列表。

  • handler − 如果提供，则标识要移除的特定监听器。

事件类型

序号 事件类型与说明
1

blur

当元素失去焦点时发生。
2

change

当元素发生变化时发生。
3

click

鼠标点击时发生。
4

dblclick

鼠标双击时发生。
5

error

加载或卸载等发生错误时发生。
6

focus

当元素获得焦点时发生。
7

keydown

按下按键时发生。
8

keypress

按下并释放按键时发生。
9

keyup

释放按键时发生。
10

load

文档加载完成时发生。
11

mousedown

按下鼠标按钮时发生。
12

mouseenter

鼠标进入元素区域时发生。
13

mouseleave

鼠标离开元素区域时发生。
14

mousemove

鼠标指针移动时发生。
15

mouseout

鼠标指针移出元素时发生。
16

mouseover

鼠标指针移到元素上时发生。
17

mouseup

释放鼠标按钮时发生。
18

resize

窗口大小调整时发生。
19

scroll

窗口滚动时发生。
20

select

文本被选中时发生。
21

submit

表单提交时发生。
22

unload

文档卸载时发生。

事件对象

回调函数接受一个参数；当处理程序被调用时，JavaScript 事件对象会通过该参数传递。

事件对象通常不是必需的，可以省略该参数，因为在将处理程序绑定时通常已有足够的上下文信息来确切知道处理程序被触发时需要执行什么操作，然而有些属性是需要访问的。

事件属性

序号 属性 & 描述
1

altKey

如果事件触发时按下了 Alt 键，则设置为 true，否则为 false。大多数 Mac 键盘上的 Alt 键标记为 Option。
2

ctrlKey

如果事件触发时按下了 Ctrl 键，则设置为 true，否则为 false。
3

data

在建立处理程序时作为 bind() 命令第二个参数传递的值（如果有的话）。
4

keyCode

对于 keyup 和 keydown 事件，返回按下的键。
5

metaKey

如果事件触发时按下了 Meta 键，则设置为 true，否则为 false。Meta 键在 PC 上是 Ctrl 键，在 Mac 上是 Command 键。
6

pageX

对于鼠标事件，指定事件相对于页面原点的水平坐标。
7

pageY

对于鼠标事件，指定事件相对于页面原点的垂直坐标。
8

relatedTarget

对于某些鼠标事件，标识光标在事件触发时离开或进入的元素。
9

screenX

对于鼠标事件，指定事件相对于屏幕原点的水平坐标。
10

screenY

对于鼠标事件，指定事件相对于屏幕原点的垂直坐标。
11

shiftKey

如果事件触发时按下了 Shift 键，则设置为 true，否则为 false。
12

target

标识事件触发所针对的元素。
13

timeStamp

事件创建时的时间戳（以毫秒为单位）。
14

type

对于所有事件，指定触发的事件类型（例如，click）。
15

which

对于键盘事件，指定导致事件的键的数字代码；对于鼠标事件，指定按下的按钮（1 表示左键，2 表示中键，3 表示右键）。

 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

这将产生以下结果 −

事件方法

Event Object 上可以调用以下方法列表 −

序号 方法 & 描述
1 preventDefault()

阻止浏览器执行默认行为。
2 isDefaultPrevented()

返回此 event 对象上是否曾经调用过 event.preventDefault()。
3 stopPropagation()

停止事件向父元素的冒泡，防止任何父处理器被通知到该事件。
4 isPropagationStopped()

返回此 event 对象上是否曾经调用过 event.stopPropagation()。
5 stopImmediatePropagation()

停止其余处理器执行。
6 isImmediatePropagationStopped()

返回此 event 对象上是否曾经调用过 event.stopImmediatePropagation()。

事件操作方法

下表列出了重要的与事件相关的方法 −

序号 方法 & 描述
1 bind( type, [data], fn )

为每个匹配元素绑定一个或多个事件（如 click）的处理器。也可以绑定自定义事件。
2 off( events [, selector ] [, handler(eventObject) ] )

这与 live 相反，它移除绑定的 live 事件。
3 hover( over, out )

模拟悬停，例如鼠标移动到对象上和移开。
4 on( events [, selector ] [, data ], handler )

为所有当前和未来的匹配元素绑定事件（如 click）的处理器。也可以绑定自定义事件。
5 one( type, [data], fn )

为每个匹配元素绑定一个或多个事件处理器，仅执行一次。
6 ready( fn )

绑定一个函数，当 DOM 准备好被遍历和操作时执行。
7 trigger( event, [data] )

在每个匹配元素上触发事件。
8 triggerHandler( event, [data] )

触发元素上所有绑定的イベント处理器。
9 unbind( [type], [fn] )

这与 bind 相反，它从每个匹配元素上移除绑定的事件。

事件辅助方法

jQuery 还提供了一组事件辅助函数，可用于触发事件或绑定上述任何事件类型。

触发方法

以下示例会在所有段落上触发 blur 事件 −

$("p").blur();

绑定方法

以下示例将为所有 <div> 绑定一个 click 事件 −

$("div").click( function () { 
   // 在这里做一些事情
});
序号 方法与描述
1

blur( )

触发每个匹配元素的 blur 事件。
2

blur( fn )

为每个匹配元素的 blur 事件绑定一个 function。
3

change( )

触发每个匹配元素的 change 事件。
4

change( fn )

为每个匹配元素的 change 事件绑定一个 function。
5

click( )

触发每个匹配元素的 click 事件。
6

click( fn )

为每个匹配元素的 click 事件绑定一个 function。
7

dblclick( )

触发每个匹配元素的 dblclick 事件。
8

dblclick( fn )

为每个匹配元素的 dblclick 事件绑定一个 function。
9

error( )

触发每个匹配元素的 error 事件。
10

error( fn )

为每个匹配元素的 error 事件绑定一个 function。
11

focus( )

触发每个匹配元素的 focus 事件。
12

focus( fn )

为每个匹配元素的 focus 事件绑定一个 function。
13

keydown( )

触发每个匹配元素的 keydown 事件。
14

keydown( fn )

为每个匹配元素的 keydown 事件绑定一个 function。
15

keypress( )

触发每个匹配元素的 keypress 事件。
16

keypress( fn )

为每个匹配元素的 keypress 事件绑定一个 function。
17

keyup( )

触发每个匹配元素的 keyup 事件。
18

keyup( fn )

为每个匹配元素的 keyup 事件绑定一个 function。
19

load( fn )

为每个匹配元素的 load 事件绑定一个 function。
20

mousedown( fn )

为每个匹配元素的 mousedown 事件绑定一个 function。
21

mouseenter( fn )

为每个匹配元素的 mouseenter 事件绑定一个 function。
22

mouseleave( fn )

为每个匹配元素的 mouseleave 事件绑定一个 function。
23

mousemove( fn )

为每个匹配元素的 mousemove 事件绑定一个 function。
24

mouseout( fn )

为每个匹配元素的 mouseout 事件绑定一个 function。
25

mouseover( fn )

为每个匹配元素的 mouseover 事件绑定一个 function。
26

mouseup( fn )

为每个匹配元素的 mouseup 事件绑定一个 function。
27

resize( fn )

为每个匹配元素的 resize 事件绑定一个 function。
28

scroll( fn )

为每个匹配元素的 scroll 事件绑定一个 function。
29

select( )

触发每个匹配元素的 select 事件。
30

select( fn )

为每个匹配元素的 select 事件绑定一个 function。
31

submit( )

触发每个匹配元素的 submit 事件。
32

submit( fn )

为每个匹配元素的 submit 事件绑定一个 function。
33

unload( fn )

为每个匹配元素的 unload 事件绑定一个 function。

jQuery - Ajax

AJAX 是 Asynchronous JavaScript and XML 的缩写，该技术帮助我们在不刷新浏览器页面的情况下从服务器加载数据。

如果您是 AJAX 新手，我建议您在继续学习之前先阅读我们的 Ajax Tutorial。

jQuery 是一个强大的工具，它提供丰富的 AJAX 方法来开发下一代 Web 应用程序。

加载简单数据

使用 jQuery AJAX 加载任何静态或动态数据非常简单。jQuery 提供了 load() 方法来完成这项工作 −

语法

以下是 load() 方法的简单语法 −

[selector].load( URL, [data], [callback] );

以下是所有参数的描述 −

  • URL − 请求发送到的服务器端资源的 URL。它可以是生成动态数据或从数据库中读取数据的 CGI、ASP、JSP 或 PHP 脚本。

  • data − 此可选参数表示一个对象，其属性会被序列化为正确编码的参数传递给请求。如果指定，则使用 POST 方法发起请求。如果省略，则使用 GET 方法。

  • callback − 在响应数据加载到匹配元素集之后调用的回调函数。此函数的第一个参数是从服务器接收到的响应文本，第二个参数是状态码。

示例

考虑以下带有少量 jQuery 代码的 HTML 文件 −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

这里 load() 向指定的 URL /jquery/result.html 文件发起 Ajax 请求。加载该文件后，所有内容将被填充到标记为 ID stage 的 <div> 元素中。假设我们的 /jquery/result.html 文件只有一行 HTML −

<h1>THIS IS RESULT...</h1>

当您点击给定的按钮时，result.html 文件将被加载。

获取 JSON 数据

在某些情况下，服务器会针对您的请求返回 JSON 字符串。jQuery 工具函数 getJSON() 会解析返回的 JSON 字符串，并将结果字符串作为第一个参数传递给回调函数，以便进行后续操作。

语法

以下是 getJSON() 方法的简单语法 −

[selector].getJSON( URL, [data], [callback] );

以下是所有参数的描述 −

  • URL − 通过 GET 方法访问的服务器端资源的 URL。

  • data − 一个对象，其属性用作名称/值对，用于构建要追加到 URL 的查询字符串，或者一个预格式化并编码的查询字符串。

  • callback − 请求完成时调用的函数。将响应体作为 JSON 字符串处理后的数据值作为第一个参数传递给此回调函数，状态作为第二个参数。

示例

考虑以下带有少量 jQuery 代码的 HTML 文件 −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
				
               $.getJSON('/jquery/result.json', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
					
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.json file −</p>
		
      <div id = "stage" style = "background-color:#eee;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

这里 jQuery 工具方法 getJSON() 向指定的 URL result.json 文件发起 Ajax 请求。加载此文件后，所有内容将传递给回调函数，最终填充到 ID 为 stage 的 <div> 标签中。假设我们的 result.json 文件包含以下 JSON 格式的内容 −

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

当您点击给定按钮时，result.json 文件将被加载。

向服务器传递数据

很多时候，你需要从用户那里收集输入数据，并将这些数据传递给服务器进行进一步处理。jQuery AJAX 通过任何可用 Ajax 方法的 data 参数，使得将收集到的数据传递到服务器变得非常简单。

示例

此示例演示如何将用户输入传递给 Web 服务器脚本，该脚本会将相同的结果返回，我们再将其打印出来 −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               var name = $("#name").val();
               $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>
	
   <body>
      <p>Enter your name and click on the button:</p>
      <input type = "input" id = "name" size = "40" /><br />
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Show Result" />
   </body>
</html>

以下是 result.php 脚本中的代码 −

<?php
   if( $_REQUEST["name"] ){
      $name = $_REQUEST['name'];
      echo "Welcome ". $name;
   }
?>

现在，你可以在给定的输入框中输入任意文本，然后点击“Show Result”按钮，即可看到你在输入框中输入的内容。

jQuery AJAX 方法

你已经了解了使用 jQuery 的 AJAX 基本概念。下面的表格列出了所有重要的 jQuery AJAX 方法，你可以根据编程需求选择使用 −

序号 方法与描述
1 jQuery.ajax( options )

使用 HTTP 请求加载远程页面。
2 jQuery.ajaxSetup( options )

为 AJAX 请求设置全局配置。
3 jQuery.get( url, [data], [callback], [type] )

使用 HTTP GET 请求加载远程页面。
4 jQuery.getJSON( url, [data], [callback] )

使用 HTTP GET 请求加载 JSON 数据。
5 jQuery.getScript( url, [callback] )

使用 HTTP GET 请求加载并执行 JavaScript 文件。
6 jQuery.post( url, [data], [callback], [type] )

使用 HTTP POST 请求加载远程页面。
7 load( url, [data], [callback] )

从远程文件加载 HTML 并注入到 DOM 中。
8 serialize( )

将一组输入元素序列化为数据字符串。
9 serializeArray( )

像 .serialize() 方法一样序列化所有表单和表单元素，但返回 JSON 数据结构供你使用。

jQuery AJAX 事件

你可以在 AJAX 调用进程的生命周期中调用各种 jQuery 方法。根据不同的イベント/阶段，以下方法可用 −

你可以查看所有 AJAX Events。

序号 方法与描述
1 ajaxComplete( callback )

为每次 AJAX 请求完成时执行的函数附加回调。
2 ajaxStart( callback )

为每次 AJAX 请求开始且当前没有活跃请求时执行的函数附加回调。
3 ajaxError( callback )

为每次 AJAX 请求失败时执行的函数附加回调。
4 ajaxSend( callback )

为 AJAX 请求发送前执行的函数附加回调。
5 ajaxStop( callback )

为所有 AJAX 请求结束时执行的函数附加回调。
6 ajaxSuccess( callback )

为每次 AJAX 请求成功完成时执行的函数附加回调。

jQuery - 效果

jQuery 提供了一个极其简单的接口来实现各种惊人的效果。jQuery 方法允许我们使用最少的配置快速应用常用效果。本教程涵盖了创建视觉效果的所有重要 jQuery 方法。

显示和隐藏元素

显示和隐藏元素的命令基本符合我们的预期——show() 用于显示 wrapped set 中的元素，hide() 用于隐藏它们。

语法

以下是 show() 方法的简单语法——

[selector].show( speed, [callback] );

以下是所有参数的描述——

  • speed − 一个字符串，表示三种预定义速度之一（"slow"、"normal" 或 "fast"）或运行动画的毫秒数（例如 1000）。

  • callback − 此可选参数表示一个函数，在动画完成时执行；针对每个被动画化的元素执行一次。

以下是 hide() 方法的简单语法——

[selector].hide( speed, [callback] );

以下是所有参数的描述——

  • speed − 一个字符串，表示三种预定义速度之一（"slow"、"normal" 或 "fast"）或运行动画的毫秒数（例如 1000）。

  • callback − 此可选参数表示一个函数，在动画完成时执行；针对每个被动画化的元素执行一次。

示例

考虑以下带有少量 jQuery 代码的 HTML 文件——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {

            $("#show").click(function () {
               $(".mydiv").show( 1000 );
            });

            $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
				
         });
      </script>
		
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:100px;
         }
      </style>
   </head>
	
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hide" type = "button" value = "Hide" />   
      <input id = "show" type = "button" value = "Show" />
   </body>
</html>

这将产生以下结果——

切换元素

jQuery 提供了方法来切换元素之间的显示状态，即从显示切换到隐藏，或者从隐藏切换到显示。如果元素最初是显示的，它将被隐藏；如果隐藏，它将被显示。

语法

以下是 toggle() 方法之一的简单语法 −

[selector]..toggle([speed][, callback]);

以下是所有参数的描述 −

  • speed − 一个字符串，表示三个预定义速度之一 ("slow"、"normal" 或 "fast")，或者动画运行的毫秒数（例如 1000）。

  • callback − 这个可选参数表示一个函数，当动画完成时执行；针对每个被动画化的元素执行一次。

示例

我们可以对任何元素进行动画，例如一个包含图像的简单 <div> −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.example.com">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){
               $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
		
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
	
   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery" />
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

这将产生以下结果 −

jQuery 效果方法

您已经了解了 jQuery 效果的基本概念。下面的表格列出了创建各种效果的所有重要方法 −

序号 方法 & 描述
1 animate( params, [duration, easing, callback] )

用于创建自定义动画的函数。
2 fadeIn( speed, [callback] )

通过调整不透明度淡入所有匹配元素，并在完成后触发可选的 callback。
3 fadeOut( speed, [callback] )

通过将不透明度调整为 0 来淡出所有匹配元素，然后将 display 设置为 "none"，并在完成后触发可选的 callback。
4 fadeTo( speed, opacity, callback )

将所有匹配元素的不透明度淡入到指定的 opacity，并在完成后触发可选的 callback。
5 hide( )

如果匹配元素集中的每个元素都可见，则隐藏它们。
6 hide( speed, [callback] )

使用优雅的动画隐藏所有匹配元素，并在完成后触发可选的 callback。
7 show( )

如果匹配元素集中的每个元素都隐藏，则显示它们。
8 show( speed, [callback] )

使用优雅的动画显示所有匹配元素，并在完成后触发可选的 callback。
9 slideDown( speed, [callback] )

通过调整高度显示所有匹配元素，并在完成后触发可选的 callback。
10 slideToggle( speed, [callback] )

通过调整高度切换所有匹配元素的可见性，并在完成后触发可选的 callback。
11 slideUp( speed, [callback] )

通过调整高度隐藏所有匹配元素，并在完成后触发可选的 callback。
12 stop( [clearQueue, gotoEnd ])

停止所有指定元素上当前运行的所有动画。
13 toggle( )

切换匹配元素集中的每个元素的显示。
14 toggle( speed, [callback] )

使用优雅的动画切换匹配元素集中的每个元素的显示，并在完成后触发可选的 callback。
15 toggle( switch )

根据 switch（true 显示所有元素，false 隐藏所有元素）切换匹配元素集中的每个元素的显示。
16 jQuery.fx.off

全局禁用所有动画。

基于 UI Library 的效果

要使用这些效果，您可以从 jQuery UI Library 下载最新的 jquery-ui-1.11.4.custom.zip，或者使用 Google CDN 以与 jQuery 相同的方式使用它。

我们在 HTML 页面中使用以下代码片段通过 Google CDN 引入了 jQuery UI，这样我们就可以使用 jQuery UI −

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>
序号 方法 & 描述
1 Blind

将元素 blinds 隐藏或通过 blinding 显示它。
2 Bounce

让元素垂直或水平方向弹跳 n 次。
3 Clip

垂直或水平方向剪切元素显示或隐藏。
4 Drop

将元素 drop 隐藏或通过 dropping 显示它。
5 Explode

将元素爆炸成多个碎片。
6 Fold

像折纸一样折叠元素。
7 Highlight

用指定的颜色高亮背景。
8 Puff

缩放和淡出动画创建 puff 效果。
9 Pulsate

让元素的 opacity 脉动多次。
10 Scale

按百分比因子缩小或放大元素。
11 Shake

让元素垂直或水平方向抖动 n 次。
12 Size

将元素调整到指定的宽度和高度。
13 Slide

将元素从视口中滑出。
14 Transfer

将一个元素的轮廓转移到另一个元素上。

jQuery - Interactions

Interactions 可以为任何元素添加基本的基于鼠标的行为。使用 Interactions，我们可以创建可排序列表、可调整大小的元素、拖放行为。Interactions 也是构建更复杂 widgets 和 applications 的绝佳基础模块。

序号 Interactions & 描述
1 Draggable

为任何 DOM 元素启用 draggable 功能。
2 Droppable

使任何 DOM 元素可被 drop。
3 Resizable

使任何 DOM 元素可调整大小。
4 Selectable

使 DOM 元素（或元素组）可选择。
5 Sortable

使一组 DOM 元素可排序。

jQuery - Widgets

jQuery UI widget 是一种特殊的 jQuery plug-in。使用 plug-in，我们可以为元素应用行为。然而，plug-ins 缺少一些内置功能，例如将数据与元素关联、暴露方法、合并选项与默认值、控制 plug-in 生命周期等。

序号 Widgets & 描述
1 Accordion

启用折叠被分成逻辑部分的内容。
2 Autocomplete

在输入字段中键入时提供建议。
3 Button

Button 是 submit 类型的 input 和 anchor。
4 Datepicker

在小型覆盖层中打开交互式日历。
5 Dialog

Dialog 框是在 HTML 页面上呈现信息的一种很好的方式。
6 Menu

Menu 显示项目列表。
7 Progressbar

显示进度信息。
8 Select menu

启用可样式化的 select 元素/元素组。
9 Slider

基本 slider 是水平的，具有单个可通过鼠标或箭头键移动的 handle。
10 Spinner

提供从一组值中快速选择一个值的方式。
11 Tabs

用于在被分成逻辑部分的内容之间切换。
12 Tooltip

为用户提供提示。

jQuery - Theming

jQuery 有两种不同的样式主题 A 和 B。每种主题都有按钮、栏、内容块等的不同颜色。

jQuery theming 的语法如下所示 −

<div data-role = "page" data-theme = "a|b">

A 主题的简单示例如下所示 −

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
			
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script 
         src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
      </script>
   </head>
	
   <body>
      <div data-role = "page" id = "pageone" data-theme = "a">
        <div data-role = "header">
            <h1></h1>
         </div>

         <div data-role = "main" class = "ui-content">
			
            <p>Text link</p>
            <a href = "#">A Standard Text Link</a>
            <a href = "#" class = "ui-btn">Link Button</a>
            <p>A List View:</p>
				
            <ul data-role = "listview" data-autodividers = "true" data-inset = "true">
               <li><a href = "#">Android </a></li>
               <li><a href = "#">IOS</a></li>
            </ul>
				
            <label for = "fullname">Input Field:</label>
            <input type = "text" name = "fullname" id = "fullname" 
               placeholder = "Name..">    
            <label for = "switch">Toggle Switch:</label>
				
            <select name = "switch" id = "switch" data-role = "slider">
               <option value = "on">On</option>
               <option value = "off" selected>Off</option>
            </select>
				
         </div>

         <div data-role = "footer">
            <h1></h1>
         </div>
      </div>
   </body>
</html>

这应该产生以下结果 −

B 主题的简单示例如下所示 −

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script 
         src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
      </script>
   </head>
	
   <body>
      <div data-role = "page" id = "pageone" data-theme = "b">
        <div data-role = "header">
            <h1></h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>Text link</p>
            <a href = "#">A Standard Text Link</a>
            <a href = "#" class = "ui-btn">Link Button</a>
            <p>A List View:</p>
				
            <ul data-role = "listview" data-autodividers = "true" data-inset = "true">
               <li><a href = "#">Android </a></li>
               <li><a href = "#">IOS</a></li>
            </ul>
				
            <label for = "fullname">Input Field:</label>
            <input type = "text" name = "fullname" id = "fullname" 
               placeholder = "Name..">    
            <label for = "switch">Toggle Switch:</label>
				
            <select name = "switch" id = "switch" data-role = "slider">
               <option value = "on">On</option>
               <option value = "off" selected>Off</option>
            </select>
				
         </div>

         <div data-role = "footer">
            <h1></h1>
         </div>
      </div>
   </body>
</html>

这应该产生以下结果 −

jQuery - Utilities

jQuery 提供了几种以 $(namespace) 格式的 utility 方法。这些方法有助于完成编程任务。以下显示了一些 utility 方法。

$.trim()

$.trim() 用于移除字符串首尾的空白字符

$.trim( "    lots of extra whitespace    " );

$.each()

$.each() 用于遍历数组和对象

$.each([ "foo", "bar", "baz" ], function( idx, val ) {
   console.log( "element " + idx + " is " + val );
});
 
$.each({ foo: "bar", baz: "bim" }, function( k, v ) {
   console.log( k + " : " + v );
});

.each() 可以对选择器调用，用于遍历选择器中包含的元素。对于选择器中的元素遍历，应使用 .each() 而非 $.each()。

$.inArray()

$.inArray() 用于返回数组中指定值的索引，如果值不在数组中则返回 -1。

var myArray = [ 1, 2, 3, 5 ];
 
if ( $.inArray( 4, myArray ) !== -1 ) {
   console.log( "found it!" );
}

$.extend()

$.extend() 用于使用后续对象的属性来更改第一个对象的属性。

var firstObject = { foo: "bar", a: "b" };
var secondObject = { foo: "baz" };
 
var newObject = $.extend( firstObject, secondObject );
 
console.log( firstObject.foo ); 
console.log( newObject.foo );

$.proxy()

$.proxy() 用于返回一个始终在指定作用域中运行的函数——即，将传入函数内部的 this 设置为第二个参数

var myFunction = function() {
   console.log( this );
};

var myObject = {
   foo: "bar"
};
 
myFunction(); // window
 
var myProxyFunction = $.proxy( myFunction, myObject );
 
myProxyFunction();

$.browser

$.browser 用于提供浏览器信息

jQuery.each( jQuery.browser, function( i, val ) {
   $( "<div>" + i + " : <span>" + val + "</span>" )
   .appendTo( document.body );
});

$.contains()

$.contains() 用于检查第二个参数提供的 DOM 元素是否是第一个参数提供的 DOM 元素的后代（无论是直接子元素还是更深层嵌套）。

$.contains( document.documentElement, document.body );
$.contains( document.body, document.documentElement );

$.data()

$.data() 用于提供数据信息

<html lang = "en">
   <head>
      <title>jQuery.data demo</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      <div>
         The values stored were <span></span>
            and <span></span>
      </div>
 
      <script>
         var div = $( "div" )[ 0 ];
			
         jQuery.data( div, "test", {
            first: 25,
            last: "tutorials"
         });
			
         $( "span:first" ).text( jQuery.data( div, "test" ).first );
         $( "span:last" ).text( jQuery.data( div, "test" ).last );
      </script>
   </body>
</html>

输出结果如下

The values stored were 25 and tutorials

$.fn.extend()

$.fn.extend() 用于扩展 jQuery 原型

<html lang = "en">
   <head>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      <label><input type = "checkbox" name = "android"> 
         Android</label>
      <label><input type = "checkbox" name = "ios"> IOS</label>
 
      <script>
         jQuery.fn.extend({
			
            check: function() {
               return this.each(function() {
                  this.checked = true;
               });
            },
            uncheck: function() {
               return this.each(function() {
                  this.checked = false;
               });
            }
         });
 
         // Use the newly created .check() method
         $( "input[type = 'checkbox']" ).check();
			
      </script>
   </body>
</html>

输出结果如下所示 −

$.isWindow()

$.isWindow() 用于识别 window 对象

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.isWindow demo</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      Is 'window' a window? <b></b>
 
      <script>
         $( "b" ).append( "" + $.isWindow( window ) );
      </script>
   </body>
</html>

输出结果如下所示 −

$.now()

它返回一个数字，表示当前时间

(new Date).getTime()

$.isXMLDoc()

$.isXMLDoc() 用于检查一个文件是否为 XML 文件

jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )

$.globalEval()

$.globalEval() 用于在全局作用域执行 JavaScript 代码

function test() {
   jQuery.globalEval( "var newVar = true;" )
}
test();

$.dequeue()

$.dequeue() 用于执行队列中的下一个函数

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.dequeue demo</title>
		
      <style>
         div {
            margin: 3px;
            width: 50px;
            position: absolute;
            height: 50px;
            left: 10px;
            top: 30px;
            background-color: green;
            border-radius: 50px;
         }
         div.red {
            background-color: blue;
         }
      </style>
		
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
   </head>

   <body>
      <button>Start</button>
      <div></div>
 
      <script>
         $( "button" ).click(function() {
            $( "div" )
            .animate({ left: '+ = 400px' }, 2000 )
            .animate({ top: '0px' }, 600 )
				
            .queue(function() {
               $( this ).toggleClass( "red" );
               $.dequeue( this );
            })
				
            .animate({ left:'10px', top:'30px' }, 700 );
         });
      </script>
   </body>
</html>

输出结果如下所示 −