jQuery的选择器

小媛同学.，

于 2022-08-12 13:26:27 发布

阅读量231

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_61843988/article/details/126281455

版权

本文详细介绍了jQuery的选择器，包括其轻量级、强大选择器等特性，以及如何引入和使用jQuery。接着，文章深入讲解了基本选择器、层次选择器、属性选择器和过滤选择器的用法，通过实例展示各种选择器的功能，帮助读者掌握jQuery操作DOM元素的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是jQuery？

1、jQuery特点

轻量级:封装后的库只有不到100k，下载的时候很快

强大选择器:方便快速查找DOM元素

隐式遍历(迭代):一次操作多个元素
读写合一:读数据/写数据用的是一个函数
链式调用:可以通过.不断调用jQuery对象的方法事件处理
DOM操作(CUD)·样式操作
动画
浏览器兼容

丰富的插件支持

2、如何使用jQuery

引入jQuery文件
入口函数
功能实现

jQuery的入口函数：

<script>
    // $相当与jQuery
    // 第一种写法
    $(document).ready(function(){

    });
    // 第二种写法
    $().ready(function(){

    });
    // 第三种写法
    $(function(){
        // 编写功能代码实现
    });
</script>

jQuery入口函数与js入口函数的对比：

JavaScript的入口函数要等到页面中的所有资源（包括图片、文件）加载完成才开始执行。
jQuery的入口函数只会等待文档加载完成就开始执行，并不会等待图片，文件的加载

二、基本选择器的使用

1、基本选择器

名称	用法	描述
ID选择器	$("#id");	获取指定ID的元素
类选择器	$(".classname");	获取同一类class的元素
标签选择器	$("div");	获取同一类标签的所有元素
并集选择器	$("div,p,span");	使用逗号分隔，只要符合条件之一就可
交集选择器	$("div.list");	获取class为list的div元素

//jquery如何设置样式
//css(name，value)
//name:属性名 value:属性值 
//id选择器
$("#one").css("background", "brown");
//class选择器
$(".two").css("background" , "green");
//标签选择器
$("li").css("border" , "5px solid #fff");
//并集选择器
$ ("div,p").css("background" , "red");
//交集选择器
$("div.box" ).css("background" , "#orange");

案例效果图：

<style>
    .div_0{
        width: 100px;
        height: 100px;
        background-color: rgba(165, 42, 42, 0.813);
    }
</style>
<body>
    <input type="text" id="one">+
    <input type="text" id="two">=
    <input type="text" id="result" disabled>
    <input type="button" value="计算" class="btn">
    <hr>
    <input type="button" value="改变" id="btn"><br>
    <div class="div_0">这是一个div标签</div>
    <p class="div_0">这是一个p标签</p>
    <script>
        $(function(){
            // 两个数的计算
            // 绑定单击事件
            $('.btn').click(function(){
                // 实现加法运算
                // 先获取输入的两个数，val()：可以获取到标签的value值
                var first = $('#one').val()
                var second = $('#two').val()
                var result = parseInt(first)+parseInt(second)
                $('#result').val(result)
                // document.getElementById('result').value = result
            })

            // 改变
            $('#btn').click(function(){
                // 利用群组选择器更改div，p标签的文本颜色
                $('div,p').css('color','white')
                // 利用交集选择器更改p标签的背景颜色
                $('p.div_0').css('background-color','green')
            })
        })
    </script>
</body>

2、层次选择器

名称	用法	描述
子代选择器	$("ul>li");	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$("ul li");	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

三、属性选择器的使用

1、基本属性选择器

名称	用法	描述
[attribute]	$("input[checked]").attr('checked,false);	匹配包含给定属性的元素。常用于单选或复选的checked
[attribute=value]	$("input[name='username']").val();	匹配给定的属性是某个特定值的元素。常用于选择指定的input标签
[attribute!=value]	$("input[name!='box']").html();	匹配给定的属性是不包含某个特定值的元素
[attribute^=value]	$("div[class^='b']").css("background","red");	匹配给定的属性是以包含某些值的元素

案例效果图如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin-right: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            float: left;
        }
    </style>
</head>
<body>
    <button id="btn1">所有含class的标签</button>
    <button id="btn2">所有含class是box1的标签</button>
    <button id="btn3">所有class不是box1的标签</button>
    <button id="btn4">所有class以b开始的标签</button>
    <button id="btn5">所有class包含o的标签</button>
    <hr>
    <div>div标签</div>
    <div class="box1">box1</div>
    <div class="box1">box1</div>
    <div class="bex2">bex2</div>
    <div class="pox1">pox1</div>
    <div class="pox2">pox2</div>
    <script>
        $(function(){
            $('#btn1').click(function(){
                $("div[class]").css('background-color','red')
            })
            $('#btn2').click(function(){
                $("div[class='box1']").css('background-color','green')
            })
            $('#btn3').click(function(){
                $("div[class!='box1']").css('background-color','blue')
            })
            $('#btn4').click(function(){
                $("div[class^='b']").css('background-color','orange')
            })
            $('#btn5').click(function(){
                $("div[class*='o']").css('background-color','cadetblue')
            })
        })
    </script>
</body>
</html>

2、操作标签的属性

名称	用法	描述
标签属性方法	attr(name) / attr(name,value)	读/写非布尔值的标签属性
标签属性方法	prop(name) / prop(name,value)	读/写布尔值的标签属性
删除属性方法	removeAttr(name) / removeAttr(name,value)	删除指定名字的属性
自定义属性	data()，例：data("index","1") data-index	读写标签的附加数据（data-*属性）

案例效果图如下：

四、基本过滤选择器的使用

1、过滤选择器

名称	用法	描述
:eq(index)	$("li:eq(2)").css("color","red");	获取到的li元素中，选择索引值为2的元素，索引值index是从0开始
:odd	$("li:odd").css("color","red");	获取到的li元素中，选择索引值为奇数的元素
:even	$("li:even").css("color","red");	获取到的li元素中，选择索引值为偶数的元素
:first	$("li:first").css("background-color","red");	匹配找到的第一个元素
:last	$("li:last").css("background-color","red");	匹配找到的最后一个元素
:gt(index)	$("li:gt(3)").css("color","red");	匹配所有大于给定索引值的元素
:lt(index)	$("li:lt(2)").css("color","red");	匹配所有小于给定索引值的元素
:not(selector)	$("li:gt(3)：not(':last')").css("color","red");	去除所有与给定选择器匹配的元素

2、筛选选择器

名称	用法	描述
:contains()	$("td:contains('0')").css("color","red");	匹配包含给定文本的元素
:has(selector)	$("td:has('span')").css("color","red");	匹配包含选择器所匹配是元素的元素
:empty	$("td:empty").css("color","red");	匹配所有不包含子元素或者文本的空元素
:parent	$("td:parent").css("color","red");	匹配包含有子元素或文本的元素

3、筛选选择器(方法)

名称	用法	描述
children(selector)	$("ul").children("li");	相当于$("ul>li"),子类选择器
find(selector)	$("ul").find("li");	相当于$("ul li"),后代选择器
siblings()	$("ul").siblings("li");	查找兄弟节点，不包括自己本身
parent()	$("li").parent();	查找父亲
eq(index)	$("li").eq(2);	相当于$("li:eq(2)"),index从0开始
next()	$("li").next();	找下一个兄弟
prev()	$("li").prev();	找上一个兄弟