目录
1.JS引入方式
2.JS数据类型
3.JS类型转换
4.JS循环方式
5.json数据
6.JS三种弹出框
7.JS函数方法
8.JS面向对象bom操作
9.JS的function函数
10.JSbom事件
11.JSdom操作
12.JSdom练习
13.JS属性节点
14.QQ注册表单
1.JS引入方式
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Document</title><!-- 3.外部引入js文件 --><script src="default01.js" type="text/javascript"></script><!-- 2.任意位置写入script标签内 --><script type="text/javascript">// console.log('965')alert('965');</script></head><body><!-- 1.行内样式 事件+内容 --><button onclick="javascript:alert('Hello');"></button></body>
</html>2.JS数据类型
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Document</title><!-- <script src="default02.js" type="text/javascript"></script> --><script type="text/javascript">let i = 1;let i2 = 1.1;let j = "10";let k = 'c';let s = true;let m = new Date();function n(){}//通过变量名判断数据类型console.log(typeof i);console.log(typeof i2);console.log(typeof s);console.log(typeof j);console.log(typeof k);console.log(typeof m);console.log(typeof n);console.log(typeof g);//类型转换//数值和字符串let d1 = "1.11";let d2 = "111";let d3 =parseInt(d2);console.log(typeof d3);console.log(d3)let d4 = parseFloat(d1);console.log(typeof d4);console.log(d4)i = i2;console.log(i);</script></head><body></body>
</html>3.JS类型转换
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Document</title><script type="text/javascript">let i = 1;let j = "1";// 判断值是否相同，跟数据类型无关console.log(i==j); //true// 同时判断值和数据类型，两者都相同返回trueconsole.log(i===j); //false// 不全等console.log(i!==j); //true// 次方运算console.log(2**3); //8//deletelet user = new Object();user.id = 10;user.name = "admin";console.log(user);//{id: 10, name: "admin"}delete user.id; console.log(user);//{name: "admin"}delete user.name;console.log(user);//{}// delete user;// console.log(user);//{}//instanceofconsole.log(user instanceof Object);//trueconsole.log(user instanceof Array);//false</script></head><body></body>
</html>4.JS循环方式
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">let name = "admin";let array = ["zhangsan", "lisi", "wangwu"];//for ifor (var i = 0; i < array.length; i++) {console.log(array[i]);}//for infor (var key in array) {console.log(key + "----" + array[key]);}//for offor (let objs of array) {console.log(objs)}//foreacharray.forEach((items, key, array) => {console.log(items + "====" + key)})//创建对象let user = new Object();user.id = 1;user.name = "admin";for (var property in user) {console.log(property + "-----" + user[property]);}console.log("==========");var phone = {color: "红色",brand: "红米"};console.log(phone.color + "=======" + phone.brand);</script></body>
</html>5.json数据
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var phone = {color:"红色",brand:"红米"};console.log(phone.color+"======="+phone.brand);//json数据结构var list = [{brand:"apple",color:"白色",users:["zhang","wang","li"]},{brand:"华为",color:"金色",users:["zhao","qian","sun"]}];for (var i = 0; i < list.length; i++) {let p = list[i];console.log(p.brand+"----"+p.color+p.users);}</script></body>
</html>6.JS三种弹出框
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">// alert("请确认以下信息");//确认框// let flag = confirm("你确定要删除吗？");// if (flag) {// console.log("执行删除");// } else {// console.log("取消删除");// }let name = prompt("你录入你的姓名:" + "admin");console.log("你录入的是:" + name);</script></body>
</html>7.JS函数方法
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">let array = ["a", "b", "c"];let firstIndex = array.indexOf("a");console.log(firstIndex);let lastIndex = array.lastIndexOf("c");console.log(lastIndex);//数组转字符串console.log(array.toString());let str = "aaa-bbb-ccc";console.log(str);//字符串转数组let array2 = str.split("-")console.log(array2);//反转array2.reverse();console.log(array2);//拼接let str2 = array2.join("=");console.log(str2);</script></body>
</html>8.JS面向对象bom操作
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">var a = 1;function forward1() {history.forward();}function toPage() {location.href = "http://www.baidu.com";}function getScreen() {console.log(window.a);console.log(screen.availWidth);console.log(screen.availHeight);console.log(navigator.appName);}</script></head><body><button onclick="forward1()">前进</button><br><button onclick="toPage()">到baidu</button><br><button onclick="getScreen()">获取屏幕和浏览器信息</button><br><a href="index07函数方法.html" target="_self">到index</a></body>
</html>9.JS的function函数
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">//声明函数function add() {let i = 1;let j = 2;console.log(i + j);}function add2(x, y) {return x + y;}var clickMe = function() {return 1 + 1;}//调用函数add();let sum = add2(1, 2);console.log(sum);console.log(clickMe());</script></head><body></body>
</html>10.JSbom事件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><button onclick="click1()">click1</button><br /><button id="btn2">click2</button><button id="btn3">click3cff</button><script type="text/javascript">function click1() {console.log("--------");}//通过id获取指定元素var btn2 = document.getElementById("btn2");//监听btn2的点击事件btn2.onclick = function() {console.log("btn2被点击了")}//通过id获取指定元素var btn3 = document.getElementById("btn3");btn3.addEventListener('click', function() {console.log("btn3被点击。。。");});</script></body>
</html>11.JSdom操作
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="div1"><font color="red">123</font></div><div class="c1"></div><script type="text/javascript">//了解jsdom操作// document 文档节点//console.log(document);// 获取元素节点的几种方式//1.通过id属性值获取元素节点 单数var d1 = document.getElementById("div1");console.log(d1);//2.通过标签名获取元素节点 复数var divs = document.getElementsByTagName("div");console.log(divs[1]);//3.通过css选择器获取指定的元素节点 //获取单个节点 （第一个匹配的节点）|获取所有的匹配节点var d2 = document.querySelector("#div1");var d3 = document.querySelector(".c1");var d4 = document.querySelector("div");console.log(d2);console.log(d3);console.log(d4);var d13 = document.querySelectorAll(".c1");var d14 = document.querySelectorAll("div");console.log(d13);console.log(d14);//获取文本节点var t1 = d1.innerHTML;console.log(t1);var t2 = d2.innerText;console.log(t2)//修改文本节点d1.innerHTML = "你好";console.log(d1);</script></body>
</html>12.JSdom练习
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="#" method="get">用户名 <input type="text" name="username" placeholder="请输入用户名" /><span name="usernameMsg"></span><br />邮箱<input type="text" name="email" placeholder="请输入邮箱"><span name="emailMsg"></span><br /></form><script type="text/javascript">var usernameInput = document.querySelector("input[name=username]");var usernameMsg = document.querySelector("span[name=usernameMsg]");usernameInput.onblur = function() {console.log(usernameInput);var username = usernameInput.value;//判断是否为空，是否满足条件if (username != null && username.length >= 3 && username.length <= 6) {usernameMsg.innerHTML = "验证成功!";usernameMsg.style.color = "green";} else {usernameMsg.innerHTML = "验证失败!"usernameMsg.style.color = "red";}}var emailInput = document.querySelector("input[name=email]");var emailMsg = document.querySelector("span[name=emailMsg]");const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;emailInput.onblur = function() {var email = emailInput.value;if (emailRegex) {emailMsg.innerHTML = "验证成功!";emailMsg.style.color = "green";} else {emailMsg.innerHTml = "验证失败!"emailMsg.style.color = "red";}}</script></body>
</html>13.JS属性节点
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.c1 {height: 300px;width: 200px;background-color: aqua;}.c2 {height: 300px;width: 200px;background-color: pink;}</style></head><body><button class="c11">change</button><button class="c22">remove</button><div class="c1"></div><script type="text/javascript">var button = document.querySelector(".c11");button.onclick = function() {var div = document.querySelector("div");var c = div.getAttribute("class");console.log(c)div.setAttribute("class", c == "c1" ? "c2" : "c1");}var button2 = document.querySelector(".c22");button2.onclick = function() {var div = document.querySelector("div");div.removeAttribute("class");}</script></body>
</html>14.QQ注册表单
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>注册表单</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background: url("../img/background.png");background-position: center;background-repeat: no-repeat;}.form-container {background: rgba(255, 255, 255, 0);border-radius: 10px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);padding: 20px;width: 350px;text-align: center;}.welcome-message {font-size: 24px;color: black;margin-bottom: 20px;}.form-group {margin-bottom: 20px;position: relative;}.form-group label {display: block;margin-bottom: 5px;color: #333;}.form-group input {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 5px;box-sizing: border-box;transition: border-color 0.3s ease;}.form-group input:focus {border-color: #0085FF;outline: none;}.error {border-color: red !important;}.form-group .error-message {color: red;margin-top: 5px;}.submit-btn {background-color: #0085FF;color: white;border: none;padding: 10px 20px;border-radius: 5px;cursor: pointer;width: 100%;margin-top: 20px;}.submit-btn:hover {background-color: #1e50a2;}.checkbox-container {margin-top: 10px;text-align: left;}.checkbox-container label {color: #333;}a {color: #56ADFB;text-decoration: none;}a:hover {color: darkblue;}.a1 {font-size: 15px;color: black;}</style></head><body><div class="form-container"><div class="welcome-message">欢迎注册QQ<br><font class="a1">每一天，乐在沟通。</font></div><form id="registrationForm"><div class="form-group"><label for="username"></label><input type="text" id="username" name="username" required placeholder="昵称"><div class="error-message" id="usernameError"></div></div><div class="form-group"><label for="password"></label><input type="password" id="password" name="password" required placeholder="密码"><div class="error-message" id="passwordError"></div></div><div class="form-group"><label for="phone"></label><input type="text" id="phone" name="phone" placeholder="+86" required placeholder="手机号码 (+86)"><div class="error-message" id="phoneError"></div></div><div class="checkbox-container"><input type="checkbox" id="terms" name="terms" required><label for="terms">我已阅读并同意<a href="#">服务协议</a>和<a href="#">QQ隐私保护指引</a></label></div><button type="submit" class="submit-btn">立即注册</button></form></div><script>var form = document.getElementById('registrationForm');form.addEventListener('submit', function(event) {event.preventDefault();const username = document.getElementById('username');const password = document.getElementById('password');const phone = document.getElementById('phone');const terms = document.getElementById('terms');const usernameError = document.getElementById('usernameError');const passwordError = document.getElementById('passwordError');const phoneError = document.getElementById('phoneError');[username, password, phone].forEach(function(input) {input.classList.remove('error');});usernameError.textContent = '';passwordError.textContent = '';phoneError.textContent = '';let hasErrors = false;// 验证昵称if (username.value.trim() === '') {usernameError.textContent = '昵称不能为空';username.classList.add('error');hasErrors = true;}// 验证密码if (!isValidPassword(password.value)) {passwordError.textContent = '密码不符合要求';password.classList.add('error');hasErrors = true;}// 验证手机号码if (!isValidPhone(phone.value)) {phoneError.textContent = '请输入有效的手机号码';phone.classList.add('error');hasErrors = true;}// 验证条款if (!terms.checked) {alert('请阅读并同意服务协议和隐私保护指引');hasErrors = true;}if (!hasErrors) {// 提交表单alert('注册成功！');}});function isValidPassword(password) {const regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{8,16}$/;return regex.test(password);}function isValidPhone(phone) {const regex = /^\d{11}$/;return regex.test(phone);}</script></body>
</html>
