与JQuery选择DOM选择的初学者指南

作为前端开发人员或设计师，您在日常项目中必须使用文档对象模型 (DOM)。近年来，随着 JavaScript 技术的改进，在 DOM 中选择元素并应用动态功能已变得越来越普遍。因此，我们需要掌握使用 DOM 元素的知识，以避免冲突并优化性能。jQuery 是最流行和最常用的 JavaScript 库之一，它具有高级的 DOM 选择和过滤功能。在本文中，我们将探讨如何在 jQuery 的帮助下，通过考虑实际场景来过滤 DOM 元素。让我们开始吧。

要点

• jQuery 是一个常用的 JavaScript 库，它提供高级的 DOM 选择和过滤功能。对于前端开发人员来说，深入了解 DOM 元素以避免冲突并优化性能至关重要。
• HTML 元素标签、ID、类和数据属性用于在 DOM 树中选择元素。ID 是唯一标识符，类用于设置元素样式以及用于过滤和选择元素，数据属性为元素定义私有数据。
• jQuery 允许选择唯一元素、使用类选择多个元素、使用多个类选择元素、使用数据属性选择元素以及使用多个数据属性选择元素。防止具有相同 ID 的元素重复以及区分用于选择和功能目的的样式类至关重要。

ID、类和数据属性简介

通常，我们使用 HTML 元素标签、ID、类和数据属性来选择 DOM 树中的元素。大多数开发人员都熟悉使用 HTML 标签进行选择。但是，新手开发人员往往会误用 ID、类和数据属性，而不知道它们在各种场景中的确切含义和必要性。因此，在我们进入实际场景之前，让我们先确定这三个选项中的每一个。

• ID – 用作文档中的唯一标识符。因此，我们不应为多个元素使用相同的 ID，即使这是可能的。通常，我们使用元素 ID 来使用 jQuery 选择元素。
• 类 – 用于使用 CSS 设置元素样式。但是，当无法使用 ID 过滤元素时，类通常用于过滤和选择元素。
• 数据属性 – 用于为元素定义私有数据。我们可以为单个元素设置多个数据属性，以存储前端功能所需的所有数据。

使用 ID、类和数据属性的实际场景

在本节中，我们将介绍使用这些过滤和选择选项的一些常见用例，以及每个选项如何适应不同的场景。实际上，在不同场景中使用这些选项的可能性是无限的。因此，我们将考虑本文的范围，关注最重要的内容。

场景 1 – 选择文档中的唯一元素

这是我们用于选择任何元素的最基本和最常见的场景。选择表单值进行验证可以被认为是此类场景的一个很好的例子。我们使用 HTML 元素 ID 来选择元素，如下面的 jQuery 代码所示：

$("#elementID").val();

使用此方法时，重要的是要防止具有相同 ID 的元素重复。

场景 2 – 使用类选择多个元素

通常，当我们想要过滤文档中的多个元素时，我们会使用类属性。与 ID 不同，我们可以使用多个具有相同 CSS 类的元素。通常，这些类型的相似元素是通过循环生成的。假设我们有一个包含用户数据的记录列表，如下面的 HTML 代码所示。我们有一个“删除”按钮，用户可以通过单击该按钮来删除记录。

<table>
  <tr><td>Mark</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>John</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>Mike</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
</table>

现在，我们有多个类似元素的实例，因此我们不能使用 ID 来过滤确切的记录。让我们看看如何使用给定的 CSS 类来过滤行。

var rows = $(".user_data");

在前面的代码中，rows 变量将包含所有三个具有类 user_data 的行。现在让我们看看如何使用类选择器在单击按钮时删除行。

$(".user_data").click(function(){
  $(this).parent().parent().remove();
});

在此技术中，我们遍历所有匹配的元素，并使用指向被单击按钮的 $(this) 对象在当前项目上执行函数。这是处理多个元素最广泛使用的方法。现在让我们看看新手开发人员在此类场景中的一些常见错误。

• 使用 ID 而不是类

有很多情况下，开发人员在循环中使用相同的 ID 来生成类似的 HTML 代码，而不是类。一旦使用了相同的 ID，它只会影响第一个元素。其余元素将无法按预期工作。因此，请确保在循环中创建动态 ID，并使用类名进行元素选择。

