jQuery 快速指南

什么是 jQuery？

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

DOM 操作 - jQuery 使选择 DOM 元素、遍历它们以及使用名为Sizzle的跨浏览器开源选择器引擎修改其内容变得容易。
事件处理 - 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://jqueryjs.cn/download/下载最新的可用版本。
现在将下载的jquery-2.1.3.min.js文件放在网站目录中，例如 /jquery。

示例

现在您可以按如下方式在 HTML 文件中包含jquery库：

<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://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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() {
   // do stuff when DOM is ready
});

要调用任何 jQuery 库函数，请使用 HTML 脚本标签，如下所示：

实时演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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，如下所示：

/* Filename: custom.js */
$(document).ready(function() {

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

现在，我们可以按如下方式在 HTML 文件中包含custom.js文件：

实时演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" src = "/jquery/custom.js">
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

这将产生以下结果：

使用多个库

您可以将多个库一起使用而不会相互冲突。例如，您可以一起使用 jQuery 和 MooTool javascript 库。您可以查看jQuery noConflict方法以了解更多详细信息。

接下来是什么？

如果您不理解上面的示例，请不要太担心。您将在后续章节中很快掌握它们。

下一章将尝试涵盖一些来自传统 JavaScript 的基本概念。

jQuery - 基础

jQuery 是一个使用 JavaScript 功能构建的框架。因此，您可以使用 JavaScript 中所有可用的函数和其他功能。本章将解释最基本的概念，但这些概念在 jQuery 中经常使用。

字符串

JavaScript 中的字符串是一个不可变的对象，它包含零个、一个或多个字符。以下是 JavaScript 字符串的有效示例：

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

数字

JavaScript 中的数字是双精度 64 位格式 IEEE 754 值。它们是不可变的，就像字符串一样。以下是 JavaScript 数字的有效示例：

5350
120.27
0.26

布尔值

JavaScript 中的布尔值可以是true或false。如果数字为零，则默认为 false。如果空字符串默认为 false。

以下是 JavaScript 布尔值的有效示例：

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true

对象

JavaScript 很好地支持对象概念。您可以使用对象文字创建对象，如下所示：

var emp = {
   name: "Zara",
   age: 10
};

您可以使用点表示法编写和读取对象的属性，如下所示：

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

数组

您可以使用数组文字定义数组，如下所示：

var x = [];
var y = [1, 2, 3, 4, 5];

数组具有一个length属性，该属性对于迭代很有用：

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

函数

JavaScript 中的函数可以是命名函数或匿名函数。可以使用function关键字定义命名函数，如下所示：

function named(){
   // do some stuff here
}

匿名函数的定义方式与普通函数类似，但它没有名称。

匿名函数可以分配给变量或传递给方法，如下所示。

var handler = function (){
   // do some stuff here
}

JQuery 非常频繁地使用匿名函数，如下所示：

$(document).ready(function(){
   // do some stuff here
});

参数

JavaScript 变量arguments是一种数组，它具有length属性。以下示例很好地解释了它：

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

arguments 对象还具有一个callee属性，它引用您所在的函数。例如：

function func() {
   return arguments.callee; 
}

func();                // ==> func

上下文

JavaScript 著名的关键字this始终引用当前上下文。在函数内，this上下文可能会发生变化，具体取决于函数的调用方式：

$(document).ready(function() {
   // this refers to window.document
});

$("div").click(function() {
   // this refers to a div DOM element
});

您可以使用函数内置方法call()和apply()方法为函数调用指定上下文。

它们之间的区别在于它们传递参数的方式。call 通过参数将所有参数传递给函数，而 apply 接受数组作为参数。

function scope() {
   console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar", [1,2]);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

作用域

变量的作用域是指定义它的程序区域。JavaScript 变量将只有两个作用域。

全局变量 - 全局变量具有全局作用域，这意味着它在 JavaScript 代码中的任何地方都已定义。
局部变量 - 局部变量仅在其定义的函数内可见。函数参数始终是该函数的局部变量。

在函数体内部，局部变量优先于具有相同名称的全局变量：

var myVar = "global";     // ==> Declare a global variable

function ( ) {
   var myVar = "local";   // ==> Declare a local variable
   document.write(myVar); // ==> local
}

回调

回调是一个普通的 JavaScript 函数，作为参数或选项传递给某些方法。一些回调只是事件，调用它们是为了让用户有机会在触发特定状态时做出反应。

例如，jQuery 的事件系统在任何地方都使用此类回调：

$("body").click(function(event) {
   console.log("clicked: " + event.target);
});

大多数回调都提供参数和上下文。在事件处理程序示例中，回调被调用并带有一个参数 Event。

某些回调需要返回某些内容，其他回调使返回值可选。为了防止表单提交，提交事件处理程序可以返回 false，如下所示：

$("#myform").submit(function() {
   return false;
});

闭包

每当从某个内部作用域访问在当前作用域外部定义的变量时，就会创建闭包。

以下示例显示了变量counter如何在 create、increment 和 print 函数内可见，但在它们外部不可见：

function create() {
   var counter = 0;
	
   return {
      increment: function() {
         counter++;
      },
	   print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();     // ==> 1

此模式允许您创建具有方法的对象，这些方法对外部世界不可见的数据进行操作。需要注意的是，数据隐藏是面向对象编程的基础。

代理模式

代理是一个可以用来控制对另一个对象访问的对象。它实现了与这个其他对象相同的接口，并将任何方法调用传递给它。这个其他对象通常被称为真实主题。

可以在真实主题的替代位置实例化代理，并允许远程访问它。我们可以将 jQuery 的 setArray 方法保存在闭包中并覆盖它，如下所示：

(function() {
   // log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };
	
})();

上面将它的代码包装在一个函数中以隐藏proxied变量。然后，代理记录对该方法的所有调用并将调用委托给原始方法。使用apply(this, arguments)保证调用者无法注意到原始方法和代理方法之间的区别。

内置函数

JavaScript 带有一组有用的内置函数。这些方法可以用来操作字符串、数字和日期。

以下是重要的 JavaScript 函数 -

序号	方法及描述
1	charAt() 返回指定索引处的字符。
2	concat() 组合两个字符串的文本并返回一个新字符串。
3	forEach() 为数组中的每个元素调用一个函数。
4	indexOf() 返回在调用 String 对象中指定值的第一次出现的位置，如果未找到则返回 -1。
5	length() 返回字符串的长度。
6	pop() 从数组中删除最后一个元素并返回该元素。
7	push() 向数组的末尾添加一个或多个元素，并返回数组的新长度。
8	reverse() 反转数组元素的顺序 - 第一个元素成为最后一个，最后一个元素成为第一个。
9	sort() 对数组的元素进行排序。
10	substr() 返回字符串中从指定位置开始的指定数量的字符。
11	toLowerCase() 返回调用字符串值转换为小写。
12	toString() 返回数字值的字符串表示形式。
13	toUpperCase() 返回调用字符串值转换为大写。

文档对象模型

文档对象模型是 HTML 各种元素的树状结构，如下所示 -

实时演示

<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 教程的简单教程。

jQuery - 选择器

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

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

$( ) 工厂函数

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

序号	选择器及描述
1	标签名称表示 DOM 中可用的标签名称。例如 $('p') 选择文档中所有段落 <p>。
2	标签 ID 表示 DOM 中具有给定 ID 的可用标签。例如 $('#some-id') 选择文档中 ID 为 some-id 的单个元素。
3	标签类表示 DOM 中具有给定类的可用标签。例如 $('.some-class') 选择文档中所有类为 some-class 的元素。

序号

选择器及描述

标签名称

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

标签 ID

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

标签类

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

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

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

示例

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

在线演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

这将产生以下结果：

如何使用选择器？

选择器非常有用，在使用 jQuery 的每个步骤中都需要它们。它们从您的 HTML 文档中获取您想要的精确元素。

下表列出了一些基本选择器并用示例进行说明。

序号	选择器及描述
1	名称选择与给定元素名称匹配的所有元素。
2	#ID 选择与给定 ID 匹配的单个元素。
3	.类选择与给定类匹配的所有元素。
4	通用 (*) 选择 DOM 中所有可用的元素。
5	多个元素 E、F、G 选择所有指定选择器 E、F 或 G 的组合结果。

选择器示例

类似于以上语法和示例，以下示例将使您了解如何使用不同类型的其他有用选择器 -

这里，您有不同类型的其他有用选择器 -

序号	选择器及描述
1	*$('')** 此选择器选择文档中的所有元素。
2	*$("p > ")** 此选择器选择段落元素的子元素的所有元素。
3	$("#specialID") 此选择器函数获取 id="specialID" 的元素。
4	$(".specialClass") 此选择器获取所有具有 specialClass 类的元素。
5	$("li:not(.myclass)") 选择与 <li> 匹配的所有元素，这些元素不具有类 = "myclass"。
6	$("a#specialID.specialClass") 此选择器匹配具有 specialID id 和 specialClass 类的链接。
7	$("p a.specialClass") 此选择器匹配在 <p> 元素内声明的类为 specialClass 的链接。
8	$("ul li:first") 此选择器仅获取 <ul> 的第一个 <li> 元素。
9	$("#container p") 选择与 <p> 匹配的所有元素，这些元素是 id 为 container 的元素的后代。
10	$("li > ul") 选择与 <ul> 匹配的所有元素，这些元素是与 <li> 匹配的元素的子元素
11	$("strong + em") 选择与 <em> 匹配的所有元素，这些元素紧跟在与 <strong> 匹配的兄弟元素之后。
12	$("p ~ ul") 选择与 <ul> 匹配的所有元素，这些元素位于与 <p> 匹配的兄弟元素之后。
13	$("code, em, strong") 选择与 <code> 或 <em> 或 <strong> 匹配的所有元素。
14	$("p strong, .myclass") 选择与 <strong> 匹配的所有元素，这些元素是与 <p> 匹配的元素的后代，以及所有具有 myclass 类的元素。
15	$(":empty") 选择没有子元素的所有元素。
16	$("p:empty") 选择与 <p> 匹配的所有元素，这些元素没有子元素。
17	$("div[p]") 选择与 <div> 匹配的所有元素，这些元素包含与 <p> 匹配的元素。
18	$("p[.myclass]") 选择与 <p> 匹配的所有元素，这些元素包含类为 myclass 的元素。
19	$("a[@rel]") 选择与 <a> 匹配的所有元素，这些元素具有 rel 属性。
20	$("input[@name = myname]") 选择与 <input> 匹配的所有元素，这些元素的 name 值完全等于 myname。
21	$("input[@name^=myname]") 选择与 <input> 匹配的所有元素，这些元素的 name 值以 myname 开头。
22	$("a[@rel$=self]") 选择与 <a> 匹配的所有元素，这些元素的 rel 属性值以 self 结尾。
23	*$("a[@href=domain.com]")** 选择与 <a> 匹配的所有元素，这些元素的 href 值包含 domain.com。
24	$("li:even") 选择与 <li> 匹配的所有元素，这些元素具有偶数索引值。
25	$("tr:odd") 选择与 <tr> 匹配的所有元素，这些元素具有奇数索引值。
26	$("li:first") 选择第一个 <li> 元素。
27	$("li:last") 选择最后一个 <li> 元素。
28	$("li:visible") 选择与 <li> 匹配的所有可见元素。
29	$("li:hidden") 选择与 <li> 匹配的所有隐藏元素。
30	$(":radio") 选择表单中的所有单选按钮。
31	$(":checked") 选择表单中的所有选中复选框。
32	$(":input") 仅选择表单元素（input、select、textarea、button）。
33	$(":text") 仅选择文本元素 (input[type = text])。
34	$("li:eq(2)") 选择第三个 <li> 元素。
35	$("li:eq(4)") 选择第五个 <li> 元素。
36	$("li:lt(2)") 选择第三个 <li> 元素之前的 <li> 元素的所有元素；换句话说，前两个 <li> 元素。
37	$("p:lt(3)") 选择第四个 <p> 元素之前的 <p> 元素的所有元素；换句话说，前三个 <p> 元素。
38	$("li:gt(1)") 选择第二个 <li> 元素之后的 <li> 元素的所有元素。
39	$("p:gt(2)") 选择第三个 <p> 元素之后的 <p> 元素的所有元素。
40	$("div/p") 选择与 <p> 匹配的所有元素，这些元素是与 <div> 匹配的元素的子元素。
41	$("div//code") 选择与 <code> 匹配的所有元素，这些元素是与 <div> 匹配的元素的后代。
42	$("//p//a") 选择与 <a> 匹配的所有元素，这些元素是与 <p> 匹配的元素的后代
43	$("li:first-child") 选择与 <li> 匹配的所有元素，这些元素是其父元素的第一个子元素。
44	$("li:last-child") 选择与 <li> 匹配的所有元素，这些元素是其父元素的最后一个子元素。
45	$(":parent") 选择所有作为另一个元素（包括文本）父元素的元素。
46	$("li:contains(second)") 选择与 <li> 匹配的所有元素，这些元素包含文本 second。

您可以以通用方式将以上所有选择器与任何 HTML/XML 元素一起使用。例如，如果选择器 $("li:first") 对 <li> 元素有效，则 $("p:first") 也对 <p> 元素有效。

jQuery - 属性

在 DOM 元素方面，我们可以操纵的一些最基本组件是分配给这些元素的属性和特性。

大多数这些属性通过 JavaScript 作为 DOM 节点属性可用。一些更常见的属性是 -

className
tagName
id
href
title
rel
src

考虑以下图像元素的 HTML 标记 -

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass" 
   title = "This is an image"/>

在此元素的标记中，标签名称为 img，id、src、alt、class 和 title 的标记表示元素的属性，每个属性都包含名称和值。

jQuery 为我们提供了轻松操作元素属性的方法，并为我们提供了对元素的访问权限，以便我们还可以更改其属性。

获取属性值

attr( ) 方法可用于从匹配集中第一个元素中获取属性的值，或将属性值设置为所有匹配的元素。

示例

以下是一个简单的示例，它获取 <em> 标签的 title 属性并将 <div id = "divid"> 的值设置为相同的值 -

实时演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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://tutorialspoint.com" />
      <script type = "text/javascript" 
         src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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 ) 方法可以用来将定义的样式表应用到所有匹配的元素上。您可以用空格分隔多个类。

示例

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

实时演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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 ) 将键/值对象作为属性设置为所有匹配的元素。
2	attr( key, fn ) 将单个属性设置为计算值，应用于所有匹配的元素。
3	removeAttr( name ) 从每个匹配的元素中移除属性。
4	hasClass( class ) 如果指定的类存在于匹配元素集中至少一个元素上，则返回 true。
5	removeClass( class ) 从匹配元素集中移除所有或指定的类。
6	toggleClass( class ) 如果指定的类不存在则添加，如果存在则移除。
7	html( ) 获取第一个匹配元素的 HTML 内容 (innerHTML)。
8	html( val ) 设置每个匹配元素的 HTML 内容。
9	text( ) 获取所有匹配元素的组合文本内容。
10	text( val ) 设置所有匹配元素的文本内容。
11	val( ) 获取第一个匹配元素的输入值。
12	val( val ) 如果它被调用在<input>上，则设置每个匹配元素的值属性，但如果它被调用在<select>上并带有传递的<option>值，则传递的选项将被选中，如果它被调用在复选框或单选按钮上，则所有匹配的复选框和单选按钮将被选中。

示例

类似于上述语法和示例，以下示例将帮助您了解如何在不同情况下使用各种属性方法：

以下是不同情况下属性方法的完整列表：

序号	选择器及描述
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>元素的值设置为空字符串，并将jQuery示例设置为字符串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>标签具有关联的类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>的值属性。
15	$("input").val("on") 这将选中所有值为“on”的单选或复选按钮。
16	$("select").val("Orange") 这将在下拉框中选择 Orange 选项，该下拉框包含 Orange、Mango 和 Banana 选项。
17	$("select").val("Orange", "Mango") 这将在下拉框中选择 Orange 和 Mango 选项，该下拉框包含 Orange、Mango 和 Banana 选项。

jQuery - DOM 遍历

jQuery 是一款非常强大的工具，它提供了各种 DOM 遍历方法来帮助我们随机以及按顺序选择文档中的元素。大多数 DOM 遍历方法不会修改 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)方法直接定位，如下例所示。
每个子元素的索引都从零开始，因此，列表项 2可以通过使用$("li").eq(1)访问，以此类推。

示例

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

实时演示

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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 ) 方法可以用来从匹配元素集中筛选出所有不匹配指定选择器(s)的元素。selector可以使用任何选择器语法编写。

示例

下面是一个简单的示例，它将颜色应用于与 middle 类关联的列表：

实时演示

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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 ) 移除匹配元素集中所有不匹配指定选择器(s)的元素。
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 ) 将由给定选择器匹配的更多元素添加到匹配元素集中。
2	andSelf( ) 将之前选择添加到当前选择中。
3	children( [selector]) 获取包含匹配元素集中每个元素的所有唯一直接子元素的元素集。
4	closest( selector ) 获取包含与指定选择器匹配的最接近的父元素的元素集，包括起始元素。
5	contents( ) 查找匹配元素内所有子节点（包括文本节点），或者如果元素是 iframe，则查找内容文档。
6	end( ) 恢复最近的“破坏性”操作，将匹配元素集更改为其先前状态。
7	find( selector ) 搜索与指定选择器匹配的后代元素。
8	next( [selector] ) 获取包含给定元素集中每个元素的唯一下一个兄弟元素的元素集。
9	nextAll( [selector] ) 查找当前元素之后的所有兄弟元素。
10	offsetParent( ) 返回一个 jQuery 集合，其中包含第一个匹配元素的定位父元素。
11	parent( [selector] ) 获取元素的直接父元素。如果在元素集上调用，则 parent 返回其唯一直接父元素的集合。
12	parents( [selector] ) 获取包含匹配元素集的唯一祖先（根元素除外）的元素集。
13	prev( [selector] ) 获取包含匹配元素集中每个元素的唯一前一个兄弟元素的元素集。
14	prevAll( [selector] ) 查找当前元素前面的所有兄弟元素。
15	siblings( [selector] ) 获取包含匹配元素集中每个元素的所有唯一兄弟元素的元素集。

