今日内容回顾
今日内容回顾
JavaScript简介
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言
JavaScript注释
单行注释：/注释内容/
多行注释：/*注释内容*/
JavaScript的引入方式
- script内部书写
- script scr属性引入外部JS文件
JS是用分号作为语句的结束，不写也没什么问题。
JavaScript变量与常量
在JS中首次声明变量与常量需要使用关键字
变量：
JS也是动态类型：变量名绑定的数据值类型不固定，可以是数值、字符串、对象
var 声明的是全局，全局有效
var 变量名 = 数据值
var name = 'jason'
let 如果在局部名称空间使用，仅在局部有效，可以区分全局和局部。
let 变量名 = 数据值
let name = 'tony'
常量：
const 在JS中是有正在意义上的常量的
const 常量名 = 数据值
const pi = 3.14
这个时候声明好的常量是不能被修改的。
pi = 3.44 报错！
JavaScript数据类型
数值
// 在JS中查看数据类型可以使用 typeof 输出结果使用 console.log（'hello world'）/
数值 number
数值（相当于python中的整型和浮点型的结合）
在JS中整数、小数相关的数字都统称为数值类型number
parseInt()
parseFloat()
NaN: Not ANumber 不是一个数字
字符串
字符串 string
基本使用：
// 单引号
var name = 'jason'
// 双引号
var name = "jason"
// 模板字符串,除了可以定义多行文本之外还可以是西安格式化字符串操作
var name = `jason`
// 书写${} 会自动去前面找大括号里面的变量名对应的值 如果没有定义直接报错
// 在JS中推荐直接使用+来拼接字符。
字符串常用方法
| 方法 | 说明 |
|---|---|
| .length | 统计长度 |
| .trim | 移除空白 |
| .trmleft | 移除左边空白 |
| .trimright | 移除右边空白 |
| .charAt（n） | 返回第n个字符 |
| .concat | 拼接 |
| .indexOF | 子序列位置 |
| .substring | 根据索引获取子序列 |
| .slice | 切片 |
| .tolowercase | 小写 |
| .touppercase | 大写 |
| .split | 分割 |
布尔值
布尔值 boolean
// 在JS中布尔值全是小写字母
true false
/*
其中是false的有
null、0、空字符串、undefined、NaN
NaN
Not ANumber 不是一个数字
null 表示值为空，一般都是指定或者清空了一个变量时使用
如： let name = 'jason'
name = null
undefined 表示声明了一个变量，但是没有作初始化操作
函数没有指定返回值的时候 返回的也是undefined
如还是不了解可以点击下列链接查看Jason老湿详解。
https://www.cnblogs.com/Dominic-Ji/p/9111021.html
*/
对象
对象 object
// 在JS中也可以称一切皆对象
对象之数组（相当于python中的列表）
基本使用：
let 变量名 = ['数值','字符串','布尔值',...]
let name_list = ['jason','age',18]
// 支持索引取值，但是不支持负数索引
info_list = ['jason',18,'gender:male','hobby:female']
info_list[0]
info_list[-1] // 报错！！！
对象之数组常用方法
| 方法 | 说明 |
|---|---|
| .length | 统计数组的长度 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice（start,end） | 切片 |
| .reverse() | 反转 |
| .join(sep) | 将数组元素连接成字符串 |
| .concat() | 链接数组 |
| .sort（） | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice | 删除元素，并向数组添加新元素 |
| .map | 返回一个数组元素调用函数处理后的值的新数组 |
//较为重要的方法
forEach、splice、map
基本使用：
forEach（类似于python中的for循环）
var ll = [111,222,333,444,555,666]
l1.forEach(function（value）{console.log（value）}，l1)
// function（元素，元素索引，元素数据来源）
splice
var ll = [111,222,333,444,555,666]
l1.splice（0，2）
// 第一个参数是起始位置，第二个是删除个数,
l1.splice（0，2,123）
// 还可以放置第三个参数，表示添加。先删除后添加
map
var ll = [111,222,333,444,555,666]
l1.map（function(value){console.log(value)},l1）
运算符
// 算术运算符
var x = 10；
var res = x++；
var res1 = ++x；
res 10
res1 12
++表示自增1 （类似于python中的+=1）
加号在前先加后赋值 加号在后先赋值后加
// 比较运算符
1 == '1' // 弱等于
true
// JS内部自动转换成相同的数据类型比较
1==='1' // 强等于
// 内部不做类型转换直接比较
false
1 != '1' 1 !== '1'
// 逻辑运算符
&& || ！
/*
JS中的&&等价于python中的and
JS中的||等价于python中的or
JS中的！等价于python中的not
*/
// 赋值运算符
= += -= *=
流程控制
if判断
// if 判断基本语法结构
if(条件){条件成立后执行的代码块}
// 基本使用：
var age = 28
if (age>18 && age<25) {
console.log('小姐姐')
}
// if...else分支
if(条件){条件成立后执行的代码}else{条件不成立执行的代码}
var age = 28
if (age > 18 ){
console.log('哈哈哈')
}else{
console.log('嘿嘿嘿')
}
// if...eles if... else分支
if(条件1) {条件1成立后执行的代码}
else if(条件2){条件1不成立条件2成立执行的代码}
else{条件1，条件2都不成立执行的代码}
if (age > 18 ){
console.log('哈哈哈')
}else if {
console.log('嘿嘿嘿')
}else{
console.log('沉默...')
}
// switch语法
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
循环结构
// for循环
// 打印0-9数字
for(let i=0;i<10;i++){
console.log(i)
}
// 题目1 循环打印出数组里面的每一个元素
var l1 = [111,222,333,444,555,666]
for(let i=0;i<l1.length;i++){
console.log(l1[i])
}
// while循环
var i = 0
while(i<100){
console.log(i)
i++;
}
// 三元运算符
// python中三元运算符 res = 1 if 1>2 else 3
// JS中三元运算 res = 1>2?1:3
条件成立取问好后面的1 不成立取冒号后面的3
var res = 2>5?8:10 // 10
var res = 2>5?8:(8>5?666:444) // 666
"""
三元运算符不要写的过于复杂
"""
函数
// 在python中定义函数需要用到关键字def
// 而js定义函数则是关键字 function
// 基本语法结构
function 函数名(形参1，形参2，形参3...){函数体代码 return 返回值}
// 无参函数
function func_one(){
console.log('hello world')
}
// 调用函数名加括号调用 func_one()
// 有参函数
function func_one(name,pwd){
console.log('hello world')
}
// 注意 JS中的有参函数在函数名加括号调用的时候。
// 不管需要几个形参，少了多个都没有关系
// 关键字 arguments 能够获取到函授接收到的所有参数。
function func_one(name,pwd){
console.log(arguments)
console.log(name,pwd)
}
// 函数的返回值 使用的也是关键字return
function index(){
return 666
}
function index(){
return 666,777,888,999
}
res = index();
999
res
999 // 只能拿到最后一个
function index(){
return [666,777,888,999]
}
// js不支持解压赋值
// 匿名函数 就是没有名字
function(){
console.log('哈哈哈')
}
var res = function(){
console.log('哈哈哈')
}
// 箭头函数(要了解一下) 主要用来处理简单的业务逻辑 类似于python中的匿名函数
var func1 = v => v; //箭头左边的是形参 右边的是返回值
等价于
var func1 = function(v){
return v
}
var func2 = (arg1,arg2) => arg1+arg2
等价于
var func1 = function(arg1,arg2){
return arg1+arg2
}
函数的全局变量与局部变量
// 跟python查找变量的顺序一致
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner(){
var city = "ShenZhen";
console.log(city);
}
inner();
}
f(); //输出结果是？
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret(); // 打印结果是？
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
returzn inner;
}
var ret = f();
ret();
自定义对象
// 你可以看成是我们python中的字典 但是js中的自定义对象要比python里面的字典操作起来更加的方便
// 创建自定义对象 {}
"""第一种创建自定义对象的方式"""
var d1 = {'name':'jason','age':18}
var d = {'name':'jason','age':18}
typeof d
"object"
d['name']
"jason"
d.name // 比python从字典获取值更加的方便
"jason"
d.age
18
for(let i in d){
console.log(i,d[i])
} // 支持for循环 暴露给外界可以直接获取的也是键
// 第二种创建自定义对象的方式 需要使用关键字 new
var d2 = new Object() // {}
d2.name = 'jason'
{name: "jason"}
d2['age'] = 18
{name: "jason", age: 18}
Data对象
let d3 = new Date()
console.log(d3)
Thu Aug 25 2022 20:08:45 GMT+0800 (中国标准时间)
d3.toLocaleString()
'2022/8/25 20:08:45'
// 也支持手动输入
let d4 = new Date('2200/11/11 11:11:11')
d4.toLocaleString()
let d5 = new Date(1111,11,11,11,11,11)
d5.toLocaleString() // 月份从0开始0-11月
"1111/12/11 上午11:11:11"
// 时间对象具体方法
let d6 = new Date();
d6.getDate() 获取日
d6.getDay() 获取星期
d6.getMonth() 获取月份(0-11)
d6.getFullYear() 获取完整的年份
d6.getHours() 获取小时
d6.getMinutes() 获取分钟
d6.getSeconds() 获取秒
d6.getMilliseconds() 获取毫秒
d6.getTime() 时间戳
JSON对象
// 在python中序列化与反序列化也是用到JSON
// 导入JSAO模块，通过点的方式调用其方法进行序列化和反序列化
JSON.dumps 序列化
JSON.loads 反序列化
// 在JS中也有序列化和反序列化
JSON.stringify()
JSON.parse()
// 示例：
let d7 = {'name':'jason','age':18 ,'gender':'male','hobby':'female'}
let res666 = JSON.stringify(d7)
'{"name":"jason","age":18,"gender":"male","hobby":"female"}'
JSON.parse(res666)
{'name':'jason','age':18 ,'gender':'male','hobby':'female'}
RegExp对象
/*
在python中我们使用正则需要借助re模块
而JS中需要我们创建正则对象
*/
// 方式1
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
// 方式2
let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}')
// 匹配内容
reg1.test('jasonNB')
reg2.test('JASONnb')
// 题目 获取字符串里面所有的字母z
let sss = 'jasonznb znb znb'
sss.match(/z/) // 拿到一个就停止了
sss.match(/z/g) // 全局匹配 g就表示全局模式
sss.match(/z/)
["z", index: 5, input: "jasonznb znb znb", groups: undefined]
sss.match(/z/g)
(3) ["z", "z", "z"]
// 全局匹配模式吐槽点
let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g
reg2.test('jasonznb')
reg3.test('jasonznb') // 全局模式有一个lastIndex属性
true
reg3.test('jasonznb')
false
reg3.test('jasonznb')
true
reg3.test('jasonznb')
false
reg3.lastIndex
0
reg3.test('jasonznb')
true
reg3.lastIndex
7
// 吐槽点二
let reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
reg4.test()
reg4.test() // 什么都不传 默认传的是undefined
true
reg4.test()
true
reg4.test(undefined)
true
let reg5 = /undefined/
undefined
reg5.test('jason')
false
reg5.test()
true
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与DOM操作
BOM 浏览器对象模型，Browser Object Model
通过写JS代码可以跟浏览器交互。
window对象
window对象指代的就是浏览器窗口
window.innerHeight // 浏览器窗口的高度
722
window.innerWidth // 浏览器窗口的高度
1536
window.open('https://www.jd.com','','height = 400px,width=400px,top=400px,left=400px')
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
// open新建打开一个页面，第一个参数目标网址，第二个参数空格即可，第三个参数调节打开窗口的大小和位置
// 扩展父子页面通信window.openner()
window.close() // 关闭带当前打开的页面
window子对象
// web浏览器全称
window.navigator.appName
'Netscape'
// web浏览器厂商和版本的详细字符串
window.navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'
// 用来表示当前是否是一个浏览器
window.navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'
// 防爬措施
1.最简单最常用的一个就是校验当前请求的发起者是否是一个浏览器
userAgent
user-agent：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
如何破解该措施
在代码中加上上面的user-agent配置即可
// 如果是window的子对象 那么window可以省略不写
window.navigator.platform
"MacIntel"
history对象
//回退到下一页
window.history.forward()
// 回退到上一页
window.history.back()
// 对应着我们浏览器左上方的向左、向右的俩个箭头
location对象
// 获取当前页面的URL
window.location.href
'https://www.cnblogs.com/Dominic-Ji/p/9111021.html'
// 跳转到指定的URL
window.location.href = '需要跳转到的我在网址链接'
// 属性页面 相当于浏览器左上方的小圈圈，刷新当前页面
window.location.reload()
弹出框
// 警告框
alert('')
// 确认框，
// 页面弹出的框框有个 确定或取消选项 确定返回true取消返回false
confirm('') // 取消
false
confirm('') // 确定
true
// 提示框
// 会有个提示框供输入，输入上面返回什么，不输则返回null。
prompt('')
"" 或Null
计时器相关
定时任务，过一段时间之后触发一次
<script>
function func1(){
alert(123)
}
serTimeout(func1,3000); 毫秒为单位，3秒后执行func1函数
</script>
取消定时任务
<script>
function func1(){
alert(123)
}
let t= serTimeout(func1,3000); 毫秒为单位，3秒后执行func1函数
clearTimeout(t) 取消上面的任务
</script>
每个一段时间触发一次
setInterval循环定时
<script>
function func2(){
alert(123)
}
function show(){
let t= setInterval(func2,3000); // 毫秒为单位，3秒后执行func1函数
function inner(){
clearTimeout(t) // 取消t的任务
}
setTimeout(inner,10000) // 让inner函数10秒之后在执行
}
show()
</script>
DOM操作
DOM树的概念
所有标签都可以称之为节点。
JavaScript 可以通过DOM树创建动态HTML；
JavaScript 能够改变页面中所有的HTML元素，JavaScript 能够改变页面中所有的HTML属性
JavaScript 能够改变页面中的所有CSS 样式，JavaScript 能够对页面中所有时间做出反应。
查找标签
DOM操作的是标签，而一个html页面上的标签有很多
首先需要学习查找标签，然后再学操作标签
DOM操作需要用关键字document起手
直接查找
1. id查找
2. 类查找
3.标签查找
// 其中这三个方法的返回值也是不一样的。
// id查找
// 根据id值查找标签 结果直接是标签对象本身
document.getElementById('d1')
结果：
<div id="d1">第一个div</div>
// 没有则返回null
document.getElementById('d3')
结果：
null
// 类查找
// 根据class值查找标签 结果是数组类型
document.getElementsByClassName('c1')
结果：
HTMLCollection(2) [div.c1, p.c1]
0: div.c1
1: p.c1
length: 2
[[Prototype]]: HTMLCollection
// 标签查找,还可以通过数组索引查找
document.getElementsByTagName('div')
结果：
HTMLCollection(3)
[div#d1, div.c1, div, d1: div#d1]
// 通过数组索引查找
document.getElementsByTagName('div')[1]
结果：
<div class="c1">第二个div</div>
// 通过数组索引查找，超出范围返回undefined
document.getElementsByTagName('div')[4]
结果：
undefined
间接查找
/*
当使用变量名指代标签对象的时候，一般情况下可以书写成
XXXEle
divEle
aEle
pEle
*/
// 标签查找还可以通过先定义一个标签对象
//从标签对象间接查找其他标签
//如下：
let DivEle = document.getElementById('d1')
// 查找父节点标签元素，此时id为d1的标签是再body内的。
// 那么查找的就是body内的所有元素，
DivEle.parentElement
<body>
<div id="d1">第一个div</div>
<div class="c1">第二个div</div>
<div>第三个div</div>
<p class="c1">第一个p1</p>
<span id="d2">第一个span</span>
</body>
// 依次类推依次查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
节点操作
通过JS代码动态创建一个标签，并添加到文档流中。
"""
通过DOM操作动态的创建img标签
并且给标签加属性
最后将标签添加到文本中
"""
let imgEle = document.createElement('img') # 创建标签
imgEle.src = '111.png' # 给标签设置默认的属性
"111.png"
imgEle
imgEle.username = 'jason' # 自定义的属性没办法点的方式直接设置
"jason"
imgEle
<img src="111.png">
imgEle.setAttribute('username','jason') # 既可以设置自定义的属性也可以设置默认的书写
undefined
imgEle
<img src="111.png" username="jason">
imgEle.setAttribute('title','一张图片')
imgEle
<img src="111.png" username="jason" title="一张图片">
let divEle = document.getElementById('d1')
undefined
divEle.appendChild(imgEle) # 标签内部添加元素(尾部追加)
<img src="111.png" username="jason" title="一张图片">
"""
创建a标签
设置属性
设置文本
添加到标签内部
添加到指定的标签的上面
"""
let aEle = document.createElement('a')
aEle
<a></a>
aEle.href = 'https://www.mzitu.com/'
"https://www.mzitu.com/"
aEle
<a href="https://www.mzitu.com/"></a>
aEle.innerText = '点我有你好看!' # 给标签设置文本内容
"点我有你好看!"
aEle
<a href="https://www.mzitu.com/">点我有你好看!</a>
let divEle = document.getElementById('d1')
undefined
let pEle = document.getElementById('d2')
undefined
divEle.insertBefore(aEle,pEle) # 添加标签内容指定位置添加
<a href="https://www.mzitu.com/">点我有你好看!</a>
"""
额外补充
appendChild()
removeChild()
replaceChild()
setAttribute() 设置属性
getAttribute() 获取属性
removeAttribute() 移除属性
"""
# innerText与innerHTML
divEle.innerText # 获取标签内部所有的文本
"div 点我有你好看!
div>p
div>span"
divEle.innerHTML # 内部文本和标签都拿到
"div
<a href="https://www.mzitu.com/">点我有你好看!</a><p id="d2">div>p</p>
<span>div>span</span>
"
divEle.innerText = 'heiheihei'
"heiheihei"
divEle.innerHTML = 'hahahaha'
"hahahaha"
divEle.innerText = '<h1>heiheihei</h1>' # 不识别html标签
"<h1>heiheihei</h1>"
divEle.innerHTML = '<h1>hahahaha</h1>' # 识别html标签
"<h1>hahahaha</h1>"
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！