js总结8

最新推荐文章于 2024-07-18 10:24:18 发布

一定不能掉头发

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量71

点赞数

文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/LOOKOUTSTT/article/details/127093594

版权

表单元素-下拉列表

属性：

value：被选中的value值

length:下拉选项的个数

selectdlndex:选中项的索引，可以修改中项

options:所有下拉选项的数组

事件：

onblur:下拉列表失去焦点时触发

onfocus:下拉列表获得焦点时触发

onchance:选项发生改变时触发

 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul {
				list-style: none;
			}
		</style>
	</head>
	<body>
		<p>
			<input type="checkbox" id="selectAll" />全选/全不选
		</p>
		<hr>
		<ul class="shop">
			<li><input type="checkbox" />苹果</li>
			<li><input type="checkbox" />梨</li>
			<li><input type="checkbox" />葡萄</li>
			<li><input type="checkbox" />香蕉</li>
			<li><input type="checkbox" />榴莲</li>
		</ul>
		<script type="text/javascript">
			var cbs = document.querySelectorAll(".shop input")
			document.getElementById("selectAll").onclick = function() {
				//this:指的是当前对象
				//获取到当前复选框的选中状态
				var isChecked = this.checked
				//获取水果列表
 
				for (var i = 0; i < cbs.length; i++) {
					cbs[i].checked = isChecked
				}
			}
			//给水果列表中的每一个复选框绑定一个单击事件
			for (var i = 0; i < cbs.length; i++) {
				//绑定单击事件
				cbs[i].onclick = function() {
					var count = 0 //用来存储被选中的水果的个数
					for (var j = 0; j < cbs.length; j++) {
						if (cbs[j].checked) {
							count++
						}
					}
					if (count == cbs.length) {
						document.getElementById("selectAll").checked = true
					} else {
						document.getElementById("selectAll").checked = false
					}
				}
			}
		</script>
	</body>
 
 
</html>

事件注册方式

将事件绑定到元素属性

将事件绑定到对象属性

鼠标事件

onmousedown:按下鼠标键

onmousemove:移动鼠标

onmouseout:鼠标离开某一个网页对象

onmouseup:松开鼠标键

onclick:单击鼠标键

ondblcick:双击鼠标键

键盘事件

onkeydown:按下一个键

onkeyup:松开一个键

onkeypress:按下然后松开一个键

Window对象常用事件
onload():对象装载完成后触发

onscroll():窗口的滚动条被拖动时触发

onresize():窗口的大小改变时触发

onblur()/onfocus():窗口失去/获得焦点时触发

onerror():遇到执行错误时触发

onunload():对象被卸载后触发

 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr>
				<td>账户：</td>
				<td>
					<input type="text" name="uname" id="uname" value="" onblur="checkUname()" />
				</td>
				<td>
					<label id="msg1"></label>
				</td>
			</tr>
			<tr>
				<td>密码：</td>
				<td>
					<input type="password" name="pwd1" id="pwd1" value="" onblur="checkPwd(1)" />
				</td>
				<td>
					<label id="msg2"></label>
				</td>
			</tr>
			<tr>
				<td>确认密码：</td>
				<td>
					<input type="password" name="pwd2" id="pwd2" value="" onblur="checkEquals()" />
				</td>
				<td>
					<label id="msg3"></label>
				</td>
			</tr>
			<tr>
				<td>家庭住址：</td>
				<td>
					<select name="province" id="province" onchange="changeOpt()">
						<option value="请选择省份">--请选择省份--</option>
						<option value="河南省">--河南省--</option>
						<option value="四川省">--四川省--</option>
						<select>
							<select name="cities" id="cities">
								<option value="请选择城市">--请选择城市--</option>
								<select>
				</td>
				<td>
 
				</td>
			</tr>
			<tr>
				<td colspan="3" align="center">
					<input type="button" id="btn" value="提交" />
				</td>
			</tr>
		</table>
		<div id="result">
 
		</div>
		<script type="text/javascript">
			function checkUname() {
 
 
				//实现用户名验证，用户名只能是英文，且长度至少是6位
				var reg = /^[a-zA-Z]{6,}$/
				//获取文本的值
				var username = document.getElementById("uname").value
				if (reg.test(username)) {
					document.getElementById("msg1").innerHTML = "用户格式正确"
					return true
				} else {
					document.getElementById("msg1").innerHTML = "用户格式不正确"
					return false
				}
			}
			//密码和确认密码都必须是由数字，字母与下划线组成，长度必须在六位以上
			function checkPwd(n){
				var pwd1=document.getElementById("pwd1").value
				var pwd2=document.getElementById("pwd2").value
				var reg=/^\w{6,}$/
				if(n==1){
					if (reg.test(pwd1)) {
						document.getElementById("msg2").innerHTML = "密码格式正确"
						return true
					} else {
						document.getElementById("msg2").innerHTML = "密码格式不正确"
						return false
					}
				}else{
					if (reg.test(pwd2)) {
						document.getElementById("msg3").innerHTML = "确认密码格式正确"
						return true
					} else {
						document.getElementById("msg3").innerHTML = "确认密码格式不正确"
						return false
					}
				}
			}
			//用来判断密码和确认密码是否一致
			function checkEquals(){
				var pwd1=document.getElementById("pwd1").value
				var pwd2=document.getElementById("pwd2").value
				//验证密码和确认密码是否正确
				if(checkPwd(2)){
					if (pwd1==pwd2) {
						document.getElementById("msg3").innerHTML = "密码和确认密码一致"
						return true
					} else {
						document.getElementById("msg3").innerHTML = "密码和确认密码不一致"
						return false
					}
					}else{
						return true
				}
			}
			//下拉列表
			function changeOpt(){
				var cityList=new Array()
				cityList['请选择省份']=['--请选择城市--']
				cityList['河南省']=['郑州','开封','洛阳','商丘','焦作']
				cityList['四川省']=['成都','绵阳','德阳','自贡','泸州']
				//获取选中的下拉列表
				var province=document.getElementById("province").value
				//将下拉列表清空
				document.getElementById("cities").options.length=0
				for(var i=0;i<cityList[province].length;i++){
					var opt=new Option(cityList[province][i],cityList[province][i])
					document.getElementById("cities").options.add(opt)
					}
			}
			//提交
			document.getElementById("btn").onclick=function(){
				if(checkUname()&&checkPwd(1)&&checkEquals()){
					alert("注册成功")
				}else{
					alert("注册失败")
				}
			}
		</script>
 
	</body>
</html>

一定不能掉头发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js总结8

onblur()/onfocus():窗口失去/获得焦点时触发。onscroll():窗口的滚动条被拖动时触发。onresize():窗口的大小改变时触发。onkeypress:按下然后松开一个键。onfocus:下拉列表获得焦点时触发。onerror():遇到执行错误时触发。onunload():对象被卸载后触发。onblur:下拉列表失去焦点时触发。onchance:选项发生改变时触发。onload():对象装载完成后触发。options:所有下拉选项的数组。length:下拉选项的个数。
复制链接

扫一扫