jQuery - 快速指南

jQuery - 概述

什么是 jQuery？

jQuery 是一个快速而简洁的 JavaScript 库，由 John Resig 在 2006 年创建，其座右铭是：Write less，do more。jQuery 简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互，以实现快速 Web 开发。jQuery 是一个 JavaScript 工具包，旨在通过编写更少的代码来简化各种任务。以下是 jQuery 支持的重要核心功能列表 -

DOM 操作- jQuery 通过使用名为Sizzle的跨浏览器开源选择器引擎，可以轻松选择 DOM 元素、协商它们并修改其内容。
事件处理- jQuery 提供了一种优雅的方式来捕获各种事件，例如用户单击链接，而无需使用事件处理程序使 HTML 代码本身变得混乱。
AJAX 支持- jQuery 可以帮助您使用 AJAX 技术开发响应式且功能丰富的网站。
动画- jQuery 附带了大量内置动画效果，您可以在网站中使用它们。
轻量级- jQuery 是非常轻量级的库 - 大小约为 19KB（缩小并压缩）。
跨浏览器支持- 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。

例子

现在您可以在 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://www.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 加载并且页面内容加载之前，其中的所有内容都会加载。

为此，我们为文档注册一个就绪事件，如下所示 -

$(document).ready(function() {
   // do stuff when DOM is ready
});

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

现场演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.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://www.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 Method 了解更多详细信息。

下一步是什么？

如果您不理解上面的示例，请不要太担心。在接下来的章节中你很快就会掌握它们。

下一章将尝试涵盖来自传统 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];

数组有一个对于迭代有用的长度属性 -

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 变量参数是一种具有长度属性的数组。下面的例子很好地解释了这一点 -

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

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

参数对象还有一个被调用者属性，它指的是您所在的函数。例如 -

function func() {
   return arguments.callee; 
}

func();                // ==> func

语境

JavaScript 著名的关键字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);
});

大多数回调提供参数和上下文。在事件处理程序示例中，使用一个参数（事件）调用回调。

有些回调需要返回某些内容，而另一些回调则使返回值可选。为了阻止表单提交，提交事件处理程序可以返回 false，如下所示 -

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

闭包

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

以下示例显示了变量计数器如何在 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);
   };
	
})();

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

内置功能

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

以下是重要的 JavaScript 函数 -

先生。	方法及说明
1	charAt() 返回指定索引处的字符。
2	连接（）组合两个字符串的文本并返回一个新字符串。
3	forEach() 为数组中的每个元素调用一个函数。
4	指数（）返回调用 String 对象中指定值第一次出现的索引，如果未找到则返回 -1。
5	长度（）返回字符串的长度。
6	流行音乐（）从数组中删除最后一个元素并返回该元素。
7	推（）将一个或多个元素添加到数组末尾并返回数组的新长度。
8	撤销（）反转数组元素的顺序 - 第一个变为最后一个，最后一个变为第一个。
9	种类（）对数组的元素进行排序。
10	子字符串() 返回字符串中从指定位置开始到指定字符数的字符。
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> 的后代，而且还是 <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://www.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	姓名选择与给定元素Name匹配的所有元素。
2	＃ID 选择与给定ID匹配的单个元素。
3	。班级选择与给定Class匹配的所有元素。
4	普遍的（*）选择 DOM 中所有可用的元素。
5	多元素E、F、G 选择所有指定选择器E、F或G的组合结果。

选择器示例

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

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

