06-jquery函数

news2024/9/23 19:22:09

2.6函数

.6.1第一组函数

1 val():操作dom函数的value值
val():没有参数,获取dom数组中第一个dom对象的value值。
val(参数):有参数,给dom数组中所有dom对象的value属性赋值。
2 text():操作标签文本内容,标签开始和结束之间的内容。
text():没有参数,把dom数组中所有dom对象的文本内容链接起来,形成一个字符串,并返回这个字符串。
text(参数):给dom数组中所有成员统一赋予新的文本。
3 attr():操作value,文本以外的属性时。
attr("属性名"):获取数组中第一个dom成员此属性值。
attr("属性名","值"):对数组中所有dom对象的属性设为新值。

第一组函数应用:

举个栗子

<!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 text=$(":text").val();
					var text=$(":text:first").val();
					alert("第一个文本框的value="+text);
				})
				$("#btn2").click(function(){
					//给所有的文本框赋值,新的value
					$(":text").val("三国演义");
				})
				$("#btn3").click(function(){
					//读取所有的div值
					alert($("div").text());
				})
				$("#btn4").click(function(){
					//设置div文本值
					$("div").text("我是新的值");
				})
				$("#btn5").click(function(){
					//读取src的值
					var txt=$("img").attr("src");
					alert("图像的地址="+txt)
				})
				$("#btn6").click(function(){
					//读取src的值
					$("#img1").attr("src","img/OIP-C (1).jfif");
					
				})
			})
		</script>
	</head>
	<body>
		<input type="text"value="刘备"><br>
		<input type="text"value="关羽"><br>
		<input type="text"value="张飞"><br>
		<br>
		<div>学习的开发语言</div>
		<div>C++语言</div>
		<div>,是基于对象的程序语言</div><br><br>
		<img src="img/OIP-C.jfif" alt=""id="img1"><br>
		<br><br>
		<button id="btn1">读取第一个文本框的value值</button><br><br>
		<button id="btn2">给所有的文本框赋值,新的value</button><br><br>
		<button id="btn3">读取所有的div值</button><br><br>
		<button id="btn4">设置div的文本值</button><br><br>
		<button id="btn5">读取src属性值</button><br><br>
		<button id="btn6">设置src属性值</button><br><br>
	</body>
</html>

第一组函数

.6.2第二组函数

1 remove():删除选择的dom对象和他的子对象。

语法:$(“选择器”).remove()

2 empty():删除dom对象的子对象。

语法: $('选择器").empty()

3append():给dom对象在他后面增加新的dom对象

语法: $(“选择器”).append(子dom对象)

4html()

html():获取dom数组中第一个dom对象的文本值(html()返回结果相当于innertHtml)
html(参数):给dom’数组中所有成员设置新的文本内容。(html()返回结果相当于innertHtml)

举个例子:

<!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.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//页面dom对象加载后执行,相当于onlaod事件
		$("#btn1").click(function(){
			//删除dom和其子对象
			$("select").remove();
		})
		$("#btn2").click(function(){
			//删除dom子对象
			$("select").empty();
		})
		$("#btn3").click(function(){
			//增加dom对象
			$("#mydiv").append("<button>新增按钮</button>");
		})
		$("#btn4").click(function(){
			//dom数组中第一个dom的文本值,包含html标签内容
			alert($("span").html());
		})
		$("#btn5").click(function(){
			//设置值,包含html标签内容
			$("span").html("我是<b>新来的");
		})
			})
		</script>
	</head>
	<body><select name="" id="">
		<option value="老虎">老虎</option>
		<option value="狮子">狮子</option>
		<option value="豹子">豹子</option></select>
		<br><br>
		<select name="" id="1">
			<option value="大洋洲">大洋洲</option>
			<option value="欧洲">欧洲</option>
			<option value="亚洲">亚洲</option>
		</select><br><br>
		<div id="mydiv">这是一个div</div>
		<br><br>
		<span>我是<b>java</b>编程语言</span>
		<br>
		<span>hello world</span>
		<br><br>
		<button id="btn1">使用remove删除dom对象</button><br><br>
		<button id="btn2">使用empty删除子dom对象</button><br><br>
		<button id="btn3">使用append增加dom对象</button><br><br>
		<button id="btn4">获取dom数组中第一个dom对象的文本(innerthtml)</button><br><br>
		<button id="btn5">设置值,包含html标签内容</button>
		

	</body>
