JavaWeb系列十七: jQuery选择器 上

~ 小团子2024-06-24 15:35

jQuery选择器

  1. 选择器是jQuery的核心, 在jQuery中, 对事件处理, 遍历 DOM和Ajax 操作都依赖于选择器
  2. jQuery选择器的优点
  • $("#id") 等价于 document.getElementById("id");
  • $("tagName") 等价于 document.getElementsByTagName("tagName");
  • 完善的事件处理机制
    应用实例

前端报错的位置

jQuery基本选择器

基本选择器是jQuery中最常用的选择器, 也是最简单的选择器, 它通过id, class和标签名来查找DOM对象

种类 用法 返回值 说明
id $("#myDiv") 单个元素组成的集合 直接选择html中的id="myDiv"
Element $("div") 集合元素 element翻译过来的意思就是元素, 所有element其实就是html已经定义的标签元素, 比如div, p, a, input等
class $(".myClass") 集合元素 直接选择html代码中class="myClass"的元素或元素组(因为在同一html中, class是可以存在多个同样的值的)
* $("*") 集合元素 匹配所有的元素, 包括, 多用于结合上下文来搜索
selector1, selector2... selectorN $("div, span, p.myClass") 集合元素 将每一个选择器匹配到的元素合并后一起返回, 你可以指定任意多个选择器, 并将匹配到的元素合并到集合中, p.myClass是表示匹配元素 p class="myClass"
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //1.改变id为one的元素的背景色为yellow
            $("#btn01").click(
                function () {
                    $("#one").css("background", "yellow");
                }
            );
            //2.改变class为mytag的的所有元素的背景色为red
            $("#btn02").click(
                function () {
                    $(".mytag").css("background", "red");
                }
            );
            //3.改变元素名为div的的所有元素的背景色为black
            $("#btn03").click(
                function () {
                    $("div").css("background", "black");
                }
            );

            //4.改变所有元素的背景色为pink
            $("#btn04").click(
                function () {
                    $("*").css("background", "pink");
                }
            );
            //5.改变所有的<span>元素和id为two, class为mytag 的元素的背景色为blue
            $("#btn05").click(
                function () {
                    $("span.c1, #two, .mytag").css("background", "blue");
                }
            );

        });
    </script>
</head>
<body>
<button id="btn01">改变id为one的元素的背景色为yellow</button>
<button id="btn02">改变class为mytag的所有元素的背景色为red</button>
<button id="btn03">改变元素名为&lt;div&gt;的所有元素的背景色为black</button>
<button id="btn04">改变所有元素的背景色为pink</button>
<button id="btn05">改变所有的&lt;span&gt;元素和id为two, class为mytag 的元素的背景色为blue</button>
<hr/>
<div style="height: 200px; width: 300px; background-color: chartreuse" id="one">id=one</div>
<div style="height: 200px; width: 300px; background-color: pink" id="two" class="mytag">id=two</div>
<div style="height: 200px; width: 300px; background-color: blueviolet" id="three" class="mytag">id=three</div>
<div style="height: 200px; width: 300px; background-color: blue" id="four" class="mytag">id=four</div>
<span style="background-color: chartreuse" class="c1">id=five</span>
<span style="background-color: chartreuse" class="c2">id=six</span>
</body>
</html>

jquery层次选择器

如果想要通过DOM元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器

种类 用法 返回值 说明
ancestor descendant $("form input") 集合元素 在给定的祖先元素下匹配所有后代元素
parent > child $("form > input") 集合元素 在给定的父元素下匹配所有子元素(注意区分后代元素和子元素)
prev + next $("label + input") 集合元素 匹配所有紧跟在prev元素后的next元素
prev ~ siblings $("form ~ input") 集合元素 匹配prev元素之后的所有siblings元素. 注意: 是匹配之后的元素, 不包含该元素在内, 并且匹配的是和prev同级的元素, 其后辈元素不被匹配

