-
-
流程控制
-
函数
-
内置对象
-
BOM与DOM操作
# 1.算术运算符
var x = 10;
var res1=x++; '先赋值后自增1'
var res2=++x; '先自增1后赋值'
# 2.比较运算符
弱等于：自动转换类型
'5' == 5 '结果是true js会自动转换成相同数据类型比较值是否一样'
强不等于：不转换类型
'5' === 5 '结果是false'
# 3.逻辑运算符
python中使用 and、or、not
js中使用&&、||、！
流程控制
# 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.swicth语法
var n1 = 1；
switch (n1){
case 0:
console.log("喜喜");
break;
case 1:
console.log("嘿嘿")
break;
case 2:
console.log("haha")
default: # 没有对应条件统一执行default子代码
consele.log("我没事，我溜达")
}
# 2.while循环
while(循环条件){
循环体代码
}
# 3.for循环
for(初始值；循环条件；每次循环之后的操作){
循环体代码
}
循环打印0到9的数字
for (var i=0;i<10;i++){
console.log(i)
}
"""
使用for循环打印出数组内所有的元素
var l1 = [11,22,3,33,44,55]
for(var i=0;i<l1.lenght;i++){
console.log(l1[i])
}
"""
三元运算符
python中的三元运算
res = 66 if 2 > 3 else 22
'''if后面的条件成立则使用if前面的值 不成立则使用else后面的值'''
js中的三元运算
res = 1 > 2 ? 11:22
'''问号前面的条件成立则使用冒号左边的值 否则使用冒号右边的值'''
# 三元运算一般情况下都不推荐嵌套使用
函数
"""
函数定义：
function 函数名(参数1，参数2){
函数体代码
return 返回值
}
1.function 定义函数的关键字 相当于python中def
2.函数名的命名参考变量名 并且js推荐使用驼峰体(Myfunc\MyFunc)
3.参数可写可不写
4.return返回值
函数调用：
函数名加括号 有参则传参即可
"""
# 1.无参函数
function f1(){console.log(11)}
f1()
# 2.有参函数
function f2(a,b){console.log(a,b)}
f2() # 可以调用 相当于传了两个undefined
f2(1) # 可以调用
f2(1,2) # 可以调用
f2(2,3,4,5,7,8,6,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.箭头函数
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':'faker','age:18'}
python字典取值操作js中的自定义对象都有 并且自定义对象还可以直接通过句点符取值 更像一个对象
取值操作
d1.name # faker
循环取值
for(var i in d1){
console.log(d1[i])
}
定义自定义对象还有一种标准格式(自定义对象 内置对象 第三方对象)
var d2 = new Object() # 相当于生成了空字典
内置对象
# 内置对象可以看成是python中的内置方法 内置模块等提前写好直接调用
# 1.Date对象
var d1 = new Date()
d1.toLocaleString() '2022/4/28 20:08:44'
d1.toLocaleDateString() '2022/4/28'
d1.toLocaleTimeString() '20:08:44'
//getDate() 获取日
//getDay() 获取星期
//getMonth() 获取月（0-11）
//getFullYear() 获取完整年份
//getYear() 获取年
//getHour() 获取小时
//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();
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}$/; # 推荐使用(简化)
# 使用正则
reg2.test('faker666') true
'''括号内什么都不写 就相当于写了undefined'''
reg2.test() true
"""
验证
var reg3 = /undefined/
reg3.test('maker666') false
reg3.test('undefined') true
reg3.test() true
"""
# 全局匹配
在正则表达式的最后添加一个字母g
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg3.lastIndex
0
reg3.test('maker666')
true
reg3.lastIndex
8
reg3.test('maker666')
false
BOM操作
Browser Object Model是浏览器对象模型，它使JavaScript 有能力与浏览器进行“对话”
window.open('https://www.baidu.com','','width=400,height=400')
# 打开子页面
子页面的操作其实可以通过一些手段传递给父页面(父子联动)
# 关闭页面
window.close()
window.navigator.appVersion # 浏览器的版本号和其他版本信息
window.navigator.userAgent # 浏览器在它的USER-AGENT HTTP标题中发送的字符串。该属性包含appName,appVersion属性的所有信息
window.history.forward() # 前进一页
window.history.back() # 后退一页
window.location.href # 获取页面的url地址
window.location.reload # 刷新页面
window.location.href = url # 跳转到指定页面
"""window可以省略不写"""
# 弹框系列
alert("hi") 警告
confirm('你爱我吗？') 确认
获取用户是否取消还是确认 返回flase和true
prompt('你爱他吗？') 提示
获取用户输入的内容 也可以通过第二个参数添加默认内容
# 计时器
'''单次定时'''
var t = setTimeout(showMsg,1000) # 1秒钟之后自动执行showMsg
clearTimeout(t) # 取消定时器
'''循环定时'''
var s = setInterval(showMsg,2000) # 每隔3秒执行一次
clearInterval(s) # 取消定时器
补充说明
由于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 最后一个标签元素
nextElenmentSibling 下一个兄弟标签元素
previousElenmentSibling 上一个兄弟标签元素
# 方法得出的标签对象还可以继续点击上述方法
posted on
