javaScript_9 11-21

最新推荐文章于 2021-06-05 00:48:03 发布
最新推荐文章于 2021-06-05 00:48:03 发布
阅读量78 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44907496/article/details/110072010
版权

JavaScript_9

Javascript中的dom对象

  1. 控制html元素
  2. 控制html元素的属性
  3. 控制css
  4. 控制事件
    1.按钮点击事件 onclick
    具体用法:
    < script>
    function 点击事件的处理函数（）{
    //事件处理动作
    }
    < /script >
    < input type=”button” value=”按钮” οnclick=”按钮点击以后的处理函数”/>
    2.页面初始化事件 onload
    具体用法:
    < script>
    function 处理函数（）{
    //事件处理动作
    }
    < /script>
    < body οnlοad=”处理函数”>< /body>
    3.常见的javascript事件，事件的具体使用方法

1.页面初始化事件

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

在这里插入图片描述

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

在这里插入图片描述
2. 按钮点击事件 onclick

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>按钮点击事件onlick</title>
	<script>
		function testclick(){
			alert("按钮点击事件");
		}
	</script>
</head>
<body>
	<input type="button" value="测试按钮点击事件" onclick="testclick();">
</body>
</html>

在这里插入图片描述

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

在这里插入图片描述
3. onchange 事件，当用户改变输入字段的内容时触发

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>onchange事件</title>
	<script>
		function testonchange(){
			alert("输入内容被改变是触发");
		}
	</script>
</head>
<body>
	<input type="text" value="hello" onchange="testonchange();">
</body>
</html>

在这里插入图片描述

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

在这里插入图片描述
4. onfocus当获得焦点时触发
5. onblur当失去焦点时触发

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>onfocus和onblur</title>
	<script>
		function testonfocus(){
			var text1=document.getElementById("text1");
			text1.value="";
		}
		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" id="text1" value="请输入手机号码" onfocus="testonfocus();">
</body>
</html>

在这里插入图片描述
6. onmouseover 和 onmouseout 事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>onmouseover和onmouseout事件</title>
	<script>
		window.onload=function(){
			var img1=document.getElementById("img1");

			img1.onmouseover=function(){
				img1.style.width="250px";
				img1.style.height="250px";
			}
			img1.onmouseout=function(){
				img1.style.width="150px";
				img1.style.height="150px";
			}
		}
	</script>
</head>
<body>
	<img src="imgs/18.jpg" alt="" id="img1" width="200px" height="200px">
</body>
</html>
  1. onsubmit 事件会在表单中的确认按钮【submit】被点击时发生。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>onsubmit事件</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=="zhangsan" && password==123456){
				alert("登陆成功");
				return true;
			}else{
				span1.innerHTML="用户名或密码错误！"
				return false;
			}
		}
	</script>
</head>
<body>
	<span id="span1"></span>
	<form action="#" method="get" onsubmit="return testOnsubmit()">
		用户名：<input type="text" id="text1" name="username"><br>
		密码：<input type="password" id="pass1" ><br>
		<input type="button" value="普通按钮"><br>
		<input type="submit" value="登陆">
	</form>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
8. onkeydown 事件会在用户按下一个键盘按键时发生。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>onkeydown事件</title>
	<script>
		function testkeydown(){
			var num=event.keyCode;
			if(num==65 || num==37){
				alert("向左移动");
			}
		}
	</script>
</head>
<body onkeydown="testkeydown(event);">
	
</body>
</html>

在这里插入图片描述

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

创建新的 HTML 元素
document.createElement(“元素名称”);
document.createTextNode(“文本内容”);
父元素的dom对象.appendChild(node);
删除元素 父元素的dom对象.removeChild(子元素的dom对象);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		div{
			width: 300px;
			height: 300px;
			background-color: pink;
		}
	</style>
	<script>
		window.onload=function(){
			var addbut=document.getElementById('add');
			var delbut=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);
			}
			delbut.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 type="button" id="add" value="添加元素"><br>
	<input type="button" id="delete" value="删除元素">
</body>
</html>

在这里插入图片描述

