JavaScript基本事件_document.queryselector('img')-CSDN博客

本文链接：https://blog.csdn.net/Hrgge/article/details/127092674

基本事件

onblur   元素失去焦点后
onchange   选项发生改变时触发
onclick   鼠标在元素上单击时
ondblclick   鼠标在元素上双击时
onfocus   元素获得焦点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#div0{
			width: 880px;
			height: 400px;
			background-image:url(img/1.jpg) ;
			background-repeat:no-repeat ;
		}
	</style>
	<body>
		<div class="list">
			<img src="img/1.jpg" width="200" />
			<img src="img/2.jpg" width="200"/>
			<img src="img/3.jpg" width="200"/>
			<img src="img/4.jpg" width="200"/>
			
		</div>
		<div id="div0" style="background-image: url(img/1.jpg);">
			
		</div>
		<script type="text/javascript">
			var imgs =document.querySelectorAll(".list img")
			//console.log(imgs)
			//给每一个img标签绑定一个onmouseover事件：鼠标移入到标签上触发的事件
			for(var i =0;i<imgs.length;i++){
				imgs[i].onmouseover=function(){
					document.getElementById("div0").style.backgroundImage="url("+this.src+")"
				}
			}
		</script>
		
	</body>
</html>

value 被选中项的value值

length 下拉选项的个数

selectedIndex 选中项的索引，可以修改选中项

options 所有下拉选项的数组

<!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="text" name="pwd1" id="pwd1" value="" onblur="checkPwd(1)" />
				</td>
				<td>
					<label id="msg2"></label>
				</td>
			</tr>
			<tr>
				<td>确认密码：</td>
				<td>
					<input type="text" 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 reg1 = /^\w{6,}$/
				if (n == 1) {
					if (reg1.test(pwd1)) {
						document.getElementById("msg2").innerHTML = "密码格式正确"
						return true
					} else {
						document.getElementById("msg2").innerHTML = "密码格式不正确"
						return false
					}
				} else {
					if (reg1.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
					}
				}
			}
			//下拉列表框
			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)
				}
			}
		</script>
	</body>
</html>

表单元素的常用事件

每一个表单元素(对象)都具有基本事件中列出的一到多个事件，在对表单使用事件处理程序时必须根据具体情况，使用最合适的事件。
表单对象

属性action表单数据将被提交到的页面；method提交表单的方法，get()方法和post()方法

方法submit()提交表单

事件onsubmit表单提交时触发，返回值是false将不提交表单数据

<!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：指的是就是当前的对象（触发该事件的标签）
				//console.log(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>