web前端学习(三十五)——JavaScript事件、字符串及运算符的相关设置

news/2024/7/6 22:04:25

1.JS事件

HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。HTML 事件可以是浏览器行为,也可以是用户行为。

以下是 HTML 事件的实例:

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

通常,当事件发生时,你可以做些事情。在事件触发时 JavaScript 可以执行一些代码。HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素。

单引号:

<some-HTML-element some-event='JavaScript 代码 '>

双引号:

<some-HTML-element some-event="JavaScript 代码 ">

下面是一些常见的HTML事件的列表:

事件描述
onchangeHTML 元素改变
onclick用户点击 HTML 元素
onmouseover用户在一个HTML元素上移动鼠标
onmouseout用户从一个HTML元素上移开鼠标
onkeydown用户按下键盘按键
onload浏览器已完成页面的加载

JS事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:

  • 页面加载时触发事件
  • 页面关闭时触发事件
  • 用户点击按钮执行动作
  • 验证用户输入内容的合法性

可以使用多种方法来执行 JavaScript 事件代码:

  • HTML 事件属性可以直接执行 JavaScript 代码
  • HTML 事件属性可以调用 JavaScript 函数
  • 你可以为 HTML 元素指定自己的事件处理程序
  • 你可以阻止事件的发生。

2.JS字符串 

JavaScript 字符串用于存储和处理文本。字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号。

反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符:

转义字符 (\) 可以用于转义撇号,换行,引号,等其他特殊字符。

下表中列举了在字符串中可以使用转义字符转义的特殊字符:

代码输出
\'单引号
\"双引号
\\反斜杠
\n换行
\r回车
\ttab(制表符)
\b退格符
\f换页符

字符串也可以是对象,如下:👇👇👇 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p id="demo"></p>
		<script>
			var x="hello";             //x是字符串
			var y=new String("hello"); //y是一个对象
			document.getElementById("demo").innerHTML=
				typeof x + "<br />" + typeof y;
		</script>
		<p id="demo1"></p>
		<script>
			var a="redis";             //a是字符串
			var b=new String("redis"); //b是一个对象
			document.getElementById("demo1").innerHTML=
				x===y;
			// === 为绝对相等,即数据类型与值都必须相等。
		</script>
	</body>
</html>

方法描述
charAt()返回指定索引位置的字符
charCodeAt()返回指定索引位置字符的 Unicode 值
concat()连接两个或多个字符串,返回连接后的字符串
fromCharCode()将 Unicode 转换为字符串
indexOf()返回字符串中检索指定字符第一次出现的位置
lastIndexOf()返回字符串中检索指定字符最后一次出现的位置
localeCompare()用本地特定的顺序来比较两个字符串
match()找到一个或多个正则表达式的匹配
replace()替换与正则表达式匹配的子串
search()检索与正则表达式相匹配的值
slice()提取字符串的片断,并在新的字符串中返回被提取的部分
split()把字符串分割为子字符串数组
substr()从起始索引号提取字符串中指定数目的字符
substring()提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLocaleUpperCase()根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLowerCase()把字符串转换为小写
toString()返回字符串对象值
toUpperCase()把字符串转换为大写
trim()移除字符串首尾空白
valueOf()返回某个字符串对象的原始值

3.JS运算符 

3.1 JS算术运算符 

3.2 JS赋值运算符

3.3 JS用于字符串的 "+" 运算符

+ 运算符用于把文本值或字符串变量加起来(连接起来),如需把两个或多个字符串变量连接起来,请使用 + 运算符。

两个数字相加,返回数字相加的和。如果数字与字符串相加,返回字符串,结果将成为字符串!

3.4 JS比较运算符 

3.5 JS逻辑运算符

3.6 JS条件运算符 

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

variablename=(condition) ? value1:value2 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>点击按钮检测年龄。</p>
		年龄:<input id="age" value="18" />
		<p>是否达到投票年龄?</p>
		<button type="button" onclick="myFunction()">点击按钮</button>
		<p id="demo"></p>
		<script>
			function myFunction() {
				var age,str;
				age=document.getElementById("age").value;
				str=(age<18) ? "年龄太小":"年龄已达到";
				document.getElementById("demo").innerHTML=str;
			}
		</script>
	</body>
</html>

 


http://www.niftyadmin.cn/n/712164.html

相关文章

印度超本地社交网络Pulse获20万美元种子轮融资

Facebook开始只是个大学和职场应用&#xff0c;我在读大学时&#xff0c;它正处于向一个商业必需品转化的发展尖端。也正是因为这个转化&#xff0c;我发现自己越来越离不开网络。 那时&#xff0c;我尝试了很多聊天应用和在线新闻网站去表达我的看法。后来由于应用发来的推送过…

tab

2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>TAb</title> </head> <body> <div class"tab"> <ul class"tab-hd&q…

destroy重新打开 eayui_怎样处理jQuery EasyUI 已打开Tab重新加载问题

如何解决jQuery EasyUI 已打开Tab重新加载问题先给大家说下我的需求&#xff0c;如下&#xff1a;点击左侧已经打开的tab可以刷新重新加载datagrid。也就是说解决easyui 左侧tab重新刷新加载问题实现。实现如下&#xff1a;function addTab(subtitle, url) {if (!$(#tabs).tabs…

java算法判断链表有没有闭环,前端算法系列之二:数据结构链表、双向链表、闭环链表、有序链表...

前言上一次我们讲到了数据结构&#xff1a;栈和队列&#xff0c;并对他们的运用做了一些介绍和案例实践&#xff1b;我们也讲到了怎么简单的实现一个四则运算、怎么去判断标签是否闭合完全等等&#xff0c;anyway&#xff0c;今天接着和大家介绍一些数据结构&#xff1a;上一篇…

web前端学习(三十六)——JavaScript重要语句(if...else if...else、switch、for、while、break、continue)的相关设置

1.JS条件语句 条件语句用于基于不同的条件来执行不同的动作。 通常在写代码时&#xff0c;您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。 在 JavaScript 中&#xff0c;我们可使用以下条件语句&#xff1a; if 语句 - 只有当指定条件为 t…

Button的四种点击事件

1.XML文件布局<Buttonandroid:id"id/bt1"android:layout_width"wrap_content"android:layout_height"wrap_content"android:onClick"doClick"android:text"XML添加doClick"android:layout_above"id/bt2"androi…

zabbix 安装 部署 网络监控

zabbix 部署详解zabbix简介是一个高度集成的网络监控解决方案&#xff0c;可以提供企业级的开源分布式监控解决方案&#xff0c;由一个国外的团队持续维护更新&#xff0c;软件可以自由下载使用&#xff0c;运作团队靠提供收费的技术支持赢利Zabbix主要功能&#xff1a;- CPU负…

python fail to execute,用python可视化文件时报ExecutableNotFound: failed to execute ['dot', '-Tsvg']的错...

如上图所示&#xff0c;运行代码之后报ExecutableNotFound: failed to execute [dot, -Tsvg], make sure the Graphviz executables are on your systems PATH的错误&#xff0c;起初以为原因是未安装graphviz模块&#xff0c;pip一下发现还是不行&#xff0c;后来才发现需要先…