先生。	选择器和描述
1	*$('')** 该选择器选择文档中的所有元素。
2	*$("p > ")** 此选择器选择段落元素的所有子元素。
3	$("#specialID") 该选择器函数获取 id="specialID" 的元素。
4	$(".specialClass") 该选择器获取所有具有specialClass类的元素。
5	$("li:not(.myclass)") 选择与 <li> 匹配但不具有 class = "myclass" 的所有元素。
6	$("a#specialID.specialClass") 此选择器匹配 id 为specialID且类为specialClass的链接。
7	$("p a.specialClass") 此选择器与 <p> 元素中声明的specialClass类的链接相匹配。
8	$("ul li:第一个") 此选择器仅获取 <ul> 的第一个 <li> 元素。
9	$("#container p") 选择与 <p> 匹配的所有元素，这些元素是 id 为container的元素的后代。
10	$("li > ul") 选择与 <ul> 匹配的所有元素，这些元素是与 <li> 匹配的元素的子元素
11	$("强+em") 选择紧跟在 <strong> 匹配的同级元素之后的所有与 <em> 匹配的元素。
12	$("p ~ ul") 选择与 <ul> 匹配且位于与 <p> 匹配的同级元素之后的所有元素。
13	$(“代码，em，强”) 选择与 <code> 或 <em> 或 <strong> 匹配的所有元素。
14	$("p 强，.myclass") 选择与 <strong> 匹配的所有元素，这些元素是与 <p> 匹配的元素的后代，以及具有 myclass 类的所有元素。
15	$(":空") 选择所有没有子元素的元素。
16	$("p:空") 选择与 <p> 匹配且没有子元素的所有元素。
17 号	$("div[p]") 选择与 <div> 匹配且包含与 <p> 匹配的元素的所有元素。
18	$("p[.myclass]") 选择与 <p> 匹配且包含类为myclass的元素的所有元素。
19	$("a[@rel]") 选择与 <a> 匹配且具有 rel 属性的所有元素。
20	$("输入[@name = myname]") 选择与 <input> 匹配且名称值完全等于myname 的所有元素。
21	$("输入[@名字^=我的名字]") 选择与 <input> 匹配且名称值以myname开头的所有元素。
22	$("a[@rel$=self]") 选择与 <a> 匹配且rel属性值以self结尾的所有元素。
23	*$("a[@href=domain.com]")** 选择与 <a> 匹配且 href 值包含 domain.com 的所有元素。
24	$("li:偶数") 选择与 <li> 匹配且具有偶数索引值的所有元素。
25	$("tr:奇数") 选择与 <tr> 匹配且具有奇数索引值的所有元素。
26	$("李：第一") 选择第一个 <li> 元素。
27	$("li:最后") 选择最后一个 <li> 元素。
28	$("li:可见") 选择与 <li> 匹配的所有可见元素。
29	$("li:隐藏") 选择与 <li> 匹配且隐藏的所有元素。
30	$(":收音机") 选择表单中的所有单选按钮。
31	$(":检查") 选择表单中的所有复选框。
32	$(":输入") 仅选择表单元素（输入、选择、文本区域、按钮）。
33	$(":文本") 仅选择文本元素 (input[type = text])。
34	$("li:eq(2)") 选择第三个 <li> 元素。
35	$("li:eq(4)") 选择第五个 <li> 元素。
36	$("li:lt(2)") 选择第三个之前与 <li> 元素匹配的所有元素；换句话说，前两个 <li> 元素。
37	$("p:lt(3)") 选择第四个之前与 <p> 元素匹配的所有元素；换句话说，前三个 <p> 元素。
38	$("li:gt(1)") 选择第二个之后与 <li> 匹配的所有元素。
39	$("p:gt(2)") 选择第三个之后与 <p> 匹配的所有元素。
40	$(“div/p”) 选择与 <p> 匹配的所有元素，这些元素是与 <div> 匹配的元素的子元素。
41	$("div//代码") 选择与 <code> 匹配的所有元素，这些元素是与 <div> 匹配的元素的后代。
42	$("//p//a") 选择与 <a> 匹配的所有元素，这些元素是与 <p> 匹配的元素的后代
43	$("li:第一个孩子") 选择与 <li> 匹配的所有元素，这些元素是其父元素的第一个子元素。
44	$("li:最后一个孩子") 选择与 <li> 匹配的所有元素，这些元素是其父元素的最后一个子元素。
45	$(":父级") 选择作为另一个元素的父元素的所有元素，包括文本。
46	$("li:包含(第二个)") 选择与 <li> 匹配且包含第二个文本的所有元素。

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

jQuery - 属性