注意: ("prev ~ div")选择器只能选择"#prev"元素后面的同辈元素; 而jQuery中的siblings方法与位置无关, 只要是同辈节点就可以选取

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //1.改变<body>内所有<div>元素的背景色为green
            $("#btn01").click(
                function () {
                    $("div").css("background-color", "green");
                }
            );
            //2.改变<body>内子<div>元素(第一层级的div)的背景色为red
            $("#btn02").click(
                function () {
                    $("body > div").css("background", "red");
                }
            );
            //3.改变id为one的下一个紧接着的div元素(必须是紧跟着)的背景色为yellow
            $("#btn03").click(
                function () {
                    $("#one + div").css("background", "yellow");
                }
            );
            //4.示例: 改变id为two的元素后面所有的div元素(满足兄弟元素[处于同一层级]即可)的背景色为brown
            $("#btn04").click(
                function () {
                    $("#two ~ div").css("background", "brown");
                }
            );
            //5.改变id为two的元素的所有兄弟元素[同级元素]中的div元素的背景色为white
            $("#btn05").click(
                function () {
                    $("#two").siblings("div").css("background-color", "white");
                }
            );

        });

    </script>
</head>
<body>
<input type="button" value="改变<body>内所有<div>元素的背景色为green" id="btn01"/>
<input type="button" value="改变<body>内子<div>元素的背景色为red" id="btn02"/>
<input type="button" value="改变id为one的下一个<div>元素的背景色为yellow" id="btn03"/>
<input type="button" value="改变id为two的元素后面所有的兄弟元素(即div元素)的背景色为brown" id="btn04"/>
<input type="button" value="改变id为two的元素所有<div>兄弟元素的背景色为white" id="btn05"/>
<hr/>
<div id="one" class="mytag" style="background-color: darkgray; width: 300px;height: 300px;float: left">
    div id=one
</div>
<div id="two" class="mytag" style="background-color: darkgray; width: 300px;height: 300px;float: left">
    div id=two
    <div id="two01" style="background-color: lightpink; width: 100px;height: 100px;">
        id two01
    </div>
    <div id="two02" style="background-color: lightpink; width: 100px;height: 100px;">
        id two02
    </div>
</div>
<div id="three" class="mytag" style="background-color: darkgray; width: 300px;height: 300px;float: left">
    div id=three
    <div id="three01" style="background-color: lightpink; width: 100px;height: 100px;">
        id three01
    </div>
</div>
</body>
</html>

基础过滤选择器

基础过滤选择器介绍:

种类 用法 返回值 说明
:first $("tr:first") 单个元素组成的集合 匹配找到的第一个元素
:last $("tr:last") 集合元素 匹配找到的最后一个元素
:not(selector) $("input:not(:checked)") 集合元素 去除所有与给定选择器匹配的元素, 意思是没有被选中的input(当 input type="checkbox")
:even $("tr:even") 集合元素 匹配所有索引值为偶数的元素, 从0开始计数.js的数组都是从0开始计数的, 例如要选择table的行, 因为是从0开始计数, 所以table中的第一个tr就为偶数0
:odd $("tr:odd") 集合元素 匹配所有索引值为奇数的元素, 从0开始计数
:eq(index) $("tr:eq(0)") 集合元素 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素, 括号里面的是索引值, 不是元素排放数
:gt(index) $("tr:gt(0)") 集合元素 匹配所有大于给定索引值的元素
:lt(index) $("tr:lt(0)") 集合元素 匹配所有小于给定索引值的元素
:header $(":header").css("background", "red") 集合元素 匹配所有h1, h2, h3之类的标题元素, 这个是专门用来获取h1, h2这样的元素
:animated 集合元素 匹配所有正在执行动画效果的元素
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础过滤选择器</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn01").click(
                function () {
                    //1.改变第一个<div>元素的背景色为green
                    $("div:first").css("background", "green");
                    $("div:eq(0)").css("background", "green");
                }
            );
            $("#btn02").click(
                function () {
                    //2.改变最后一个<div>元素的背景色为red
                    //所谓最后一个是指从上到下, 从外层到内层的最后一个
                    $("div:last").css("background", "red");
                }
            );
            $("#btn03").click(
                function () {
                    //3.改变class不为myTag的所有<div>元素的背景色为yellow
                    $("div:not(.myTag)").css("background", "yellow");
                }
            );
            $("#btn04").click(
                function () {
                    //4.改变索引值为偶数的<div元素>的背景色为brown
                    //冒号:可以理解为过滤
                    $("div:even").css("background", "brown");
                }
            );
            $("#btn05").click(
                function () {
                    //5.改变索引值为奇数的<div元素>的背景色为blue
                    $("div:odd").css("background", "blue");
                }
            );
            $("#btn06").click(
                function () {
                    //6.改变索引值大于3的<div元素>的背景色为white
                    $("div:gt(3)").css("background", "white");
                }
            );
            $("#btn07").click(
                function () {
                    //7.改变索引值等于3的<div元素>的背景色为pink
                    $("div:eq(3)").css("background", "pink");
                }
            );
            $("#btn08").click(
                function () {
                    //8.改变索引值小于3的<div元素>的背景色为gray
                    $("div:lt(3)").css("background", "gray");
                }
            );
            $("#btn09").click(
                function () {
                    //9.改变所有的标题元素背景色为purple
                    $(":header").css("background", "purple");
                }
            );


        })
    </script>
