RegExp对象
//在JS中使用正则表达式
第一种方式：
//定义一个正则表达式
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) //g---global 全局匹配----i---ignore 忽略
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 // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
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) // 单位是毫秒，意思是3秒之后开始执行任务, 只执行一次
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); // 每隔3秒执行一次
function inner() {
clearInterval(t) // 清除定时器
}
setTimeout(inner, 9000) // 9秒中之后触发
}
show()
DOM（重点）
DOM标准规定HTML文档中的每个成分都是一个节点(node)：
● 文档节点(document对象)：代表整个文档
● 元素节点(element 对象)：代表一个元素（标签）
● 文本节点(text对象)：代表元素（标签）中的文本
● 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
● 注释是注释节点(comment对象)
JavaScript 可以通过DOM创建动态的 HTML：
● JavaScript 能够改变页面中的所有 HTML 元素
● JavaScript 能够改变页面中的所有 HTML 属性
● JavaScript 能够改变页面中的所有 CSS 样式
● JavaScript 能够对页面中的所有事件做出反应
<!--js如何学习-->
1. 先学习如何查找标签
2. 找到标签之后再对其做一些操作
<!--查找标签-->
1、直接查找
1.1、id、class、标签
1.2、<!--js如何查找标签-->
<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]; // 返回的 是数组，因为class可以有多个的，所有，放在一个数组中
console.log(div1);
let div2 = document.getElementsByTagName("div")[0] // 找到所有的div标签
console.log(div2)
let div3 = document.getElementsByName("kevin") // 通过input的name属性获取
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>
//生成一个img的动态标签
let img = document.createElement("img") //<img>
//生成一个div的动态标签
let div = document.getElementById("d1")
//自定义一个img的属性
// 2. 给img标签设置src属性------>给标签动态设置属性的时候，只能给标签自带的属性添加，自定义属性不能够通过点的形式设置
img.src = "preview.jpg"
img.alt = "美女姐姐"
// 设置自定义属性:setAttribut
img.setAttribute("username","k1")
console.log(img)
// 删除一个属性
img.removeAttribute("username")
console.log(img)
// 把img标签追加到div里面
div.appendChild(img)
</script>
# 2. 动态创建一个a标签
步骤：
1. 先创建一个空元素a
2. 设置a标签的属性：href、target、title
3. 给a标签添加文本内容
4. 把a标签显示在网页上
<script>
//设置一个动态的a标签
let a = document.createElement("a");
//设置属性
a.href = "http://www.bilibili.com";
a.title = "这是美女"
//给a标签设置文本内容
a.innerHTML = "<h6>点我看美女</h6>"
console.log(a)
a.innerText = "点我看美女"
console.log(a)
ps:// innerHTML可以设置具体的文本格式而innerText不可以
//将自定义的a标签追加到div里面
div.appendChild(a)
</script>
# class的操作
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
# 指定CSS操作
// 指定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)
}
}"""
