AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JQuery全部过滤选择器详细介绍上

2023-08-08 82
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JQuery全部过滤选择器详细介绍上

基础过滤选择器

● 基础过滤选择器介绍

1、:first 用法: $(“tr:first”) ; 返回值 单个元素的组成的集合

说明: 匹配找到的第一个元素

2、:last 用法: $(“tr:last”) 返回值 集合元素

说明: 匹配找到的最后一个元素.与 :first 相对应.

3、:not(selector)用法: $(“input:not(:checked)”)返回值 集合元素

说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的

input(当 input 的 type=“checkbox”).

4、:even 用法: $(“tr:even”) 返回值 集合元素

说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js 的数组都是从 0 开始计数的.

例如 要选择 table 中的行,因为是从 0 开始计数,所以 table 中的第一个 tr 就为偶数 0.

5、: odd 用法: $(“tr:odd”) 返回值 集合元素

说明: 匹配所有索引值为奇数的元素,和:even 对应,从 0 开始计数.

6、:eq(index)用法: $(“tr:eq(0)”) 返回值 集合元素

说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个 tr 元素.括号里面的是索引值,不是元素排列数.

7、:gt(index)用法: $(“tr:gt(0)”) 返回值 集合元素

说明: 匹配所有大于给定索引值的元素.

8、:lt(index)用法: $(“tr:lt(2)”) 返回值 集合元素

说明: 匹配所有小于给定索引值的元素.