weixin_44907496
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 页面的生命周期、HTML 事件
墨鱼菜鸡
07-11 924
From：https://blog.csdn.net/WuLex/article/details/101016936 1、页面生命周期 HTML页面的生命周期有以下三个重要事件，每个事件都有特定的用途 DOMContentLoaded： 浏览器已经完全加载 HTML，DOM 树已经构建完毕，js 可以访问所有DOM节点，初始化界面。但是像是&l...
HTML.5初始
qq_52796714的博客
07-18 391
初始HTML5，对其页面结构，基本标签认知
JavaScript学习基础学习心得
10-24
JavaScript基础深度原理学习心得，从中可以领略到JavaScript比较有深度的知识理解 JavaScript基础深度原理学习心得，从中可以领略到JavaScript比较有深度的知识理解
【总结整理】javascript基础入门学习（慕课网学习）
weixin_33922672的博客
01-24 87
https://www.imooc.com/learn/36 注意:javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。 输出HT...
JavaScript学习小结
长歌行
04-17 2432
学习目的： 1.Web相关开发越来越流行，学习JS十分有必要 2.多学习一种语言，想多了解一种语言的文化内涵 3.认识一下脚本语言，之前一直学习C，C++，换换口味 学习途径： 1.之前实习期间的项目积累 2.互联网的各种零碎的资料 3.codecademy的在线Js教学课程（冗长细致的课程，打字打到手抽筋） 4.各种书本，如《headfirst Js》等 零星的
Tutoria_17-Abril-21
04-18
...这个名为"Tutoria_17-Abril-21"的教程可能是...学习HTML是成为一名Web开发者的基础，通过"Tutoria_17-Abril-21"这个教程，你将能够掌握创建动态、交互式网页的基本技能，并为深入学习CSS和JavaScript打下坚实的基础。
wtpk21_week3_state-management
04-05
在JavaScript编程领域中...以上就是关于“wtpk21_week3_state-management”主题的主要知识点，涵盖了JavaScript中状态管理的基本概念、工具和最佳实践。理解和掌握这些知识，对于开发高效、可维护的前端应用至关重要。
Vue_ElementUI-ING-2021_01:Vue＆ElementUI
03-08
9_条件渲染 10_事件处理 11_事件对象 12_表单处理 13_实战练习1 14_实战练习2 15_实战练习3 16_vue组件 17_vue组件对象 18_vue组件对象剖析 19_props属性 20_父子组件间通信 21_父子组件间通信（2） 22_访问父子...
IFE_Tasks-and-notes:百度前端技术学院的课程及笔记
05-08
第9~11天：完成一个漂亮的网页 预览地址： 第12~15天：完成一个更复杂的网页 预览地址：https://cristinaguan.github.io/IFE_Tasks-and-notes/基础学院/Day12-15_Task/MoreComplexWeb.html 第17~18天：“如果”可以...
javascript-interview-questions:使用JavaScript解决面试问题
05-20
9. 高阶函数：map、filter、reduce等函数的应用，以及函数作为参数传递和返回。 四、异步编程 10. 回调函数：理解其在异步操作中的角色，以及回调地狱的问题。 11. Promise：掌握Promise的创建、链式调用以及错误...
HTML页面初始化
06-16
重设浏览器的样式。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以有了CSS Reset，以让网页的样式在各浏览器中表现一致。
init:html初始化
06-14
HTML初始集 内容 HTML 字符编码为 UTF-8 说明是 html5 删除未使用的js 在初始状态，id = `Wrapper` 被设置 CSS 用 YUI 重置 less.js 可用 JavaScript 在js文件夹的main.js中描述 main.js 加载了 jQery Underscore.js 也是初始加载的 图书馆相关 JavaScript jQuery 下划线.js 三.js 少.js Modernizr.js html5.js excanvas.js CSS YUI 重置 CSS
html初始化代码
11-05
针对各浏览器对html标签默认初始值的不同，而编写的代码。
前端技能点--页面初始化方法
程序员大阳
11-17 3399
window.onload代表窗口页面全部加载完毕（包括图片等）后触发的事件
HTML 页面初始化
时越的博客
09-03 2402
body {margin:0;padding:0;}
html 页面加载事件,页面加载事件--DOMContentLoaded
weixin_39621695的博客
06-05 2538
DOMContentLoaded 和 window.onload 的区别当页面完全加载完毕后会触发 window.onload 事件，我们知道可以利用 window.onload 事件来触发并执行需要页面完全加载完毕后才能执行的 javascript 脚本，但是假如页面包含很多样式文件、图片文件、子框架页面(iframe)的话，onload 事件也会被相应延迟到这些文件加载完成才执行，有时候并不是...
[转贴]ASP.NET Web 页面生命中的一天
阿赖.NET
06-28 2553
ASP.NET Web 页面生命中的一天 Dino EspositoWintellect 2003 年 8 月 适用于：    Microsoft? ASP.NET 摘要：了解为 ASP.NET Web 页面建立的事件模型，以及 Web 页面转变为 HTML 过程中的各个阶段。ASP.NET HTTP 运行时负责管理对象管道，这些对象首先将请求的 URL 转换成 Page 类的具体实例，然后再将
js处理html页面加载之后的事件
836811384
10-30 403
&lt;script type="text/javascript"&gt; window.onload=function(){ alert("加载完毕") } &lt;/script&gt;
Professional JavaScript for Web Developers, 3rd Ed. -核心技术解析
"Professional JavaScript for Web Developers, 3rd Edition" 是一本专为Web开发者编写的深入探讨JavaScript的书籍，涵盖了从基础到高级的各种主题。 本书由以下章节组成： 1. 什么是JavaScript？ - 这一章介绍了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值