今日内容

JS数据类型之布尔值(boolean)

boolean相当于python里的bool

python中布尔值首字母是大写的
	True
	False  # 0 None '' [] {} ...为False
js中布尔值首字母是不需要大写的
	true
	false  # (空字符串) 0 null undefined NaN(Not A Null)
null与undefined的区别
	null可以理解为曾经拥有的 现在暂时用完了
	undefined可以理解为从未拥有过

JS数据类型之对象(object)

在JS中也是一切皆对象

1.对象之数组(相当于python中的列表)
	let l1 = [11, 22 ,33, 44]
2.常用内置方法
	1.push()尾部追加元素 python中用的是appeend()
	2.pop()获取尾部元素 跟python一致
	3.unshift()头部插入元素 python中用的insert()
	4.shift() 头部移除元素 python中可以使用pop(0) remove()
	5.sliceq() 切片操作 python中用的是[:]
	6.concat() 连接数组 python中用的是extend
	7.forEach() 列出数组的每个元素
		name.forEach(function(valus,index){console.log(value,index)})
	8.splice() 删除元素 并向数组添加新的元素
		splice(起始位,删除的个数,新增的元素)

JS数据类型之自定义对象(object)

自定义对象(相当于python中的字典)

定义方式1:
	let d1 = {'name':'jason','age':'18'}
定义方式2:
	let d2 = new Object()
自定义对象操作数据值的方式更加简单 直接使用句点符
	eg:d1.name

JS运算符

一、算术运行符

var x=10;
var res1=x++;  # 先赋值后自增 10
var res2=++x;  # 先自增后赋值 12

二、比较运算符

==  # 弱等于(自动转换成相同的数据类型)
eg:
	5=='5'  # ture
===  # 强等于(不知道转换)
eg:
	5==='5'  # false

三、逻辑运算法

&&  # 等价于python中的and
||  # 等价于python中的or
!  # 等价于python中的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{
        条件不成立之后执行的代码
    }

二、switch语法结构

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中的语句'

三、for循环结构

1.循环打印1-100
	for (let i=1;i<101;i++){
    	console.log(i)};
    
i=1是起始位 i<101是结束条件 

2.课堂小练习
打印数组内所有的数据值
	var l1 = [11, 22, 33, 44, 55, 66, 77, 'jason']
	for (let i=0;i<l1.length;i++){
    	console.log(l1[i])};

四、while循环结构

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

JS函数

一、JS函数语法结构

function 函数名(形参){
		函数体代码
		return 返回值
};
"""
1.function 是定义函数的关键字 
2.函数名参考变量名 尽量做到见名知意 JS推荐使用驼峰体
3.形参可写可不写
4.return 返回值
"""

二、无参函数

function func(){
    console.log(666)
};
func()

三、有参函数

function func(a,b){
    console.log(666)
};
func()

参数的个数不需要一一对应 如果想限制参数个数需要使用内置关键字
关键字:arguments
	function func(name,age){
		if(arguments.length===2){
			console.log(name,age)
		}else{
			console.log('参数必须要保持相同个数')
    }
};
func('jason',18)

四、匿名函数

let f1 = function(){
    console.log('你好鸭')
};
f1()

五、箭头函数

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中的内置函数或者内置模块

1.固定语法
	var 变量名 = new 内置对象名();
2.Date日期对象
	var Obj = new Date();
	Obj.getDay  # 4 表示星期几
	Obj.toLocaleString()  # '2022/8/25 20:19:00' 表示当地时间

关键字	表示
getDate()	获取日
getDay()	获取星期
getMonth()	获取月(0-11)
getFullYear()	获取完整年份
getYear()	获取年
getHours()	获取小时
getMinutes()	获取分钟
getSeconds()	获取秒
getMilliseconds()	获取毫秒
getTime()	返回累计毫秒数(从1970/1/1午夜)

JS JSON序列化对象

1.回顾python序列化
	import json
	json.dupms
	json.loads
2.js中如何实现序列化反序列化
	JSON.stringify()
	JSON.parse()
'js中可以直接用JSON.的方式使用'

JS RegExp正则对象