• 使用类名而不是 $(this) 对象

许多新手开发人员犯的另一个错误是缺乏对上下文和当前对象使用的了解。遍历多个元素时，我们可以使用 jQuery $(this) 来引用当前元素。许多开发人员在循环中使用类名，因此无法获得预期的结果。因此，切勿在循环中使用类名，如下面的代码所示：

$(".user_data").click(function(){
  $(".user_data").parent().parent().remove();
});

这是选择元素的一种广泛使用的方法，因此了解如何有效地使用此方法非常重要。CSS 类用于样式目的。但在这里，我们将其用于元素选择目的。将 CSS 类用于选择目的并不是最好的方法，有时它可能会导致布局冲突。例如，在与团队合作时，开发人员可能会仅使用 CSS 类来为 jQuery 提供动态功能。设计师可能会注意到这些类不用于样式目的，因此有可能在不知道其重要性的情况下删除它们。因此，最好为仅用于各种功能而不是样式目的的 CSS 类使用一些前缀。

场景 3 – 使用多个类选择元素

有些应用程序和网站严重依赖 JavaScript 并提供高度动态的客户端功能。在这种情况下，我们可能会使用大量的类和 ID 来进行过滤、选择和应用功能。假设我们有一个用户记录列表，需要根据角色在客户端进行过滤。我们可以将角色定义为 CSS 类以简化过滤过程。考虑以下代码片段：

$("#elementID").val();

假设我们想要获取同时具有开发人员和设计师角色的用户。在这种情况下，我们可以使用多个 CSS 类，如下面的代码所示：

<table>
  <tr><td>Mark</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>John</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>Mike</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
</table>

我们可以使用任意数量的类，一个接一个地匹配同一元素上的多个类。确保类之间不要使用空格，因为它会改变选择的意思和结果。考虑具有空格的同一代码行：

var rows = $(".user_data");

现在，代码将查找具有名为开发人员的父元素的设计师。因此，请习惯这两种实现之间的区别，并明智地使用它。类似地，我们可以在使用此技术时混合 ID 和类。

场景 4 – 使用数据属性选择元素

HTML5 引入了自定义数据属性，我们可以在其中定义与 HTML 元素相关的数据。这些数据属性具有一组特定的约定，并被认为是私有数据。因此，现在我们可以使用数据属性存储与任何元素相关的数据，而不是向服务器发出多个 AJAX 请求。让我们看看如何使用自定义数据属性而不是 CSS 类来实现场景 2。

$(".user_data").click(function(){
  $(this).parent().parent().remove();
});

如您所见，我们可以使用数据属性而不是 CSS 类来获得相同的结果。jQuery 提供高级属性选择器来支持自定义数据属性。因此，让我们考虑一下自定义属性的一些高级选择器选项。假设我们将用户电子邮件存储为自定义属性，并且我们希望根据电子邮件中的某些条件选择用户。考虑以下使用数据属性的代码片段：

$(".user_data").click(function(){
  $(".user_data").parent().parent().remove();
});

选择电子邮件中包含“gmail”的元素

<ul>
  <li class='role-developer role-designer'>Mark</li>
  <li class='role-developer'>Simon</li>
  <li class='role-developer role-manager'>Kevin</li>
</ul>

选择具有“uk”电子邮件地址的元素

var selected_users = $('.role-developer.role-designer');

选择没有“@”符号的无效电子邮件的元素

var selected_users = $('.role-developer .role-designer');

如您所见，数据属性在处理与 HTML 元素相关的数据方面功能强大，并且 jQuery 通过其内置函数提供了全面的支持。您可以在 https://www.php.cn/link/2705e8fde87cd2883e9fc1f00335685f 找到完整的属性选择器参考。

场景 5 – 使用多个数据属性选择元素

这类似于我们在场景 3 中讨论的内容，并具有一些扩展功能。在高级场景中，使用 CSS 类来处理多个数据值可能会很复杂。因此，让我们看看如何使用多个数据属性进行选择。

$("#elementID").val();

