jQuery 选择器 | 各种选择器合集 | 你值得拥有

最新推荐文章于 2024-01-31 00:15:00 发布

lesileqin

最新推荐文章于 2024-01-31 00:15:00 发布

阅读量5.3k

点赞数 6

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lesileqin/article/details/104037052

版权

JavaScript 专栏收录该内容

16 篇文章 7 订阅

订阅专栏

来既然都来了，那么：

在这里插入图片描述

文章目录

一、概述
二、工厂函数
三、基本选择器
四、层级选择器
五、过滤选择器
六、属性选择器
七、表单选择器

一、概述

jQuery是一套很优秀的JavaScript脚本库，简化了JS代码，提高了开发效率与质量。

开发人员在实现页面的业务逻辑时，必须操作相应的对象或数组，这时就需要利用选择器选择匹配元素，以便进行下一步操作，所以说选择器是基础中的基础，重中之重。

jQuery选择器获取的每个对象都将以jQuery包装集的形式返回。

二、工厂函数

工厂函数$，无论使用哪种类型的选择器都需要从一个$符号和一堆()开始，在()中通常使用字符串参数，参数中可以包含任何CSS选择符表达式，下面是几种比较常见的用法：

在参数中使用标记名：&("div")用于获取文档中全部的<div>
在参数中使用ID：$("#username")用于获取文档中ID属性为username的一个元素
在参数值使用CSS类名：$(".btn_grey")用于获取文档中使用CSS类名为btn_grey的所有元素

三、基本选择器

1、ID选择器

利用DOM元素的id属性值来筛选匹配的元素，并以jQuery包装集的形式返回给对象。使用方法：

$("#id")

如果.html中出现了两个相同的id属性值，程序运行时就会报出JS运行错误的对话框，所以id属性值要确保在页面中唯一

例子：获取文本框中输入的值

效果如下：
在这里插入图片描述
步骤1：引入jQuery库，只需要在<head>标记下用下面的语句就好了：

<script type="text/javascript" src="JS/jquery-3.4.1.min.js"></script>

步骤2：添加一个id为demo的Text文本框和一个按钮：

<input type="text" id="demo" value=""/>
<input type="button" value="输入的值为">

步骤3：编写jQuery代码，实现单击按钮来获取在文本框中输入的值

<script>
    $(document).ready(function () {         //在DOM加载完毕启用
        $("input[type='button']").click(function () {       //绑定单击事件
            var Txt = $(demo).val();        
            alert(Txt);
        });
    });
</script>

完成！

2、元素选择器

根据元素名称匹配相应的元素，它指向的时DOM元素的标记名，根据元素标记名选择 ，语法如下：

$("element");

其中elment是要查询的标记名。多数情况下，元素选择器匹配的是一组元素，需要通过所引起来确定要选取哪个元素，可以使用eq()和get()来获取

例子：修改div元素的内容

效果如下:
在这里插入图片描述
步骤1：引入jQuery库

步骤2：写html代码，分别定义两个<div>标签，给两张照片，还有一个按钮。

步骤3：写JS代码：

<script>
    $(document).ready(function () {
        $("input[type='button']").click(function () {
            $("div").eq(0).html("<img src='images/strawberry1.jpg'>这里长出了一片草莓");
            $("div").get(1).innerHTML="<img src='images/fish1.jpg'>这里的🐟没有了";
        });
    });
</script>

完成！

关于eq和get的区别请点击我！

3、类名选择器

通过元素拥有的CSS类的名称查找匹配的DOM元素。类名选择器的使用方法是这样的：

$(".class");

例子：获取元素并设置CSS样式

效果如下：
在这里插入图片描述
步骤1：写CSS代码，为div设置更多的配置默认的样式：

    div{
        border: 1px solid #003a75;
        background-color: #cef;
        margin: 5px;
        height: 35px;
        width: 75px;
        float: left;
        font-size: 12px;
        padding: 5px;
    }

步骤2：写入两个div标签其中一个带有一个CSS类：

<div class="myclass">看我的样式</div>
<div>默认的</div>

步骤3：写JS代码，用类名选择器选择类所在的DOM元素，然后更改它的背景颜色和文字颜色：

$(document).ready(function () {
    var myClass = $(".myclass");
    myClass.css("background-color","#C50210");  //背景颜色
    myClass.css("color","#FFF");                //文字颜色
});

完成！

4、复合选择器

符合选择器是将多个选择器组合在一起，多个选择器可以是不同类型的，每个选择器中间用逗号，分隔，只要符合其中一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集，然后利用jQuery索引器获取集合中的jQuery对象。

复合选择器的使用方法如下：

