py js中的函数对象与DOM操作 day 42
作者：互联网
今日学习内容
- 运算符
- 流程控制
- 函数
- 内置对象
- BOM与DOM操作
运算符
# 算术运算符
前自增: ++num
后自增:num++
共同点:对于变量自身而言是没有任何影响的,都是在自身的基础上+1
不同点:在变量的赋值过程中,前自增是先自增在赋值,后自增是先赋值在自增
var x=10;
var res1=x++; '先赋值后自增1'
var res2=++x; '先自增1后赋值'
# 比较运算符
弱等于:自动转换类型
字符串的'5'等于整型的5
'5' == 5 '结果是true js会自动转换成相同数据类型比较值是否一样'
强等于:不转换类型
'5' === 5 '结果是false'
# 逻辑运算符
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.switch语法
var n1 = 1;
switch (n1) {
case 0:
console.log("空我");
break; # 如果不加break会基于当前位置一直往下运行
case 1:
console.log("亚极陀");
break;
case 2:
console.log("灵骑")
default: # 没有对应条件统一执行default子代码
console.log("响鬼")
}
# 2.while循环
while(循环条件){
循环体代码
}
var i = 0;
while (i<3){
console.log(i);
i++;
}
0
1
2
# 3.for循环
for(初始值;循环条件;每次循环之后的操作){
循环体代码
}
循环打印0到9的数字
for (var i=0;i<4;i++) {
console.log(i);
}
0
1
2
3
"""
使用for循环打印出数组内所有的元素
var l1 = [11, 22, 33, 44, 55]
for(var i=0;i<l1.length;i++){
console.log(l1[i])
}
> 11
> 22
> 33
> 44
> 55
"""
三元运算符
python中的三元运算
res = 11 if 1 > 2 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返回值
函数调用:
函数名加括号 有参则传参即可!!!
# 无参函数
function f1() {
console.log(212)
}
f1() # 212
# 有参函数
function f1(a, b) {
console.log(a, b)
}
f1() # undefined undefined
f1(1) # 1 undefined
f1(1, 2) # 1 2
f1(1,1,1,1,1) # 1 1
'''js中的函数提供了有个内置关键字arguments:接收所有参数'''
function f2(){
console.log(arguments)
if (arguments.length === 0){
console.log('什么参数都没传')
}else if(arguments.length === 1){
console.log('传了一个参数')
}else{
console.log('传了多个参数')
}
}
f2()
# Arguments [callee: ƒ,Symbol(Symbol.iterator): ƒ]
# 无
f2(1)
# Arguments [1, callee: ƒ, Symbol(Symbol.iterator): ƒ]
# 一
f2(1,2,3,4,5)
# Arguments [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
# 多
# 返回值参数
return不支持返回多个数据,返回一个数据，包括一个列表这种
function f1(){
return 123,123,123
}
f1() # 123
function f2() {
return [1,2,3,4]
}
f2() # [1,2,3,4]
# 匿名函数
var aa = function (){
console.log(123)
}
aa
# f(){
# console.log
# }
aa() # 123
# 箭头函数
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(nunm1, num2) {
retuen num1+num2; # //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
自定义对象
自定义对象 相当于python里的字典
可以通过句点符(.)的方式取值
var a = {'name': 'kuuga', 'age': '20'}
a.name # kuuga
# for循环取值
for(var i in a){ # i 是字典中的键
console.log(a.[i])
}
标准格式的自定义对象(自定义对象 内置对象 第三方对象)
var dic = new Object() # 相当于生成空字典
内置对象
# Date对象
var dic = new Date()
dic.toLocaleString() # '2022/4/28 18:46:21'
dic.toLocaleDateString() # '2022/4/28'
dic.toLocaleTimeString() # '18:49:34'
# 一些内置方法
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
# 将当前时间按 2017-01-01 11:11 星期三 格式输出
const WEEKMAP = {
0:"星期日",
1:"星期一",
2:"星期二",
3:"星期三",
4:"星期四",
5:"星期五",
6:"星期六"
}; //定义数字与星期之间的关系
function showTime() {
var dic = new Date();
var year = dic.getFullYear();
var month = dic.getMonth() + 1; # 月份范围0~11
var day = dic.getDate();
var hour = dic.getHours();
var minute = dic.getMinutes() < 10?"0"+dic.getMinutes():dic.getMinutes(); # 三元运算
var week = WEEKMAP[dic.getDay()]; # 星期0~6
var strTime = `${year}-${month}-${day} ${hour}:${minute} ${week}`;
console.log(strTime)
}
showTime(); # 2022-4-28 19:11 星期四
JSON对象
# python中如何序列化反序列
import json
json.dumps()
json.loads()
# js中如何序列化反序列化
JSON.stringify() # 序列化
JSON.parse() # 反序列化
例子:
var dd = {'name': 'kuuga', 'age': '12'}
JSON.stringify(dd) # '{"name":"kuuga","age":"12"}'
var js = '{"name":"kuuga","age":"12"}'
JSON.parse(js) # {name: 'kuuga', age: '12'}
正则对象
# 创建正则表达式的两种方式
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('jason123') true
'''括号内什么都不写 就相当于写了undefined'''
reg2.test() true
"""
验证
var reg3 = /undefined/
reg3.test('jason666') 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('jason666')
true
reg3.lastIndex
8
reg3.test('jason666')
false
BOM操作
Browser Object Model是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”
# 浏览器窗口大小
window.innerHeight
980
window.innerWidth
860
window.open('https://www.baidu.com','','width=400,height=400')
# 打开子页面
window.open()
子页面的操作其实可以通过一些手段传递给父页面(父子联动)
# 关闭页面(空白页)
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)
# 定时弹窗的一个html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function showMsg() {
alert(123)
}
var t = setInterval(showMsg,3000)
function clearMsg() {
clearInterval(t)
}
setTimeout(clearMsg, 9000)
</script>
</head>
<body>
</body>
</html>
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 上一个兄弟标签元素
# 方法得出的标签对象还可以继续点击上述方法
标签：function,console,log,DOM,标签,py,42,dic,var 来源： https://www.cnblogs.com/kazz/p/16204356.html