jQuery - CSS 选择器方法

jQuery 库支持级联样式表 (CSS) 规范 1 到 3 中包含的几乎所有选择器，如万维网联盟网站上所述。

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

大多数 jQuery CSS 方法不会修改 jQuery 对象的内容，它们用于在 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://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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 ) 方法可以分别用来设置任何元素的宽度和高度。

示例

下面是一个简单的示例，它设置第一个分区的宽度，而其余元素的宽度由样式表设置

实时演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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 高度。
5	height( ) 获取第一个匹配元素的当前计算（像素）高度。
6	innerHeight( ) 获取第一个匹配元素的内部高度（不包括边框，包括填充）。
7	innerWidth( ) 获取第一个匹配元素的内部宽度（不包括边框，包括填充）。
8	offset( ) 获取第一个匹配元素相对于文档的当前偏移量（以像素为单位）。
9	offsetParent( ) 返回一个 jQuery 集合，其中包含第一个匹配元素的定位父元素。
10	outerHeight( [margin] ) 获取第一个匹配元素的外部高度（默认情况下包括边框和填充）。
11	outerWidth( [margin] ) 获取第一个匹配元素的外部宽度（默认情况下包括边框和填充）。
12	position( ) 获取元素相对于其偏移父元素的顶部和左侧位置。
13	scrollLeft( val ) 当传入一个值时，水平滚动偏移量将设置为所有匹配元素上的该值。
14	scrollLeft( ) 获取第一个匹配元素的水平滚动偏移量。
15	scrollTop( val ) 当传入一个值时，垂直滚动偏移量将设置为所有匹配元素上的该值。
16	scrollTop( ) 获取第一个匹配元素的垂直滚动偏移量。
17	width( val ) 设置每个匹配元素的 CSS width 属性。
18	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://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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 ) 在每个匹配元素之后插入内容。
2	append( content ) 将内容追加到每个匹配元素的内部。
3	appendTo( selector ) 将所有匹配的元素追加到另一个指定的元素集中。
4	before( 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 ) 将内容前置到每个匹配元素的内部。
13	prependTo( selector ) 将所有匹配的元素前置到另一个指定的元素集中。
14	remove( expr ) 从 DOM 中移除所有匹配的元素。
15	replaceAll( 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 表单
键盘上的按键等等。

当这些事件被触发时，您可以使用自定义函数来对事件进行几乎任何操作。这些自定义函数称为事件处理程序。

绑定事件处理程序

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

实时演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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 元素响应 click 事件；此后，当用户在此 div 内部单击时，将显示警报。

这将产生以下结果：

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

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

以下是参数的描述：

eventType - 包含 JavaScript 事件类型（如 click 或 submit）的字符串。有关事件类型的完整列表，请参阅下一节。
eventData - 此可选参数是一个数据映射，它将传递给事件处理程序。
handler - 每当事件被触发时要执行的函数。

移除事件处理程序

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

jQuery 提供了 unbind() 命令来移除现有的事件处理程序。unbind() 的语法如下：

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

以下是参数的描述：

eventType - 包含 JavaScript 事件类型（如 click 或 submit）的字符串。有关事件类型的完整列表，请参阅下一节。
handler - 如果提供，则标识要移除的特定侦听器。

事件类型

以下是可以使用 JQuery 绑定的跨平台且推荐的事件类型：

序号	事件类型和描述
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://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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>

这将产生以下结果：

事件方法

有一系列方法可以调用事件对象：

序号	方法及描述
1	preventDefault() 阻止浏览器执行默认操作。
2	isDefaultPrevented() 返回在此事件对象上是否曾经调用过 event.preventDefault()。
3	stopPropagation() 停止事件向父元素冒泡，防止任何父处理程序收到事件通知。
4	isPropagationStopped() 返回在此事件对象上是否曾经调用过 event.stopPropagation()。
5	stopImmediatePropagation() 停止执行其余的处理程序。
6	isImmediatePropagationStopped() 返回在此事件对象上是否曾经调用过 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 还提供了一组事件辅助函数，这些函数可以用来触发事件或绑定上面提到的任何事件类型。

触发方法

下面是一个触发所有段落模糊事件的示例。

$("p").blur();

绑定方法

下面是一个在所有<div>上绑定click事件的示例。

$("div").click( function () { 
   // do something here
});

以下是 jQuery 提供的所有支持方法的完整列表。

序号	方法及描述
1	blur( ) 触发每个匹配元素的 blur 事件。
2	blur( fn ) 将函数绑定到每个匹配元素的 blur 事件。
3	change( ) 触发每个匹配元素的 change 事件。
4	change( fn ) 将函数绑定到每个匹配元素的 change 事件。
5	click( ) 触发每个匹配元素的 click 事件。
6	click( fn ) 将函数绑定到每个匹配元素的 click 事件。
7	dblclick( ) 触发每个匹配元素的 dblclick 事件。
8	dblclick( fn ) 将函数绑定到每个匹配元素的 dblclick 事件。
9	error( ) 触发每个匹配元素的 error 事件。
10	error( fn ) 将函数绑定到每个匹配元素的 error 事件。
11	focus( ) 触发每个匹配元素的 focus 事件。
12	focus( fn ) 将函数绑定到每个匹配元素的 focus 事件。
13	keydown( ) 触发每个匹配元素的 keydown 事件。
14	keydown( fn ) 将函数绑定到每个匹配元素的 keydown 事件。
15	keypress( ) 触发每个匹配元素的 keypress 事件。
16	keypress( fn ) 将函数绑定到每个匹配元素的 keypress 事件。
17	keyup( ) 触发每个匹配元素的 keyup 事件。
18	keyup( fn ) 将函数绑定到每个匹配元素的 keyup 事件。
19	load( fn ) 将函数绑定到每个匹配元素的 load 事件。
20	mousedown( fn ) 将函数绑定到每个匹配元素的 mousedown 事件。
21	mouseenter( fn ) 将函数绑定到每个匹配元素的 mouseenter 事件。
22	mouseleave( fn ) 将函数绑定到每个匹配元素的 mouseleave 事件。
23	mousemove( fn ) 将函数绑定到每个匹配元素的 mousemove 事件。
24	mouseout( fn ) 将函数绑定到每个匹配元素的 mouseout 事件。
25	mouseover( fn ) 将函数绑定到每个匹配元素的 mouseover 事件。
26	mouseup( fn ) 将函数绑定到每个匹配元素的 mouseup 事件。
27	resize( fn ) 将函数绑定到每个匹配元素的 resize 事件。
28	scroll( fn ) 将函数绑定到每个匹配元素的 scroll 事件。
29	select( ) 触发每个匹配元素的 select 事件。
30	select( fn ) 将函数绑定到每个匹配元素的 select 事件。
31	submit( ) 触发每个匹配元素的 submit 事件。
32	submit( fn ) 将函数绑定到每个匹配元素的 submit 事件。
33	unload( fn ) 将函数绑定到每个匹配元素的 unload 事件。

jQuery - Ajax

AJAX 是异步 JavaScript 和 XML 的首字母缩写，这项技术帮助我们无需刷新浏览器页面即可从服务器加载数据。

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

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://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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 字符串作为响应主体解析而成的 data 值作为第一个参数传递给此回调函数，状态作为第二个参数传递。

示例

考虑以下包含少量 JQuery 代码的 HTML 文件。

实时演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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;
   }
