目录
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
// 同时判断值和数据类型，两者都相同返回true
console.log(i===j); //false
// 不全等
console.log(i!==j); //true
// 次方运算
console.log(2**3); //8
//delete
let 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);//{}
//instanceof
console.log(user instanceof Object);//true
console.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 i
for (var i = 0; i < array.length; i++) {
console.log(array[i]);
}
//for in
for (var key in array) {
console.log(key + "----" + array[key]);
}
//for of
for (let objs of array) {
console.log(objs)
}
//foreach
array.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">click3
cff</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>