</head>

<body>
<input type="button" value="改变第一个<div>元素的背景色为green" id="btn01"/>
<input type="button" value="改变最后一个<div>元素的背景色为red" id="btn02"/>
<input type="button" value="改变class不为myTag的所有<div>元素的背景色为yellow" id="btn03"/>
<input type="button" value="改变索引值为偶数的<div元素>的背景色为brown" id="btn04"/>
<input type="button" value="改变索引值为奇数的<div元素>的背景色为blue" id="btn05"/>
<input type="button" value="改变索引值大于3的<div元素>的背景色为white" id="btn06"/>
<input type="button" value="改变索引值等于3的<div元素>的背景色为pink" id="btn07"/>
<input type="button" value="改变索引值小于3的<div元素>的背景色为gray" id="btn08"/>
<input type="button" value="改变所有的标题元素背景色为purple" id="btn09"/>
<hr/>
<hr/>
<div id="one" class="myTag" style="background-color: darkgray; width: 300px;height: 300px;float: left">
    div id=one
</div>
<div id="two" class="myTag" style="background-color: darkgray; width: 300px;height: 300px;float: left">
    div id=two
    <div id="two01" class="yourTag" style="background-color: lightpink; width: 100px;height: 100px;">
        id two01
    </div>
    <div id="two02" class="yourTag" style="background-color: lightpink; width: 100px;height: 100px;">
        id two02
    </div>
</div>
<div id="three" class="myTag" style="background-color: darkgray; width: 300px;height: 300px;float: left">
    div id=three
    <div id="three01" class="yourTag" style="background-color: lightpink; width: 100px;height: 100px;">
        id three01
    </div>
</div>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
</body>
</html>

内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

种类 用法 返回值 说明
:contains(text) $("div:contains('John')") 集合元素 匹配包含给定文本的元素, 这个选择器比较有用, 当我们要选择的不是dom标签元素时, 它就派上用场了, 它的作用是查找被标签"围"起来的文本内容是否符合指定的内容的(子元素包含也算)
:empty $("td:empty") 集合元素 匹配所有不包含子元素或者文本的空元素
:has(selector) $("div:has( p)").addClass("test") 集合元素 匹配含有选择器所匹配的元素的元素. 给所有包含p元素的div标签加上class="test"
:parent $("td:parent") 集合元素 匹配包含子元素或者文本的元素, 注意: 这里是":parent", 不是".parent", 与":empty"含义相反
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容过滤选择器</title>
    <style>
        div {
            background-color: darkgray;
            width: 300px;
            height: 300px;
            float: left;
        }
        div > div {
            background-color: lightpink;
            width: 100px;
            height: 100px;
        }
    </style>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn01").click(
                function () {
                    //1.改变含有文本 'di' 的<div>元素的背景色为green
                    //子div含有文本'di', 父div也会被选中
                    $("div:contains('di')").css("background", "green");
                }
            );
            $("#btn02").click(
                function () {
                    //2.改变不包含子元素或文本的<div>元素的背景色为red
                    $("div:empty").css("background", "red")
                }
            );
            $("#btn03").click(
                function () {
                    //这个写法是选择有class='yourTag'的div
                    $("div.yourTag").css("background", "yellow");
                    //3.改变含有class为yourTag元素的所有<div>元素的背景色为yellow
                    //这个写法是选择有class='yourTag'的div的父元素(div)
                    // $("div:has(.yourTag)").css("background", "yellow");
                }
            );
            $("#btn04").click(
                function () {
                    //4.改变含有子元素(或者文本元素)的所有<div>元素的背景色为brown
                    $("div:parent").css("background", "brown");
                }
            );
            $("#btn05").click(
                function () {
                    //5.改变不含有文本 'di' 的<div元素>的背景色为blue
                    $("div:not(:contains('di'))").css("background", "blue");
                }
            );


        })
    </script>