在这里，我们可以检查多个数据属性的存在以及通过部分搜索值进行选择。现在您应该能够理解 CSS 类和数据属性在元素选择方面的区别。数据属性提供了一种组织处理元素数据的方法。此处讨论的技术可以与其他 jQuery 过滤器结合使用，以满足任何类型的高级情况，并且明智地使用它们非常重要。

总结

本文旨在帮助初学者了解元素 ID、类和自定义数据属性的基础知识。我们借助 jQuery 内置函数，通过实际场景讨论了它们中的每一个。在此过程中，我们还确定了一些新手开发人员的错误。让我们回顾一下本文中讨论的要点，以建立一个有用的 DOM 选择指南：

• 尽可能使用 ID 进行元素选择，因为它提供了文档中的唯一标识符。
• 在多个元素场景中使用类或数据属性，而不是依赖元素 ID。
• 确保区分样式类和用于选择和功能目的的类。
• 在复杂场景中使用数据属性，因为类并非旨在提供有关元素的数据。

希望本文能为您提供良好的元素选择入门。如果您有更好的指南和元素选择技术，请随时在评论部分分享。

关于 jQuery DOM 选择的常见问题解答 (FAQ)

什么是 jQuery 中的文档对象模型 (DOM)？

jQuery 中的文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它表示文档的结构，并提供了一种操作内容和结构的方法。使用 DOM，程序员可以创建、导航和修改 HTML 和 XML 文档中的元素和内容。

jQuery 如何简化 DOM 操作？

jQuery 通过提供易于使用的 API 来处理事件、创建动画和开发 Ajax 应用程序来简化 DOM 操作。jQuery 还提供了一个简单的语法来导航和操作 DOM。它抽象了处理原始 JavaScript 和 DOM API 的许多复杂性，使开发人员更容易使用 HTML 文档。

jQuery 中有哪些不同类型的 DOM 选择器？

jQuery 中有几种类型的 DOM 选择器，包括元素选择器、ID 选择器、类选择器、属性选择器和伪类选择器。元素选择器根据其元素名称选择元素。ID 选择器根据其 ID 属性选择元素。类选择器根据其类属性选择元素。属性选择器根据属性或属性值选择元素。伪类选择器根据特定状态选择元素。

如何在 jQuery 中按其 ID 选择元素？

要在 jQuery 中按其 ID 选择元素，请使用井号 (#) 后跟元素的 ID。例如，要选择 ID 为“myElement”的元素，您将使用 $(“#myElement”)。

如何在 jQuery 中按其类选择元素？

要在 jQuery 中按其类选择元素，请使用点符号 (.) 后跟类名。例如，要选择具有类“myClass”的元素，您将使用 $(“.myClass”)。

什么是 jQuery 中的属性选择器以及它们是如何工作的？

jQuery 中的属性选择器根据其属性或属性值选择元素。它们使用方括号 ([]) 编写。例如，要选择所有具有“data-example”属性的元素，您将使用 $(“[data-example]”)。

如何在 jQuery 中选择多个元素？

您可以通过用逗号分隔每个选择器来在 jQuery 中选择多个元素。例如，要选择所有具有类“myClass”的元素和所有具有 ID“myID”的元素，您将使用 $(“.myClass, #myID”)。

什么是 jQuery 中的伪类选择器？

jQuery 中的伪类选择器根据特定状态选择元素。例如，“:checked”伪类选择器将选择所有选中的复选框或单选按钮。

如何使用 jQuery 操作 DOM？

jQuery 提供了几种操作 DOM 的方法，例如 .append()、.prepend()、.after()、.before()、.remove() 和 .empty()。这些方法允许您在 DOM 中插入、替换和删除元素。

jQuery 如何处理 DOM 中的事件？

jQuery 提供了处理 DOM 中事件的方法，例如 .click()、.dblclick()、.hover()、.mousedown()、.mouseup()、.mousemove()、.mouseout()、.mouseover()、.mouseenter()、.mouseleave()、.change()、.focus()、.blur()、.keydown()、.keypress()、.keyup()、.submit()、.load()、.resize()、.scroll() 和 .unload()。这些方法允许您定义在 DOM 中元素上发生这些事件时会发生什么。

以上是与JQuery选择DOM选择的初学者指南的详细内容。更多信息请关注PHP中文网其他相关文章！