9、:header(固定写法)用法: $(“:header”).css(“background”, “#EEE”) 返回值 集合元素

说明: 匹配如 h1, h2, h3 之类的标题元素.这个是专门用来获取 h1,h2 这样的标题元素.

10、:animated(固定写法) 返回值 集合元素

说明: 匹配所有正在执行动画效果的元素

● 基础过滤选择器-应用实例

  1. 改变第一个 div 元素的背景色为 #0000FF
  2. 改变最后一个 div 元素的背景色为 #0000FF
  3. 改变 class 不为 one 的所有 div 元素的背景色为 #0000FF
  4. 改变索引值为偶数的 div 元素的背景色为 #0000FF
  5. 改变索引值为奇数的 div 元素的背景色为 #0000FF
  6. 改变索引值为大于 3 的 div 元素的背景色为 #0000FF
  7. 改变索引值为等于 3 的 div 元素的背景色为 #0000FF
  8. 改变索引值为小于 3 的 div 元素的背景色为 #0000FF
  9. 改变所有的标题元素的背景色为 #0000F

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础过滤选择器-应用实例</title>
    <style type="text/css">
        div,span{
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float:left;
            font-size: 17px;
            font-family:Roman;
        }
        div.mini{
            width: 80px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family:Roman;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function (){
            //*****改变第一个 div 元素的背景色为 #0000FF
            $("#b1").click(
                function (){
                    // $("div:first").css("background", "#0000FF");
                    $("div:eq(0)").css("background", "#00FF00");
                }
            )
            //*****改变最后一个 div 元素的背景色为 #0000FF
            //可以理解成 基础过滤器就是写 简单select
            $("#b2").click(
                function (){
                    $("div:last").css("background", "#0000FF");
                }
            )
            //***改变class不为 one 的所有 div 元素的背景色为 #0000FF
            $("#b3").click(
                function (){
                    $("div:not(.one)").css("background", "#0000FF");
                }
            )
            //********改变索引值为偶数的 div 元素的背景色为 #0000FF
            $("#b4").click(
                function (){
                    $("div:even").css("background", "#0000FF");
                }
            )
            //********改变索引值为奇数的 div 元素的背景色为 #0000FF
            $("#b5").click(
                function (){
                    $("div:odd").css("background", "#0000FF");
                }
            )
            //*****改变索引值为大于 3 的 div 元素的背景色为 #0000FF
            $("#b6").click(
                function (){
                    $("div:gt(3)").css("background", "#0000FF");
                }
            )
            //改变索引值为等于 3 的 div 元素的背景色为 #0000FF
            $("#b7").click(
                function (){
                    $("div:eq(3)").css("background", "#0000FF");
                }
            )
            //**改变索引值为小于 3 的 div 元素的背景色为 #0000FF
            $("#b8").click(
                function (){
                    $("div:lt(3)").css("background", "#0000FF");
                }
            )
            //****改变所有的标题元素的背景色为 #0000FF
            $("#b9").click(
                function (){
                    $(":header").css("background", "#0000FF");
                }
            )
        });
    </script>
</head>
<body>
<h1>H1标题</h1>
<h2>H2标题</h2>
<h3>H3标题</h3>
<input type="button" value="改变第一个 div 元素的背景色为 #0000FF" id="b1"/>
<input type="button" value="改变最后一个 div 元素的背景色为 #0000FF" id="b2"/>
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF" id="b4"/>
<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF" id="b5"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b6"/>
<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF" id="b7"/>
<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF" id="b8"/>
<input type="button" value=" 改变所有的标题元素的背景色为 #0000FF" id="b9"/>
<hr/>
<div id="one" class="mini">
    div id为one
</div>
<div id="two">
    div id为two
    <div id="two01">
        id two01
    </div>
    <div id="two02">
        id two02
    </div>
</div>
<div id="three" class="one">
    div id为three class one
    <div id="three01">
        id three01
    </div>
</div>
</body>
</html>

内容过滤选择器

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

1、:contains(text) 用法: $(“div:contains(‘John’)”) 返回值 集合元素

说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是 dom 标签元素时,它就派上了用场了,它的作用是查找被标签"围"起来的文本内容是否符合指定的内容的.

2、:empty 用法: $(“td:empty”) 返回值 集合元素

说明: 匹配所有不包含子元素或者文本的空元素

3、:has(selector)

用法: $(“div:has§”).addClass(“test”) 返回值 集合元素

说明: 匹配含有选择器所匹配的元素的元素.看了使用的例子就完全清楚了:给所有包含 p 元素的 div 标签加上 class=“test”.

4、:parent 用法: $(“td:parent”) 返回值 集合元素

说明: 匹配含有子元素或者文本的元素.注意:这里是":parent",可不是".parent", 与上面讲的":empty"形成反义词.

● 内容过滤选择器应用实例

1.改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF

2.改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 #0000FF

3.改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF

4.改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF

5.改变不含有文本 di; 的 div 元素的背景色

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容过滤选择器应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        div.mini {
            width: 80px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //********改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF
            $("#b1").click(
                function () {
                    $("div:contains('di')").css("background", "#0000FF")
                }
            )
            //**************改变不包含子元素(或者文本元素) 的 div 的背景色为 pink
            $("#b2").click(
                function () {
                    $("div:empty").css("background", "pink")
                }
            )
            //******改变含有 class 为 mini 元素的 div 元素的背景色为 green
            $("#b3").click(
                function () {
                    //这个写法是选择 有 class='.mini' 的div的父元素(div)
                    $("div:has('.mini')").css("background", "pink")
                    //这个是选择有 class='.mini' div
                    //$("div.mini").css("background", "pink");
                }
            )
            //****改变含有子元素(或者文本元素)的div元素的背景色为 yellow
            $("#b4").click(
                function () {
                    $("div:parent").css("background", "yellow")
                }
            )
            //****改变索引值为大于 3 的 div 元素的背景色为 #0000FF
            $("#b5").click(
                function () {
                    $("div:gt(3)").css("background", "#0000FF")
                }
            )
            //***改变不含有文本 di; 的 div 元素的背景色 pink
            //不要求，小伙伴记住, 但是需要可以看懂.
            $("#b6").click(
                function () {
                    $("div:not(:contains('di'))").css("background", "pink")
                }
            )
        });
    </script>
</head>
<body>
<input type="button" value="改变含有文本 ‘di’ 的 div 元素的背景色为 black" id="b1"/>
<input type="button" value="改变不包含子元素(或者文本元素) 的 div 的背景色为 pink" id="b2"/>
<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 green" id="b3"/>
<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 yellow" id="b4"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b5"/>
<input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色 pink" id="b6"/>
<hr/>
<div id="xxxx">
    <div id="one" class="mini">
        div id为one
    </div>
