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>
相关推荐
寻找沙漠的人19 分钟前
前端知识补充—CSS
前端·css
GISer_Jing30 分钟前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_7482455232 分钟前
吉利前端、AI面试
前端·面试·职场和发展
理想不理想v44 分钟前
webpack最基础的配置
前端·webpack·node.js
pubuzhixing1 小时前
开源白板新方案：Plait 同时支持 Angular 和 React 啦！
前端·开源·github
2401_857600951 小时前
SSM 与 Vue 共筑电脑测评系统：精准洞察电脑世界
前端·javascript·vue.js
2401_857600951 小时前
数字时代的医疗挂号变革：SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL1 小时前
vue入门教程：组件透传 Attributes
前端·javascript·vue.js
小白学大数据1 小时前
如何使用Selenium处理JavaScript动态加载的内容？
大数据·javascript·爬虫·selenium·测试工具
2402_857583491 小时前
基于 SSM 框架的 Vue 电脑测评系统：照亮电脑品质之路
前端·javascript·vue.js
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04机器人编程怎么入门？05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07SQL 主从数据库实时备份08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10VSCode插件 —— Cody AI （免费AI助手！）