</head>
<body>
<input type="button" value="改变含有文本 'di' 的<div>元素的背景色为green" id="btn01"/>
<input type="button" value="改变不包含子元素或文本的<div>元素的背景色为red" id="btn02"/>
<input type="button" value="改变含有class为yourTag的所有<div>元素的背景色为yellow" id="btn03"/>
<input type="button" value="改变含有子元素(或者文本元素)的所有<div>元素的背景色为brown" id="btn04"/>
<input type="button" value="改变不含有文本 'di' 的<div元素>的背景色为blue" id="btn05"/>
<hr/>
<hr/>
<div id="one" class="myTag">
    <div id="one01" class="yourTag">
        div id=one01
    </div>
</div>
<div id="two" class="myTag">
    div id=two
    <div id="two01" class="yourTag">
        id two01
    </div>
    <div id="two02" class="yourTag">
        id two02
    </div>
</div>
<div id="three" class="myTag">
    div id=three
    <div id="three01" class="yourTag">
        id three01
    </div>
</div>
<div id="four" class="myTag">
    XXXXXXXXXXXX
</div>
<div id="five" class="myTag"></div>
<div id="mover" class="yourTag">
    执行动画
</div>
</body>
</html>

可见度过滤选择器

可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素

种类 用法 返回值 说明
:hidden $("input:hidden") 集合元素 匹配所有的不可见元素, input元素的type属性为"hidden"会被匹配到, css中display:none和input type="hidden"都会被匹配到
:visible $("tr:visible") 集合元素 匹配所有的可见元素
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可见度过滤选择器</title>
    <style>
        .visible {
            display: none;
        }
    </style>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn01").click(
                function () {
                    //1.改变所有可见的<div>元素的背景色为green
                    $("div:visible").css("background", "green");
                }
            );
            $("#btn02").click(
                function () {
                    //2.选取所有不可见的<div>元素, 利用jQuery中的show()方法将它们显示出来, 并设置背景色为red
                    $("div:hidden").css("background", "red");
                    $("div:hidden").show();
                }
            );
            $("#btn03").click(
                function () {
                    //1.先得到所有隐藏的input元素
                    //  $input是一个jquery对象, 而且是数组对象
                    var $inputs = $("input:hidden");
                    //2.遍历
                    //方式1 - for循环
                    for (var i = 0; i < $inputs.length; i++) {
                        //这里input就是一个dom对象
                        var input = $inputs[i];
                        alert("值是=" + input.value);
                    }
                    //方式2 - jquery each() 可以实现数组遍历
                    //说明:
                    //(1)each方法遍历时, 会将 $inputs数组的元素取出,
                    //  传给function() {} -> this
                    $inputs.each(function () {
                        //这里可以使用this获取每次遍历的对象
                        //this对象是一个dom对象
                        console.log("值(dom方式)是=" + this.value);
                        //也可以将this转成jquery对象, 使用jquery方法取值
                        console.log("值(jquery方式)是=" + $(this).val());

                    });
                }
            );
        })
    </script>
</head>
<body>
<input type="button" value="改变所有可见的<div>元素的背景色为green" id="btn01"/>
<input type="button" value="选取所有不可见的<div>元素, 利用jQuery中的show()方法将它们显示出来, 并设置背景色为red"
       id="btn02"/>
<input type="button" value="选取所有的文本隐藏域, 并打印它们的值" id="btn03"/>
<input type="button" value="改变含有子元素(或者文本元素)的所有<div>元素的背景色为brown" id="btn04"/>
<input type="button" value="改变不含有文本 'di' 的<div元素>的背景色为blue" id="btn05"/>
<hr/>
<input type="hidden" value="hidden1"/>
<input type="hidden" value="hidden2"/>
<input type="hidden" value="hidden3"/>
<input type="hidden" value="hidden4"/>
<hr/>
<div id="one" class="visible" style="background-color: darkgray; width: 300px;height: 300px;float: left">
    div id=one
</div>
<div id="two" class="visible" style="background-color: darkgray; width: 300px;height: 300px;float: left">
    div id=two
</div>
<div id="three" class="hidden" style="background-color: darkgray; width: 300px;height: 300px;float: left">
    div id=three
</div>
</body>
</html>
相关推荐
崔庆才丨静觅3 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60614 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了4 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅4 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅4 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅5 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment5 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅5 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊5 小时前
jwt介绍
前端
爱敲代码的小鱼5 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南