jquery选择器(2)

Li丶XiaoYao

已于 2023-05-28 22:49:15 修改

阅读量987

点赞数 3

分类专栏： jquery 文章标签： jquery javascript css

于 2023-05-24 20:36:29 首次发布

本文链接：https://blog.csdn.net/qq_45466959/article/details/130844105

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. jQuery选择器简介

在程序开发中，无论是操作DOM还是为元素添加事件，都需要先获取到指定元素。为此，jQuery提供了选择器，通过选择器可以获取元素并对元素进行操作。

1.1 什么是jQuery选择器

通过css选器获取元素的方式是非常灵活的，但是css选择器获取元素后只能操作该元素的样式，要想为元素添加行为(如处理单击事件)，还需要通过 JavaScript代码来实现。为此，jQuery模仿css选择器实现了 jQuery选择器，通过 jQuery选择器来获取元素，不仅让获取元素的方式更加多样化，而且可以在获取元素后为元素添加行为。

语法：

$(selector)；

特性： 方式更加多样化，还可以为元素添加行为；

执行： 返回一个jQuery对象。

示例：

<div id="myDiv">我是一个Div</div>
    <script>
        $('#myDiv').css('border', '1px solid black');
    </script>

注意：

使用jQuery选择器获取元素后，由于返回的是jQuery对象，所以不仅能为元素添加样式，还支持为元素添加行为。例如，为元素绑定事件、操作元素属性等操作，此处只要了解jQuery选择器的使用即可。

1.2 jQuery选择器的优势

获取方式： 更加简洁，获取方式更多；

选择器： 支持从CSS1到CSS3及常用的选择器；

<script>
    //DOM和Jquery的对比
    //DOM
    document.getElementById('id的值')；//根据值获取元素
    document.getElemtntBtTagName('元素的名')；//根据元素的名称获取元素
    //jQuery
    $('#id的值');//根据id值获取元素
    $('元素的名称');//根据元素的名称获取元素
</script>

2. 基本选择器

jQuery中基本选择器是最简单直观的选择器，包括id选择器、类选择器、元素选择器和通配符选择器。

选择器	描述	返回值
#id	id选择器	单个元素
.class	类选择器	元素集合
element	元素选择器	元素集合
*	通配符选择器	元素集合
selector1,…	同时获取多个元素	元素集合

<style>
    div {
        border: 1px solid black;
    }
</style>
<body>
    <div id="byId">第一个id选择器</div>
    <p>第一个p元素</p>
    <p class="byClass">第一个class选择器</p>
    <div class="byClass">第二个class选择器</div>
    <script>
        //id选择器
        $('#byId').css('background', 'blue');
        //类选择器
        $('.byClass').css('background', 'yellow');
        //元素选择器
        $('p').css('color', 'blue');
        //通配符选择器
        $('*').css('border', '2px solid red');
        //获取多选择器
        $('p,#byId').css("font-weight", 'bold');
    </script>
</body>

在这里插入图片描述

注意：

虽然通配符选择器可匹配所有的元素，但会影响网页渲染的时间。因此，实际开发中应尽量避免使用通配符选择器。取而代之的是，在需要时，可在jQuery的$()中使用逗号，即可同时获取多个元素。

3. 层次选择器

层次选择器中的“层次”是指DOM元素的层次关系。

选择器	描述	返回值
parent>child	子元素选择器	元素集合
selector selector1	后代选择器	元素集合
pre+next	兄弟选择器	元素集合
pre~siblings	兄弟选择器	元素集合

<p>这是div前的p元素</p>
    <div id="dv">
        <p>这是div中的p元素</p>
        <ul>
            <li>这是第一个li元素</li>
            <li><p>这是第二个li元素中的p元素</p></li>
        </ul>
        <p>这是div中的第二个p元素</p>
    </div>
    <p>这是div后面的第一个p元素</p>
    <p>这是div后面的第二个p元素</p>
    <p>这是div后面的第三个p元素</p>
    <script>
        //子元素选择器
        $('#dv > p').css('color','blue');
        //后代选择器
        $('#dv p').css('font-weight','bold');
        //兄弟选择器（也称同辈选择器或同级选择器）
            //"+"获取元素下一个相邻的一个兄弟元素
        $('#dv+p').css('border','1px solid black');
            //"~"获取元素下一个相邻的所有兄弟元素
        $('#dv~p').css('text-decoration','underline wavy red');
    </script>