当涉及 DOM 元素时，我们可以操作的一些最基本的组件是分配给这些元素的属性和属性。

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

班级名称
标签名
ID
链接地址
标题
相对
源代码

考虑以下图像元素的 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> 标签的标题属性并设置具有相同值的 <div id = "divid"> 值 -

现场演示

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

例子

以下是一个简单的示例，设置para <p> 标签的类属性 -

现场演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.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（属性）将键/值对象设置为所有匹配元素的属性。
2	属性（键，fn）在所有匹配的元素上将单个属性设置为计算值。
3	删除属性（名称）从每个匹配元素中删除一个属性。
4	有类（类）如果指定的类存在于一组匹配元素中的至少一个上，则返回 true。
5	删除类（类）从匹配元素集中删除所有或指定的类。
6	切换类（类）如果指定的类不存在，则添加该类；如果存在，则删除指定的类。
7	html() 获取第一个匹配元素的 html 内容（innerHTML）。
8	html( 值 ) 设置每个匹配元素的 html 内容。
9	文本（）获取所有匹配元素的组合文本内容。
10	文本（值）设置所有匹配元素的文本内容。
11	值（）获取第一个匹配元素的输入值。
12	值（值）如果在 <input> 上调用，则设置每个匹配元素的 value 属性，但如果使用传递的 <option> 值在 <select> 上调用，则将选择传递的选项，如果在复选框或单选框上调用，则将选择所有匹配的复选框和单选框都会被选中。

例子

与上面的语法和示例类似，以下示例将让您了解在不SymPy况下使用各种属性方法 -

以下是不SymPy况下属性方法的完整列表 -

先生。	选择器和描述
1	$("#myID").attr("自定义") 这将返回与 ID myID 匹配的第一个元素的属性custom值。
2	$("img").attr("alt", "示例图像") 这会将所有图像的alt属性设置为新值“示例图像”。
3	$("input").attr({ value: "", title: "请输入一个值" }); 将所有 <input> 元素的值设置为空字符串，并将 The jQuery Example 设置为字符串Please Enter a value。
4	$("a[href^=https://]").attr("目标","_blank") 选择所有具有以https://开头的 href 属性的链接，并将其目标属性设置为_blank。
5	$("a").removeAttr("目标") 这将删除所有链接的目标属性。
6	$("form").submit(function() {$(":submit",this).attr("已禁用", "已禁用");}); 单击提交按钮时，这会将禁用属性修改为值“禁用”。
7	$("p:last").hasClass("选定的") 如果最后一个 <p> 标记已选择关联的类，则返回 true 。
8	$("p").text() 返回包含所有匹配 <p> 元素的组合文本内容的字符串。
9	$("p").text("<i>Hello World</i>") 这会将“<I>Hello World</I>”设置为匹配 <p> 元素的文本内容。
10	$("p").html() 这将返回所有匹配段落的 HTML 内容。
11	$("div").html("你好世界") 这会将所有匹配的 <div> 的 HTML 内容设置为Hello World。
12	$("输入:复选框:选中").val() 从选中的复选框中获取第一个值。
13	$("输入:radio[name=bar]:选中").val() 从一组单选按钮中获取第一个值。
14	$("按钮").val("你好") 设置每个匹配元素 <button> 的 value 属性。
15	$("输入").val("开启") 这将检查所有值为“on”的单选按钮或复选框按钮。
16	$("选择").val("橙色") 这将在下拉框中选择“橙色”选项，其中包含“橙色”、“芒果”和“香蕉”选项。
17 号	$("select").val("橙子", "芒果") 这将在下拉框中选择“橙色”和“芒果”选项，并包含“橙色”、“芒果”和“香蕉”选项。

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)方法直接定位，如下例所示。
每个子元素的索引都从零开始，因此，可以使用$("li").eq(1)等访问列表项 2 。

例子

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

现场演示

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.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)方法可用于从匹配元素集中过滤掉与指定选择器不匹配的所有元素。可以使用任何选择器语法编写选择器。

例子

以下是一个简单的示例，它将颜色应用于与中产阶级相关的列表 -

