jquery 选择器 过滤

理解 jQuery 选择器和过滤器

引言

jQuery 是一种流行的 JavaScript 库，它简化了 HTML 文档的遍历、事件处理、动画以及 Ajax 交互。其强大的选择器和过滤器使得在 DOM 中查找和操作元素变得更加简单和高效。在本篇文章中，我们将深入探讨 jQuery 的选择器和过滤器，包含代码示例和一些实际应用场景。

jQuery 选择器

jQuery 提供了多种选择器，使得开发者能够精准地在 DOM 中选择元素。常见的选择器包括：

1. 基本选择器：通过元素名称、ID 或类名选择元素。

   登录后复制

   // 选择所有的 <p> 元素
   $("p").css("color", "red");
   
   // 选择 ID 为 'myDiv' 的元素
   $("#myDiv").hide();
   
   // 选择类名为 'item' 的元素
   $(".item").show();
   

   • 1.
   • 2.
   • 3.
   • 4.
   • 5.
   • 6.
   • 7.
   • 8.

2. 层级选择器：可用于选择父元素、子元素或后代元素。

   登录后复制

   // 选择 ID 为 'myDiv' 的直接子元素 <p>
   $("#myDiv > p").css("font-weight", "bold");
   
   // 选择 ID 为 'myDiv' 的所有子元素
   $("#myDiv *").css("background-color", "yellow");
   

   • 1.
   • 2.
   • 3.
   • 4.
   • 5.

3. 属性选择器：用于选择具有特定属性的元素。

   登录后复制

   // 选择所有具有 'data-custom' 属性的元素
   $('[data-custom]').css("border", "1px solid blue");
   
   // 选择所有 href 属性值为 ' 的 <a> 元素
   $("a[href='
   

   • 1.
   • 2.
   • 3.
   • 4.
   • 5.

jQuery 过滤器

一旦选择了一组元素，过滤器可以帮助我们进一步精确选择。这使得我们可以根据条件筛选出更具体的元素。常见的过滤器包括：

1. :first, :last：选择第一个或最后一个元素。

   登录后复制

   // 选择所有的 <li> 元素中第一个
   $("li:first").css("color", "green");
   
   // 选择所有的 <li> 元素中最后一个
   $("li:last").css("color", "blue");
   

   • 1.
   • 2.
   • 3.
   • 4.
   • 5.

2. :eq(index)：选择指定索引的元素。

   登录后复制

   // 选择第一个 <div> 元素
   $("div:eq(0)").css("background-color", "pink");
   

   • 1.
   • 2.

3. :not(selector)：排除特定选择器匹配的元素。

   登录后复制

   // 选择所有 <p> 元素，排除类名为 'ignore' 的元素
   $("p:not(.ignore)").css("opacity", 0.5);
   

   • 1.
   • 2.

4. :has(selector)：选择包含特定子元素的元素。

   登录后复制

   // 选择包含 <p> 元素的所有 <div> 元素
   $("div:has(p)").css("border", "2px dashed red");
   

   • 1.
   • 2.

实际应用示例

假设我们有以下的 HTML 结构：

登录后复制

<div id="container">
    标题
    <p class="description">这是一个描述</p>
    <ul>
        <li class="item">项目1</li>
        <li class="item">项目2</li>
        <li class="item ignore">项目3</li>
    </ul>
</div>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.

我们想要将所有不含类名 ‘ignore’ 的项目的颜色设置为红色，并将描述的颜色设为蓝色。可以使用以下的 jQuery 代码：

登录后复制

$(".item:not(.ignore)").css("color", "red");
$(".description").css("color", "blue");

• 1.
• 2.

甘特图

在项目管理中，甘特图可以用于可视化进度。以下是一个简单的甘特图示例，展示了 jQuery 选择器和过滤器学习计划。

关系图

当我们讨论 jQuery 的选择器和过滤器时，理解其内部机制的关系也很重要。例如，选择器和过滤器之间的关系可以通过 ER 图进行展示。

结论

通过对 jQuery 选择器和过滤器的深度理解，我们可以有效地在网页上查找和操作元素。选择器帮助我们准确定位，而过滤器则为复杂的 DOM 操作提供了便利的条件。在实际开发中，灵活运用这些工具将显著提高开发效率。希望通过本文的示例和解释，能够帮助你在今后的项目中更好地使用 jQuery。如果你还有更多问题或者想了解更深入的内容，欢迎提问！

原创作者: u_16213315 转载于: https://blog.51cto.com/u_16213315/11841556