</html>

函数应用

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

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

相关文章

springCloud集成elk+filebeat+kafka+zipkin实现多个服务日志链路追踪聚合到es

一、目的 如今2023了&#xff0c;大多数javaweb架构都是springboot微服务&#xff0c;一个前端功能请求后台可能是多个不同的服务共同协做完成的。例如用户下单功能&#xff0c;js转发到后台网关gateway服务&#xff0c;然后到鉴权spring-sercurity服务&#xff0c;然后到业务…

【实操案例十一】使用try-except手动捕获异常 实例代码及运行效果图!

任务一&#xff1a; 编写程序输入学员成绩 异常捕获忘了的同学&#xff0c;可以参考这个&#xff1a;Bug的常见类型及异常处理机制 # 任务一&#xff1a; 编写程序输入学员成绩iint(input(请输入学员成绩&#xff1a;)) if 0<i<100:print(i) else:raise Exception(分数…

产品设计-基础控件-信息输入控件

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 产品设计-基础控件-信息输入控件1.1.文本框一、1.1.11.1.2、占位符文本1.1.3 输入框1.1.4 帮助文本1.1.5 初始默认值1.1.6 输入文本1.1.7 跟踪图标1.1.8 格式化标记1.2 单选按…

java枚举类2023028

一个类的对象是有限而且固定的&#xff0c;比如季节类&#xff0c; 它只有4个对象&#xff1b;再比如行星类&#xff0c;目前只有8个对象。这种实例有限而且固定的类&#xff0c;在Java里被称为枚举类。在早期代码中&#xff0c;可能会直接使用简单的静态常量来表示枚&#xff…

设计模式 - 六大设计原则之OCP(开闭原则)

文章目录概述Case接口定义接口实现Bad ImplBetter Impl概述 Open-Close Principle 在面向对象编程领域中&#xff0c;开闭原则规定软件中的类、对象、模块和函数对扩展应该是开放的&#xff0c;但对修改是封闭的。 这意味着 应该用抽象定义结构&#xff0c;用具体实现扩展细节…

使用 AJAX+JSON 实现用户查询/添加功能

实现用户查询/添加功能1. 查询功能准备selectAllServlet&#xff1a;brand.html&#xff1a;2. 添加功能addBrand.html&#xff1a;表单&#xff1a;<script&#xff1a;addServlet&#xff1a;1. 查询功能 需求&#xff1a;在onload&#xff08;页面加载完成&#xff09;事…

SSM项目实战【从 0 到 1】:个人博客

文章目录前言一、项目简介二、项目技术栈三、准备工作1、Spring Boot 项目创建2、mybatis 配置3、数据库创建四、基本框架搭建1、实体层&#xff08;model&#xff09;2、控制器层&#xff08;controller&#xff09;3、服务层&#xff08;service&#xff09;4、持久层&#x…

Liunx相关服务无法启动,带你一步一步找出问题和解决问题

liunx服务无法开启的原因有各种各样&#xff0c;首先我们需要找到我们究竟是为什么不能能够开启这个服务&#xff0c;这里我们先要去考虑到的一个非常重要的问题就是我们的防火墙有没有启动&#xff0c;防火墙有没有把我们的要开启相关服务的端口给封禁掉。这个是无论如何都要第…

学习记录668@项目管理之项目沟通管理和干系人管理

书上这部分的内容很无趣、很花里花哨、很杂乱&#xff0c;所以本文只摘取我认为比较有用和有意义的片段。 沟通方式 在发送方自认为已经掌握了足够的信息&#xff0c;有了自己的想法且不需要进一步听取多方意见时&#xff0c;往往选择控制力极强、参与程度最弱的“叙述方式”&a…

ES学习看这一篇文章就够了