现场演示

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.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)方法可用于定位特定类型元素的所有后代元素。可以使用任何选择器语法编写选择器。

例子

以下是选择不同 <p> 元素内可用的所有 <span> 元素的示例 -

现场演示

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.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	等式（索引）将匹配元素集减少为单个元素。
2	过滤器（选择器）从匹配元素集中删除与指定选择器不匹配的所有元素。
3	过滤器（ fn ）从匹配元素集中删除与指定函数不匹配的所有元素。
4	是（选择器）根据表达式检查当前选择，如果选择的至少一个元素适合给定的选择器，则返回 true。
5	地图（回调）将 jQuery 对象中的一组元素转换为 jQuery 数组中的另一组值（可能包含也可能不包含元素）。
6	不（选择器）从匹配元素集中删除与指定选择器匹配的元素。
7	切片（开始，[结束]）选择匹配元素的子集。

JQuery DOM 遍历方法

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

先生。	方法与说明
1	添加（选择器）将更多由给定选择器匹配的元素添加到匹配元素集中。
2	和自己( ) 将先前的选择添加到当前的选择中。
3	孩子们（[选择器]）获取一组元素，其中包含每个匹配元素集的所有唯一直接子元素。
4	最接近（选择器）获取一组元素，其中包含与指定选择器匹配的最接近的父元素，包括起始元素。
5	内容（）查找匹配元素（包括文本节点）或内容文档（如果元素是 iframe）内的所有子节点。
6	结尾（）恢复最近的“破坏性”操作，将匹配元素集更改为其之前的状态。
7	查找（选择器） Searches for descendant elements that match the specified selectors.
8	next( [selector] ) Get a set of elements containing the unique next siblings of each of the given set of elements.
9	nextAll( [selector] ) Find all sibling elements after the current element.
10	offsetParent( ) Returns a jQuery collection with the positioned parent of the first matched element.
11	parent( [selector] ) Get the direct parent of an element. If called on a set of elements, parent returns a set of their unique direct parent elements.
12	parents( [selector] ) Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element).
13	prev( [selector] ) Get a set of elements containing the unique previous siblings of each of the matched set of elements.
14	prevAll( [selector] ) Find all sibling elements in front of the current element.
15	siblings( [selector] ) Get a set of elements containing all of the unique siblings of each of the matched set of elements.

jQuery - CSS Selectors Methods

The jQuery library supports nearly all of the selectors included in Cascading Style Sheet (CSS) specifications 1 through 3, as outlined on the World Wide Web Consortium's site.

Using JQuery library developers can enhance their websites without worrying about browsers and their versions as long as the browsers have JavaScript enabled.

Most of the JQuery CSS Methods do not modify the content of the jQuery object and they are used to apply CSS properties on DOM elements.

Apply CSS Properties

This is very simple to apply any CSS property using JQuery method css( PropertyName, PropertyValue ).

Here is the syntax for the method −

selector.css( PropertyName, PropertyValue );

Here you can pass PropertyName as a javascript string and based on its value, PropertyValue could be string or integer.

Example

Following is an example which adds font color to the second list item.

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.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>

This will produce following result −

Apply Multiple CSS Properties