$(" selector1,selector2,selectorN");

例子：筛选元素并添加新的样式

效果如下：
在这里插入图片描述
步骤1：在html文档中加入标签p、div、span并且为他们加上一个css样式，还有一个button

html代码：

<p class="default">p元素</p>
<div class="default">div元素</div>
<span class="default" id="span">ID为span元素</span>
<br>
<input type="button" value="为div元素和ID为span的元素换肤">

css代码：

        .default{
            background-color:#33FFFF;
            border: 1px solid black;
            width: 150px;
            height: 25px;
            float: left;
            margin: 5px;
            padding: 5px;
        }

步骤2：加上要改变的css样式：

        .change{
            background-color: #3be288;
            color: #FFF;
        }

步骤3：用jQuery复合选择器同时选中div标签和id为span的标签，然后更改它的样式：

$(document).ready(function () {
    $("input[type='button']").click(function () {
        $("div,#span").addClass("change");
    });
});

完成！

5、通配符选择器

通配符就是指符号*，代表着页面上每一个元素，如果使用通配符$("*")将获取页面上所有的DOM元素集合返回的jQuery包装集。

四、层级选择器

层级选择器就是根据DOM元素之间的父子关系作为匹配的筛选条件。

什么是DOM之间的父子关系请点击我！！！

1、ancestor descendant选择器

ancestor descendant选择器中的ancestor代表祖先，descendant代表子孙，用这个选择器可以在给定的祖先元素下匹配所有的后代元素，语法格式如下：

$("ancestor descendant")

其中ancestor指任何有效的选择器，descendant是用以匹配元素的选择器，它必须是ancestor的后代。

如果要匹配ul元素下全部的li元素，可以这样写：

$("ul li")

例子：为版权列设置样式

效果预览：
在这里插入图片描述
可以看得出加了css样式和没有加样式的区别…………

步骤1：首先引入jQuery库，然后在<body>标签下面添加一个<div>标签里面添加一个<ul>列表用来显示东西，在</div>标签之后再添加一个<ul>做对比。

<div id="bottom">
<ul>
    <li>博主邮箱：1722249371@qq.com</li>
    <li>Copyright &copy; https://blog.csdn.net/lesileqin All Rights Reserved!</li>
</ul>
</div>
    <ul>
        <li>博主邮箱：1722249371@qq.com</li>
        <li>Copyright &copy; https://blog.csdn.net/lesileqin All Rights Reserved!</li>
    </ul>

步骤2：设置CSS样式，并添加一个类选择符，用于设置<div>标签内的版权列表样式：

    <style type="text/css">
        body{
            margin: 0px;
        }
        #bottom{
            background-image: url("images/bg_bottom.jpg");
            width: 800px;
            height: 58px;
            clear: both;
            text-align: center;
            padding-top: 10px;
            font-size: 12px;
        }
        .copyright{
            color: #FFFFFF;
            list-style: none;
            line-height: 20px;
        }
    </style>

步骤3：添加jQuery代码：

$(document).ready(function () {
    $("div ul").addClass("copyright");
});

完成！

2、parent > child选择器

parent > child选择器中的parent代表父元素，child代表子元素。使用这个选择器只能选择父元素直接的子元素，语法格式如下：

$("parent > child")

例子：为表单元素换肤

效果如下:
在这里插入图片描述
步骤1：添加诸多标签，然后给他们怼一个样式

html代码：

<form id="form1" name="form1" method="post" action="">
    姓&nbsp;&nbsp;名：<input type="text" name="name" id="name"><br>
    籍&nbsp;&nbsp;贯：<input type="text" name="native" id="native"><br>
    生&nbsp;&nbsp;日：<input type="text" name="brithday" id="birthday"><br>
    E-mail：<input type="text" name="email" id="email"><br>
    <span>
        <input type="button" name="change" id="change" value="换肤">
    </span>
    <input type="button" name="default" id="default" value="恢复默认">
</form>

css代码：

    <style type="text/css">
        input{
            margin: 5px;    /*设置外边距为5像素*/
        }
        .input{
            font-size: 12pt;
            color: #333333;
            background-color: #cef;
            border: 1px solid #000000;
        }
    </style>

步骤2：引用jQuery库，然后编写响应两个button单击的函数：

$(document).ready(function () {
    $("#change").click(function () {
        $("form > input").addClass("input");
    });
    $("#default").click(function () {
        $("form > input").removeClass("input");
    });
});

完成！

为什么点击换肤之后，换肤该按钮没有变效果？

因为他不是<form>标签的子元素。

3、prev + next选择器

prev + next选择器用于匹配所有紧接在prev元素后的next元素，这两个元素必须是相同级别的元素，语法格式如下：

