• JavaScript高阶(属性操作｜样式操作｜事件)

    文章目录

    一、JavaScript获取用户输入

    		我们详细看一下JS后面获取用户输入的信息原理
			普通数据(输入、选择) 标签对象.value
			文件数据(上传)标签对象.files	拿文件对象.file[0]

    • 1
    • 2
    • 3
    
			<!DOCTYPE html>
			<html>
				<head>
					<meta charset="utf-8">
					<title></title>
				</head>
				<body>		
					<input type="text" name="" id="d1">			# 普通文本
					<input type="password" name="" id="d2">		# 密码文本
					<input type="radio" name="" id="d3">男		# 单选按钮
					<input type="radio" name="" id="d4">女
					<select name="" id="d5">					# 下拉框
						<option value="111">111</option>
						<option value="223">222</option>
						<option value="333">333</option>
					</select>
					<input type="file" name="" id="d6">			# 文件获取
				</body>
			</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    在这里插入图片描述

    二、JavaScript类属性操作

    		标签对象.classList				获取当前标签所有的值
		标签对象.classList.contains() 	判断当前标签是否存在 存在返回true 否则返回false
		标签对象.classList.add()			添加类属性
		标签对象.classList.remove()	删除类属性
		标签对象.classList.toggle()		类存在就删除，否则添加

    • 1
    • 2
    • 3
    • 4
    • 5
    			<!DOCTYPE html>
			<html>
				<head>
					<meta charset="utf-8">
					<title></title>
					<style>
						.c1 {width: 400px; height: 400px; border-radius:50%; border: 3px solid black;}
						.c2 {background-color: aquamarine;}
						.c3 {background-color: aqua;}
					</style>
				</head>
				<body>
					<div class="c1 c2 c3"></div>
				</body>
			</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在这里插入图片描述

    三、JavaScript样式操作

    		标签对象.style.标签样式属性名
			backgroundColor
		 	backgroundImage
		 	backgroundPosition
		   ...

    • 1
    • 2
    • 3
    • 4
    • 5
    			<!DOCTYPE html>
			<html>
				<head>
					<meta charset="utf-8">
					<title></title>
					<style>
						p{background-color: ;
						  background-image: ;
						  background-position: ;
						}
					</style>
				</head>
				<body>
					<p>我高攀不起你昂贵的怀念</p>
				</body>
			</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

    四、事件

    		HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action）
		比如当用户点击某个HTML元素时启动一段 JavaScript 下面是一个属性列表 这些属性可插入 HTML 标签来定义事件动作 
		事件可以简单的理解为是给html标签绑定了一些额外的功能(能够触发js代码的运行)

    • 1
    • 2
    • 3
    语法说明
    onclick当用户点击某个对象时调用的事件句柄
    ondblclick当用户双击某个对象时调用的事件句柄
    onfocus元素获得焦点
    onblur元素失去焦点 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证
    onchange域的内容被改变 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
    onkeydown某个键盘按键被按下 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
    onkeypress某个键盘按键被按下并松开
    onkeyup某个键盘按键被松开
    onload一张页面或一幅图像完成加载
    onmousedown鼠标按钮被按下
    onmousemove鼠标被移动
    onmouseout鼠标从某元素移开
    onmouseover鼠标移到某元素之上
    onselect在文本框中的文本被选中时发生
    onsubmit确认按钮被点击，使用的对象是form
    
		绑定事件的两种方式：
			绑定方式1: 提现写好函数 标签内部指定点击的时候运行
				<input type="button" value="点我" onclick="func1()">
				<script>
					function func1(){
						alert('我说点点我就点我啊？')}	
				</script>
				
			绑定方式2: 先查询到标签 然后绑定使用 可以批量绑定
				<button id="d1">点一点</button>
				<script>
					let butEle = document.getElementById('d1')
					butEle.onclick = function(){alert('你个傻儿 你又点！')}
				</script>
				

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

    
		事件中的关键字this
			<!DOCTYPE html>
			<html>
				<head>
					<meta charset="utf-8">
					<title></title>
				</head>
				<body>
					<button id="d1">点一点</button>
					<script>
						let butEle = document.getElementById('d1')
						butEle.onclick = function(){alert('你个傻儿 你又点！')
						console.log(this)}	# 在此打印 this 是什么？
					</script>
				</body>
			</html>

		'''this指代的是当前被操作的标签对象'''

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    在这里插入图片描述

    			等待文档加载完毕之后再执行一些代码
			
			<!DOCTYPE html>
			<html>
				<head>
					<meta charset="utf-8">
					<title></title>
					<style>
						window.onload = function () {
					        页面js代码    	# 这里专门写 文档加载完毕之后的代码
					    }
					</style>
				</head>
				<body>
				
				</body>
			</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    五、JavaScript事件案例

    		校验用户账号密码输入(点击事件 oncilick)
		
		<!DOCTYPE html>
		<html lang="en">
		<head>
		    <meta charset="UTF-8">
		    <title>Title</title>
		</head>
		<body>
		<p>
		    账号：<input type="text" id="username">
		    <span class="errors" style="color: red"></span>
		</p>
		
		<p>
		    密码：<input type="text" id="password">
		    <span class="errors" style="color: red"></span>
		</p>
		    <button id="btn">提交</button>
		
		<script>
		    // 1.查找按钮标签
		    let btnEle = document.getElementById('btn');		# 拿到提交按钮的ID
		    // 2.绑定单击事件	
		    btnEle.onclick = function () {						# 当用户点击提交获取用户输入的信息
		        // 3.获取用户输入的用户名和密码
		        let userNameVal = document.getElementById('username').value;	# 获取账号
		        let passWordVal = document.getElementById('password').value;	# 获取密码
		        // 4.判断用户名和密码是否合法
		        if(userNameVal === 'LebronJames'){						# 如果账号等于LebronJames
		            // 4.1.查找获取用户名的input框下面的span标签
		            let span1Ele = document.getElementsByClassName('errors')[0];		# 拿到Div下面的span标签
		            // 4.2.给span标签添加内部文本
		            span1Ele.innerText = '你以为你是LebronJames？'}		# 给span标签添加内容不能是LebronJames
		        // 5.判断密码是否为空
		        if(passWordVal.length === 0){							# 密码输入不能为空 length获取标签长度
		            // 5.1.查找获取用户名的input框下面的span标签
		            let span1Ele = document.getElementsByClassName('errors')[1];	# 拿到Div下面的span标签
		            // 5.2.给span标签添加内部文本
		            span1Ele.innerText = '密码栏不能为空!!!'}			# 如果为空则报错
		    }
		</script>
		</body>
		</html>
			

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    在这里插入图片描述

    			下拉选择框联动事件
			
			<!DOCTYPE html>
			<html lang="en">
			<head>
			    <meta charset="UTF-8">
			    <title>省市联动</title>
			</head>
			<body>
			省份:<select name="" id="province"></select>
			市区:<select name="" id="city"></select>
				<script>
				    let data = {
				        "北京": ["朝阳区", "海淀区"],
				        "山东": ["威海市", "烟台市","青岛市"],
				        "安徽": ["芜湖市", "合肥市","南通市"],
				        "上海": ["浦东新区", "青浦区","静安区"],
				        "深圳": ["南山区","宝安区", "龙华区"]
				    };
				    // 提前找好select标签
				    let proEle = document.getElementById('province');
				    let cityEle = document.getElementById('city');
				
				    // 1.循环获取所有的省信息
				    for(let pro in data){
				        // 2.创建option标签
				        let opEle = document.createElement('option');  // <option></option>
				        // 3.添加内部文本
				        opEle.innerText = pro  // <option>省份信息</option>
				        // 4.添加value属性
				        opEle.setAttribute('value',pro)  // <option value='省份信息'>省份信息</option>
				        // 5.将上述的option标签添加到第一个select标签内
				        proEle.append(opEle)
				    }
				
				    // 给省份的下拉框绑定文本域变化事件
				    proEle.onchange = function () {
				        // 每次给市区下拉框添加市区信息之前 应该先清空上一次加载的数据
				        cityEle.innerHTML = '';
				        // 1.获取用户选择的省份信息
				        let currentPro = this.value;
				        // 2.根据省份获取对应的市区列表数据
				        let targetCityList = data[currentPro];
				        // 3.循环获取所有的市信息
				        for(let i=0;i<targetCityList.length;i++){
				            // 4.创建option标签
				            let opEle = document.createElement('option');  // <option></option>
				            // 5.添加内部文本
				            opEle.innerText = targetCityList[i]
				            // 6.添加value属性
				            opEle.setAttribute('value',targetCityList[i])
				            // 7.添加到第二个select标签内
				            cityEle.append(opEle)
				        }
				    }
				</script>
			</body>
			</html>
				

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59

    在这里插入图片描述

    技术小白记录学习过程，有错误或不解的地方请指出，如果这篇文章对你有所帮助请点点赞收藏+关注 谢谢支持 !!!

  • 相关阅读:
    【Linux】：环境变量
    包含文心一言在内的首批国产大模型 全面开放
    三道题教你快速掌握Map和Set
    Vue实现动态组件
    Servlet技术栈要点
    当下互联网行业趋势，你顶得住吗？
    STM8应用笔记8.UART应用1
    13【装饰器设计模式】
    举一反三刷穿字符串加减法类型题目：牛客BM86 大数加法、LeetCode-445. 两数相加 II、LeetCode-2. 两数相加
    STM32中的printf重定向uart1串口输出
  • 原文地址：https://blog.csdn.net/MeiJin_/article/details/126543672