JavaScript学习笔记（三），js中的事件，this的使用、表单验证、省市级联下拉框案例

最新推荐文章于 2022-06-24 16:09:13 发布

清如许.

最新推荐文章于 2022-06-24 16:09:13 发布

阅读量504

点赞数

分类专栏：前端技术 JavaWeb入门编程文章标签： js事件 onclick js中this的使用省市二级联动

本文链接：https://blog.csdn.net/MacWx/article/details/95043645

版权

JavaWeb入门编程同时被 2 个专栏收录

38 篇文章 1 订阅

订阅专栏

前端技术

18 篇文章 0 订阅

订阅专栏

1、什么是事件？干什么用？

事件三要素：

事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)

2、几种常用的事件：

鼠标的相关事件

onclick就是元素的点击事件。
onmouseover:鼠标移入到元素上面时的事件
onmouseout：鼠标移除元素上面时的事件。

文本框有的事件：
onfocus：文本框获取到焦点的事件
onblur：文本框失去焦点时的事件。

表单：
onsubmit:表单提交事件。

下拉列表框，文本框
onchange：内容改变时的事件。

页面加载事件
onload：页面的元素加载完后的事件。

注意：

所有的事件都是以on开头
所有的事件的值都是一个函数。

使用事件有两种写法。

第一种写法：
使用dom元素调用事件

Dom元素.onclick=function(){
	...;
}

第二种写法：
在HTML表单里面增加事件属性
HTML：
< input type=“button” οnclick=“test()”/>

Function test(){
	....;
}

事件使用案例1：
通过按钮点击事件实现图片的切换：

	<script type="text/javascript">
		function test(){
			//document.getElementById("img1").src="img/bulb_on.png";
			//1.获取到img标签的src值，判断该值是off还是on
			var domObj=document.getElementById("img1");
			if(domObj.src.indexOf("bulb_off.png")>=0){
				domObj.src="img/bulb_on.png";
			}else{
				domObj.src="img/bulb_off.png";
			}
		}
	</script>
  </head>
  <body>
    <img src="img/bulb_off.png" id="img1"/><br/>
    <input type="button" value="开\关" onclick="test()"/>
  </body>
</html>

案例2：
修改超链接的连接地址

	<script type="text/javascript">
		function test(){
			//1.获取到a标签
			var domObj=document.getElementById("a1");
			//2.修改a标签的标签内容。innerHTML：标签内容  value
			domObj.innerHTML="淘宝";
			//3.修改标签的href属性
			domObj.href="http://www.taobao.com";
		}
	</script>
  </head>
  <body>
    <a id="a1" href="http://www.baidu.com">百度</a><br/>
    <input type="button" value="更改" onclick="test()"/>
  </body>
</html>

Value属性和innerHTML属性的区别：
Value是一般用在文本框中。因为文本框标签有value属性。
innerHTML是div，p，h1，a这样的标签中，这些标签没有value，是通过标签内容展示数据的。

获取元素的两种方式：
第一种获取元素的方式：

Document.getElementById(“id值”)

第二种获取元素的方式：

Document.getElementsByName(“name值”);

两者的区别：

参数不一样。一个是id，另一个是name
返回值类型不一样。一个是一个元素，另一个是一个元素数组。

案例3，
修改div的class属性

	<style type="text/css">
		.test{
			border:1px solid red;
			width:100px;
			height:100px;
		}
		.test2{
			background-color:blue;
		}
		
	</style>
	<script type="text/javascript">
		function test(){
			//className就是html标签的class属性，因为class是关键字，所以在js中用className替换class
			document.getElementById("div1").className="test test2";
		}
	</script>
  </head>
  <body>
  	<div id="div1" class="test" onmouseover="test()"></div>
  </body>
</html>

Js操作元素的class属性时要使用className

This的使用

this表示当前元素，this写在了哪个标签里面，哪个标签就是this元素。
在这里插入图片描述

表单验证

在我们点击form表单的提交按钮后，让js代码对用户输入的信息做简单的验证工作（比如用户名和密码不能为空），
验证通过了，就让表单提交，验证不通过就给出错误提醒。
onsubmit是表单验证的一个重要事件。
提交按钮的onclick事件是拦截不住表单的提交的。只有form的onsubmit事件才有机会拦截表单的提交。
案例4，

<script type="text/javascript">
		function checkName() {
			var name = document.getElementById("name").value;
			if (name =="") {
				document.getElementById("namemsg").innerHTML="用户名不能为空!";
				return false;
			}
			return true;
		}
		function checkPwd() {
			var pwd = document.getElementById("pwd").value;
			if (pwd =="") {
				document.getElementById("pwdmsg").innerHTML="密码不能为空！";
				return false;
			}
			return true;
		}
		function sub() {
			if (checkName()&checkPwd()) {
				return true;
			}
			return false;
		}
	
	</script>
  </head>
  <body>
<form action="${pageContext.request.contextPath }/user/login" onsubmit="return sub()">
	username:<input type="text" name="username" id="name" onblur="checkName()" ><span style="color: red;" id="namemsg"></span><br/>
	password:<input type="password" name="password" id="pwd" onblur="checkPwd()"><span style="color: red;" id="pwdmsg"></span><br/>
	<input type="submit">
</form>

在该示例中，
在这里插入图片描述
表单验证的步骤：

给文本框后面添加一个空的标签span。提示错误信息。
给每个文本框添加onblur事件。当用户输入完后，光标离开时给出错误提醒。
在每个onblur事件对应的函数里面要return true和false。作用是确定表单是否提交
我们要在form里面添加onsubmit事件。Onsubmit=”return checkForm()”
我们需要在checkForm调用每一个onblur事件对应的函数。

案例5、省市级联下拉框

使用js实现省市级的二级联动操作

<script type="text/javascript">
	window.onload = function() {
		var provinces = [ "请选择省份", "河南", "湖北", "山东", "山西" ];
		var htm = "";
		for (var i = 0; i < provinces.length; i++) {
			htm += "<option"+" value="+i+">" + provinces[i] + "</option>";
		}
		document.getElementById("pro").innerHTML = htm;
	}
	function test() {
		var pro = document.getElementById("pro").value;
		var citys = [ [ "请选择城市" ], [ "郑州", "安阳", "洛阳" ], [ "武汉", "襄阳", "荆州" ] ];
		var cs = citys[pro];
		var html = "";
		for (var i = 0; i < cs.length; i++) {
			html += "<option>" + cs[i] + "</option>";
		}
		document.getElementById("city").innerHTML = html;
	}
</script>
</head>
<body>
	<select onchange="test()" id="pro">
		<option value="0">--请选择省份--</option>
	</select>
	<select id="city">
		<option>--请选择城市--</option>
	</select>
</body>
</html>