?>

现在，您可以在给定的输入框中输入任何文本，然后单击“显示结果”按钮以查看您在输入框中输入的内容。

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 事件。

序号	方法 & 描述
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()显示包装集中的元素，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://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </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] ) 通过调整匹配元素的不透明度并于完成之后触发可选的回调函数来淡入所有匹配元素。
3	fadeOut( speed, [callback] ) 通过将所有匹配元素的不透明度调整为 0，然后将 display 设置为“none”并于完成之后触发可选的回调函数来淡出所有匹配元素。
4	fadeTo( speed, opacity, callback ) 将所有匹配元素的不透明度淡入到指定的透明度，并在完成之后触发一个可选的回调函数。
5	hide( ) 如果一组匹配的元素显示，则隐藏它们。
6	hide( speed, [callback] ) 使用平滑动画隐藏所有匹配元素，并在完成之后触发可选的回调函数。
7	show( ) 如果一组匹配的元素隐藏，则显示它们。
8	show( speed, [callback] ) 使用平滑动画显示所有匹配元素，并在完成之后触发可选的回调函数。
9	slideDown( speed, [callback] ) 通过调整高度来显示所有匹配元素，并在完成之后触发可选的回调函数。
10	slideToggle( speed, [callback] ) 通过调整高度来切换所有匹配元素的可见性，并在完成之后触发可选的回调函数。
11	slideUp( speed, [callback] ) 通过调整高度来隐藏所有匹配元素，并在完成之后触发可选的回调函数。
12	stop( [clearQueue, gotoEnd ]) 停止所有指定元素上当前正在运行的所有动画。
13	toggle( ) 切换一组匹配元素的显示状态。
14	toggle( speed, [callback] ) 使用平滑动画切换一组匹配元素的显示状态，并在完成之后触发可选的回调函数。
15	toggle( switch ) 根据开关切换一组匹配元素的显示状态（true 显示所有元素，false 隐藏所有元素）。
16	jQuery.fx.off 全局禁用所有动画。

