jQuery学习(二) --------- 选择器与过滤器

最新推荐文章于 2024-01-14 11:54:30 发布

在森林中麋了鹿

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量568

点赞数

分类专栏：前端基础文章标签： java jquery

本文链接：https://blog.csdn.net/m0_51111980/article/details/121430734

版权

前端基础专栏收录该内容

23 篇文章 2 订阅

订阅专栏

一、选择器

选择器，就是定位条件(定位DOM对象的字符串)，通知jQuery函数定位满足条件的 DOM 对象。

1. 基本选择器

id 选择器
通过dom对象的id定位dom对象的。通过id找对象，id在当前界面中是唯一值。

语法：

$("#dom对象的id值")

class 选择器
通过dom对象的class属性名称定位dom对象

语法：

$(".class类样式名")

标签选择器
通过标签名称定位dom对象

语法

$("标签名称")

所有选择器
选取页面中的所有 DOM 对象

语法：

$("*")

组合选择器
组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id, class, 标签名等

语法：

$("id, class, 标签名")

以上选择器实例

<!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>
    <style>
        div{
            background-color: gray;
            width: 200px;
            height: 100px;
        }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        function fun1() {
            $("#one").css("background", "blue");
        }
        function fun2() {
            $(".two").css("background", "red");
        }      
        function fun3() {
            $("div").css("background", "orange");
        }
        function fun4() {
            $("*").css("background", "yellow");
        }
        function fun5() {
            $("#one, span").css("background", "pink");
        }
    </script>
</head>
<body>
    <div id="one">我是id=one的div</div>
    <br>
    <div class="two">我是class=two的div</div>
    <br>
    <div>我是啥都没有的div</div>
    <br>
    <span>我是一行数据</span>
    操作按钮：<br>
    <input type="button" value="选取id=one" onclick="fun1()"/>
    <input type="button" value="选取class=two" onclick="fun2()"/>
    <input type="button" value="选取div" onclick="fun3()"/>
    <input type="button" value="选取所有DOM" onclick="fun4()">
    <input type="button" value="组合选择器" onclick="fun5()">
</body>
</html>

在这里插入图片描述

2. 表单选择器

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的

使用<input>标签的type属性值，定位dom对象的方式。

语法：

 $(":type属性值");

常用的表单选择器

 <input type="text">
 <input type="password">
 <input type="radio">
 <input type="checkbox">
 <input type="button">
 <input type="file">
 <input type="submit">
 <input type="reset">

$(":text")   选取所有的单行文本框
$(":password")    选取所有的密码框
$(":radio")  选取所有的单选框
$(":checkbox") 选取所有的多选框
$(":file")  选取所有的上传按钮

$(":tr") 不能用，tr 不是 input 标签

实例：

<!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>
    <style>
        div{
            background-color: gray;
            width: 200px;
            height: 100px;
        }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        function fun1() {
            var $obj = $(":text");
            alert($obj.val());
        }
        function fun2() {
            var $obj = $(":radio");
            for (var i = 0; i < $obj.length; i ++ ) {
                var obj = $obj[i];
                alert(obj.value);
            }
        }
        function fun3() {
            var $obj = $(":checkbox");
            for (var i = 0; i < $obj.length; i ++ ) {
                var obj = $obj[i];
                alert(obj.value);
                
            }
        }
    </script>
</head>
<body>
    文本框: <input type="text" value="我是type=text"/> <br>
    性别: <br>
    <input type="radio" name="sex" value="man">男<br>
    <input type="radio" name="sex" value="woman">女<br>
    爱好: <br>
    <input type="checkbox" value="bike">骑行<br>
    <input type="checkbox" value="football">足球<br>
    <input type="checkbox" value="music">音乐<br>
    <br>
    <p>功能按钮</p>
    <input type="button" value="读取text值" onclick="fun1()">
    <input type="button" value="读取radio值" onclick="fun2()">
    <input type="button" value="读取checkbox" onclick="fun3()">
</body>
</html>

在这里插入图片描述

二、过滤器

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

