jQuery 选择器简介及其代码样例

最新推荐文章于 2025-03-12 16:18:11 发布

alankuo

最新推荐文章于 2025-03-12 16:18:11 发布

阅读量1.6k

点赞数 38

文章标签：开发语言

本文链接：https://blog.csdn.net/alankuo/article/details/143658213

版权

一、jQuery选择器简介

jQuery选择器是一种强大的工具，用于在HTML文档中快速、便捷地选取一个或多个DOM元素，以便对这些元素进行后续的操作，比如修改样式、添加事件处理函数、获取或修改元素内容等。它提供了多种类型的选择器，每种类型都有其特定的用途和语法，使得开发者可以根据元素的不同属性（如id、class、标签名等）以及元素之间的关系来准确地定位到想要操作的元素。

以下是一些常见的jQuery选择器类型：

ID选择器：通过元素的唯一ID属性来选取元素。在HTML中，ID应该是唯一的，所以使用ID选择器通常会选取到唯一一个特定的元素。语法为$('#id-value')，其中id-value是元素的ID值。例如，如果有一个元素<div id="myDiv">，那么可以使用$('#myDiv')来选取它。
类选择器：根据元素的class属性来选取元素。一个元素可以有多个class属性值，并且多个元素可以共享同一个class值。语法为$('.class-value')，其中class-value是元素的class值。比如，对于元素<p class="myClass">和<div class="myClass">，都可以使用$('.myClass')来选取它们。
标签选择器：按照元素的标签名来选取元素。语法为$('tag-name')，其中tag-name是元素的标签名，如$('p')会选取页面中所有的段落元素<p>，$('div')会选取所有的div元素等。
后代选择器：用于选取某个元素的后代元素（子元素、孙元素等）。语法为$('ancestor descendant')，其中ancestor是祖先元素，descendant是要选取的后代元素。例如，$('div p')会选取所有在div元素内部的段落元素。
子选择器：专门用来选取某个元素的直接子元素。语法为$('parent > child')，其中parent是父元素，child是要选取的直接子元素。比如，$('ul > li')会选取所有在ul列表下的直接子元素li。
属性选择器：依据元素的某个属性及其属性值来选取元素。语法有多种形式，比如：
- $('[attribute]')：选取具有指定属性的所有元素，无论其属性值是什么。例如，$('[href]')会选取所有具有href属性的元素。
- $('[attribute=value]')：选取具有指定属性且属性值等于给定值的所有元素。例如，$('[class=myClass]')会选取所有class属性值为myClass的元素。
- $('[attribute!=value]')：选取具有指定属性但属性值不等于给定值的所有元素。
多选择器：可以将多个选择器组合在一起，同时选取多种类型的元素。语法为$(selector1, selector2, selector3,...)。例如，$('p, div, #myButton')会同时选取所有的段落元素、所有的div元素以及id为myButton的元素。

二、代码样例

以下是一些展示不同类型jQuery选择器用法的代码样例：

示例1：ID选择器

<!DOCTYPE html>
<html>

<head>
    <title>jQuery选择器示例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <div id="myDiv">这是一个div元素。</div>
    <script>
        // 使用ID选择器选取元素并修改其文本内容
        $(document).ready(function() {
            $('#myDiv').text('这是被修改后的div元素内容。');
        });
    </script>
</body>

</html>

在这个示例中，通过$('#myDiv')使用ID选择器选取了id为myDiv的div元素，然后使用.text()方法修改了它的文本内容。

示例2：类选择器

<!DOCTYPE html>
<html>

<head>
    <title>jQuery选择器示例</title>
    <script src="https://cdnjs.cloudflare.com/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <p class="myClass">这是一个段落元素。</p>
    <div class="myClass">这是一个div元素。</div>
    <script>
        // 使用类选择器选取元素并修改其文本内容
        $(document).ready(function() {
            $('.myClass').text('这是被修改后的类元素内容。');
        });
    </script>
</body>

</html>

这里，通过$('.myClass')使用类选择器选取了所有class属性值为myClass的元素（包括段落元素和div元素），然后同样使用.text()方法修改了它们的文本内容。

示例3：标签选择器

<!DOCTYPE html>
<html>

<head>
    <title>jQuery选择器示例</title>
    <script src="https://cdnjs.cloudflare.com/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <p>这是一个段落元素。</p>
    <p>这是另一个段落元素。</p>
    <div>这是一个div元素。</div>
    <script>
        // 使用标签选择器选取元素并修改其文本内容
        $(document).ready(function() {
            $('p').text('这是被修改后的段落元素内容。');
        });
    </script>
</body>

</html>

在该示例中，通过$('p')使用标签选择器选取了所有的段落元素，然后使用.text()方法修改了它们的文本内容。

示例4：后代选择器

<!DOCTYPE html>
<html>

<head>
    <title>jQuery选择器示例</title>
    <script src="https://cdnjs.cloudflare.com/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <div>
        <p>这是div里面的一个段落元素。</p>
        <div>
            <p>这是嵌套在div里面的另一个段落元素。</p>
        </div>
    </div>
    <script>
        // 使用后代选择器选取元素并修改其文本内容
        $(document).ready(function() {
            $('div p').text('这是被修改后的后代元素内容。');
        });
    </script>
</body>

</html>

此示例中，通过$('div p')使用后代选择器选取了所有在div元素内部的段落元素（包括嵌套在多层div中的段落元素），然后使用.text()方法修改了它们的文本内容。

示例5：子选择器

<!DOCTYPE html>
<html>

<head>
    <title>jQuery选择器示例</title>
    <script src="https://cdnjs.cloudflare.com/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>这是ul列表的第一个直接子元素li。</li>
        <li>这是ul列表的第二个直接子元素li。</li>
        <li>这是ul列表的第三个直接子元素li。</li>
    </ul>
    <script>
        // 使用子选择器选取元素并修改其文本内容
        $(document).ready(function() {
            ('ul > li').text('这是被修改后的直接子元素内容。');
        });
    </script>
</body>

</html>

这里，通过('ul > li')使用子选择器选取了所有在ul列表下的直接子元素li，然后使用.text()方法修改了它们的文本内容。

示例6：属性选择器

<!DOCTYPE html>
<html>

<head>
    <title>jQuery选择器示例</title>
    <script src="https://cdnjs.cloudflare.com/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <a href="https://www.example.com">这是一个具有href属性的链接元素。</a>
    <img src="image.jpg" alt="这是一个具有src和alt属性的图片元素。">
    <script>
        // 使用属性选择器选取元素并修改其文本内容
        $(document).ready(function() {
            $('[href]').text('这是被修改后的具有href属性的元素内容。');
            $('[src]').text('这是被修改后的具有src属性的元素内容。');
        });
    </script>
</body>

</html>

在这个示例中，通过$('[href]')和$('[src]')使用属性选择器分别选取了所有具有href属性的元素和所有具有src属性的元素，然后使用.text()方法修改了它们的文本内容。

示例7：多选择器

<!DOCTYPE html>
<html>

<head>
    <title>jQuery选择器示例</title>
    <script src="https://cdnjs.cloudflare.com/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <p>这是一个段落元素。</p>
    <div>这是一个div元素。</td>
    <button id="myButton">这是一个按钮元素。</button>
    <script>
        // 使用多选择器选取元素并修改其文本内容
        $(document).ready(function() {
            $('p, div, #myButton').text('这是被修改后的多选择器选取的元素内容。');
        });
    </script>
</body>

</html>