jQuery过滤器

最新推荐文章于 2024-07-29 11:53:27 发布

迷亭君

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量548

点赞数

分类专栏： ajax+JQuery+Vue 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_49044908/article/details/121274457

版权

ajax+JQuery+Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery过滤器

在定位了dom元素后,根据一些条件筛选dom对象.
过滤器也是一个字符串.过滤器不能单独使用,必须和选择器一块用.

语法规则

基本过滤器

选择第一个dom对象
语法: $(“选择器:first”)
选择最后一个dom对象
语法: $(“选择器:last”)
选择数组指定下标的dom对象
语法: $(“选择器:eq(数组索引)”)
选择数组中小于指定索引的所有dom对象
语法: $(“选择器:lt(数组索引)”)
选择数组中大于指定索引的所有dom对象
语法: $(“选择器:gt(数组索引)”)

具体例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        function fun1() {
            var obj = $("div:first");
            obj.css("background", "red");
        }
        function fun2() {
            var obj = $("div:last");
            obj.css("background", "red");
        }
        function fun3() {
            var obj = $("div:eq(2)");
            obj.css("background", "red");
        }
        function fun4() {
            var obj = $("div:lt(4)");
            obj.css("background", "red");
        }
        function fun5() {
            var obj = $("div:gt(3)");
            obj.css("background", "red");
        }
    </script>
</head>
<body>
    <div id="one">one</div>
    <div id="two">two</div>
    <div>
        div
        <div>div-div1</div>
        <div>div-div2</div>
    </div>
    <div>div-div3</div>
    <br/>
    <span>span</span>
    <br/>
    <input type="button" value="获取第一个div" onclick="fun1()"/>
    <br/>
    <input type="button" value="获取最后一个div" onclick="fun2()">
    <br/>
    <input type="button" value="获取下标为2的div" onclick="fun3()">
    <br/>
    <input type="button" value="获取下标小于4的所有div" onclick="fun4()">
    <br/>
    <input type="button" value="获取下标大于3的所有div" onclick="fun5()">
</body>
</html>

表单属性过滤器

根据表单中dom对象的状态情况来定位dom对象的.
什么是状态?

启用状态 : enabled
不可用状态 : disabled
选择状态 : checked, 比如radio或者Checkbox

标题表单属性过滤器分类

选择可用的文本框
语法 : $(":text:enabled")
选择不可用的文本框
语法 : $(":text:disabled")
复选框选中的元素
语法 : $(":checkbox:checked")
获取下拉列表中被选中的元素
语法 : 选择器>option:selected

具体例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单属性过滤器</title>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            // 当页面dom对象加载后,给对象绑定事件,因为只有当对象已经在内存中创建好了才能使用
            $("#btn1").click(function () {
                var obj = $(":text:enabled");
                // 设置jQuery数组中所有dom对象中的value值
                // obj.val()不带参数时为获取原dom对象的value值
                // 带参数后为设置value值为参数值
                obj.val("hello");
            })

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

            $("#btn3").click(function () {
                var obj = $("select>option:selected");
                /*
                    第一个select是标签选择器
                    >代表父子关系中的子
                    option为父select的子标签中的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/>
    <input type="checkbox" value="游泳"/> 游泳 <br/>
    <input type="checkbox" value="健身" checked/> 健身 <br/>
    <input type="checkbox" value="游戏" checked/> 游戏 <br/>
    <select id="yuyan">
        <option value="java">java</option>
        <option value="go" selected>go</option>
        <option value="python">python</option>
    </select>
    <br/>
    <input id="btn1" type="button" value="所有可用的文本框设置值为hello"/>
    <br/>
    <button id="btn2">显示选中的复选框的值</button>
    <br/>
    <button id="btn3">显示下拉列表框中的选中值</button>
</body>
</html>

迷亭君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery过滤器

jQuery过滤器在定位了dom元素后,根据一些条件筛选dom对象.过滤器也是一个字符串.过滤器不能单独使用,必须和选择器一块用.语法规则基本过滤器选择第一个dom对象语法: $(“选择器:first”)选择最后一个dom对象语法: $(“选择器:last”)选择数组指定下标的dom对象语法: $(“选择器:eq(数组索引)”)选择数组中小于指定索引的所有dom对象语法: $(“选择器:lt(数组索引)”)选择数组中大于指定索引的所有dom对象语法: $(“选
复制链接

扫一扫

专栏目录