JQuery-基本过滤器详解

骑猪看日落 2022-11-29 11:30 87阅读 0赞

**目录**

基本过滤器

1、选择第一个 first, 保留数组中第一个DOM对象

2、选择最后个 last,保留数组中最后DOM对象

3、选择数组中指定对象

4、选择数组中小于指定索引的所有DOM对象

5、选择数组中大于指定索引的所有DOM对象

表单对象属性过滤器

1、选择可用的文本框

2、选择不可用的文本框

3、复选框选中的元素

4、选择指定下拉列表的被选中元素

--------------------

jQuery 对象中存储的 DOM **对象顺序与页面标签声明位置关系**

<div>1</div>   dom1

<div>2</div>   dom2

<div>3</div>   dom3

**$("div") = \[dom1,dom2,dom3\] **

**过滤器就是过滤条件**，对已经定位到数组中DOM 对象进行过滤筛选，**过滤条件不能独立出现在 jquery 函数**，如果使用**只能出现在选择器后方。**

## **基本过滤器 ** ##

### **       1、选择第一个 first, 保留数组中第一个DOM对象 ** ###

**语法：$(“选择器:first”) **

### **       2、选择最后个 last,保留数组中最后DOM对象 ** ###

**                     语法：$("选择器:last") **

### **       3、选择数组中指定对象 ** ###

**                             语法：$(“选择器:eq(数组索引)”) **

### **       4、选择数组中小于指定索引的所有DOM对象 ** ###

**                            语法：$(“选择器:lt(数组索引)”) **

### **       5、选择数组中大于指定索引的所有DOM对象 ** ###

**语法：$(“选择器:gt(数组索引)”) **

**案例：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
        <style>
            div {
                width: 200px;
                height: 100px;
                background: pink;
            }
        </style>
    </head>
    <body>
        <div>第1个div</div><br/>
        <div>第2个div</div><br/>
        <div>
            <div>第3个div</div>
            <div>第4个div</div>
        </div>
        <br/>
        <div>第5个div</div><br/>
        <div>第6个div</div><br/>
        <div>第7个div</div><br/>
        <input type="button" id="btn1" value="first选择">
        <input type="button" id="btn2" value="last选择">
        <input type="button" id="btn3" value="指定选择">
        <input type="button" id="btn4" value="小于选择">
        <input type="button" id="btn5" value="大于选择">
    </body>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("div:first").css("background","red");
            })
            $("#btn2").click(function(){
                $("div:last").css("background","orange");
            })
            $("#btn3").click(function(){
                $("div:eq(3)").css("background","yellow");
            })
            $("#btn4").click(function(){
                $("div:lt(2)").css("background","red");
            })
            $("#btn5").click(function(){
                $("div:gt(3)").css("background","red");
            })
        })
    </script>
    </html>

## **表单对象属性过滤器** ##

### **       1、选择可用的文本框 ** ###

**$(“:text:enabled”) **

### **       2、选择不可用的文本框** ###

**                       $(“:text:disabled”) **

### **       3、复选框选中的元素 ** ###

**                       $(“:checkbox:checked”) **

### **       4、选择指定下拉列表的被选中元素** ###

**                              选择器>option:selected **

**                      例如：$("\#id > option:selected")**

**案例：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
        姓名<input type="text" value="text1"/><br/>
        <input type="text" value="text2" disabled/><br/>
        爱好:
        <input type="checkbox" value="敲代码"/>敲代码<br/>
        <input type="checkbox" value="看书"/>看书<br/>
        <input type="checkbox" value="下棋"/>下棋<br/>
        下拉框:
        <select>
            <option value="java">Java语言</option>
            <option value="C++">C++语言</option>
            <option value="python">python语言</option>
        </select>
        功能按钮:
       <input type="button"  id="btn1" value="所有显示的text的值设为hhh">
       <input type="button" id="btn2" value="显示复选框选中的查看">
       <input type="button" id="btn3" value="下拉框的选中的查看">
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $(":text:enabled").val("hhh");
                })
                $("#btn2").click(function(){
                    var obj = $(":checkbox:checked");
                    for(var i=0;i<obj.length;i++){
                        alert(obj[i].value);
                    }
                })
                $("#btn3").click(function(){
                    alert($("select > option:selected").text());
                })
            })
        </script>
    </body>
    </html>