在这里插入图片描述

扩展：

（1） children()方法

在jQuery中，还可以使用children()方法代替子元素选择器，获取指定元素的子元素。

<script>
    $('#dv > p');//使用子元素选择器获取
    $('#dv').children('p');//使用children()方法获取
</script>

（2）find()方法

在jQuery中，还可以使用find ()方法获取指定元素的后代元素。

<script>
    $('#dv p');//使用后代选择器获取
    $('#dv').find('p');//使用find()方法获取
</script>

（3）next()、nextAll()、prev()、prevAll()和siblings()方法的使用

next()：可获取指定元素紧邻的下一个兄弟元素；
nextAll()：可获取指定元素后的所有兄弟元素；
prev()：可获取指定元素紧邻的上一个兄弟元素；
nextAll()：可获取指定元素前的所有兄弟元素；
siblings()：则可获取指定元素的所有兄弟元素。

<script>
    //next()方法与$('#dv + p')相似
    $('#dv + p');
    $('#dv').next('p');
    
    //nextAll()方法与$('#dv ~ -p')相似
    $('#dv ~p');
    $('#dv').nextAll('p');
    
    //prev()是与next()相反，获取指定元素相邻的前一个元素
    $('#dv').prev('p');
    
    //prevAll()是与nextAll()相反，获取指定元素前所有元素
    $('#dv').prevAll('p');
    
    //siblings()方法是相当于nextAll()和prevAll()的结合,获取指定元素的所有元素
</script>

（4）parent()方法

parent()：获取指定元素的父类

<div>
    <p class='app'></p>
</div>
<script>
    $('#app').parent();//获取到自己的父类div
</script>

4. 过滤选择器

过滤选择器： 为了快速筛选DOM元素，jQuery提供了一些过滤选择器。

使用方式： 类似于CSS选择器，以“:”开头，后用于指定规则；

例子： “:first”,用于获取第一个元素。

1.基本过滤选择器

基本过滤选择器： 过滤规则多数与元素的索引值有关。

选择器	描述	返回值
:first	获取第一个元素	单个元素
:last	获取最后一个元素	单个元素
:not(selector)	获取所有元素除了该选择器	元素集合
:even	获取所有为奇数的元素	元素集合
:odd	获取所有为偶数的元素	元素集合
:eq(index)	获取指定索引值的元素	单个元素
:gt(index)	获取所有大于索引值的元素	元素集合
:lt(index)	获取所有小于索引值的元素	元素集合
:header	获取标题类型的元素h1…	元素集合
:animated	获取执行动画效果的元素	元素集合

    <h1>12</h1>
    <h2>22</h2>
    <ul style="width: 200px;">
        <li>How</li>
        <li class="one">are</li>
        <li>you</li>
        <li>????</li>
    </ul>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <script>
        //索引值为偶数的li
        $('li:even').css('backgroundColor', 'pink');
        //索引值为奇数的li
        $('li:odd').css('backgroundColor', 'yellow');
        //索引除了.one元素
        $('li:not(.one)').css('border', '1px solid black');
        //索引第一个元素
        $('li:first').css('font-weight', 'bold');
        //索引最后一个元素
        $('li:last').css('text-decoration', 'underline wavy red')
        //获取指定索引元素开始
        $('p:eq(1)').css('backgroundColor', 'green');
        //获取大于索引2 元素开始
        $('p:gt(2)').css('font-weight', 'bold');
        //获取小于索引2 元素开始
        $('p:lt(2)').css('font-size', '24px');
        //获取所有标题元素
        $(':header').css('color', 'blue')
    </script>

在这里插入图片描述

2.可见性选择器

在网页开发中，具有动态效果的页面往往有很多元素被隐藏。举例： 折叠式菜单。

选择器	描述	返回值
:visible	获取所有的可见元素	元素集合
:hidden	获取所有的不可见元素	元素集合

:hidden选择器：

可以获取CSS样式为“display: none”。
属性“type=“hidden””的文本隐藏域。

:visible选择器： 获取所有可见元素。

<p id="div">显示文本1</p>
    <p id="vis">显示文本2</p>
    <input type="hidden" value="隐藏文本域">
    <script>
        //获取所有可见元素，并上颜色
        $(':visible').css('backgroundColor', 'yellow');
        //在控制台输出元素集合
        console.log($(':visible'));
</script>

在这里插入图片描述