</div>
<div id="two">
    div id为two
    <div id="two01">
        id two01
    </div>
    <div id="two02">
        id two02
    </div>
</div>
<div id="three" class="one">
    div id为three class one
    <div id="three01">
        id three01
    </div>
</div>
<div id="four" class="one">
    XXXXXXXXXX
</div>
<div id="five" class="one"></div>
<div id="mover">
    执行动画
</div>
</body>
</html>

可见度过滤选择器

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

1、:hidden 用法: $(“tr:hidden”) 返回值 集合元素

说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是 css 中 display:none 和 input type="hidden"的都会被匹配到

2、:visible 用法: $(“tr:visible”) 返回值 集合元素

说明: 匹配所有的可见元素.

● 可见度过滤选择器-应用实例

1.改变所有可见的div元素的背景色为 #0000FF

2.选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF

3.选取所有的文本隐藏域, 并打印它们的值

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可见度过滤选择器-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        div.mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
        div.visible {
            display: none;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //*****改变所有可见的div元素的背景色为 #0000FF
            $("#b1").click(
                function () {
                    $("div:visible").css("background", "red");
                }
            )
            //**选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF
            $("#b2").click(
                function () {
                    $("div:hidden").css("background", "green");
                    $("div:hidden").show();
                }
            )
            //**选取所有的文本隐藏域, 并打印它们的值
            $("#b3").click(
                function () {
                    //1. 先得到所有的hidden 元素
                    //2. $inputs 是一个jquery对象，而且是数组对象
                    var $inputs = $("input:hidden");
                    //alert("length= " + $inputs.length)
                    //3. 遍历
                    //方式1 - for
                    // for (var i = 0; i < $inputs.length; i++) {
                    //     //这里input 就是一个dom对象
                    //     var input = $inputs[i];
                    //     console.log("值是= " + 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元素的背景色为 #0000FF" id="b1"/> <br/><br/>
<input type="button" value="选取所有不可见的div, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF" id="b2"/> <br/><br/>
<input type="button" value="选取所有的文本隐藏域, 并打印它们的值" id="b3"/> <br/><br/>
<hr/>
<input type="hidden" value="hidden1"/>
<input type="hidden" value="hidden2"/>
<input type="hidden" value="hidden3"/>
<input type="hidden" value="hidden4"/>
<div id="one" class="visible">
    div id为one
</div>
<div id="two" class="visible">
    div id为two
</div>
<div id="three" class="one">
    div id为three
</div>
</body>
</html>


文章标签：
JavaScript
前端开发
索引
关键词：
jQuery选择器
尘觉
目录
相关文章
N..
|
7月前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
46 1
Li370234940
|
2月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
Li370234940
30 2
听白
|
3月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
听白
40 5
游客ogeeqvh5vfa5q
|
2月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器用于操作 HTML 元素，支持基于 id、类、类型、属性等条件选择元素。它扩展了 CSS 选择器的功能，并使用 $() 符号。例如，$(&quot;p&quot;) 选取所有段落元素，而 $(&quot;button&quot;).click(function(){ $(&quot;p&quot;).hide(); }) 实现点击按钮后隐藏所有段落。
游客ogeeqvh5vfa5q
25 0
听白
|
6月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
听白
35 0
好奇的菜鸟
|
6月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
好奇的菜鸟
32 0
杀死一只知更鸟debug
|
3月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法，选择器，事件及hide（），show()， toggle()
本文是关于jQuery的学习笔记，涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
杀死一只知更鸟debug
34 0
jQuery学习记录--jQuery语法，选择器，事件及hide（），show()， toggle()
听白
|
3月前
|
JavaScript
jQuery 选择器
jQuery 选择器
听白
25 3
听白
|
3月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
听白
30 1
乐多_L
|
4月前
|
JavaScript 索引
jQuery的选择器有几种？
jQuery的选择器有几种？
乐多_L
36 1