$("prev + next")

例子：改变匹配元素的背景颜色

效果如下：
在这里插入图片描述
步骤1：添加标签，然后设置css样式：

html代码：

<div>
    <label>第一个label</label>
    <p>第一个p</p>
    <fieldset>
        <label>第一个label</label>
        <p>第一个p</p>
    </fieldset>
</div>
<p>div外面的p</p>

css代码：

        body{
            font-size: 16px;
        }
        .background{
            background-color: #cef;
        }

步骤2：引入jQuery库，匹配lable之后的同级元素p，并为他们添加CSS类：

$(document).ready(function () {
    $("label+p").addClass("background");
});

完成！

4、prev ~ siblings选择器

prev ~ siblings选择器用于匹配prev之后的所有元素，两个必须是同级的元素，语法格式如下：

$("prev ~ siblings")

例如，要匹配div元素的同辈元素ul，可以这样写：

$("div ~ ul")

五、过滤选择器

1、简单过滤器

简单过滤器是指以冒号开头，通常用于实现简单过滤效果的过滤器。

jQuery提供的简单过滤器如下表所示：

过滤器	说明	示例
`:first`	匹配找到的第一个元素，它是与选择器结合使用的	`$("tr:first")` //匹配表格的第一行
`:last`	匹配找到的最后一个元素，它是与选择器结合使用的	`$(tr:last)` //匹配表格的最后一行
`:even`	匹配所有索引值为偶数的元素，从0开始计数	`$(tr:even)` //匹配索引值为偶数的行
`:odd`	匹配所有索引值为奇数的元素，从0开始计数	`$(tr:odd)` //匹配索引值为奇数的行
`:eq(index)`	匹配一个给定索引值的元素	`$(div:eq(1))` //匹配第二个div元素
`gt(index)`	匹配所有大于给定索引值的元素	`$(div:gt(0))` //匹配第二个及以上的div元素
`lt(index)`	匹配所有小于给定索引值的元素	`$(div:lt(2))` //匹配第二个及以下的div元素
`:header`	匹配如h1、h2之类的标题元素	`$(:header)` //匹配全部的标题元素
`:not(selctor)`	去除所有与给定选择器匹配的元素	`$(input:not(:checked))` //匹配没有没选中的input元素
`:animated`	匹配所有正在执行动画效果的元素	`$(:animated)` //匹配所有正在执行动画效果的元素

例子：实现一个带表头的双色表格

效果如下:
在这里插入图片描述
步骤1：编写html代码，加入一个表格，然后添加CSS样式

html代码省略

css代码如下：

<style type="text/css">
    td{
        font-size: 12px;
        padding:3px;
    }
    .th{
        background-color: #B6DF48;
        font-weight: bold;
        text-align: center;
    }
    .even{
        background-color: #e8f3d1;
    }
    .odd{
        background-color: #F9FCEF;
    }
</style>

步骤2：引入jQuery库，然后利用过滤选择器中的偶数选择器为偶数行添加css类，等等

$(document).ready(function () {
    $("tr:even").addClass("even");
    $("tr:odd").addClass("odd");
    $("tr:first").removeClass("even");
    $("tr:first").addClass("th");
});

2、内容过滤器

内容过滤就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选，下表展示了jQuery的内容过滤器：

过滤器	说明	示例
`:contains(text)`	匹配包含给定文本的元素	`$("li:contains('DOM')")` //匹配含有“DOM”文本内容的li元素
`:empty`	匹配所有不包含子元素或者文本的空元素	`$("td:empty")` //匹配不包含子元素或者文本的单元格
`has(selector)`	匹配含有选择器所匹配的元素	`$("td:has(p)")` //匹配含有`<p>`标记的单元格
`:parent`	匹配含有子元素或者文本的元素	`$("td:parent")` //匹配含有子元素或者文本的单元格

例子：应用内容过滤器匹配不同的单元格

效果如下：
在这里插入图片描述
步骤1：添加上一个例子的表格

步骤2：引入jQuery库，然后编写jQuery代码，代码包含注释：

$(document).ready(function () {
    //匹配不为空的单元格设置背景颜色
    $("td:parent").css("background-color","#e8f3d1");
    //为空的单元格添加默认内容
    $("td:empty").html("暂无内容");
    //将含有wzq的单元格的文字设置为红色
    $("td:contains('wzq')").css("color","red");
});

3、可见性过滤器

元素的可见状态有两种：隐藏状态和显示状态。

可见性过滤器就是利用元素的可见状态匹配元素，所以可见性过滤器有两种：

:visable：可见元素
:hidden：不可见元素

