Javascript学习（第九章）

Smrsar

已于 2023-02-11 13:49:18 修改

阅读量305

点赞数

分类专栏： # JavaScript Java 文章标签： javascript 学习 html

于 2022-10-07 22:09:58 首次发布

本文链接：https://blog.csdn.net/weixin_59973239/article/details/127199676

版权

Java 同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

一，document对象常用事件

onkeydown事件

指在文档中按下某个键时触发。

ondrag事件

指在文档中进行拖拽操作时持续触发的事件。

二，表单元素的常用事件

表单对象的常用属性，方法和事件
属性	action	表单数据将提交到的页面
属性	method	提交表单的方法，get()方法和post()方法
方法	submit()	提交表单
事件	onsubmit	表单提交时触发，返回值是false将不提交表单数据

三，文本框对象

文本框对象的常用属性，方法和事件
属性	value	文本框内容
属性	readonly	文本框的内容不能手动修改，但可以通过程序改变
方法	focus()	使文本框获得焦点
方法	select()	使文本框内容被选中
事件	onblur	光标离开文本框时触发
	onfocus	光标进入文本框时触发
	onchange	文本框的内容已改变且失去焦点时触发

四，复选框对象

复选框对象的常用属性和事件
属性	checked	获取或设置复选按钮是否选中；代码中可以通过改变该属性来设置复选框
属性	value	获取或设置复选框value属性的值
事件	onblur	失去焦点时触发
	onfocus	获得焦点时触发
	onclick	鼠标单击时触发

五，单选按钮对象

单独按钮对象的常用属性和事件
属性	checked	获取或设置复选按钮是否选中；代码中可以通过改变该属性来设置单选按钮的状态
属性	value	获取或设置复选框value属性的值
事件	onblur	失去焦点时触发
	onfocus	获得焦点时触发
	onclick	鼠标单击时触发

六，下拉列表对象

下拉列表对象的常用属性和事件
属性	length	返回下拉框中的选项总数
	selectedIndex	返回被选中的选项的索引号，从0开始；设置该属性值来改变当前选中的选项
	options	所用的选项组成的一个数组
	value	被选中的选项的value属性值
事件	onblur	失去焦点时触发
	onfocus	获得焦点时触发
	onchange	选项发生改变是触发

八，鼠标跟随

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标跟随</title>
		<style type="text/css">
			div{
				position:relative;
				width: 60px;
				height: 511px;
			}
			img{
				border-radius: 5px;
			}
			p{
				width: 500px;
				height: 300px;
				position: absolute;
				left: 0;
				top: 0;
				background-color: rgba(0,0,0,0.709);
				color: white;
				padding: 10px;
				display: none;
				pointer-events: none;
			}
		</style>
		
	</head>
	<body>
		<div id="div_1">
			<img src="img/1.jpg" alt="" >
			<p>
				<strong>简介</strong>
				<span>
					一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一
					一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一
					一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一
					一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一
					一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一
					一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一
					一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一
				</span>
			</p>
		</div>
		<script type="text/javascript">
			//获取div
			var div_1=document.getElementById("div_1")
			//鼠标移入到div上
			div_1.onmouseover=function(){
				//将p标签显示
				document.querySelector("p").style.display="block"
			}
			//onmouseout:鼠标从元素移开时触发的事件
			div_1.onmouseout=function(){
				//将p标签隐藏
				document.querySelector("p").style.display="none"
			}
			//onmousemove:鼠标移动时触发的事件
			div_1.onmousemove=function(event){
				document.querySelector("p").style.top=event.offsetY+"px"
				document.querySelector("p").style.left=event.offsetX+"px"
			}
		</script>
	</body>
</html>