JavaScript入门--09

最新推荐文章于 2023-04-23 17:36:50 发布
最新推荐文章于 2023-04-23 17:36:50 发布
阅读量94 收藏
点赞数
分类专栏： JavaScript 笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_50855580/article/details/110083103
版权

JavaScript_9

Javascript中的dom对象
1.控制html元素
2.控制html元素的属性
3.控制css
4.控制事件
    

  • 1.按钮点击事件 onclick

具体用法:

<script>
function    点击事件的处理函数（）{
    //事件处理动作
}
</script>
<input type=”button” value=”按钮”  onclick=”按钮点击以后的处理函数”/>
  • 2.页面初始化事件 onload

具体用法:

<script>
function    处理函数（）{
    //事件处理动作
}
</script>
<body   onload=”处理函数”></body>
  • 3.常见的javascript事件，事件的具体使用方法

         - 3.1.页面初始化事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件初始化</title>
		<script>
			function testOnload(){
				alert("页面初始化1");
		}
		</script>
	</head>
	<body onload="testOnload();">
		
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				alert("通过window对象调用onload事件");
			}
		</script>
	</head>
	<body>
		<!-- 通过window对象调用onload事件 -->
	</body>
</html>

在这里插入图片描述

         - 3.2.按钮点击事件 onclick

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function testClick(){
				alert("按钮点击事件1");
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="" value="按钮点击事件1" onclick="testClick()"/>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按钮点击事件2</title>
		<script type="text/javascript">
			window.onload=function(){
				var but1=document.getElementById("but1");
				but1.onclick=function(){
					alert("按钮测试2");
				}
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="but1" value="按钮点击事件2" />
	</body>
</html>

在这里插入图片描述

  - 3.3. onchange 事件，当用户改变输入字段的内容时触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function testonchange(){
				alert("输入内容被改变1");
			}
		</script>
	</head>
	<body>
		<input type="text" name="" id="" value="测试" onchange="testonchange();"/>
	</body>
</htm

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var text1=document.getElementById("text1");
				text1.onchange=function(){
					alert("输入内容被改变是触发2");
				}
			}
		</script>
	</head>
	<body>
		<input id="text1" type="text"  value="hello"  />
	</body>
</html>

在这里插入图片描述

 - 3.4.onfocus当获得焦点时触发
  - 3.5.onblur当失去焦点时触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>当失去焦点时触发</title>
		<script type="text/javascript">
				window.onload=function(){
					var text1=document.getElementById("text1");
					text1.onblur=function(){
						var reg1=new RegExp(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/);
						var val=text1.value;
						var boo=reg1.test(val);
						if(boo){
							alert("手机号码正确，获取短息验证码");
						}else{
							alert("手机号码不正确，请重新输入");
						}
					}
			}
		</script>
	</head>
	<body>
		<input type="text" name="" id="text1" value=""οnclick="textonblur()" />
	</body>
</html>

在这里插入图片描述

  - 3.6.onmouseover 和 onmouseout 事件(鼠标进入，鼠标滑出)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				width: 15.625rem;
				height: 15.625rem;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var img1=document.getElementById("img1");
				img1.onmouseover=function(){
					img1.style.width="150px";
					img1.style.height="150px";
				}
				img1.onmouseout=function(){
					img1.style.width="500px";
					img1.style.height="500px";
				}
			}
		</script>
	</head>
	<body>
		<img id="img1" src="img/1.jpg" >
	</body>
</html>

在这里插入图片描述

  - 3.7.onsubmit 事件会在表单中的确认按钮【submit】被点击时发生。

  • 1.普通按钮type=“button”,无法触发表单提交事件onsubmit

  • 2.onsubmit事件对应的处理函数一定要有返回值【boolean】

    true—提交表单数据
    false—不提交表单数据

  • 3.表单的οnsubmit=“return 处理函数”;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>会在表单中的确认按钮【submit】被点击时发生。</title>
		<script>
		
			function  testOnsubmit(){
				var text1=document.getElementById("text1");
				var pass1=document.getElementById("pass1");
				var span1=document.getElementById("span1");
				var username=text1.value;
				var password=pass1.value;
				if(username=="xuzhimin && password=="990313"){
					alert("登陆成功!");
					return true;
				}else{
					span1.innerHTML="<font color='red' size='7'>用户名密码错误!</font>";
					return false;
				}
			}
		</script>
	</head>
	<body>
		<span id="span1"></span>
		<form action="#" method="get" onsubmit="return  testOnsubmit();">
			用户名:<input id="text1" name="username" type="text" /><br>
			密码:<input id="pass1" name="password"  type="password" /><br>
			<input type="button" value="普通按钮" /><br>
			<input type="submit" value="登陆" />
		</form>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

  - 3.8.onkeydown 事件会在用户按下一个键盘按键时发生。

  • 1.testKeydown事件在调用的时候需要一个event参数
  • 2.event参数的keyCode属性得到键盘按键对应的数字。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function testKeydown(event){
				var num=event.keyCode;
				if(num==65 || num==37){
					alert("向左移动");
				}
				if(num==68 || num==39){
					alert("向右移动");
				}
				if(num==87 || num==38){
					alert("向上移动");
				}
				if(num==83 || num==40){
					alert("向下移动");
				}
				if(num==13){
					alert("暂停");
				}
			}
		</script>
	</head>
	<body onkeydown="testKeydown(event);">
	</body>