4、表单对象的属性过滤器

表单对象的属性过滤器就是通过表单元素的状态属性（例如选中、不可用等状态）匹配元素，下表展示了表单对象的属性过滤器：

过滤器	说明	示例
`:checked`	匹配所有被选中的元素	`$("input:checked")` //匹配checked属性为checked的input元素
`:disabled`	匹配所有不可用元素	`$("input:disabled")` //匹配disabled属性为disabled的input元素
`:enabled`	匹配所有可用元素	`$(input:enabled)` //匹配enabled属性为enabled的input元素
`:selectd`	匹配所有选中的option元素	`$("select option:selecttd")` //匹配select元素中被选中的option元素

例子：利用表单对象的属性过滤器匹配元素

效果如下：
在这里插入图片描述
步骤1：添加html标签，代码如下：

<form>
    复选框1：<input type="checkbox" checked="checked" value="复选框1">
    复选框2：<input type="checkbox" checked="checked" value="复选框2">
    复选框3：<input type="checkbox" value="复选框3"><br />
    不可用按钮：<input type="button" value="不可用按钮" disabled><br>
    下拉菜单：
    <select onchange="selectVal()">
        <option value="菜单项1">菜单项1</option>
        <option value="菜单项2">菜单项2</option>
        <option value="菜单项3">菜单项3</option>
    </select>
</form>

步骤2：引入jQuery库，然后利用表单对象的属性过滤器来操作页面：

$(document).ready(function () {
    $("input:checked").css("display","none");   //隐藏选中复选框
    $("input:disabled").val("我是不可用的");
});
function selectVal() {
    alert($("select option:selected").val());
}

完成！

5、子元素选择器

筛选给定某个元素的子元素，具体的过滤条件由选择器的种类而定。下表是jQuery提供的子元素选择器：

过滤器	说明	示例
`:first-child`	匹配所有给定元素的第一个子元素	`$(ul li:first-child)` //匹配ul元素中的第一个子元素li
`:last-child`	匹配所有给定元素的最后一个元素	`$("ul li:last-child")` //匹配ul元素中的最后一个子元素li
`:only-child`	匹配元素中的唯一子元素	`$("ul li:only-child")` //匹配只含有一个li元素中的li
`:nth-child(index/even/odd/equation)`	匹配父元素下的第N个儿子或奇偶元素，`index从1开始`	`$("ul li:nth-child(even)")` //匹配ul中索引值为偶数的li元素

六、属性选择器

通过元素的属性为过滤条件进行筛选，下表展示了jQuery的属性选择器：

选择器	说明	示例
`[attribute]`	匹配包含给定属性的元素	`$("div[name]")` //匹配只含有name属性的div元素
`[attribute=value]`	匹配给定的属性是某个特定值的元素	`$("div[name='test']")` //匹配name属性是test的div元素
`[attribute!=value]`	匹配所有含有指定的属性，但属性不等于特定值的元素	`$("div[name!='test']")` //匹配name属性不是test的div元素
`[attribute*=value]`	匹配给定的属性是包含某些值的元素	`$("div[name*='test']")` //匹配name属性值中含有test的元素
`[attribute^=value]`	匹配给定的属性是以某些值开始的元素	`$("div[name^='test']")` //匹配name属性以test开头的div元素
`[attribute$=value]`	匹配给定属性以某些值结尾的元素	`$("div[name$='test']")` //匹配name属性以test结尾的div元素
`[selector1]` `[selector2]` `[selectorN]`	复合属性选择器，需要同时满足多个条件时使用	`$("div[id][name^='test']")` //匹配具有id属性并且name属性是以test开头的div元素

七、表单选择器

表单选择器是匹配经常在表单中出现的元素，但是匹配的元素不一定在表单中，下表展示了一些表单选择器：

选择器	说明	示例
`:input`	匹配所有input元素	`$("form :input")` //匹配`form`标记中所有input元素，`注意：在form和:之间有一个空格`
`:button`	匹配所有普通按钮	`$(":button")`
`:checkbox`	匹配所有复选框	`$("":checkbox")`
`:file`	匹配所有文件域	`$(":file")`
`:hidden`	匹配所有不可见元素，或者type为hidden的元素	`$(":hidden")`
`:image`	匹配所有图像域	`$(":image")`
`:password`	匹配所有密码域	`$(":password")`
`:radio`	匹配所有单选按钮	`$(":radio")`
`:reset`	匹配所有的重置按钮，即type="reset"的input元素	`$(":reset")`
`:submit`	匹配所有提交按钮，即type="submit"的input元素	`$(":submit")`
`:text`	匹配所有的单行文本框	`$(":text")`