RegExp对象
第一种方式：
let res = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,13}")
let res1 = res.test("9ang123456789")
console.log(res1)
第二种方式：
let res = /^[a-zA-Z][a-zA-Z0-9]{5,13}/
let res1 = res.test("yang123456789")
console.log(res1)
全局匹配：
let res = "fhjkafbsjkfjksfjskflfksdfjkdjf"
let res1 = res.match(/f/gi)
console.log(res1)
Math对象
abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
前端基础之BOM and DOM
JS的三个组成部分：
ECMAScript、BOM（浏览器对象模型，就算是js操作浏览器）、DOM（文档对象模型，js操作html文档、css样式等等）
BOM：大部分内容了解
DOM：需要熟练掌握
Windows对象的常用方法：
● window.innerHeight - 浏览器窗口的内部高度
● window.innerWidth - 浏览器窗口的内部宽度
● window.open() - 打开新窗口
● window.close() - 关闭当前窗口
# navigator对象（了解即可）
navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platform
# history对象（了解即可）
history.forward()
history.back()
# location对象-------->掌握重要
location.href 获取URL
location.href="URL"
location.reload() 重新加载页面
# 弹出框
alert("你看到了吗？");
confirm("你确定吗？")
prompt("请在下方输入","你的答案")
计时相关（定时器）
语法：
let t = setTimeout("js语句"，毫秒)
第一种计时器：
let t = setTimeout(f, 3000)
function f() {
alert("hello")
console.log("3秒后")
}
clearTimeout(f)
第二种计时器：
let t = setInterval(f, 1000)
function f() {
alert("hello")
console.log("1秒后")
}
clearTimeout(t)
习题：
function func2() {
alert(123)
}
function show() {
let t = setInterval(func2, 3000);
function inner() {
clearInterval(t)
}
setTimeout(inner, 9000)
}
show()
DOM（重点）
DOM标准规定HTML文档中的每个成分都是一个节点(node)：
● 文档节点(document对象)：代表整个文档
● 元素节点(element 对象)：代表一个元素（标签）
● 文本节点(text对象)：代表元素（标签）中的文本
● 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
● 注释是注释节点(comment对象)
JavaScript 可以通过DOM创建动态的 HTML：
● JavaScript 能够改变页面中的所有 HTML 元素
● JavaScript 能够改变页面中的所有 HTML 属性
● JavaScript 能够改变页面中的所有 CSS 样式
● JavaScript 能够对页面中的所有事件做出反应
1. 先学习如何查找标签
2. 找到标签之后再对其做一些操作
1、直接查找
1.1、id、class、标签
1.2、
<body>
<div id="d1" class="c1">abc</div>
<div id="d2" class="c1">def</div>
<div id="d3" class="c1">ghi</div>
<input type="text" name="username">hhh
<input type="text" name="username">nihao
<input type="text" name="kevin">
<input type="text" name="jason">
<script>
let div = document.getElementById("d1");
console.log(div);
let div1 = document.getElementsByClassName("c1")[0];
console.log(div1);
let div2 = document.getElementsByTagName("div")[0]
console.log(div2)
let div3 = document.getElementsByName("kevin")
console.log(div3)
</script>
</body>
间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
节点操作
1. 问题：动态创建一个img标签出来
# 步骤
1.1 先创建出来一个img空元素: <img>
1.2 设置img标签的src属性
1.3 把创建出来的img标签显示在网页上
<script>
let img = document.createElement("img")
let div = document.getElementById("d1")
img.src = "preview.jpg"
img.alt = "美女姐姐"
img.setAttribute("username","k1")
console.log(img)
img.removeAttribute("username")
console.log(img)
div.appendChild(img)
</script>
# 2. 动态创建一个a标签
步骤：
1. 先创建一个空元素a
2. 设置a标签的属性：href、target、title
3. 给a标签添加文本内容
4. 把a标签显示在网页上
<script>
let a = document.createElement("a");
a.href = "http://www.bilibili.com";
a.title = "这是美女"
a.innerHTML = "<h6>点我看美女</h6>"
console.log(a)
a.innerText = "点我看美女"
console.log(a)
ps:
div.appendChild(a)
</script>
# class的操作
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
# 指定CSS操作
var div = document.getElementById('d1');
div.style.color = 'red';
div.style.border = '1px solid red';
div.style.backgroundColor = 'green';
div.style.borderLeftColor = 'red';
div.style.borderLeftStyle = 'dashed';
div.style.borderLeftWidth = '5px';
div.style.borderLeft = '5px dashed red';
作业：
你自己把你之前所学的标签都动态的创建一遍
span、div、p、...
获取值的操作
# 获取用户数据标签内部的数据
let seEle = document.getElementById('d2')
seEle.value
"111"
seEle.value
"333"
let inputEle = document.getElementById('d1')
inputEle.value
# 如何获取用户上传的文件数据
let fileEle = document.getElementById('d3')
fileEle.value # 无法获取到文件数据
"C:\fakepath\02_测试路由.png"
fileEle.files
FileList {0: File, length: 1}0: File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}length: 1__proto__: FileList
fileEle.files[0] # 获取文件数据
File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}
事件
常用的事件：
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
let btn = document.getElementById("btn");
btn.onclick = function () {
alert(1234);
}
}
</script>
</head>
<body>
<button id="btn">点我一下</button>
</body>
</html>
script标签既可以放在head内 也可以放在body内但是通常情况下都是放在body内的最底部,等待浏览器窗口加载完毕之后再执行代码
window.onload = function () {
// 第一种绑定事件的方式
function func1() {
alert(111) }
// 第二种
let btnEle = document.getElementById('d1'); btnEle.onclick = function () {
alert(222)
}
}"""
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY