Day 53
今日内容概要
- JS数据类型
- JS数据类型—布尔值
- JS数据类型—对象object
- JS数据类型—自定义对象object
- JS运算符
- JS流程控制
- JS函数
- JS内置对象
- JS的BOM与DOM操作（核心）
今日内容详细
一.JS数据类型
1.JS数据类型—布尔值
python中的布尔值bool:
True
False：0、None、''、[]、{}..
JS中的布尔值boolean:
true
false：(空字符串)、0、null、undefined、NaN
'''
null与undefined的区别
null可以理解为曾经拥有过,现在暂时空了
undefined可以理解为从来没拥有过
'''
2.JS数据类型—对象object
'JS中同样也是一切皆对象'
对象之数组(相当于python中的列表)
let l1=[11,22,33]
| 内置方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val, ...) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并向数组添加新元素。 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
eg: forEach() 类似Python中for循环
var numb_list=[11,22,33,44]
numb_list.forEach(function(a){console.log(a)})
结果为依次打印11 22 33 44
eg: splice()
numb_list.splice(2,1,'aa') #从索引为2的位置删一位数,改为aa
3.JS数据类型—自定义对象object
自定义对象(相当于python中的字典)
定义方式1:
let d1 = {'name':'张三','pwd':123}
定义方式2:
let d2 = new Object()#此时d2是空字典,typeof下是对象
自定义对象操作数据值的方式更加简单 直接使用句点符
d1.name#结果就会出来值张三
d1.hobby='run'#显示d1就会发现新增了一个键值对
二.JS运算符
var x=10;
var res1=x++; 先赋值再自增 此时res1是10
var res2=++x; 先自增再赋值 此时res2是12
== 弱等于(JS会自动转换成相同数据类型比较)
=== 强等于(不自动转换相同数据类型)
#所以在js中涉及到比较时尽量用===,防止判断错误
&& 等价于python中的and
|| 等价于python中的or
! 等价于python中的not
三.JS流程控制
1.分支结构
1.单if分支
if(条件){条件成立之后执行的代码}
2.if..else分支
if(条件){
条件成立后执行的代码
}else{
条件不成立后执行的代码
}
3.if..elif..else分支
if(条件1){
条件1成立后执行的代码
}else if(条件2){
条件1不成立,条件2成立执行的代码
}else{
条件都不成立后执行的代码
}
————————————————————————————————————————————
这里还有一种语法,其他编程语言里有但python里没有,因为完全可以用if实现：switch(相当于连续的多个if判断) '以下仅了解即可'
var day = new Date().getDay();#获取当前是星期几
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("不知道今天是星期几")
}
switch中的case子句通常都会加break语句，如果去掉的花程序会继续执行后续case中的语句。
2.循环结构
【for循环】
eg:
循环打印1~100
for(let i=1;i<101;i++){ #定义开始位置,循环条件,每次循环完做什么事
console.log(i) #打印i
}
eg:
打印数组内所有的数据值
l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'jason']
for(let i=0;i<l1.length;i++){
console.log(l1[i])
}
—————————————————————————————————————————————————————————
【while循环】
eg:
循环打印1~10
var i = 0;
while (i < 11) {
console.log(i);
i++;
}
四.JS函数
语法结构：
function 函数名(形参){
函数体代码
return 返回值
}
/*以下仅列举三个重要的、或python中没有的,其余与python差不多*/
【有参函数】：
#参数的个数不需要一一对应,如果想限制参数个数则需要使用内置关键字arguments：
function func(a, b){
if(arguments.length===2){ /*如果参数数量是2则往下执行*/
console.log(a, b)
}else{
console.log('参数个数不对')
}
}
【匿名函数】
function(a){console.log('我是匿名函数')} #没有函数名
如果要使用匿名函数则：
let 函数名 = function(a){console.log('我是匿名函数')}
【箭头函数】
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只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
五.JS内置对象
相当于python中的内置方法或内置模块
固定语法：
var 变量名 = new 内置对象名();
1.Date日期对象
let Obj=new Date(); /*获取当前时间对象*/
Obj.toLocaleString()/*转成当地时间 2022/8/25 21:17:00*/
Obj.getDay(); /*获取今天星期几 4*/
| 方法 | 解释 |
|---|---|
| getDate() | 获取日 |
| getDay () | 获取星期 |
| getMonth () | 获取月（0-11） |
| getFullYear () | 获取完整年份 |
| getYear () | 获取年 |
| getHours () | 获取小时 |
| getMinutes () | 获取分钟 |
| getSeconds () | 获取秒 |
| //getTime () | 返回累计毫秒数(从1970/1/1午夜) |
2.JSON序列化对象(重点)
python的序列化：
import json
json.dumps() #序列化
json.loads() #反序列化
JS中的序列化：
JSON.stringify() #序列化
JSON.parse() #反序列化
eg:
let ddd={'name':'torry','pwd':'123'}
let strJson=JSON.stringify(ddd) #序列化
JSON.parse(strJson) #反序列化
3.RegExp正则对象
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
当遇到一些无法理解的bug时,大概率是JS内部的bug，百度一下
六.JS的BOM与DOM操作（核心）
BOM:浏览器对象模型
通过写js代码可以跟浏览器交互
DOM:文档对象模型
通过写js代码可以跟html文档交互
【BOM操作】
window.innerHeight #获取浏览器当前窗口高度
window.innerWidth #获取浏览器当前窗口宽度
window.open('网站','') #打开子页面 (内部可以添加属性)
window.close() #关闭当前窗口(只能关闭自己打开的)
window.navigator.userAgent() #获取浏览器信息(主要用于爬虫)
window.history.forward() #页面前进下一页
window.history.back() #页面后退前一页
window.location.href #获取当前页面网址 *
window.location.href = 新网址 #重新访问一个新网址 *
window.location.reload() #刷新当前页面 *
alert() 警告 #弹出一个警告框
confirm() 确认 #弹出一个确认框(有按钮 会返回true或false)
prompt() 提示 #弹出一个提示框,用户输入的信息会返回回来
——————————————————————————————————————————————————————————————————
定时器相关操作(重要)：
function func1(){
alert('要吃饭了')
}
let t =setTimeout(func1,3000) //3秒后自动执行一次func1函数
clearTimeout(t)//取消上面的延时定时任务
let s1 = setInterval(func1,3000)//3秒后自动循环执行func1函数(缺陷:会叠加)
clearInterval(s1)//取消上面的循环延时定时任务
——————————————————————————————————————————————————————————————————————
eg:3s后循环警告要干饭了，且10秒后取消该警告
<body>
<script>
var s1 = null
function showMsg() {
function func1(){
alert('要干s饭了')#弹出警告
}
s1 = setInterval(func1, 3000)#3s后自动循环执行func1函数
}
function clearMission(){
clearInterval(s1)#取消上面定时器
}
setTimeout(clearMission, 10000)#10秒后执行clearMission函数来取消定时器
showMsg()
</script>
</body>
【DOM操作】
JS操作html和CSS操作html学习套路一致 都是先学如何查找标签:
document.getElementById()
根据id值查找标签 结果直接是标签对象本身
document.getElementsByClassName()
根据class值查找标签 结果是数组类型
document.getElementsByTagName()
根据标签名查找标签 结果是数组类型
#当涉及到标签查找时需注意要在标签加载下面写(只有加载了标签才能查找到)
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
#当有一个标签对象需要反复使用,可以用变量名接收存储一下(减少打字的量！)
let divEle = document.getElementById('d1')
——————————————————————————————————————————————————————————————————————
节点(标签)操作: #节点就是标签！
let XXXEle = document.createElement('标签名,如a') #创建a标签
XXXEle.id = 'id值' #给创建的标签添加id值
aEle.href='某个网址' #给创建的a标签添加一个网址
XXXEle.innerText = '内部文本' #给创建的标签添加内部文本文字
divEle.append(XXXEle) #把创建的标签添加到某个标签内部
注：这是动态创建！生效一次,不是永久生效的！！
属性操作
XXXEle.属性 只能设置默认属性
XXXEle.setAttribute() 可以设置默认属性、自定义属性
文本操作
divEle.innerHTML #获取标签内部所有内容
divEle.innerText #获取标签内部所有文本内容
1.divEle.innerHTML = '<h1>嘿嘿嘿</h1>'
结果会改变文字大小
2.divEle.innerText = '<h1>哈哈哈</h1>'
结果会显示后面文本：'<h1>哈哈哈</h1>'
作业
1.整理今日内容及博客
2.自行完善上午默写题并流畅说出
3.预习明日内容
DOM操作、jQuery框架