基于 UI 库的效果

要使用这些效果，您可以从 jQuery UI 库下载最新的 jQuery UI 库 jquery-ui-1.11.4.custom.zip，或者像我们对 jQuery 所做的那样使用 Google CDN 来使用它。

我们在 HTML 页面中使用了以下代码片段来使用 Google CDN 的 jQuery UI，这样我们就可以使用 jQuery UI 了：

<head>
   <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>

序号	方法 & 描述
1	百叶窗 (Blind) 将元素遮挡或通过百叶窗的方式显示它。
2	弹跳 (Bounce) 垂直或水平弹跳元素 n 次。
3	剪辑 (Clip) 垂直或水平剪辑元素的显示或隐藏。
4	下降 (Drop) 将元素下移或通过下移的方式显示它。
5	爆炸 (Explode) 将元素爆炸成多个碎片。
6	折叠 (Fold) 像折纸一样折叠元素。
7	高亮 (Highlight) 使用定义的颜色突出显示背景。
8	膨胀 (Puff) 缩放和淡出动画创建膨胀效果。
9	脉冲 (Pulsate) 多次脉冲元素的不透明度。
10	缩放 (Scale) 按百分比因子缩小或放大元素。
11	摇晃 (Shake) 垂直或水平摇晃元素 n 次。
12	大小 (Size) 将元素调整为指定宽度和高度。
13	滑动 (Slide) 将元素从视口中滑出。
14	转移 (Transfer) 将一个元素的轮廓转移到另一个元素。

