一、JavaScript获取用户输入
我们详细看一下JS后面获取用户输入的信息原理
普通数据(输入、选择) 标签对象.value
文件数据(上传)标签对象.files 拿文件对象.file[0]
<!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>
二、JavaScript类属性操作
标签对象.classList 获取当前标签所有的值
标签对象.classList.contains() 判断当前标签是否存在 存在返回true 否则返回false
标签对象.classList.add() 添加类属性
标签对象.classList.remove() 删除类属性
标签对象.classList.toggle() 类存在就删除，否则添加
<!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>
三、JavaScript样式操作
标签对象.style.标签样式属性名
backgroundColor
backgroundImage
backgroundPosition
...
<!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>
四、事件
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action）
比如当用户点击某个HTML元素时启动一段 JavaScript 下面是一个属性列表 这些属性可插入 HTML 标签来定义事件动作
事件可以简单的理解为是给html标签绑定了一些额外的功能(能够触发js代码的运行)
| 语法 | 说明 |
|---|---|
| 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>
事件中的关键字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指代的是当前被操作的标签对象'''
等待文档加载完毕之后再执行一些代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
window.onload = function () {
页面js代码 # 这里专门写 文档加载完毕之后的代码
}
</style>
</head>
<body>
</body>
</html>
五、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>
下拉选择框联动事件
<!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>
技术小白记录学习过程，有错误或不解的地方请指出，如果这篇文章对你有所帮助请
点点赞收藏+关注谢谢支持 !!!
541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