第一章 ES简介 第1节 ES介绍 1 2 3 41、Elasticsearch是一个基于Lucene的搜索服务器 2、提供了一个分布式的全文搜索引擎,基于restful web接口 3、Elasticsearch是用Java语言开发的&#xff0c;基于Apache协议的开源项目&#xff0c;是目前最受欢迎的企业搜索引擎 4、Elastics…

机器学习(四):机器学习工作流程

文章目录 机器学习工作流程 一、什么是机器学习 二、机器学习工作流程 1、获取到的数据集介绍 2、数据基本处理 3、特征工程 4、机器学习 5、模型评估 机器学习工作流程 一、什么是机器学习 机器学习是从数据中自动分析获得模型&#xff0c;并利用模型对未知数据进行…

【程序环境和程序预处理】万字详文,忘记了,看这篇就对了

本章介绍一个test.c文件是如何生成一个test.exe文件。首先了解程序环境和程序预处理的大致流程&#xff0c;本章会分别介绍各个流程&#xff0c;但重点是翻译中的编译中的预编译阶段。 文章目录&#xff1a; 1.程序翻译环境和运行环境 1.1程序翻译中的的编译和链接 2.预编译…

Flowable进阶学习(四)任务分配与流程变量

文章目录一、任务分配1. 固定分配2. 表达式分配值表达式&#xff1a;Value expression方法表达式&#xff1a;Method expression3. 监听器分配二、流程变量1. 全局变量2. 局部变量案例&#xff1a;一、任务分配 1. 固定分配 在绘制流程图时或在流程文件中通过Assignee来指定的…

3.2 特征图尺寸计算与参数共享|池化层的作用|整体网络架构|VGG网络架构|残差网络Resnet|感受野的作用

文章目录特征图尺寸计算与参数共享池化层的作用整体网络架构VGG网络架构&#xff08;了解向&#xff0c;背景向&#xff09;残差网络Resnet&#xff08;了解向&#xff0c;背景向&#xff09;感受野的作用特征图尺寸计算与参数共享 给个例子&#xff1a; 如果输入的数据是32323…

GDB的常用命令

GDB是一个调试程序&#xff0c;可以用来调试C/C程序。这个C/C要产生符号表才能使用GDB调用。例如C&#xff1a; g -g source.cppGDB常用命令 首先要生成一个有调试符号的ELF文件&#xff08;exe curable and linkable format),简单点说就是一个带调试符号可执行文件。加-g参数…

client-go实战之八:更新资源时的冲突错误处理

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 系列文章链接 client-go实战之一&#xff1a;准备工作client-go实战之二:RESTClientclient-go实战之三&#xff1a;Clientsetclient-go实战之四&#xff1a;…

matlab控制理论学习

一、求传递函数表达式residue() 1、极点不同的情况 分子和分母的矩阵分别为&#xff1a; >> num[2 5 3 6]; >> den[1 6 11 6]; 使用下列命令&#xff0c;即可对分式进行展开&#xff0c;展开后有多项&#xff0c;每一项的分子一定是数字&#xff0c;而分母则是一个…

mysql底层解析——连接层,包括连接、解析、缓存、引擎、存储等

1、 前言 打算写一个系列的文章&#xff0c;主要是mysql底层解析。 很多时候&#xff0c;程序员对mysql处于频繁使用&#xff0c;但都一知半解的程度&#xff0c;除了会加个索引&#xff0c;貌似也没啥优化的技能了。事实上&#xff0c;mysql能有今日的成就&#xff0c;必然不…

Selenium4新特性-关联定位策略

Selenium 4 引入了关联元素定位策略(Relative Locators)。这种方式主要是应对一些不好定位的元素&#xff0c;但是其周边相关联的元素比较好定位。实现步骤是先定位周边较容易定位的元素&#xff0c;再根据关联元素定位策略定位到想定位的那个元素。如下以具体案例讲解用法。 以…

UDS诊断系列介绍15-FIM模块功能介绍

本文框架1. 系列介绍1.1 FIM模块概述2. FIM相关概念2.1 FID概念2.2 FIM数据结构3. FIM模块作用过程4. Autosar系列文章快速链接1. 系列介绍 UDS&#xff08;Unified Diagnostic Services&#xff09;协议&#xff0c;即统一的诊断服务&#xff0c;是面向整车所有ECU的一种诊断…