1.定义正则表达式的两种方式
	var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
	var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;  # 推荐使用 简写方式
'第一个注意事项，正则表达式中不能有空格'
2.使用正则
	reg2.test('jason666')  # true
	reg2.test()  # ture 括号内什么都不写 相当于默认写了undefined
	car reg3 = /undefined/
	reg3.test('jason666')  # false
	reg3.test()  # ture
	reg3.test('undefined')  # true
3.全局匹配
在正则表达式后面加个g
	var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
	reg2.test('jason666')  # true 第一次匹配完会停留在最后面
	reg2.test('jason666')  # false 再次匹配没有东西就是false了

BOM与DOM操作

BOM:浏览器对象模型
通过写js代码可以跟浏览器交互
DOM:文档对象模型
通过写js代码可以跟html交互

BOM操作
	1.window.innerHeight	浏览器窗口的内部高度
	2.window.innerWidth		浏览器窗口的内部宽度
	3.window.open()		打开新窗口
	4.window.close()	关闭当前窗口
	5.window.navigator.userAgent	标识是否是一个浏览器
	6.window.history.forward()		前进
	7.window.history.back()			后退
	8.window.location.href			当前页面的网页地址
	9.window.location.href = '新网址' 跳转到新网址
	10.window.location.reload()		刷新页面
弹出框
	1.alter()	警告框
	2.confirm	确认框
	3.prompt	提示框
定时器相关操作(重要)
1.单次定时
	<script>
    	function func(){
        	alert('哈哈哈')
    	}
    	let t = setTimeout(func,3000)  // 3秒中之后自动执行func函数
    	clearTimeout(t)  // 取消上面的定时任务
	</script>
2.循环定时
	<script>
    	var s1 = null

    	function showMsg() {
        	function func() {
            	alert('哈哈哈')
        	}

        	s1 = setInterval(func, 3000)  //每隔三秒就执行一次func函数
    	}

    	function clearMission() {
        	clearInterval(s1)
    	}

    	setTimeout(clearMission, 10000)  // 10后取消上面的定时任务
    	showMsg()
	</script>

DOM操作

JS操作html和CSS操作html学习套路一致 都是先学如何查找标签

一、直接查找

1.根据id值查找标签 结果直接是标签对象本身
	document.getElementById('id值')
2.根据class值查找标签 结果是数组类型
	document.getElementsByClassName('class值')
3.根据标签名查找标签 结果是数组类型
	document.getElementsByTagName('标签名')

二、间接查找

1.parentElement
	父节点标签元素
2.children
	所有子标签
3.firstElementChild
	第一个子标签元素
4.lastElementChild
	最后一个子标签元素
5.nextElementSibling
	下一个兄弟标签元素
6.previousElementSibling
	上一个兄弟标签元素
'
如果有标签对象需要反复使用 可以是变量储存
	eg:
		let divEle = document.getElementById('d1')
这个时候就可以通过divEle.上面的方法查找标签了 可以反复使用
'

三、节点操作

var aEle = document.createElement('a')  # 创建一个a标签
aEle.id = 'd1'  # 设置id值
aEle.href = 'https://www.baidu.com'  # 设置href属性
aEle.innerText = '点我去百度'  # 设置文本内容
divEle.append(aEle)  # div内部追加a标签
ps:动态创建 临时有效 非永久 

四、属性操作

属性操作的两种方式
	xxxEle.属性				只能操作默认的属性
	xxxEle.setAttribule()	   默认属性、自定义属性
""""    
标签默认属性
	id、class...
自定义属性值
	name = '123',pwd = 123...
"""

五、文本操作

1.获取属性值
	innerHTML  # 获取这个标签内部所有的内容(包括文本、标签)
	innerText  # 只能这个标签内的文本
2.修改属性值
	innerHTML = '<h1>嘿嘿嘿</h1>'  # 识别标签语法
	innerText = '<h1>哈哈哈</h1>'  # 不识别标签语法
'没有赋值符号就是获取 有赋值符号就是修改'

标签：function,python,标签,数据类型,JS,BOM,func,var
来源： https://www.cnblogs.com/lisony/p/16626130.html