05-jquery基本过滤器

news2024/11/18 6:00:25

2.5过滤器

过滤器是一个字符串,用了筛选dom对象,过滤器是和选择器一起使用。在选择dom对象后,再进行过滤筛选。

.5.1基本过滤器

使用dom对象在数组中的位置,作为过滤条件。
1 选择数组中第一个dom成员。

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

2 选择数组最后一个成员。

语法:$(“选择器:last”)

3选择等于指定下标的dom成员。

语法:$(“选择器:eq(下标)”)

4 选择大于某个下标的dom成员。

语法:$(“选择器:gt(下标)”)

5 选择小于某个下标的dom成员。

语法:$(“选择器:lt(下标)”)

.5.2事件

jquery可以给dom对象绑定事件,在程序执行期间动态处理事件。

.5.2-1第一种事件绑定语法

语法: $(“选择器”).事件名称(事件的处理函数)
$(“选择器”): 选择0或多个dom对象,并绑定事件。
事件名称:就是js中去掉on部分。如:单击事件onclick,事件名称就是click。
事件处理函数:函数定义,当事件发生时,执行这个函数。

eg:
<input type="button" id="btn" value="事件绑定"/>
 绑定事件
 $("#btn").click(function(){单击的处理代码}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.6.3.js"></script>
		<style type="text/css">
			div{
				background:gray;
			}
		</style>
		<script type="text/javascript">
			$(function(){//页面加载后执行,相当于onload事件。
			//绑定事件
			$("#btn").click(function(){
				alert("button单击了,执行函数");
			})
		})
		</script>
	</head>
	<body>
		<div id="one">我是div1
		</div>
		<div id="two">我是div2	
		</div>
		<div >我是div3</div>
		<div >我是div4</div>
		<div >我是div5</div>
		<div >我是div6</div><br><br>
		<span>我是span</span><br><br>
		<input type="button" value="绑定事件" id="btn"><br /><br/>
		
	</body>
</html>

举个栗子:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.6.3.js"></script>
		<style type="text/css">
			div{
				background:gray;
			}
		</style>
		<script type="text/javascript">
			$(function(){//页面加载后执行,相当于onload事件。
			//绑定事件
			$("#btn").click(function(){
				alert("button单击了,执行函数");
			})
			
			//btn1事件
			$("#btn1").click(function(){
				var obj=$("div:first");
				obj.css("background","blue");
			})
			//btn2事件
			$("#btn2").click(function(){
				var obj=$("div:last");
				obj.css("background","pink");
			})
			//btn3事件
			$("#btn3").click(function(){
				var obj=$("div:eq(3)");
				obj.css("background","yellow");
			})
			//btn4事件lt
			$("#btn4").click(function(){
				var obj=$("div:lt(3)");
				obj.css("background","teal");
			})
			//btn5事件gt
			$("#btn5").click(function(){
				var obj=$("div:gt(3)");
				obj.css("background","green");
			})
		})
		</script>
	</head>
	<body>
		<div id="one">我是div1
		</div>
		<div id="two">我是div2	
		</div>
		<div >我是div3</div>
		<div >我是div4</div>
		<div >我是div5</div>
		<div >我是div6</div><br><br>
		<span>我是span</span><br><br>
		<input type="button" value="绑定事件" id="btn"><br /><br/>
		<input type="button" value="获取数组中第一个dom对象" id="btn1"><br /><br/>
		<input type="button" value="获取数组中最后一个dom对象" id="btn2"><br /><br/>
		<input type="button" value="绑定数组等于3的dom对象" id="btn3"><br /><br/>		
		<input type="button" value="绑定数组小于3的dom对象" id="btn4"><br /><br/>	
		<input type="button" value="绑定数组大于3的dom对象" id="btn5"><br /><br/>	
	</body>
</html>

基本过滤器的应用
请添加图片描述

.5.3表单过滤器

根据状态作为条件筛选dom对象。

1 获取可用文本框
语法:$ (“:text:enabled”)
2 获取不可用的文本框
语法:$ (“:text:disabled”)
3 获取选择的复选框
语法: $ (“:checkbox:checked”)
4 获取选择的下拉表框
语法:$(:“选择器>option:selected”)

<select id="lang">
	<option value="java">java</option>
	<opyion value="sql">sql</option>
</select>

表单过滤器应用:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background: gray;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.6.3.js"></script>
		<script type="text/javascript">
			$(function(){
				//页面dom对象加载后执行,相当于onlaod事件
				//绑定对象
				$("#btn1").click(function(){
					//所有可用的文本框
					var obj=$(":text:enabled");
					obj.val("hello");
				})
				$("#btn2").click(function(){
					//选择复选框
					var obj=$(":checkbox:checked");
					for(var i=0;i<obj.length;i++){
						console.log(obj[i].value+",jquery="+$(obj[i]).val())
					}
				})
				$("#btn3").click(function(){
					//下拉列表框的值
					var obj=$("select>option:selected");
					//var obj=$("#lang>option:selected");//id选择器 #
					console.log(obj.val());
				})
			})
		</script>
	</head>
	<body>
		<input type="text" value="文本1"><br />
		<input type="text" value="文本2" disabled="true"><br />
		<input type="text" value="文本3"><br />
		<input type="text" value="文本4" disabled><br />
		<br /><br>
		<input type="checkbox" value="游泳">游泳<br />
		<input type="checkbox" value="健身">健身<br />
		<input type="checkbox" value="电子游戏">电子游戏<br />
		<br>
		<select id="lang">
			<option value="java">java语言</option>
			<option value="go">go语言</option>
			<option value="C++">C++语言</option>
			<option value="python">python语言</option>
		</select><br><br>
		<button id="btn1">给所有可用文本框设置value为hello</button><br><br>
		<button id="btn2">显示选中的复选框</button><br><br>
		<button id="btn3">下拉列表框选择的值</button><br><br>
		
	</body>
</html>

选择器应用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/174192.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【nginx】全面实战-Mac

▒ 目录 ▒&#x1f6eb; 导读需求1️⃣ 安装brew替换为阿里源修复报错No such file or directorybrew install nginx常用文件及目录常用命令2️⃣ nginx配置配置结构3️⃣ web服务器默认服务器自定义静态服务器4️⃣ 反向代理配置及介绍5️⃣ 负载均衡配置及介绍负载均衡的策略…

杂记:python和pyinstaller从头安装步骤(附安装包的备份)

pyinstaller 简介 知道的就跳过本章 python 属于脚本语言&#xff0c;只要有 python 就能运行 .py 文件。而 pyinstaller 是可执行文件文件生成工具&#xff0c;约等于编译工具。 以 windows 为例&#xff0c;在 A 计算机上生成的 exe&#xff0c;复制到 B 计算机可以直接运行…

字节跳动青训营--前端day3

文章目录前言一、写好JavaScript的一些原则二、各司其职三、组件封装四、过程抽象前言 仅以此文章记录学习 一、写好JavaScript的一些原则 各司其职&#xff1a;让HTML、CSS和JavaScript职能分离组件封装&#xff1a;好的UI组件具备正确性、扩展性、复用性过程抽象&#xff1…

JVM堆内存分配策略(深入理解Java虚拟机第三章)

堆内存模型&#xff1a; 年轻代&#xff1a; 根据分代算法&#xff0c;默认小于15岁的对象称作年轻代&#xff0c;年轻代分为Eden区、幸存者区(Survivor Form&#xff0c;Survivor To),三者比例为&#xff1a;8&#xff1a;1&#xff1a;1 Eden 分区&#xff1a;对象出生分区…

Java 实现几种 异步的实现方式

前言 异步执行对于开发者来说并不陌生&#xff0c;在实际的开发过程中&#xff0c;很多场景多会使用到异步&#xff0c;相比同步执行&#xff0c;异步可以大大缩短请求链路耗时时间&#xff0c;比如&#xff1a;发送短信、邮件、异步更新等&#xff0c;这些都是典型的可以通过…

FL水果21最新版本电脑编曲软件FL Studio更新

电脑编曲软件也就是我们常说的宿主软件&#xff0c;英文简称DAW。 FL Studio俗称水果&#xff0c;是一款开发初衷为了电子音乐制作的宿主软件。内置了非常多优秀的合成器以及效果器插件&#xff0c;极为适合于电子音乐的编排。同时FL Studio支持第三方音源插件导入&#xff0c;…

[RootersCTF2019]ImgXweb

目录 信息收集 JWT伪造 工具使用 寻找秘钥 curl 补充知识 信息收集 进入查看源码未发现重要信息 注册admin失败&#xff0c;猜测应该需要垂直越权 先随意注册个账户coleak 登录后发现可以文件上传&#xff0c;上传shell后发现不能连接&#xff0c;执行命令也没有回显…

Linux常用命令——tailf命令

在线Linux命令查询工具(http://www.lzltool.com/LinuxCommand) tailf 在屏幕上显示指定文件的末尾若干行内容&#xff0c;通常用于日志文件的跟踪输出。 补充说明 tailf命令几乎等同于tail -f&#xff0c;严格说来应该与tail --followname更相似些。当文件改名之后它也能继…

微服务注册中心-Eureka

微服务注册中心-Eureka微服务注册中心-Eureka一、注册中心&#xff08;Eureka&#xff09;二、Euraka实现1.eureka-server端&#xff08;1&#xff09;新建项目&#xff0c;引入pom依赖&#xff08;2&#xff09;编写启动类&#xff0c;引入开启注册中心的注解&#xff08;3&am…

py第八章 面向对象 笔记

8.1类与对象的基础运用类是抽象的&#xff0c;对象是类的实例8.1.1类的定义class 类名:属性名属性值def 方法名(self):方法体类名:大驼峰命名法&#xff1a;首字母一般为大写方法参数列表中的第一个参数是一个指代对象的默认参数selfclass Car:wheels4def drive(self):print(行…

非常好用,绝对未来黑马的 Python 开源测试框架 PySimpleTest

非常好用&#xff0c;绝对未来黑马的 Python 开源测试框架 PySimpleTest 简单介绍 PySimpleTest 是一个非常简洁开源的python代码测试框架&#xff0c;作者是 https://github.com/Time-Coder?tabstars 你可以在以下网站找到PyPI索引&#xff1a;https://pypi.org/project/P…

CSS 排行榜

CSS 排行榜 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>排行榜</title><style type"text/css">* {margin: 0;padding: 0;}/* 容器 */.rank-container {width: 400px;color: #333;font-size: 14p…

go 常用命令

巩固学习最好的方法是通过go help看文档 GO语言规范文档 终端执行命令 go help environment GOBIN The directory where ‘go install’ will install a command. go 命令使用 go <command> [arguments]command&#xff1a; The commands are:bug start a b…

十、MySQL 聚合函数、分组查询及过滤分组

文章目录一、聚合函数1.1 COUNT()函数1.2 SUM()函数1.3 AVG()函数1.4 MAX()函数1.5 MIN()函数二、分组查询及过滤分组2.1 创建分组2.2 使用HAVING过滤分组2.3 WHERE和HAVING的对比前置知识&#xff1a; 一、数据库开发与实战专栏导学及数据库基础概念入门 二、MySQL 介绍及 MyS…

你知道这些快捷键吗?

今天就给大家带来常用的电脑快捷键&#xff0c;让你的办公和学习效率加倍&#xff0c;一起来看看吧&#xff01; 快捷键一&#xff1a;快速切换窗口 想要快速切换电脑正在使用的窗口程序&#xff0c;就可以使用“AltTab”键即可快速切换。先按住“Alt”按键&#xff0c;再按“T…

GO语言的实战学习(猜谜游戏和在线词典)| 青训营笔记

一.GO语言的实战学习 1.1 前言 在上文我们急速学习了Go语言的入门&#xff0c;今天我们来学习一下Go语言的实战 本专栏代码&#xff0c;源码打包下载地址如下&#xff1a; https://download.csdn.net/download/weixin_52908342/87389481 二.猜谜游戏 1.导入依赖包&#xff…

模拟实现一个简单的命令行解释器(shell)

目录 前言 环境变量与本地变量 和环境变量相关的命令 获取环境变量的三种方法 第一种 第二种 第三种 进程地址空间 页表 为什么存在进程地址空间 第一 第二 第三 进程控制 进程的产生 进程终止 进程等待 进程替换 模拟实现一个shell 前言 我们通过各种指令来实现…

脚手架2 以nacos为注册中心,基于Gateway构架网关

在前一步上已经说明&#xff0c;组件脚手架的第一步就是构建注册中心&#xff0c;由于采用nacos&#xff0c;这些将直接放在配置文件中实现&#xff0c;不再单独搭建eureka。 spring nacos jdk各组件依赖版本推荐 Spring Boot&#xff0c;Spring Cloud&#xff0c;Spring Clo…

HTC Cosmos手柄的坑

HTC Cosmos手柄的坑Unreal蓝图通过手柄射线操作UI用浏览器插件进行游戏界面设计Cosmos手柄遇到的问题Unreal蓝图通过手柄射线操作UI Unreal蓝图通过手柄射线操作UI很简单&#xff0c;虚幻提供一个WidgetInteraction的组件&#xff0c;可以模拟键盘和鼠标操作。 Enable Hit Te…

【最优潮流】二阶锥松弛在配电网最优潮流计算中的应用(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…