:hidden选择器： 无法获取隐藏方式“visibility:hidden”的隐藏元素。

<p id="div">显示文本1</p>
    <p id="vis">显示文本2</p>
    <input type="hidden" value="隐藏文本域">
    <script>
        //获取显示的p元素，设置两种不同的隐藏方式
        $('#div:visible').css('display', 'none');
        $('#vis:visible').css('visibility', 'hidden');
        //获取隐藏的元素，在控制台输出元素集合
        console.log('隐藏的p元素：');
        console.log($('p:hidden'));
        console.log('隐藏域input:');
        console.log($('input:hidden'))
    </script>

在这里插入图片描述

注意：

Input隐藏域一般不会设置样式，但是如果为input隐藏域设置CSS样式为“visibility:hidden”,“:hidden”选择器同样可以获取到该元素。

3.内容过滤选择器

元素的内容是指它所包含的子元素或文本内容。

内容过滤选择器： 可根据元素的内容来获取元素。

选择器	描述	返回值
:contains(text)	获取包含给定文本的元素	元素集合
:empty	获取所有不包含子元素或空元素	元素集合
:has(selector)	获取含有选择器匹配的元素	元素集合
:parent	获取含有子元素或文本的元素	元素集合

<style>
    div {
        width: 300px;
        height: 30px;
        margin: 5px;
        border: 1px solid black;
    }
</style>

<body>
    <div>我是div元素的文本</div>
    <div>我也是div元素的文本</div>
    <div><span>我是div元素中span元素的文本</span></div>
    <div></div>
    <script>
        //获取文本中包含“也”字的元素
        $('div:contains(也)').css('backgroundColor', 'pink');
        //获取文本中包含子元素span的元素
        $('div:has(span)').css('backgroundColor', 'yellow');
        //获取没有元素内容的元素
        $('div:empty').css('backgroundColor', 'red');
        //获取内容不为空的元素
        $('div:parent').css('border', '4px double green');
    </script>
</body>

在这里插入图片描述

4.过滤选择器

属性选择器： 通过元素的属性来筛选元素。

使用方式： jQuery的属性过滤选择器将过滤规则包裹在“[]”中。

选择器	描述	返回值
[attribute]	获取包含给定属性的元素	元素集合
[attribute=value]	获取等于给定的属性是某个特定值的元素	元素集合
[attribute!=value]	获取不等于给定的属性是某个特定值的元素	元素集合
[attribute^=value]	获取给定的属性是以某些值开始的元素	元素集合
[attribute$=value]	获取给定的属性是以某些值结尾的元素	元素集合
[attribute*=value]	获取给定的属性是以包含某些值的元素	元素集合
[selector1][selectorN]	获取满足多个条件的复合属性的元素	元素集合

<style>
    div {
        width: 200px;
        margin: 5px;
        border: 1px solid black;
    }
</style>

<body>
    <div class="dv">class=dv</div>
    <div title="标题">title=标题</div>
    <div class="dv1" title="标题1">class=dv1 title=标题1</div>
    <div class="dv1" title="标题2">class=dv1 title=标题2</div>
    <script>
        //获取以d开头的元素
        $('[class^=d]').css('background', 'yellow');
        //获取class值为dv1且title值包含“2”的元素
        $('[class=dv1][title*=2]').css('border', '4px solid red');
        //获取以题结尾的元素
        $('[title$=题]').css('font-weight', 'bold');
    </script>
</body>

在这里插入图片描述

5.子元素过滤选择器

子元素过滤选择器： 通过父元素和子元素相应关系来获取相应元素。
优势：

同时获取不同父元素下满足条件的子元素。
与层次选择器中的子元素选择器相比拥有较灵活的过滤规则。

选择器	描述	返回值
:first-child	获取每个父元素下的第一个子元素	元素集合
:last-child	获取每个父元素下的最后一个子元素	元素集合
:only-child	获取每个仅有一个子元素的父元素下的子元素	元素集合
:nth-child(eq\|even\|odd\|index)	获取每个元素下的特定元素索引号从1开始	元素集合

	<ul>
        <li>北京</li>
        <li>上海</li>
    </ul>
    <ul>
        <li>广州</li>
        <li>深圳</li>
    </ul>
    <ul>
        <li>天津</li>
    </ul>
    <ul>
        <li>重庆</li>
    </ul>
    <script>
        //获取每一个ul列表的第一个li
        //:nth-child的参数索引值从1开始
        $('li:nth-child(1)').css('border', '1px solid black');
        //获取每一个ul列表中只有一个li
        $('li:only-child').css('background', 'yellow');
        //获取每一个ul列表的第一个li
        $('li:first-child').css('color', 'red');
        //获取每一个ul列表的最后一个li
        $('li:last-child').css('color', 'green');
    </script>

