今日内容概要
- JS基本数据类型
- 流程控制
- 函数与面向对象
- JS的BOM与DOM操作
今日内容详细
JS数据类型之布尔值
python
bool
True
False:0 None '' [] {} ...
JS
boolean
true
false:(空字符串)、0、null、undefined、NaN
null与undefined的区别
null可以理解为曾经拥有过 现在暂时空了
undefined可以理解为从来没拥有过
null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
null表示变量的值是空(null可以手动清空一个变量的值，使得该变量变为object类型，值为null)，undefined则表示只声明了变量，但还没有赋值。
还不明白，上图吧！
![image]()
![image]()
JS数据类型之对象(object)
'''在JS中也是一切皆对象'''
1.对象之数组(相当于python中的列表)
let l1 = [11, 22, 33, 44]
常用方法：
方法 说明
.length 数组的大小
.push(ele) 尾部追加元素
.pop() 获取尾部的元素
.unshift(ele) 头部插入元素
.shift() 头部移除元素
.slice(start, end) 切片
.reverse() 反转
.join(seq) 将数组元素连接成字符串
.concat(val, ...) 连接数组
.sort() 排序
.forEach() 将数组的每个元素传递给回调函数
.splice() 删除元素，并向数组添加新元素。
.map() 返回一个数组元素调用函数处理后的值的新数组
![image]()
JS数据类型之自定义对象(object)
1.自定义对象(相当于python中的字典)
定义方式1:
let d1 = {'name':'jason','pwd':123}
定义方式2:
let d2 = new Object()
自定义对象操作数据值的方式更加简单 直接使用句点符
运算符
var x=10;
var res1=x++; 先赋值后自增
var res2=++x; 先自增后赋值
== 弱等于(自动转换成相同数据类型)
=== 强等于(不自动转换)
&& 等价于python中的and
|| 等价于python中的or
! 等价于python中的not
流程控制
1.分支结构
1.单if分支
if(条件){条件成立之后执行的代码}
2.if...else分支
if(条件){
条件成立之后执行的代码
}else{
条件不成立之后执行的代码
}
3.if...elif...else分支
if(条件1){
条件1成立之后执行的代码
}else if(条件2){
条件1不成立条件2成立执行的代码
}
else{
条件不成立之后执行的代码
}
if(name==='tony'){console.log('今晚去洗脚')}
else{console.log('回家睡觉')}
"""
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
"""
2.循环结构
for(let i=1;i<101;i++){
console.log(i)
}
课堂小练习
打印数组内所有的数据值
l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'jason']
for(let i=0;i<l1.length;i++){
console.log(l1[i])
}
while(条件){
循环体代码
}
while(i<10){console.log(i);i++;} 实现0到9打印
for(i=0;i<10;i++){console.log(i)}实现0到9打印
函数
function 函数名(形参){
函数体代码
return 返回值
}
function func(a, b){
console.log(a, b)
}
参数的个数不需要一一对应 如果想限制参数个数需要使用内置关键字arguments
function func(a, b){
if(arguments.length===2){
console.log(a, b)
}else{
console.log('去你妹的 参数都没给我!!!')
}
}
匿名函数
function(a, b){
return a + b;
}
箭头函数
var f = function(v){
return v;
}
var f = v => 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日期对象
2.JSON序列化对象
回顾python序列化
import json
json.dumps()
json.loads()
JS中的序列化
JSON.stringify()
JSON.parse()
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}$/;
注意有一些小特点
BOM
BOM:浏览器对象模型
通过写js代码可以跟浏览器交互
DOM:文档对象模型
通过写js代码可以跟html交互
BOM操作
window.open('https://www.jd.com/','','height=200px,width=200px,left=200px') 打开窗口
window.close() 关闭网站
window.navigator.userAgent() 获取浏览器信息
window.history.forward() 前进
window.history.back() 回退
window.location.href 获取当前网址
window.location.href = 新网址
window.location.reload() 刷新网站
alter() 警告
confirm() 确认
prompt() 提示
定时器
var obj = new Date()
function func2(){alert(obj)} //alert 弹框
t1 = setInterval(func2,2000) //自动执行函数 时间是毫秒
function func1() {clearInterval(t1)} /*取消弹框*/
setTimeout(func1,9000)
DOM操作
JS操作html和CSS操作html学习套路一致 都是先学如何查找标签
document.getElementById()
根据id值查找标签 结果直接是标签对象本身
document.getElementsByClassName()
根据class值查找标签 结果是数组类型
document.getElementsByTagName()
根据标签名查找标签 结果是数组类型
//查找标签是需将script写在body最后面
//基于某一个标签查找标签是可以用变量名存储起来
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
"""
let divEle = document.getElementById('d1')
"""
节点操作
获取节点
et idEle = document.getElementById('d1')
创建标签
let aEle = document.createElement('a')
aEle.href = 'https://www.sogo.com/'
aEle.innerText='点我去搜狗'
将标签添加到获取去的标签中
idEle.append(aEle)
标签中添加默认属性
var imgEle=document.createElement('img')
imgEle.src='111'
imgEle.title='这是一个小妞的图片'
添加非默认属性需要用setAttribute方法
imgEle.setAttribute('name','今晚去哪里洗脚')
文本操作
divEle.innerHTML
divEle.innerText
divEle.innerHTML = '<h1>嘿嘿嘿</h1>'
'<h1>嘿嘿嘿</h1>' 可以识别标签将标签自动添加
divEle.innerText = '<h1>哈哈哈</h1>'
'<h1>哈哈哈</h1>' 不识别内部标签怎么写的就怎么展示
dEle.innerText='<h1>今晚</h1>'
idEle.innerHTML='<h1>今晚</h1>'
浙公网安备 33010602011771号