</html>

在这里插入图片描述
其他事件
https://www.w3school.com.cn/jsref/dom_obj_event.asp

onabort图像的加载被中断
onblur元素失去焦点。
onchange域的内容被改变
onclick当用户点击某个对象时调用的事件句柄。
ondblclick当用户双击某个对象时调用的事件句柄。
onerror在加载文档或图像时发生错误
onfocus元素获得焦点
onkeydown某个键盘按键被按下。
onkeypress某个键盘按键被按下并松开。
onkeyup某个键盘按键被松开。
onload一张页面或一幅图像完成加载
onmousedown鼠标按钮被按下。
onmousemove鼠标被移动。
onmouseout鼠标从某元素移开。
onmouseoveronmouseover
onmouseup鼠标按键被松开
onreset重置按钮被点击
onresize窗口或框架被重新调整大小
onselect文本被选中。
onsubmit确认按钮被点击。
onunload用户退出页面。

创建新的 HTML 元素
document.createElement(“元素名称”);
document.createTextNode(“文本内容”);

父元素的dom对象.appendChild(node);
删除元素 父元素的dom对象.removeChild(子元素的dom对象);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 300px;
				height: 300px;
				background-color: green;
			}
		</style>
		<script>
			window.onload=function(){
				var addbut=document.getElementById("add");
				var deletebut=document.getElementById("delete");
				addbut.onclick=function(){
					//创建元素
					var hdom=document.createElement("h1");
					var htext=document.createTextNode("这是我添加的一个元素");
					hdom.appendChild(htext);
					var divdom=document.getElementById("div1");
					divdom.appendChild(hdom);
				}
				deletebut.onclick=function(){
					var divdom=document.getElementById("div1");
					var hdom=document.getElementById("h1");
					//删除元素
					divdom.removeChild(hdom);
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<h1 id="h1">测试添加和移除元素</h1>
		</div>
		<input id="add" type="button" value="添加元素"><br>
		<input id="delete" type="button" value="删除元素"><br>
	</body>
</html>

在这里插入图片描述

三斤伍花肉
关注
专栏目录
javascript入门-基础语法笔记整理.md
12-14
一个周前自己较系统地学完 javascript，但老感觉自己对基础语法部分的掌握不够扎实，javascript 的基础语法内容实在是丰富灵活，但这部分是进大厂必不可缺的知识，于是花了不少时间耐心整理了这篇笔记，以此夯实基础...
js-primer：JavaScript入门-迷わないための入门书
02-04
JavaScript入门 はの书籍はECMAScript 2015以降をベースとしたJavaScriptの入门书です。 プログラミンミとがあるが，今のJavaScriptがよくわからないという人が，今のJavaScriptアプリケーションションを読み书きで...
JavaScript基础_9--（DOM对象2）
weixin_44906261的博客
11-24 121
Javascript中的dom对象（2） 四、控制事件 按钮点击事件 onclick 例如： <script> function 点击事件的处理函数（）{ //事件处理动作 } </script> <input type=”button” value=”按钮” onclick=”按钮点击以后的处理函数”/> 页面初始化事件 onload 例如： <script> function 处理函数（）{ //事件处理
表单
系统运维
08-05 227
表单 大多数Web页面与用户之间的交互都发生在表单中，表单中有许多交互式HTML元素如：文本域，按钮，复选框，下拉列表等。从文档对象层次图中可以看到，表单是包含在文档中的，所以要访问表单，仍然需要通过document对象来访问 Form对象 表单就是指的form标签及其里面的内容，要获取一个表单对象，可以给某个form标签加个id属性，然后使用document.getElementById方...
基于文本服务框架的拼音输入法研究与实现
fishmai的专栏
03-07 7324
摘要：目前的输入法大多采用输入法管理器-输入法编辑器（IMM-IME）进行开发，对于微软发布的新型输入法技术―文本服务框架（TSF）的研究一直比较滞后，该文论述了 TSF 的基本构成、主要接口、输入法的具体实现方法以及后续的改进，并使用该技术实现一款基本 TSF 输入法，供相关领域的研究人员参考。  　　关键词：拼音输入法；文本服务框架；动态链接库；文本服务；输入法安装  　　中图分类号：TP
微软输入法TSF SampleIME 代码浅说
Endless Encoding
08-28 4899
微软提供了一个简单的TSF拼音输入法的示例SampleIME，主要的问题是：不支持数字键选候选字，不能自动上屏，没有联想功能。在笔者开发动态输入法Windows版时，以其为蓝本，主要针对上面几个问题进行了改造：支持数字键选，支持自动上屏，支持联想。下面从应用的角度对SmapleIME源代码进行解说，看看从按键到汉字上屏这个过程都发生了什么。 SampleIME 的源代码结构 SampleIME...
控件失去焦点与获得焦点
weixin_30826761的博客
10-13 659
1.失去焦点 让控件失去焦点的方法，就是给该控件发送一个WM_KILLFOCUS的消息。可以通过下面三种方式实现 #1使用Cwnd类的PostMessage GetDlgItem(控件ID号)->PostMessage(WM_KILLFOCUS,0,0); #2获取控件的句柄，然后通过句柄直接给控件发送消息，使用函数LRESULT SendMessage(HWND hWnd, UIN...
JavaScript 教程---菜鸟教程
yitong的博客
04-23 5910
js知识点总结
JavaScript--webSocket入门
flym_的博客
08-09 5760
js–webSocket入门 Websocket 1.websocket是什么？ WebSocket是为解决客户端与服务端实时通信而产生的技术。其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接， 此后服务端与客户端通过此TCP连接进行实时通信。 2.websocket的优点 以前我们实现推送技术，用的都是轮询，在特点的时间间隔有浏览器自动发出请求...
JavaScript 入门基础 - 运算符（三）
EXIxiaozhou的博客
12-30 3559
JavaScript 入门基础 - 运算符（三）
JavaScript入门
微风洋洋的博客
02-10 9347
JavaScript入门秘籍，欲练此功，关注有功
javascript入门笔记5-事件
热门推荐
方志朋的专栏
10-13 2万+
事件响应
JavaScript教程--从入门到精通.zip
最新发布
09-16
本教程“JavaScript教程--从入门到精通”旨在帮助初学者全面掌握JavaScript的核心概念和技术，进一步提升至精通水平。 首先，JavaScript的基本语法是学习的起点。这包括变量、数据类型（如字符串、数字、布尔值、...
BigDecimal返回前端保留所有精度的问题解决
sinat_50855580的博客
01-26 1739
在实际开发中我们有时候对数据精度要求高的时候会使用BigDecimal，但是有时候会发生0.5000返回给前端的时候转成0.5的问题 这时我们只需在bean属性中加上@JsonFormat(shape = JsonFormat.Shape.STRING)注解 如下： @JsonFormat(shape = JsonFormat.Shape.STRING) @Excel(name = "人民币金额", width = 15) @ApiModelProperty(value = "人民币金额"
Public Key Retrieval is not allowed错误的解决方法
sinat_50855580的博客
10-09 1683
Public Key Retrieval is not allowed 在mybatis的URL后加 Public Key Retrieval is not allowed 最后就是下面这个样子：
使用Excel批量添加数据
sinat_50855580的博客
09-27 1196
使用XSSF Excel批量导入 大致的思路：先使用XSSF读取到数据，保存在list中的对象，验证数据，循环添加 XSSF的过程：读取所有行数–》开始循环（第一层）—》读取列数—》开始循环（第二层）–》读取当前行列的数据添加到对象中—》循环结束—》将对象add到list中 public Result<?> dataImport(String path) { Result<?> result = new Result<>(); Simple
HTML基础---01
sinat_50855580的博客
03-02 917
1. html是什么？ HTML超文本标记语言,是一种用来描述网页的一种标记语言。 2. html的作用？ 制作网页，将来可以充当软件的界面。 3. html的编辑工具       3.1 记事本              1.1 新建记事本文件              1.2 写入html代码 <ht
JavaScript复习总结
sinat_50855580的博客
11-26 582
Javascritp 1.javaScript是什么？ javaScript----是一种面向对象的脚本语言。 2.javaScript的作用？ 直接向html文件中写出标记和内容。 对事件的反应 改变 HTML 内容 改变 HTML 图像 改变 HTML 样式 验证输入 3.javascript的基本用法[如何将javascript融入到html中] html标记中的事件属性中执行 <input type=”button” value=”测试javascript” onclick=”var
JavaScript对象创建详解-从入门到精通
"在JavaScript中创建新对象是通过定义对象并为其创建实例来实现的。JavaScript是一种基于对象、事件驱动的脚本语言，由Netscape公司开发，它不需要编译器，直接在Web浏览器中运行，因此在Web开发中广泛应用。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值