前端——运算符、流程控制、函数、自定义对象、内置对象、BOM与DOM操作

---

一、运算符

1.1 算术运算符

+ 加法运算符：
除了数字型之间加法运算，"6"在进行加法运算时会自动转变为数字型进行加法运算
++ 自加运算符：
a=a++ 以及b=++b前者为先赋值再对a+1，后者为先+1再赋值
- 减法运算符：
只能在数字型之间进行减法
–
a=a-- 以及b=–b前者为先赋值再对a-1，后者为先-1再赋值
*
乘法运算
**
乘方运算 前面一个为底数后一个为次方数
/
除法运算，可以整除可以获取小数
//
整除运算，获得商

1.2 比较运算符

> 大于
>= 大于等于
< 小于
<= 小于等于
== 等于等于 只比较值是否一样，比较时会自动将不同类型变量转变为同一种来比较
!= 不等于 只比较值是否一样，比较时会自动将不同类型变量转变为同一种来比较
=== 完全等于 比较值和类型
!== 完全不等于 比较值和类型

1.3 逻辑运算符

&& 和操作相当于交集
|| 或操作相当于并集
! 取反操作相当于反集

1.4 三元运算符

res = 3 > 2 ? “对” : “错”
语法：
判断条件 ? 成立时的值 : 不成立时的值

---

二、流程控制

2.1 if判断

语法：
俩种情况时：

if (判断条件) {
成立时执行
} else {
不成立时执行
}

俩种以上情况时：

if (情况1) {
情况1成立时执行
} else if(情况2) {
情况2成立时执行
} … else if (情况n) {
情况n成立时执行
}
else{
以上情况都不成立时执行
}

2.2 while循环

语法：

while (循环条件) {
循环代码
}

2.3 for循环

语法：

for (初始值; 循环条件; 每次循环完成后的操作) {
循环代码
}

---

三、函数

函数定义:
function 函数名(参数1,参数2){
函数体代码
return 返回值
}
1.function 定义函数的关键字
2.函数名的命名参考变量名 并且js推荐使用驼峰体(Myfunc\MyFunc)
3.参数可写可不写
4.return返回值 return不支持返回多个数据(需要返回多个时可以组装起来例如字典 、列表等)
函数调用:
函数名加括号 有参则传参

3.1 无参函数

function f1() {
console.log(55555)
}

3.2 有参函数

函数的参数可以是任意个，超出函数定义时的参数会自动变为undefined

function f2(bbc) {
console.log(bbc)
}
f2(“有参函数”)

js提供了一个arguments可以获取传入函数的所有参数

function f2(){
console.log(arguments)
if (arguments.length === 0){
console.log(‘什么参数都没传’)
} else if (arguments.length === 1){
console.log(‘传了一个参数’)
}else{
console.log(‘传了多个参数’)
}
}

3.3 匿名函数

var a = function () {
console.log(“匿名函数”)
}

3.4 箭头函数

var f = v => v

var f = function(v) {
return v
}

---

四、自定义对象

定义：

var f = {“name”:1, “b1”:2, 1:1}
取值
f.name或f[1]针对key为字符串时可以.key取值，key为数字型需要.[数字]取值
循环取值
for (let i in f) {
console.log(f[i])
}
var d2 = new Object() 另一种自定义对象定义，相当于定义了空的自定义对象

---

五、内置对象

5.1 Date

var d1 = new Date()
d1.toLocaleString() “2022/4/28 下午5:28:16”
d1.toLocaleDateString() “2022/4/28”
d1.toLocaleTimeString() “下午5:28:16”

方法	作用
getDate()	获取日
getDay ()	获取星期
getMonth ()	获取月（0-11）
getFullYear ()	获取完整年份
getYear ()	获取年
getHours ()	获取小时
getMinutes ()	获取分钟
getSeconds ()	获取秒
getMilliseconds ()	获取毫秒
getTime ()	返回累计毫秒数(从1970/1/1午夜)

5.2 JSON对象

可以将js对象序列化为json字符串对象
json字符串对象反序列化为js对象
JSON.stringify(js对象) 序列化
JSON.parse(json字符串对象) 反序列化

5.3 正则对象

创建正则表达式的两种方式

var reg1 = new RegExp(“^ [a-zA-Z][a-zA-Z0-9]{5,11}”);
var reg2 = /^ [a-zA-Z][a-zA-Z0-9]{5,9}$/; # 推荐使用(简化)

使用正则

reg2.test(需要判断的对象)
reg2.test() 什么都不写相当于undefined 返回true

全局匹配

var reg2 = /^ [a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg2.lastIndex
reg2.test(‘jsdsd666g’) true

---

六、BOM与DOM操作

Browser Object Model是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行交互

6.1 BOM操作

6.1.1 浏览器操作

打开子窗口
子页面的操作其实可以通过一些手段传递给父页面(父子联动)
window.open(‘https://www.baidu.com’,‘’,‘width=400,height=400’)
第一个参数为打开窗口的url 第二个参数为打开窗口的名字 第三个为窗口style样式

关闭页面
window.close()

window.navigator.appVersion 网页开发商信息以及浏览器信息
window.navigator.userAgent 网页详细的开发商以及浏览器信息

window.history.forward() # 前进一页
window.history.back() # 后退一页

window.location.href # 获取页面的url地址
window.location.reload() # 刷新页面
window.location.href = url # 跳转到指定页面

6.1.2 弹窗操作

alert(“警告”) 警告框
confirm(‘是否确认’) 确认框
获取用户是点击取消还是确认 返回false和true
prompt(‘请输入key’) 提示框
获取用户输入的内容 也可以通过第二个参数添加默认内容

6.1.3 计时器操作

setTimeout(play,1000)

setTimeout是单次计时器
第一个参数是计时完成后的操作函数
第二个参数为计时时长单位是毫秒

clearTimeout(t)

取消已经设定的单次计时器
参数填写计时器对象

setInterval(play,3000)

循环计时器，每隔一定时间触发一次操作函数
第一个参数是计时完成后的操作函数
第二个参数为计时时长单位是毫秒

clearInterval(s)

取消已经设定的循环计时器
参数填写计时器对象

6.2 DOM操作

Document Object Model是指文档对象模型，通过它可以操作HTML文档的所有元素，html文档加载是从上往下的，所以DOM操作时需要先加载出body才能正常操作html文档，所以一般将script标签写在body内最下方

1. 通过标签名查找标签

document.getElementsByTagName(‘div’) # 数组套标签对象

2. 通过class值查找标签

document.getElementsByClassName(‘c1’) # 数组套标签对象

3. 通过id值查找标签

document.getElementById(‘d1’) # 标签对象本身

间接查询通过前面的三种查找标签方式获取标签后使用.衔接以下方法
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素