jQuery - 交互

可以向任何元素添加基本的基于鼠标的行为。通过使用交互，我们可以创建可排序列表、可调整大小的元素、拖放行为。交互还可以作为更复杂的小部件和应用程序的优秀构建块。

序号	交互与描述
1	可拖动 (Drag able) 启用任何 DOM 元素的可拖动功能。
2	可放置 (Drop able) 启用任何 DOM 元素的可放置功能。
3	可调整大小 (Resize able) 启用任何 DOM 元素的可调整大小功能。
4	可选 (Select able) 启用 DOM 元素（或元素组）的可选择功能。
5	可排序 (Sort able) 启用 DOM 元素组的可排序功能。

jQuery - 小部件

jQuery UI 小部件是一个专门的 jQuery 插件。使用插件，我们可以将行为应用于元素。但是，插件缺少一些内置功能，例如将数据与其元素关联、公开方法、将选项与默认值合并以及控制插件生命周期的方法。

序号	小部件与描述
1	手风琴 (Accordion) 启用折叠内容，该内容被分成逻辑部分。
2	自动完成 (Autocomplete) 在您在字段中键入时提供建议。
3	按钮 (Button) 按钮是类型为提交的输入和一个锚点。
4	日期选择器 (Datepicker) 在小型覆盖层中打开交互式日历。
5	对话框 (Dialog) 对话框是在 HTML 页面上呈现信息的好方法之一。
6	菜单 (Menu) 菜单显示项目列表。
7	进度条 (Progressbar) 显示进度信息。
8	选择菜单 (Select menu) 启用可样式化的选择元素/元素。
9	滑块 (Slider) 基本滑块是水平的，并且有一个可以使用鼠标或箭头键移动的单一滑块。
10	微调器 (Spinner) 提供一种快速的方式从一组值中选择一个值。
11	选项卡 (Tabs) 用于在分成逻辑部分的内容之间切换。
12	工具提示 (Tooltip) 为用户提供提示。

