运算符、流程控制、函数、对象、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中使用&&、||、!
y=5，下面的表格解释了这些算术运算符：
| 运算符 | 描述 | 例子 | y 值 | x 值 | 在线实例 |
|---|---|---|---|---|---|
| + | 加法 | x = y + 2 | y = 5 | x = 7 | 实例 » |
| - | 减法 | x = y - 2 | y = 5 | x = 3 | 实例 » |
| * | 乘法 | x = y * 2 | y = 5 | x = 10 | 实例 » |
| / | 除法 | x = y / 2 | y = 5 | x = 2.5 | 实例 » |
| % | 余数 | x = y % 2 | y = 5 | x = 1 | 实例 » |
| ++ | 自增 | x = ++y | y = 6 | x = 6 | 实例 » |
| x = y++ | y = 6 | x = 5 | 实例 » | ||
| -- | 自减 | x = --y | y = 4 | x = 4 | 实例 » |
| x = y-- | y = 4 | x = 5 | 实例 » |
比较运算符
比较运算符
比较运算符在逻辑语句中使用，以测定变量或值是否相等。
x=5，下面的表格解释了比较运算符：
| 运算符 | 描述 | 比较 | 返回值 | 实例 |
|---|---|---|---|---|
| == | 等于 | x==8 | false | 实例 » |
| x==5 | true | 实例 » | ||
| === | 绝对等于（值和类型均相等） | x==="5" | false | 实例 » |
| x===5 | true | 实例 » | ||
| != | 不等于 | x!=8 | true | 实例 » |
| !== | 不绝对等于（值和类型有一个不相等，或两个都不相等） | x!=="5" | true | 实例 » |
| x===5 | true | 实例 » | ||
| > | 大于 | x>8 | false | 实例 » |
| < | 小于 | x<8 | true | 实例 » |
| >= | 大于或等于 | x>=8 | false | 实例 » |
| <= | 小于或等于 | x<=8 | true | 实例 » |
流程控制
if
单if分支
if(条件){
条件成立执行的分支代码块
}
if...else分支
// 条件成立 执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {
// [如果] 条件成立执行的代码
} else {
// [否则] 执行的代码
}
if else if 语句(多分支语句)
// 适合于检查多重条件。
if (条件表达式1) {
语句1；
} else if (条件表达式2) {
语句2；
} else if (条件表达式3) {
语句3；
....
} else {
// 上述条件都不成立执行此处代码
}
switch分支流程控制
它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。
语法结构：
switch( 表达式 ){
case value1:
// 表达式 等于 value1 时要执行的代码
break;
case value2:
// 表达式 等于 value2 时要执行的代码
break;
default:
// 表达式 不等于任何一个 value 时要执行的代码
}
switch ：开关 转换 ， case ：小例子 选项
关键字 switch 后面括号内可以是表达式或值， 通常是一个变量
关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号
switch 表达式的值会与结构中的 case 的值做比较
如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束
如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码
//注意： 执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。
switch 语句和 if else if 语句的区别
一般情况下，它们两个语句可以相互替换
switch...case 语句通常处理 case为比较确定值的情况， 而
if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
当分支比较少时，if… else语句的执行效率比 switch语句高。
当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。
while循环
while (条件){
需要执行的代码
}
如果忘记增加条件中所用变量的值，该循环永远不会结束。这可能导
致浏览器崩溃。
// eg:
while(i <5){
console.log(`tuzi${i}`)
i++}
// 打印结果
VM519:2 tuzi0
VM519:2 tuzi1
VM519:2 tuzi2
VM519:2 tuzi3
VM519:2 tuzi4
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])
}
"""
三元运算符
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(111)}
f1()
有参函数
function f2(a, b){console.log(a,b)}
f2() # 可以调用 相当于传了两个undefined
f2(1) # 可以调用 (1,undefined)
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('传了多个参数')
}
}
返回值参数
return 返回值
不能返回多个数据
return下面的语句不会再执行
function f2(){
return 11,22,33
}
f2()
// 输出结果：33
function f2(){
return 11,22,33
console.log('222')
}
f2()
// 输出结果：33 return下面的语句不会执行
匿名函数
var Noname = function(){
console.log('hello')
}
Noname()
// VM1165:2 hello
箭头函数(drf中vue框架会再次接触)
var f = v => v;
// 等同于(箭头左边是形参右边是返回值)
var f = function(v){
return v;
}
var fff = v => v;
fff(111)
// 输出结果：111
var f = () => 5;
// 等同于
var f = function(){return 5};
自定义对象
# 自定义对象(相当于python里面的字典)
“字典”结构：对象的属性由键/值对的形式组成，属性名是字符串，属性值可以是任意类型。
var d1 = {'name':'tuzi','age':18}
python字典取值操作js中的自定义对象都有 并且自定义对象还可以直接通过句点符取值 更像一个对象
取值操作
d1.name # t
循环取值
for(var i in d1){
console.log(d1[i])
}
定义自定义对象还有一种标准格式(自定义对象 内置对象 第三方对象)
var d2 = new Object() # 相当于生成了空字典
内置对象
# 内置对象可以看成是python中的内置方法 内置模块等提前写好直接调用
Date对象
var d1 = new Date()
d1.toDateString
d1.toDateString()
'Thu Apr 28 2022'
d1.toLocaleDateString()
'2022/4/28'
d1.toLocaleTimeString()
'23:39:45'
//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();
JSON对象
// python中如何序列化反序列
import json
json.dumps()
json.loads()
// js中如何序列化反序列化
JSON.stringify()
JSON.parse()
用法
var ddd = {'name':'tuzi','pwd':123}
undefined
JSON.stringify(ddd)
'{"name":"tuzi","pwd":123}' //JSON格式
var ddd2 = JSON.stringify(ddd)
undefined
console.log(ddd2)
VM701:1 {"name":"tuzi","pwd":123} //反序列化
正则对象
# 创建正则表达式的两种方式
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.open('https://www.baidu.com','','width=400,height=400')
# 打开子页面
子页面的操作其实可以通过一些手段传递给父页面(父子联动)
# 关闭页面
window.close()
navigator对象
浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
history对象
window.history 对象包含浏览器的历史。
浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。
history.forward() // 前进一页
history.back() // 后退一页
location对象
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
常用属性和方法：
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
弹框系列
alert("你看到了吗？") //主要用于提示警告信息
confirm('看到了') 确认
获取用户是点击取消还是确认 返回false和true
prompt('没看到') 提示
获取用户输入的内容 也可以通过第二个参数添加默认内容
计时器
setTimeout
var t = setTimeout(showMsg,9000) # 9秒钟之后自动执行showMsg
clearTimeout(t) # 取消定时器
setInterval循环定时
var s = setInterval(showMsg,3000) // 每隔3秒执行一次
// 如果不点击弹窗则一直循环，弹窗会叠加
clearInterval(s) // 取消定时器
// 循环弹出三次alert
function showMsg() {
alert(123)
}
var t = setInterval(showMsg,3000)
function clearMsg() {
clearInterval(t)
}
setTimeout(clearMsg, 9000)
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 上一个兄弟标签元素
// 方法得出的标签对象还可以继续点击上述方法
补充说明
由于DOM是操作页面上的HTML代码 但是HTML页面加载顺序是从上往下
所以如果想要我们的代码能够正常执行 必须要先等待html页面加载完毕
解决的措施之一:
将script标签写在body内最下方