在这里插入图片描述

6.表单过滤选择器

表单过滤选择器： 可以在页面中快速定位表单中某个类型元素的集合。

选择器	描述	返回值
:input	获取表单中所有input\|textarea\|select\|button元素	元素集合
:text	获取表单中所有input[type=text]的元素	元素集合
:password	获取表单中所有input[type=password]的元素	元素集合
:radio	获取表单中所有input[type=radio]的元素	元素集合
:checkbox	获取表单中所有input[type=checkbox]的元素	元素集合
:submit	获取表单中所有input[type=submit]的元素	单个元素
:image	获取表单中所有input[type=image]的元素	元素集合
:reset	获取表单中所有input[type=reset]的元素	元素集合
:button	获取所有input[type=button]的元素和button元素	元素集合
:file	获取表单中所有input[type=file]的元素	元素集合

注意：

:button选择器：使用input[type=button]和button元素定义的按钮。
:image择器：使用input[type=image]定义的图像不包含img定义的图像。

<form id="myForm">
        名称：<input type="text" value="text"><br>
        密码：<input type="password" value="password"><br>
        性别：<input type="radio"><span>男</span>
        <input type="radio"><span>女</span><br>
        爱好：<input type="checkbox"><span>游泳</span>
        <input type="checkbox"><span>旅行</span><br>
        照片1：<img src="./10001.jpeg" height="200px"><br>
        照片2：<input type="image" src="./10001.jpeg" height="150px"><br>
        说明：<textarea></textarea><br>
        <input type="reset" value="重置">
        <input type="submit" value="提交">
        <button>清空</button>
        <input type="button" value="保存">
    </form>
    <script>
        //:button选择器：获取按钮然后调用hide()方法隐藏元素。
        $('#myForm :button').hide();
        //:image选择器：获取input[type=image]定义的图像然后隐藏图像。
        $('#myForm :image').hide();
        //:input选择器：获取包含input、textarea的所有控件然后隐藏匹配元素。
        $('#myForm :input').hide();
    </script>

在这里插入图片描述

7.表单对象属性过滤选择器

表单对象有一些专有属性用于表示表单的某种状态。

表单对象属性过滤选择器： 通过表单中的对象属特征获取该元素。

选择器	描述	返回值
:enable	获取表单中所有属性为可用的元素	元素集合
:disable	获取表单中所有属性为不可用的元素	元素集合
:checked	获取表单中所有被选中的元素	元素集合
:selected	获取表单中所有被选中option的元素	元素集合

<form id="myForm">
        名称：<input type="text" value="text"><br>
        密码：<input type="password" value="password"><br>
    <!--选中状态-->
        性别：<input type="radio" name="sex" value="male" checked="checked"><span>男</span>
        <input type="radio" name="sex" value="female"><span>女</span><br>
    <!--选中状态-->
        爱好：<input type="checkbox" checked="checked"><span>游泳</span>
        <input type="checkbox"><span>旅行</span><br>
        照片1：<img src="./10001.jpeg" height="200px"><br>
        照片2：<input type="image" src="./10001.jpeg" height="150px"><br>
        说明：<textarea></textarea><br>
        <input type="reset" value="重置">
        <input type="submit" value="提交">
        <button>清空</button>
        <input type="button" value="保存">
    </form>
    <script>
        //:checked选择器：选择器获取选中状态的元素然后隐藏。
        $('input:checked').hide();
    </script>

在这里插入图片描述

Li丶XiaoYao

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jquery选择器(2)

在程序开发中，无论是操作DOM还是为元素添加事件，都需要先获取到指定元素。为此，jQuery提供了选择器，通过选择器可以获取元素并对元素进行操作。通过css选器获取元素的方式是非常灵活的，但是css选择器获取元素后只能操作该元素的样式，要想为元素添加行为(如处理单击事件)，还需要通过 JavaScript代码来实现。为此，jQuery模仿css选择器实现了 jQuery选择器，通过 jQuery选择器来获取元素，不仅让获取元素的方式更加多样化，而且可以在获取元素后为元素添加行为。
复制链接

扫一扫