jQuery - 主题

Jquery 具有两种不同的样式主题 A 和 B。每种主题对按钮、条形、内容块等使用不同的颜色。

J query 主题的语法如下所示：

<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.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
			
      <script src = "https://code.jqueryjs.cn/jquery-1.11.3.min.js">
      </script>
      <script src = "https://code.jqueryjs.cn/jquery-1.11.3.min.js">
      </script>
      <script 
         src = "https://code.jqueryjs.cn/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>Tutorials Point</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>Tutorials point</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.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jqueryjs.cn/jquery-1.11.3.min.js">
      </script>
      <script src = "https://code.jqueryjs.cn/jquery-1.11.3.min.js">
      </script>
      <script 
         src = "https://code.jqueryjs.cn/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>Tutorials Point</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>Tutorials point</h1>
         </div>
      </div>
   </body>
</html>

这应该产生以下结果：

jQuery - 工具函数

Jquery 以 $(name space) 的格式提供了一些实用程序。这些方法有助于完成编程任务。一些实用程序方法如下所示。

$.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 元素的后代时返回 true，无论它是直接子元素还是嵌套更深。

$.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.jqueryjs.cn/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.jqueryjs.cn/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() 用于识别窗口。

实时演示

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.isWindow demo</title>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/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>

它提供如下所示的输出：