You can apply multiple CSS properties using a single JQuery method CSS( {key1:val1, key2:val2....). You can apply as many properties as you like in a single call.

Here is the syntax for the method −

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

Here you can pass key as property and val as its value as described above.

Example

Following is an example which adds font color as well as background color to the second list item.

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.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>

This will produce following result −

Setting Element Width & Height

The width( val ) and height( val ) method can be used to set the width and height respectively of any element.

Example

Following is a simple example which sets the width of first division element where as rest of the elements have width set by style sheet

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.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>

This will produce following result −

JQuery CSS Methods

Following table lists down all the methods which you can use to play with CSS properties −

Sr.No.	Method & Description
1	css( name ) Return a style property on the first matched element.
2	css( name, value ) Set a single style property to a value on all matched elements.
3	css( properties ) 将键/值对象设置为所有匹配元素的样式属性。
4	高度（值）设置每个匹配元素的 CSS 高度。
5	高度（）获取第一个匹配元素的当前计算像素高度。
6	内部高度( ) 获取第一个匹配元素的内部高度（不包括边框并包括填充）。
7	内宽度（）获取第一个匹配元素的内部宽度（不包括边框并包括填充）。
8	抵消（）获取第一个匹配元素相对于文档的当前偏移量（以像素为单位）。
9	偏移父级( ) 返回一个 jQuery 集合，其中包含第一个匹配元素的定位父元素。
10	外部高度（[边距]）获取第一个匹配元素的外部高度（默认包括边框和内边距）。
11	外部宽度（[边距]）获取第一个匹配元素的外部宽度（默认包括边框和填充）。
12	位置（）获取元素相对于其偏移父元素的顶部和左侧位置。
13	向左滚动( val ) 当传入一个值时，所有匹配元素上的滚动左偏移量将设置为该值。
14	向左滚动() 获取第一个匹配元素的滚动左偏移量。
15	滚动顶部（ val ）当传入一个值时，所有匹配元素上的滚动顶部偏移量将设置为该值。
16	滚动顶部（）获取第一个匹配元素的滚动顶部偏移量。
17 号	宽度（值）设置每个匹配元素的 CSS 宽度。

先生。	方法与说明
1	attr（属性）将键/值对象设置为所有匹配元素的属性。
2	属性（键，fn）在所有匹配的元素上将单个属性设置为计算值。
3	删除属性（名称）从每个匹配元素中删除一个属性。
4	有类（类）如果指定的类存在于一组匹配元素中的至少一个上，则返回 true。
5	删除类（类）从匹配元素集中删除所有或指定的类。
6	切换类（类）如果指定的类不存在，则添加该类；如果存在，则删除指定的类。
7	html() 获取第一个匹配元素的 html 内容（innerHTML）。
8	html( 值 ) 设置每个匹配元素的 html 内容。
9	文本（）获取所有匹配元素的组合文本内容。
10	文本（值）设置所有匹配元素的文本内容。
11	值（）获取第一个匹配元素的输入值。
12	值（值）如果在 <input> 上调用，则设置每个匹配元素的 value 属性，但如果使用传递的 <option> 值在 <select> 上调用，则将选择传递的选项，如果在复选框或单选框上调用，则将选择所有匹配的复选框和单选框都会被选中。

先生。	方法及说明
1	等式（索引）将匹配元素集减少为单个元素。
2	过滤器（选择器）从匹配元素集中删除与指定选择器不匹配的所有元素。
3	过滤器（ fn ）从匹配元素集中删除与指定函数不匹配的所有元素。
4	是（选择器）根据表达式检查当前选择，如果选择的至少一个元素适合给定的选择器，则返回 true。
5	地图（回调）将 jQuery 对象中的一组元素转换为 jQuery 数组中的另一组值（可能包含也可能不包含元素）。
6	不（选择器）从匹配元素集中删除与指定选择器匹配的元素。
7	切片（开始，[结束]）选择匹配元素的子集。

jQuery - 快速指南

jQuery - 概述

什么是 jQuery？

如何使用jQuery？

本地安装

例子

基于CDN的版本

例子

如何调用 jQuery 库函数？

如何使用自定义脚本？

使用多个库

下一步是什么 ？

jQuery - 基础知识

细绳

数字

布尔值

对象

数组

功能

论点

语境

范围

打回来

闭包

代理模式

内置功能

文档对象模型

jQuery - 选择器

$() 工厂函数

例子

如何使用选择器？

选择器示例

jQuery - 属性

获取属性值

例子

设置属性值

例子

应用样式

例子

属性方法

例子

jQuery - DOM 遍历

按索引查找元素

例子

过滤掉元素

例子

定位后代元素

例子

JQuery DOM 过滤方法

JQuery DOM 遍历方法

jQuery - CSS Selectors Methods

Apply CSS Properties

Example

Apply Multiple CSS Properties

Example

Setting Element Width & Height

Example

JQuery CSS Methods

下一步是什么？