JS基础
- 运算符
- 流程控制
- 函数
- 内置对象
- BOM与DOM操作
运算符
# 1.算术运算符
var x=10;
var res1=x++; # 10 '先赋值后自增1'
var res2=++x; # 12 '先自增1后赋值'
# 2.比较运算符
>(大于)、 >=(大于等于)、 <(小于)、 <=(小于等于)、 !=(不等于)、 ==(弱等于)、 ===(强等于)、 !===(强不等于)
弱等于:自动转换类型
'5' == 5 '结果是true js会自动转换成相同数据类型比较值是否一样'
强等于:不转换类型
'5' === 5 '结果是false'
# 3.逻辑运算符
python中使用 and、or、not
js中使用&&(and)、||(or)、!(not)
流程控制
# if判断
1.单if分支
if(条件){
条件成立执行的分支代码块
}
2.if...else分支
if(条件){
条件成立执行的分支代码块
}else{
条件不成立执行的分支代码块
}
3.if...else if...else分支
if(条件1){
条件1成立执行的分支代码块
}else if(条件2){
条件1不成立条件2成立执行的分支代码块
}else{
条件1和2都不成立执行的分支代码块
}
4.switch语法(被Python给去掉的语法，太鸡肋)
var n1 = 1;
switch (n1) {
case 0:
console.log("干饭");
break; # 如果不加break会基于当前位置一直往下运行
case 1:
console.log("睡觉");
break;
case 2:
console.log("玩耍")
default: # 没有对应条件统一执行default（默认） 子代码
console.log("无所事事!!!")
}
# n等于什么就执行哪一个函数体
# 2.while循环
while(循环条件){
循环体代码
}
# 3.for循环
for(初始值;循环条件;每次循环之后的操作){
循环体代码
}
循环打印0到9的数字
for (var i=0;i<10;i++) {
console.log(i);
}
"""
使用for循环打印出数组内所有的元素
var l1 = [11, 22, 33, 44, 55]
for(var i=0;i<l1.length;i++){
console.log(l1[i]) >>>>>>>>>>>>不能使用l1.i的方法，只能写l1[i]
}
"""
三元运算（主要用于判断二选一的情况）
# python中的三元运算:
res = 11 if 1 > 2 else 22
if与else中间的条件成立的话就用if前面的值，如果不成立就使用else的值
# js中的三元运算
res = 1 > 2 ? 11 : 22
'''问号前面的条件成立则使用冒号左边的值 否则使用冒号右边的值'''
# 三元运算一般情况下都不推荐嵌套使用!
函数
js函数语法：
function 函数名(参数1,参数2){
函数体代码
return 返回值
}
1.function 定义函数的关键字 相当于python中的def
2.函数名的命名参考变量名 并且js推荐使用驼峰体(Myfunc\MyFunc)，在Python中推荐使用下划线
3.参数可写可不写
4.return返回值
# js函数调用跟python中函数调用一样，都是函数名加括号调用，有参就传参
# 1.无参函数
function f1(){console.log(111)}
f1()
# 2.有参函数（不管传多少参数都能执行函数体代码）
function f2(a, b){console.log(a,b)}
f2() # 可以调用 相当于传了两个undefined
f2(1) # 可以调用
f2(1,2) # 可以调用
f2(1,2,3,4,5) # 可以调用
'''js中的函数提供了有个内置关键字arguments:接收所有参数'''
function f2(){
console.log(arguments)
if (arguments.length === 0){
console.log('什么参数都没传')
}else if(arguments.length === 1){
console.log('传了一个参数')
}else{
console.log('传了多个参数')
}
}
# 3.返回值参数
return不支持返回多个数据
# 4.匿名函数（没有函数名的函数）
var ff = function (){
console.log(123)
}
# 5.箭头函数(drf中vue框架会再次接触)
var f = v => v;
// 等同于(箭头左边是形参右边是返回值)
var f = function(v){
return v;
}
var f = () => 5;
// 等同于
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
return num1 + num2; //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
自定义对象（两种方法）
# 自定义对象(相当于python里面的字典)
var d1 = {'name':'jason','age':18}
python字典取值操作js中的自定义对象都有 并且自定义对象还可以直接通过句点符取值 更像一个对象。
取值操作：
d1.name # jason
添加键值对：d1['pwd'] = 123
循环取值
for(var i in d1){
console.log(d1[i])
}
# 定义自定义对象还有一种标准格式(自定义对象 内置对象 第三方对象)
var d2 = new Object() # 相当于生成了空字典
内置模块
内置对象可以看成是python中的内置方法 内置模块等提前写好直接调用
# 1.Date对象（日期对象）
var d1 = new Date()>>>>>>>>>>>类似于Python中调模块
d1.toLocaleString()>>>>>>>>>>'2022/4/28 23:30:42'
d1.toLocaleDateString()>>>>>>>>>>'2022/4/28'
d1.toLocaleTimeString()>>>>>>>>>>'23:30:42'
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（因为它是从0-11，所以拿到之后要加一）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
# 小练习:2017-12-27 11:11 星期三
const WEEKMAP = {
0:"星期天",
1:"星期一",
2:"星期二",
3:"星期三",
4:"星期四",
5:"星期五",
6:"星期六"
}; //定义一个数字与星期的对应关系对象
function showTime() {
var d1 = new Date(); # 获取日期对象
var year = d1.getFullYear(); # 获取年份
var month = d1.getMonth() + 1; //注意月份是从0~11 # 获取月
var day = d1.getDate(); # 获取日期
var hour = d1.getHours(); # 获取时间
var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes(); # //三元运算，因为如果正好一分钟就会等于0，获取分钟
var week = WEEKMAP[d1.getDay()]; //星期是从0~6
var strTime = `
${year}-${month}-${day} ${hour}:${minute} ${week} # 拼接
`;
console.log(strTime)
};
showTime();
JSON对象（python中的内置模块和JSON模块）
# python中如何序列化反序列
import json
json.dumps()
json.loads()
# js中如何序列化反序列化
JSON.stringify()
JSON.parse()
正则对象（利用一些特殊的符号组合去字符串里面筛选符合条件的数据）
# 创建正则表达式的两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}"); # 通过内置对象声明一下
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; # 推荐使用(简化)
# 使用正则
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
reg2.test('jason123') true
'''括号内什么都不写 就相当于写了undefined'''
reg2.test() true
"""
验证
var reg3 = /undefined/
reg3.test('jason666') false
reg3.test('undefined') true
reg3.test() true
"""
# 全局匹配（不推荐使用）
在正则表达式的最后添加一个字母g（global）
var reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg3.lastIndex >>>>>>>重置
0
reg3.test('jason666')
true
reg3.lastIndex
8
reg3.test('jason666')
false
BOM操作
Browser Object Model是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”
window.open('https://www.baidu.com','','width=400,height=400')
# 打开子页面
子页面的操作其实可以通过一些手段传递给父页面(父子联动)
# 关闭页面
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 # 跳转到指定页面
"""window可以省略不写"""
# 弹框系列
alert("你看到了吗？") 警告
confirm('要不要敲老赵的天灵盖') 确认
获取用户是点击取消还是确认 返回false和true
prompt('你还有什么要交代的吗') 提示
获取用户输入的内容 也可以通过第二个参数添加默认内容
# 计时器
'''单次定时'''
var t = setTimeout(showMsg,9000) # 9秒钟之后自动执行showMsg
clearTimeout(t) # 取消定时器
'''循环定时'''
var s = setInterval(showMsg,3000) # 每隔3秒执行一次
clearInterval(s) # 取消定时器
function showMsg() {
alert(123)
}
var t = setInterval(showMsg,3000)
function clearMsg() {
clearInterval(t)
}
setTimeout(clearMsg, 9000)
# 由于DOM是操作页面上的HTML代码 但是HTML页面加载顺序是从上往下,所以如果想要我们的代码能够正常执行 必须要先等待html页面加载完毕。
# 解决的措施之一:
将script标签写在body内最下方
DOM操作
Document Object Model是指文档对象模型，通过它可以操作HTML文档的所有元素
但是HTML页面上有很多相同的标签 所以我们在操作HTML标签之前还要先学会如何查找标签(js查找标签)
'''直接查找'''
# 通过标签名查找标签
document.getElementsByTagName('div') # 数组套标签对象
# 通过class值查找标签
document.getElementsByClassName('c1') # 数组套标签对象
# 通过id值查找标签
document.getElementById('d1') # 标签对象本身
'''间接查找'''
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
# 方法得出的标签对象还可以继续点击上述方法