<div>1</div> dom1
<div>2</div> dom2
<div>3</div> dom3

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

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

特点：

在定位了dom对象后，根据一些条件筛选dom对象。
过滤器有是一个字符串，用来筛选dom对象的。
过滤器不能单独使用，必须和选择器一起使用。

1. 基本过滤器

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

$("选择器:first");

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

$("选择器:last");

(3) 选择数组中指定对象

$("选择器:eq(数组索引)");

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

$("选择器:lt(数组索引)");

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

$("选择器.gt(数组索引)");

实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">
        div {
            background: gray;
        }
    </style>
    <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

        // $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(), 
        // 相当于是onLoad().
        $(function () {
            //当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
            $("#btn1").click(function () {
                //过滤器
                var obj = $("div:first");
                obj.css("background", "red");
            })

            //绑定事件
            $("#btn2").click(function () {
                var obj = $("div:last");
                obj.css("background", "green");
            })

            //绑定btn3的事件
            $("#btn3").click(function () {
                var obj = $("div:eq(3)");
                obj.css("background", "blue");
            })

            $("#btn4").click(function () {
                var obj = $("div:lt(3)");
                obj.css("background", "orange");
            })

            $("#btn5").click(function () {
                var obj = $("div:gt(3)");
                obj.css("background", "yellow");
            })

            $("#txt").keydown(function () {
                alert("keydown")
            })
        })



    </script>
</head>

<body>
    <input type="text" id="txt" />
    <div id="one">我是div-0</div>
    <div id="two">我是div-1</div>
    <div>我是div-2
        <div>我是div-3</div>
        <div>我是div-4</div>
    </div>
    <div>我是div-5</div>
    <br />
    <span>我是span</span>

    <br />
    <input type="button" value="获取第一个div" id="btn1" />
    <br />
    <input type="button" value="获取最后一个div" id="btn2" />
    <br />
    <input type="button" value="获取下标等于3的div" id="btn3" />
    <br />
    <input type="button" value="获取下标小于3的div" id="btn4" />
    <br />
    <input type="button" value="获取下标大于3的div" id="btn5" />
</body>

</html>

在这里插入图片描述

2. 表单属性过滤器

(1) 选用可用文本框

$(":text:enabled")

(2) 选用不可用文本框

$(":text:disabled")

(3) 复选框选中的元素

$(":checkbox:checked")

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

$("选择器>option:selected")

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">
        div {
            background: gray;
        }
    </style>
    <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

        // $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(), 
        // 相当于是onLoad().
        $(function () {
            //当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
            $("#btn1").click(function () {
                //获取所有可以使用的text
                var obj = $(":text:enabled");
                //设置 jquery数组值所有dom对象的value值
                obj.val("hello");
            })

            $("#btn2").click(function () {
                //获取选中的checkbox
                var obj = $(":checkbox:checked");
                for (var i = 0; i < obj.length; i++) {
                    //alert( obj[i].value);
                    alert($(obj[i]).val())
                }
            })

            $("#btn3").click(function () {
                //获取select选中的值
                //var obj= $("select>option:selected");
                var obj = $("#yuyan>option:selected");
                alert(obj.val());
            })


        })



    </script>
</head>

<body>
    <input type="text" id="txt1" value="text1" /><br />
    <input type="text" id="txt2" value="text2" disabled="true" /><br />
    <input type="text" id="txt3" value="text3" /><br />
    <input type="text" id="txt4" value="text4" disabled /><br />
    <br />
    <input type="checkbox" value="游泳" />游泳 <br />
    <input type="checkbox" value="健身" checked />健身 <br />
    <input type="checkbox" value="电子游戏" checked />电子游戏 <br />
    <br />
    <select id="yuyan">
        <option value="java">java语言</option>
        <option value="go" selected>go语言</option>
        <option value="python">python语言</option>
    </select>

    <br />
    <input type="button" value="设置可以的text的value是hello" id="btn1" />
    <br />
    <button id="btn2">显示选中的复选框的值</button>
    <br />
    <button id="btn3">显示选中下拉列表框的值</button>
</body>

</html>