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

文章目录

JQuery全部过滤选择器详细介绍-上
- 基础过滤选择器
- - ● 基础过滤选择器介绍
  - ● 基础过滤选择器-应用实例
  - 代码演示
- 内容过滤选择器
- - ● 内容过滤选择器应用实例
  - 代码演示
- 可见度过滤选择器
- - ● 可见度过滤选择器-应用实例
  - 代码演示

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(固定写法) 返回值集合元素

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

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

改变第一个 div 元素的背景色为 #0000FF
改变最后一个 div 元素的背景色为 #0000FF
改变 class 不为 one 的所有 div 元素的背景色为 #0000FF
改变索引值为偶数的 div 元素的背景色为 #0000FF
改变索引值为奇数的 div 元素的背景色为 #0000FF
改变索引值为大于 3 的 div 元素的背景色为 #0000FF
改变索引值为等于 3 的 div 元素的背景色为 #0000FF
改变索引值为小于 3 的 div 元素的背景色为 #0000FF
改变所有的标题元素的背景色为 #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>