关键词搜索

标签搜索

近期浏览

常用的 jQuery 选择器-笔记

2024年10月25日 834阅读 0评论 1点赞

首页
/
学习笔记
/
正文

基本选择器

$("element")：选择所有指定的元素。
$("#id")：选择具有指定 ID 的元素。
$(".class")：选择所有具有指定类名的元素。

层次选择器

$("selector1 selector2")：选择作为父元素的 selector1 下的所有 selector2 元素。
$("selector1 > selector2")：选择直接子元素 selector2 的 selector1 元素。
$("selector1 + selector2")：选择紧接在 selector1 元素之后的 selector2 元素。
$("selector1 ~ selector2")：选择 selector1 元素之后的所有 selector2 元素。

属性选择器

$("[element]")：选择具有指定属性的所有元素。
$("[element='value']")：选择属性值等于指定值的所有元素。
$("[element^='value']")：选择属性值以指定值开头的所有元素。
$("[element$='value']")：选择属性值以指定值结尾的所有元素。
$("[element*='value']")：选择属性值包含指定值的所有元素。

内容选择器

:contains("text")：选择包含指定文本的所有元素。
:empty：选择所有没有子节点的元素。
:has(selector)：选择所有包含指定元素的父元素。

表单选择器

:input：选择所有表单元素。
:checkbox：选择所有复选框元素。
:radio：选择所有单选按钮元素。
:text：选择所有文本输入框元素。
:password：选择所有密码输入框元素。
:submit：选择所有提交按钮元素。
:image：选择所有图像输入框元素。
:reset：选择所有重置按钮元素。

伪类选择器：

:first：选择每个集合中的第一个元素。
:last：选择每个集合中的最后一个元素。
:even：选择索引为偶数的元素。
:odd：选择索引为奇数的元素。
:gt(n)：选择集合中索引大于 n 的元素。
:lt(n)：选择集合中索引小于 n 的元素。
:eq(n)：选择集合中索引等于 n 的元素。
:not(selector)：选择不匹配指定选择器的所有元素。
:gt(n)：选择集合中索引大于 n 的元素。
:lt(n)：选择集合中索引小于 n 的元素。
:eq(n)：选择集合中索引等于 n 的元素。

过滤选择器：

:first-child：选择每个集合中的第一个子元素。
:last-child：选择每个集合中的最后一个子元素。
:only-child：选择每个集合中唯一的子元素。
:nth-child(n)：选择每个集合中索引为 n 的子元素。
:nth-last-child(n)：选择每个集合中倒数第 n 个子元素。

列举基本选择器，层次选择器，属性选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery 选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style type="text/css">
        /* 为选中的元素添加一些样式以便于观察效果 */
        .highlight {
            background-color: yellow;
        }
        .bold {
            font-weight: bold;
        }
        .underline {
            text-decoration: underline;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            // 基本选择器示例
            $("p").addClass("highlight"); // 将所有 <p> 元素添加 highlight 类

            // ID 选择器示例
            $("#unique").addClass("bold"); // 将 ID 为 unique 的元素添加 bold 类

            // 类选择器示例
            $(".highlighted").addClass("underline"); // 将所有 class 为 highlighted 的元素添加 underline 类

            // 层次选择器示例
            $("div > p").css("color", "blue"); // 将直接在 <div> 下的 <p> 元素文字颜色设置为蓝色

            // 相邻兄弟选择器示例
            $("p + ul").css("border", "1px solid red"); // 将紧跟在 <p> 后的 <ul> 元素添加红色边框

            // 通用兄弟选择器示例
            $("p ~ ul").css("border", "1px dashed green"); // 将所有在 <p> 后的 <ul> 元素添加绿色虚线边框

            // 属性选择器示例
            $("[href]").css("text-decoration", "none"); // 移除所有带有 href 属性的 <a> 元素的下划线
        });
    </script>
</head>
<body>

    <div>
        <p>This is a paragraph.</p>
        <p id="unique">This is a unique paragraph.</p>
        <p class="highlighted">This is a highlighted paragraph.</p>
        <ul>
            <li>List item 1</li>
            <li>List item 2</li>
        </ul>
    </div>

    <p>This is another paragraph.</p>
    <ul>
        <li>List item A</li>
        <li>List item B</li>
    </ul>

    <a href="https://www.example.com">This is a link.</a>

</body>
</html>

1赞

JS 前端

发布作者：云峥

百度收录：正在检测是否收录...

本文链接： https://www.uctb.cn/archives/22.html

作品采用：《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权

—— 评论区 ——

YunZheng

独处未必孤独，喜欢就是自由

28 文章数

17 标签数

15 评论量

腾讯云自媒体同步曝光计划

人生倒计时

用户登录

常用的 jQuery 选择器-笔记

基本选择器

层次选择器

属性选择器

内容选择器

表单选择器

伪类选择器：

过滤选择器：

列举基本选择器，层次选择器，属性选择器

—— 评论区 ——