jQuery--过滤器

过滤器就是过滤条件，对已经定位到数组中的dom对象根据一些条件进行过滤筛选，过滤条件不能单独使用，必须和选择器一起使用

一、基本过滤器

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

 $("选择器:first")

2、选择最后一个，保留数组中最后的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>过滤器</title>
    <script src="jquery-3.7.0.js"></script>
</head>
<body>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                var obj = $("div:first")
                obj.css("background","red")
            })
            $("#btn2").click(function(){
                var obj = $("div:last")
                obj.css("background","blue")
            })
            $("#btn3").click(function(){
                var obj = $("div:eq(3)")
                obj.css("background","blue")
            })
        })
    </script>
    <div id="zero">div zero</div>
    <div id="one">div one</div>
    <div id="two">div two</div>
    <div>
        div three
        <div>div four</div>
        <div>div five</div>
    </div>
    <span>span</span>
    <br>
    <input type="button" id="btn1" value="获取第一个div">
    <input type="button" id="btn2" value="获取最后一个div">
    <input type="button" id="btn3" value="获取索引为3的div">
 
</body>
</html>

二、表单属性过滤器

根据表单中dom对象的状态情况定位dom对象

启用状态enabled
不可用状态disabled
选择状态checked

1、选择可用的文本框

 $(":text:enabled")

2、选择不可用的文本框

 $(":text:disabled")

3、复选框选中的元素

 $(":checkbox:checked")

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

 选择器>option:selected
// > 子选择器

表单属性过滤器例子

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单属性过滤器</title>
    <script src="jquery-3.7.0.js"></script>
</head>
<body>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $(":text:enabled").val("hello")
            })
            $("#btn2").click(function(){
                var obj = $("#yuyan>option:selected")
                console.log(obj.val())
            })
        })
    </script>
    <input type="text" name="" id="txt1" value="txt1"><br>
    <input type="text" name="" id="txt2" value="txt2" disabled><br>
    <input type="text" name="" id="txt3" value="txt3"><br>
    <input type="text" name="" id="txt4" value="txt4" disabled><br>
    <select name="" id="yuyan">
        <option value="java">java</option>
        <option value="go">go</option>
        <option value="python">python</option>
    </select>
    <br>
    <input type="button" id="btn1" value="设置所有可用文本框值为hello">
    <input type="button" id="btn2" value="显示option中的value">
</body>
</html>

posted @ 2023-08-02 20:13 洛小依ovo 阅读(104) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· jQuery--dom对象选择器

· jQuery--常用函数

· 05-jquery基本过滤器

· jQuery 01: 常用选择器

· 【JavaWeb-jQuery】笔记（1）--- jQuery概述；dom对象和jquery对象；jQuery选择器；jQuery过滤器

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

公告

昵称：洛小依ovo
园龄： 4年5个月
粉丝： 1
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

jQuery--过滤器

一、基本过滤器

二、表单属性过滤器

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>过滤器</title>
	<script src="jquery-3.7.0.js"></script>
	</head>
	<body>
	<script>
	$(document).ready(function(){
	$("#btn1").click(function(){
	var obj = $("div:first")
	obj.css("background","red")
	})
	$("#btn2").click(function(){
	var obj = $("div:last")
	obj.css("background","blue")
	})
	$("#btn3").click(function(){
	var obj = $("div:eq(3)")
	obj.css("background","blue")
	})
	})
	</script>
	<div id="zero">div zero</div>
	<div id="one">div one</div>
	<div id="two">div two</div>
	<div>
	div three
	<div>div four</div>
	<div>div five</div>
	</div>
	<span>span</span>
	<br>
	<input type="button" id="btn1" value="获取第一个div">
	<input type="button" id="btn2" value="获取最后一个div">
	<input type="button" id="btn3" value="获取索引为3的div">

	</body>
	</html>