-
运算符
-
流程控制
-
函数
-
内置对象
-
BOM与DOM操作
-
运算符
# 算数运算符
var x=10;
var res1=x++; '先赋值后自增1'
console.log(res1);
VM216:1 10
var res2=++x; '先自增1后赋值'
console.log(res2)
VM340:1 12
# 比较运算符
弱等于:'==' 自动转换类型
'5'==5 '结果为true js会自动转换成相同数据类型 然后再比较值是否一致'
强等于: '===' 不转换类型
'5'===5 '结果为false 强等于就不会转换类型，直接比较'
# 逻辑运算符
js中的&&、||、! 和Python中的 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语法
var n1 = 1;
switch (n1) {
case 0:
console.log("干饭了家人们");
break;
case 1:
console.log("该睡觉了");
break;
case 2:
console.log("下楼做核酸啦");
default:
console.log("人没了")
};
VM1055:6 该睡觉了
# while循环
while(循环条件){
循环体代码
}
# 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])
};
VM1107:2 11
VM1107:2 22
VM1107:2 33
VM1107:2 44
VM1107:2 55
"""
python中的三元运算:
res = 111 if 1 > 2 else 222
''' if后面的条件成立则使用if前面的值， 不成立则使用else后面的值
'''
js中的三元运算:
res = 1 > 2 ? 111 : 222
'''
问号前面的条件成立则使用冒号左边的值，不成立则使用冒号右边的值
'''
# 三元运算一般情况下不推荐嵌套使用
js函数定义
"""
函数定义:
function 函数名(参数1,参数2){
函数体代码
return 返回值
}
1、function定义函数的关键字，相当于Python中的def
2、函数名的命名和变量名；差不多， 并且js推荐使用驼峰体(大驼峰Myfunc\小驼峰myFunc)
3、参数可以写也可以不写
4、return返回值
函数调用:
函数名加括号, 有参传参就可以了
"""
# 无参函数
function f1(){
console.log(111)
}
# 有参函数
function f1(a, b){console.log(a,b)}
f1() # undefined undefined 相当于传了两个undefined
f1(1) # 1 undefined 一个形参， 一个undefined
f1(1,2) # 1 2
f1(1,2,3,4,5) # 1 2
'''js中的函数提供了有个内置关键字arguments:接收所有参数'''
function f1(){
console.log(arguments)
if (arguments.length === 0){
console.log('没有传参')
}else if(arguments.length === 1){
console.log('传了一个参数')
}else{
console.log('传了多个参数')
}
}
# 返回值参数
return 不支持返回多个数据
# 匿名函数
var ff = function (){
console.log(111)
}
# 箭头函数(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':'owen', 'age':18}
python字典取值操作js中的自定义对象都有， 并且自定义对象还可以直接通过句点符取值，更像一个对象
# 取值
d1.age // 18
# 循环取值
for(var i in d1){
console.log(d1[i])
}
"""
定义自定义对象还有一种标准格式(自定义对象 内置对象 第三方对象)
var d1 = new Object() // 相当于生成了空字典
"""
# 内置对象可以看成Python里面的内置方法和内置模块等 提前写好了直接调用
# Date对象
var d1 = new Date()
d1.toLocaleString() // 获取现在的时间
'2022/4/28 18:45:04
d1.toLocaleDateString() // 获取现在的年月日
'2022/4/28'
d1.toLocaleTimeString() // 获取现在的时分秒
'18:47:25'
# 日期时间关键字
//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(); //三元运算
var week = WEEKMAP[d1.getDay()]; //星期是从0~6
var strTime = `
${year}-${month}-${day} ${hour}:${minute} ${week}
`;
console.log(strTime)
};
showTime();
# python中序列化反序列化
import json # json模块
json.dumps() # 序列化
json.loads() # 反序列化
# js中序列化反序列化
JSON.stringify() # 序列化
JSON.parse() # 反序列化
# 创建正则表达式的两种方式
# 第一种
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
reg1.test('wuhuwuhu') // true
reg1.test() // true 括号里面没东西就相当于undefined
# 第二种(简写形式)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}$/;
# 全局匹配
在正则表达式的最后一个添加一个字母g
var reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
undefined
reg3.lastIndex
0
reg3.test('bibibibi')
true
reg3.lastIndex
8
reg3.test('bibibibi') // 这次就是从第八位开始校验， 所以为false
false
全称: Browser Object Model
指浏览器对象模型，它可以让js有能力与浏览器进行交互
window.open('https://www.baidu.com','','width=400,height=400') // 定义窗口尺寸
# 打开子页面
子页面的操作其实就是可以通过一些手段传递给也父业面(父子联动)
# 关闭页面
window.close()
# 其他功能
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
window.history.forward() # 前进一页
window.history.back() # 后退一页
window.location.href # 获取页面的url地址
window.location.reload() # 刷新页面
window.location.href = url # 跳转到指定页面
# 弹框系列
# 警告框
alert("快给我转五百万 不然单杀你")
# 确认框
confirm('要不要把你的微信给我呀')
取消 确认 相当于 false true
# 提示框
prompt('你拿钥匙了吗')
获取用户输入的内容， 也可以通过第二个参数添加默认的内容
# 计时器
''' 单次定时 '''(setTimeout)
function showMsg(){
console.log('想我了没')
};
var l = setTimeout(showMsg,3000) # 3秒钟之后自动执行showMsg
clearTimeout(t) # 取消定时器
'''循环定时''' (setInterval)
function showMsg(){
console.log('想我了没')
};
var s = setInterval(showMsg,3000)
# 规定时间内打印
function showMsg() {
alert('芜湖')
}
var l = setInterval(showMsg,3000)
function clearMsg() {
clearInterval(l)
}
setTimeout(clearMsg, 9000)
# 打印三次后时间到,就停止打印
由于DOM是操作页面上的HTML代码 但是HTML页面加载顺序是从上往下
所以如果想要我们的代码能够正常执行 必须要先等待html页面加载完毕
解决的措施之一:
将script标签写在body内最下方
'''直接查找'''
# 通过标签名查找标签
# 数组套标签对象
document.getElementsByTagName('div')
# 通过class值查找标签
# 数组套标签对象
document.getElementsByClassName('c1')
# 通过id值查找标签
# 标签对象本身
document.getElementById('d1')
'''间接查找'''
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
浙公网安备 33010602011771号