学习JS基础知识：
1.事件绑定：
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><img id="龙泡泡" src="../imgs/年宝1.png"> <br><div class="cls">vivy</div><br>
<div class="cls">vimiiii</div><br><input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">游戏
<br><script>//获取：使用Document对象的方法来获取//getElementById:id获取，返回一个Element对象var img = document.getElementById("龙泡泡");//alert(img);img.src = "../imgs/年宝3.png";//getElementByTagTagName:标签名称获取，返回Element对象数组var divs = document.getElementsByTagName("div");for (let i = 0; i < divs.length; i++) {/*divs[i].style.color = 'red';*/divs[i].innerHTML = "hehe";}//getElementsByName:name属性值获取，返回Element对象数组var hobbys = document.getElementsByName("hobby");for (let i = 0; i < hobbys.length; i++) {/*alert(hobbys[i]);*/hobbys[i].checked = true;}//getElementsByClassName:根据class属性获取，返回Element对象数组var clss = document.getElementsByClassName("cls");/*for (let i = 0; i < clss.length; i++) {alert(clss[i]);}*/</script></body>
</html>
2.常见事件：
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form id="register" action="#"><input type="text" name="username" /><input type="submit" value="提交"></form><script>document.getElementById("register").onsubmit = function (){//ture：表单提交//false：表单不提交return false;}</script></body>
</html>
3.表单验证：
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>欢迎注册</title>
</head>
<body>
<div class="form-div"><div class="reg-content"><h1>欢迎注册</h1><span>已有账号？</span><a href="#">登录</a></div><form id="reg-form" action="#" method="get"><table><tr><td>用户名</td><td class="inputs"><input name="username" type="text" id="username"><br><span id="username_err" class="err_msg" style="display: none">此用户名不太受欢迎</span></td></tr><tr><td>密码</td><td class="inputs"><input name="password" type="password" id="password"><br><span id="password_err" class="err_msg" style="display: none">密码格式有误</span></td></tr><tr><td>手机号</td><td class="inputs"><input name="tel" type="text" id="tel"><br><span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span></td></tr></table><div class="buttons"><input value="注 册" type="submit" id="reg_btn"></div><br class="clear"></form>
</div><script>//验证用户名//1.获取用户名输入框var usernameInput = document.getElementById("username");//2.绑定onblur失去焦点事件usernameInput.onblur = checkUsername;function checkUsername() {//3.获取输入的用户名var username = usernameInput.value.trim();//4.判断是否符号规则//正则表达式：单词字符，6~12var reg = /^\w{6,12}$/;var flag = reg.test(username);//var flag = username.length >= 6 && username.length <= 12;if (flag) {//符合,重置提示信息document.getElementById("username_err").style.display = 'none';} else {//不符合，更改span，显示提示信息document.getElementById("username_err").style.display = '';}return flag;}//验证密码//1.获取密码输入框var passwordInput = document.getElementById("password");//2.绑定onblur失去焦点事件passwordInput.onblur = checkPassword;function checkPassword() {//3.获取输入的密码var password = passwordInput.value.trim();//4.判断是否符号规则//正则表达式：单词字符，6~12var reg = /^\w{6,12}$/;var flag = reg.test(password);//var flag = password.length >= 6 && password.length <= 12;if (flag) {//符合,重置提示信息document.getElementById("password_err").style.display = 'none';} else {//不符合，更改span，显示提示信息document.getElementById("password_err").style.display = '';}return flag;}//验证手机号//1.获取手机号输入框var telInput = document.getElementById("tel");//2.绑定onblur失去焦点事件telInput.onblur = checkTel;function checkTel() {//3.获取输入的手机号var tel = telInput.value.trim();//4.判断是否符号规则//正则表达式：数字，11，第一位是1var reg = /^[1]\d{10}$/;var flag = reg.test(tel);//var flag = tel.length === 11;if (flag) {//符合,重置提示信息document.getElementById("tel_err").style.display = 'none';} else {//不符合，更改span，显示提示信息document.getElementById("tel_err").style.display = '';}return flag;}//1.获取表单对象var regForm = document.getElementById("reg-form");//2.绑定onsubmit事件regForm.onsubmit = function () {//3.判断每一个表单项是否都符号要求var flag = checkUsername() && checkPassword() && checkTel();return flag;}</script></body>
</html>
4.正则表达式：
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>//单词，6~12var reg = /^\w{6,12}$/;var str = "abc";var flag = reg.test(str);alert(flag);
</script></body>
</html>