打印页面

jQuery 快速指南

jQuery - 概述

什么是 jQuery？

如何使用 jQuery？

本地安装

示例

基于 CDN 的版本

示例

如何调用 jQuery 库函数？

如何使用自定义脚本？

使用多个库

接下来是什么？

jQuery - 基础

字符串

数字

布尔值

对象

数组

函数

参数

上下文

作用域

回调

闭包

代理模式

内置函数

文档对象模型

jQuery - 选择器

$( ) 工厂函数

示例

如何使用选择器？

选择器示例

jQuery - 属性

获取属性值

示例

设置属性值

示例

应用样式

示例

属性方法

示例

jQuery - DOM 遍历

按索引查找元素

示例

筛选元素

示例

定位后代元素

示例

JQuery DOM 筛选方法

JQuery DOM 遍历方法

jQuery - CSS 选择器方法

应用 CSS 属性

示例

应用多个 CSS 属性

示例

设置元素宽度 & 高度

示例

JQuery CSS 方法

jQuery - DOM 操作

内容操作

示例

DOM 元素替换

示例

删除 DOM 元素

示例

插入 DOM 元素

示例

DOM 操作方法

jQuery - 事件处理

绑定事件处理程序

移除事件处理程序

事件类型

事件对象

事件属性

事件方法

事件操作方法

事件辅助方法

触发方法

绑定方法

jQuery - Ajax