js
函数基础
三种引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三种引入方式</title>
<!-- 3.引入js文件----强烈推荐--一般放在head里优先加载 -->
<script src=""></script>
</head>
<body>
<!-- 1.内嵌式 -->
<button onclick="alert('行内js')">点我试试</button>
</body>
</html>
<!-- 2.内联样式 -->
<script>
alert("试试就试试")
</script>
三种弹出框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三种弹出框</title>
<!--
1.提示框
2.输入框
3.确认框
-->
</head>
<body>
</body>
</html>
<script>
//1.提示框
alert("hhhhh")
//2输入框--返回输入内容
alert(prompt("请输入"))
//3.确认框--返回true或false
alert(confirm("确定吗"))
</script>
变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变量</title>
<!--
1.什么是变量
内存中的一块存储空间
2.变量的声明
格式:var 变量名=值
let
const
3.变量命名
>.遵循标识符的语法规范
1.由字母数字下划线和$组成 *lijian 错误*
2.不能以数字开头 123lijian123 错误
3.不能为关键字或保留字 关键字:语言具备语法性的单词 var 保留字:还没有使用的关键字class Es6之前就是保留字，ES6之后变为关键字
4.不建议使用中文 中国
lijian$ 对
_._lijian^
>.遵循见名知意，遵循小驼峰的命名规范 --- 阿里开发手册-嵩山版见名知意:goschool getName setName 多去查单词
大驼峰(帕斯卡)命名法:每个单词首字母大写 GetName SetName SetDefaultMaxsize
小驼峰:第一个单词首字母小写其他大写 getName
4.变量的访问
使用变量名即可,对变量中存储值的计算--变量的访问
5.两种输出方式用法完全一致，再浏览器的控制台中输出结果信息一般用来输出日志信息console.log(输出的内容)
console.info(输出的内容)--一般用来输出提示信息
6.常量
格式:const定义 常量作用:常量不能改变，否则就会TYPEERROR命名规范:全大写，且不同单词之间用分割MAXSIZESET DEFAULT CLOSE OPERATION
-->
</head>
<body>
</body>
</html>
<script>
//1.变量的声明 int i=0 -2147483648~2147483647var
lijian = 101;
alert(lijian);
// 多变量赋值
var a=100,b =100;
alert(a);
alert(b);
// 分开写
var c;
c= 500;
alert(c);
// var 中国=10 不建议使用
// alert(中国)
var x= 100
var y= 200
var c=x+y
console.log(c)
console.info(c)
const MAX_SIZE = 600
console.log(MAX_SIZE)
MAX_SIZE= 500 //TypeError: Assignment to constant variable.
</script>
数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
1.强数据类型和弱数据类型
c语言int i =0double f=12.3
强数据类型指，必须指名道姓声明出数据的类型
弱数据类型:不需要考虑数据的类型，在运算时你使用什么样的数据，那么再去考虑类型
常见的弱数据类型语言:var 变量名 python:变量名is :
2.typeof关键字
>.输出当前数据的类型
3.常见的数据类型
number :数值型
boolean:布尔型 只有两个值 true false
string :字符型
undefined:未被定义的类型
bigint:大数值类型
symbol:符号类型
function:函数类型
object:对象(引用)类型 --- 万物皆对象
4.数据类型的转换问题?
强数据类型语言，需要指定数据类型，因此就要考虑运算及运算结果的类型问题
int + double =自动类型转换double强制类型转换->int
弱数据类型语言，因数据类型表现并不明显，因此只存在自动类型转换(解释器内部完成，不需要考虑)
-->
</head>
<body>
</body>
</html>
<script>
console.log(typeof 100)//整数
console.log(typeof 100.0)//小数
console.log(typeof 100E2) // 科学计数
console.log(typeof 8.35E-2)//小数的科学计数
console.log(typeof(100+0.1))//运算结果为:180.1
console.log(typeof true)//布尔型
console.log(typeof false)//布尔
console.log(typeof 'xiaolin')//单引号字符串
console.log(typeof "xiaolin")//双引号字符串
console.log(typeof `xiaolin`)//反引号字符串
console.log(typeof a)//没有定义类型
console.log(typeof null)//object类型
console.log(typeof BigInt(1))//大数字类型
console.log(typeof Symbol())//符号类型
console.log(typeof [])//object
console.log(typeof function(){})//function
</Script>
运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>运算</title>
<!--
1.算数运算符
2.关系运算符
3.赋值运算符
4.符合运算符
5.逻辑运算符
6.三目运算符
7.位运算符(难!)
-->
</head>
<body>
</body>
</html>
<script>
//1.算数运算符 +-*/%(取余/取模)**(幂运算)++--
console.log(5%3)//2
console.log(5**3)// 125
/*
自增运算++和--结果都加1或减1
面试:前置自增和后置自增的问题?
前置自增 ++x :先+1后用
后置自增 X ++ 先用后+1
*/
var z=10
console.log(z ++ );// 10
console.log(z)//11
console.log(++ z);// 12
console.log(z)//12
//案例:一下结果输出什么内容
var m=10
var n=20
var z1= m++
var z2 = ++n
console.log(m)//11
console.log(n)//21
console.log(z1)//18
console.log(z2)//21
//2.关系运算符 > < >= <= ==(判断两数是否相等)!=(是否不相等)===(判断是否相等)
console.log("liiian" == "liiian")//t
console.log("liiian" != "liiian")//f
//==号和===号的区别
console.log("100"== 100)//t 比较的是内容 "188”和数值188 在is中判定为相同的内容
console.log("100"=== 100)//f 比较的是类型和内容 字符串和100的类型不一致
//3.赋值运算符 =--->从右向左去看
var a=10 //将10 的值赋值给变量a
//4.复合运算符 格式x=X+n ==>X +=n += -= *= /= %= **
var x = 10
x =x + 100 //变量运算后的重新赋值
x += 100
console.log(x) //308
x= 100
console.log(x **= 2)//==> x =x ** 2
//5.逻辑运算 与运算(&&)、或运算(1)、非运算(!)
/*
!与运算一假必假
!或运算一真必真
*/
console.log(18>20 && 13>10 && 10 >9)//f &&t && t ===>f
console.log(18 > 20 || 13 > 10 || 10 > 9) // f && t && tE==> t
console.log(!(18 > 20))// t
//案例:与或运算的短路逻辑:与运算中当一个表达式为假则后续不运行，或运算中，当一个表达式为真则后续不运行
var age = 18
var isAge = age > 18 && age ++ && age < 20
console.log(isAge)//f
console.log(age)//18
//6.三日运算符: boolean类型表达式?表达式1:表达式2 当boolean为true时执行表达式1，否则执行表达式2
var inputAge = prompt("请输入年龄")
console.log(inputAge >= 18 ?"成年":"未成年")
</script>
位运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>位运算</title>
<!--
1.位运算符:二进制运算
2.常见位运算符 二进制:补码:正数的原码反码和补码是一样的 负数需要计算其补码
a: 13:0008 1101
b: 9:0000 1001
c：-4 原码0000 0100=反码(0变1，1变0)=>反码1111 1011=加1变补码=>1111 1100
a:0000 1101
b:0000 1001
c:1111 1100
位与&:
a&b=0000 1001 ==>9
a&c=0000 1100 ==>12
位或|:
a|b=0000 1101 ==>13
a|c=补1111 1101 ==>反码1111 1100==>原 0000 0011 ==>-3 保留符号位
位非~
~a= 补1111 0010==>反1111 0001==>原0000 1110==> -14
~c= 补0000 0011==>3异或^相异为1 相同为0
异或^相异为1，相同为0
a^b=0008 0100 =>4
a^c=补1111低位补0 0001==>反码1111 0000==>0000 1111 => -15
左移<< 低位补0
a<<2 = 0011 0100 ==>52
c<<2 = 1111 0000 ==>1110 1111==>0001 0000 ==> -16
右移>>正数高位补θ 负数补1 低位舍弃
a>>2=0000 0011 ==>3
c >>2 =1111 1111 ==>1111 1110 ==>0000 0001 ==> -1
无符号右移>>> 无论是正数还是负数，高位全部补0 正数本来高位补8 所以无符号主要针对负数
c >>>2 = 00 ...26个1 1111
-->
</head>
<body>
</body>
</html>
<script>
var a= 13
var b=9
var c=-4
console.log("13 &9:"+(a & b))
console.log("13 & -4:"+(a & c))
console.log("13|9:"+(a|b))
console.log("13|4:"+(a|c))
console.log("~13:"+(~a))
console.log("~ -4:"+(~ c))
console.log("13 ^9:"+(a ^ b))
console.log("13 ^-4:"+(a ^ c))
console.log("13<<2:"+(a<< 2))
console.log("-4<<2:"+(c<< 2))
console.log("13 >>2:"+(a >> 2))
console.log("-4 >>2:"+(c >>2))
console.log("-4 >>>2:"+(c >>>30))//3
</script>
程序流程控制
if结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>if结构</title>
<!--
1.程序流程控制
顺序流程条件分支循环控制
2.条件分支
>.if分支
>if else结构>else if结构
>switch case结构
3.if结构格式 :
if(条件){代码块}
if(条件)代码1}else{代码2}
if(条件){代码1}else if(条件){代码2}...else if(条件n){代码n}else{代码n+1}
-->
</head>
<body>
</body>
</html>
<script>
//拼接练习 字符串的拼接主要看+左右两边有没有字符串的参与，如果有则为拼接，如果两边都是数字，则做运算
console.log("sum"+ 200 + 300)//sum200300
console.log(200 + 300 +"sum"+ 200 + 300 )//500sum200300
var inputYear = prompt("请输入您的年龄：")
//案例二:输入一个年龄，判断是否成年了吗?如果成年则输出成年，否则输出未成年
if(inputYear >= 18){
alert("您的年龄是:"+ inputYear +",所以成年了")
}elsef
alert("您的年龄是:" + inputYear +",所以未成年")
</script>
switch结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>switch结构</title>
<!--
格式:
switch(key){
case 表达式1:
代码1;
break;
case 表达式2:
代码2;
break;
...
case 表达式n:
代码n;
break;
defaule:
代码n+1;
break;//可以不写break
}
规则:
1.switchcase结构中 switch括号中的key匹配case后的value,如果匹配上则执行对应case中的代码，如果没匹配上则执行default中的内容，如果没有default则不执行任何内容，default为最终出口
2.key和value都可以为表达式(计算的结果),也可以为具体的数据内容
3.break可以不写，但是如果匹配到的case中没有break,则会继续向下执行下一个case，直到遇到具备break的case为止，或执行到最终出口default，
4.switch的运行速度比if分支快，因此也推荐在适合的时候尽量使用switch
-->
</head>
<body>
</body>
</html>
<script>
var key="2"
switch(key){
case "2/1":
alert("222222")
break;
case 1:
alert("111111111111111")
break;
case 3:
alert("3333333333333333")
break;
default:
}
</script>
while结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>while结构</title>
<!--
循环三要素
循环变量 循环条件 循环变量的改变
1.while--当型循环格式
while(循环条件){循环体}
2.do- while --- 直到格式:
do{循环体}while(循环条件)
3.while 和 do-while的区别do-while无论条件满足或不满足，都会执行至少一次的循环体
4.break和continubreak:跳出所有循环
continue:跳出单次循环
-->
</head>
<body>
</body>
</html>
<script>
// 案例-:输入3次i love js'
var i= 0;//循环变量
while(i < 3){//循环条件
alert("i love js")
i ++ //循环变量的改变
}
//计算a-100内的和，当i为58时，终止循环
i=0;
var sum = 8
while(i <= 100){
if(i =58){
break;//跳出所有循环
}
sum += i;
i ++;
}
console.log("0-100内的和，50时跳出:"+ sum)
//计算0-100内的和，跳过i为50这个值，
var sum =0
while(i <= 100){
if(i == 50){
i ++;continue;//跳出单次循环
}
sum += i;
i ++;}
console.log("0-108内的和，50时跳过:"+ sum)
</script>
for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>for循环</title>
</head>
<body>
</body>
</html>
<script>
//1.死循环
// for(;;){循环体}
//2.:计算0-100内的和
var sum =0;
for(leti=0;i<= 100;i++){
sum += i}
console.log(sum)
//4.for循环的嵌套问题?----较难问题，循环套循环，在web中我们在后续内容中穿插使用//但web侧重点不在算法上
for(let i=0;i<3;i++){
for(let j=0;j<3;j++){
console.log("i love js")
}}
</script>
数组
数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组</title>
<!--
1.程序=算法(条件/循环/变量/运算符)+数据结构(存储数据的容器,
2.线性表(内存空间是连续的):数组(js是个例外)
查找表(内存空间不连续):键值对 python(字典)java(Map)
3.数组的定义
2.数组的访问
-->
</head>
<body>
</body>
</html>
<script>
//1.直接赋值 [元素内容]
var arr1=[10,20,30,40,50]
console.log(arr1)
//2.使用Array(元素内容)
var arr2 = new Array(10,20,30,40);
console.log(arr2)
//3.使用Array(长度)--创建具备初始长度的数组
var arr3 = new Array(10);
console.log(arr3)
//4.创建空数组
// >>>>>长度为0
var arrEmpty1 =[]
var arrEmpty2 = new Array()
//>>>>>具备一定初始容量的数组
var arrEmpty3 = new Array(5)
//二、数组的访问
数组名[下标]//1.通过下标访问数组元素
console.log(arr1[0])//10
console.log(arr1[arr1.length - 1])//访问数组的最大下标 数组长度:数组名.length
console.log(arr1.length)//5访问数组的长度
console.log(arr1[4])//50 访问最后一个元素
console.log(arr1[5])//访问的元素不存在时等价于访问了一个不存在的变量，undefined类型
// 2.通过下标设置数组元素值--可以存储不同类型的值
var arr4 = new Array(3);
arr4[0]= 10
arr4[1]="10"
arr4[2]="lijian"
console.log(arr4)
</script>
数组的遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遍历</title>
<!--
1.遍历:
等价于通过循环获取数组的元素，并操作数组的元素
-->
</head>
<body>
</body>
</html>
<script>
//1.创建一个5个长度的数组
var arr1 =[10,20,30,40,"lijian"]
// console.log(arr1[0])
// console.log(arr1[1])
// console.log(arr1[2])
// console.log(arr1[3])
// console.log(arr1[4])// 访问5个长度元素，最大下标写到4
// 2.遍历方式
//>>>>普通for循环
for(let i=0;i<arr1.length; i++){
console.log(arr1[i])
}
//>>>>增强循环1--for in(循环变量 in 数组名)
for(let i in arr1){
console.log(arr1[i])
}
//>>>>增强循环2--for of(数组元素 of 数组名)
for(let item of arr1){
console.log(item)
}
//for in 遍历的是数组的下标，for of遍历的是数组的元素
//案例:创建一个空数组，并对其遍历并赋值元素
var arr2 = new Array(10);
//通过普通for循环设置值
for(let i=0;i< arr2.length; i++){
arr2[i]=(i +1)*10
}
//遍历答应可以选择for in或for of
for(let item of arr2){
console.log(item)
}
</script>
数组常用API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组常用API</title>
<!--
1.API(Application Progromming Interface)应用程序接口
---内置的函数，供我们使用，并快速操作数组
2.学习目标就是测试并熟练使用这些内置的函数(功能
-->
</head>
<body>
</body>
</html>
<script>
//1.创建一个数组
var arr=[10,20,30,40,50,60,70]
//2.测试常用的API
console.log("数组的长度:" + arr.length)
var arr2 =[1000,10011]
// concat(合并数组):合并两个数组，返回一个合并后的数组
console.log("concat:"+ arr.concat(arr2))
//join(分隔符):将数组的元素按照分割符连接，返回一个字符串
console.log("join:"+ arr.join("/"))
//pop:取出数组的最后一个元素，并返回，原数组发生变化
console.log("pop:"+ arr.pop())
console.log("pop后的原数组:"+arr)
//push(元素1,元素2..元素n)，向数组的末尾追加1个或多个元素，并返回长度，目原数组发生变化
console.log("push:"+ arr.push(1000))
console.log("push后的原数组:"+arr)
console.log("push:" +arr.push(1001,1002))
console.log("push多个元素后的原数组:"+arr)
//slice(起始索引,结束索引):访问数组索引区间(起始索引,结東索引)的元素并返回新数组，原数组不发生变化//(起始索引,结束索引):前包后不包，如果结束索引不写，则访问的是从开始索引到数组的末尾
console,log("slice:"+arr.slice(3.7))
console.log("slice后的原数组:"+arr)
//sort:数组排序--正序排序
console.log("sort:" +arr.sort())//不指定规则时，则按照数字的第一个字符正序排序
console.log("sort:" +arr.sort((a,b)=>a-b))//根据数字正序
console.log("sort:"+arr.sort((a,b)=>b-a))//根据数字逆序
// sp1ice(起始索引,结束索引,替换内容):删除索引区间的元素，并使用替换内容替换元素，且返回删除的元素
console.log("splice:" + arr.splice(0,3,"大于1000的三个数字"))
console.log("splice后的原数组:"+arr)
// splice(起始索引,结束索引):删除索引区间的元素，并返回，原数组发生变化
console.log("splice:"+ arr.splice(0,1))
console.log("splice后的原数组:"+arr)
//tostring:将数组转换为string
console.log("tostring:"+ typeof arr.tostring())
//reverse()颠倒数组中元素的位置
//shift（）删除并返回数组的第一个元素
//unshift（）向数组的开头添加一个或更多元素，并返回新的长度
</script>
二维数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二维数组</title>
</head>
<body>
</body>
</html>
<script>
//1.创建二维数组
// >>>直接赋值
var arr1 =[[1,2],[2,3],[3,4]]
console.log(arr1)
//>>>Array
var arr2 = new Array(new Array(1,2),new Array(2,3))
console.log(arr2)
//2.访问
console.log(arr1[1][0])//2
console.log(arr1[2][1])//4
</script>
函数
函数基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数</title>
<!--
1.函数是什么?为什么要使用函数?
-种结构包裹一段具备功能性代码，以便于下次使用时直接调用即可，---代码的复用
2.函数的定义
function 函数名([参数]){
函数体
[return 返回值]
}
3.访问函数格式:函数名(参数)
4.函数的参数问题
4.1 参数可以为0个1个或多个
4.2 形式参数和实体参数的问题
形式参数 函数在定义时写的参数，在内存中没有实际的存储空间,
实体参数 函数在调用时传递的参数，在内存中就实际存在了，则为实体参数
4.3 局部变量和成员变量问题
作用域:某一变量/对象/函数的作用范围
局部变量:写在函数内部的变量
全局变量:写在函数外部的变量
4.4 默认值参数
格式 在函数定义时，通过参数=值的形式定义
默认值参数必须写在普通参数之后
调用函数时，可以不用传递默认值参数
如果需要改变默认值参数，则使用参数名(必须与定义时保持一致)=新值的形式临时改变默认值
4.5 值传递和引用传递的问题
值传递 给函数参数赋值
引用传递 传递参数时传递的内容为引用(对象)
4.6 函数的参数为函数(函数的高阶用法)
-将函数对象作为参数传递，且在函数的内部可以执行(函数名())参数函数
4.7arguments对象问题
-可以在函数的内部通过arguments获取到传参信息
4.8 函数的提升问题
JS在编译时，会先检索所有的函数定义，并加载--这个过程称为函数的提升
即使函数定义写在函数下方，也是可以正常执行的
5.函数的返回值问题
5.1 基本函数返回值
当函数有返回值时，需要使用return
在调用函数时，需要变量接收return返回的返回值
5.2 函数的返回值为函数(函数高阶用法之一)
函数返回值为函数时，返回的内容必须为已定义函数名使用函数时，可以使用任意变量接收返回的函数对象
再通过接收了返回的函数对象的变量使用函数访问形式访问返回的函数
6.函数的调用过程
1.函数的调用过程其实就是压栈的过程
2.函数在调用时，会在栈中开辟栈帧，栈帧中存储函数的局部变量，栈帧随函数调用而创建，随函数结束而销毁
3.局部变量的生命周期: 函数调用调用时创建，函数结束执行时销毁
-->
</head>
<body>
</body>
</html>
<script>
//1.函数的定义
//案例--定义一个函数，实现输出一句话3次
function sayThree(word){
for(let i=0;i<3;i++){alert(word)}}
//案例二-计算两个数字的积
function mulTwoNumber(x,y){
let z=x*y
return z
}
//console.log("测试局部变量的作用域"+z)//z is not defined
// 2.调用函数
//sayThree("i love lijain")
//var res1 = sayThree("aaaa")//通过ctr1+鼠标左键点击函数名称，可以跳转到所对应的执行函数内部
//console.log(res1)//没有return语句的函数，返回结果为undefinec
var res2 =mulTwoNumber(10,20)
console.log(res2)
var a=10
b=10 //作用域要大于var定义的作用域，b前什么都没有则作用域为整个web页面window对象
//3.案例三-计算圆的面积 pi*r*r
function areacircle(r,PI=3.14){
return PI*r*r}
//传递参数时可以省略默认值参数
var res = areacircle(4)
//改变默认值参数
var res =areacircle(4,PI=3.15)
console.log(res)
//4.案例四-测试引用传递
var arr =[1,2,3,4]
console.log(arr)
function arrSort(arr){
return arr.sort((a,b)=>b-a)}
console.log(arrSort(arr))
//5.案例五-函数的参数为函数
function testFn(){
alert("111")}
function bigArrSort(fn)
{fn()}
bigArrSort(testFn)
//6.案例六-可以通过内置arguments对象获取当前函数的参数
sum(50,20)
function sum(x,y){
console.log(arguments)
console.log(arguments[0])
console.log(arguments[1])
}
//7.测试函数的返回值为函数
function test1(){
alert("test1")
}
function test2(){
return test1 //函数返回值为函数时，返回的内容必须为已定义函数名
}
var lijian = test2()
lijian()
// 8.结构语法
var arr =[10,20,30]
// var a= arr[0]
// var b= arr[1]
// var c= arr[2]
const[j,k,l]=arr //结构语法
console.log(j)
console.log(k)
console.log(l)
var user = {username:"zhangsan",password:"123"}
const {username,password}=user
console.log(username)
console.log(password)
</script>
匿名函数和箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>匿名函数和箭头函数</title>
<!--
1.匿名函数
没有名字的函数
匿名函数作用
1.闭包 Js中重要语法
2.函数的回调
3.函数的立即执行
2.箭头函数 lambda函数
简化函数写法
-->
</head>
<body>
</body>
</html>
<script>
// 一、匿名函数
// function setName(){
// return "caixukun"}
//1.匿名函数作为参数传递
function showName(fn){
alert("username:" + fn())}
// 参数为一个匿名函数
showName(function(){
return "cxk"
})
//2.匿名函数的常见写法1---引用传递的过程
var testFn = function(){
alert("ji ni tai mei~")}
testFn();
//3.立即执行的匿名函数 主要作用:创建私有作用域变量，防止变量污染---!代码要加分号
(function(){
alert("da lan qiu")
})();
//二、1ambda表达式 ---固定的格式，简化函数表示
// function show(){
// alert("show")
//}
// show()
//1.无参---当函数只有一句代码体，花括号可以省略
var show=()=>alert("show");
show()
//2.单参 --单个参数，可以省略参数的括号
var show1 = username => alert("username:" + username)
show1("cxk")
//3.多个参数
var show2 = (x,y) => alert(x+y)
show2(10,20)
//4.多条语句
var show3 = x => {
alert(x)
alert(x + 1)
}
show3(100)
</script>
闭包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>闭包</title>
<!--
1.闭包(closurd): 函数的嵌套中，内部函数访问外部函数的一种结构，内部函数可以访问外部函数定义的变量
--可访问一个函数作用域里变量的函数
2.条件:
函数的嵌套
内部函数访问外部函数的成员
3.特点:-内部函数可以访问外部函数的变量或参数-外部函数的变量或参数在内部函数执行完毕后任然可以保存在内容中，不被垃圾回收
4.缺点:
函数的局部变量在调用完，没有被及时回收，占用内存时间会边长内存泄漏(没有被回收的变量积攒过多)而导致内存溢出当积攒过多后，会抛出异常
5.应用:所有的数据和功能都封装在一个函数的内部(私有作用域),只向外部暴露一个接口
-->
</head>
<body>
</body>
</html>
<script>
function outer(){
let username ="zhangsan";
// 内部函数，闭包
function inner(){
fconsole.log("username:"+ username)
}
return inner;
}
var res = outer()//引用传递
res();
//1.将函数的参数传递给内部函数调用
function showDelay(time,msg){
setTimeout(()=>alert(msg),time);
//有两个参数，第一个参数为需要执行的函数，第二个参数为延时执行时间
}
showDelay (2000,"2s后跳转完成");
//2.可以通过立即执行函数将功能或局部变量私有化，提供供外部访问的接口
(()=>{
var superVip="zhangsan"
function showUsername(){
console.log("superVip:"+ superVip)
}
window.myFun ={showUsername :showUsername}
})()
myFun .showUsername()
</script>
递归
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<!--
递归:
比如:画中画，梦中梦，套娃
函数返回自身的一种技术，主要处理复杂的算法问题
-->
</head>
<body>
</body>
</html>
<script>
//1.案例-:计算10! 10!= 10*9*8...
function factorial(n){
if(n === 1){return 1}
return n * factorial(n-1)
}
console.log(factorial(10))
</script>
内置对象
math
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>math</title>
</head>
<body>
<!--
Math内置对象，主要做数学运算
-->
</body>
</html>
<script>
//1.算数常量e
console.log(Math.E)
// 2.圆周率
console.log(Math.PI)
//3.2的平方根
console.log(Math.SORT2)
// 4.1n
console.log(Math.LN18)
//常用方法
var a= 4.9999
var b=3.0001
console.log(a)
console.log(b)
// *5.向上取整
console.log(Math.ceil(a))//5
console.log(Math.ceil(b))//4
// *6.向下取整
console.log(Math.floor(a))
console.log(Math.floor(b))
//7.绝对值
console.log(Math.abs(-5))
//8.比较两个数的最大值和最小值
console.log(Math.max(1000,98))//1008
console.log(Math.min(1000,98))//1008
//*9随机数 8~1之间的随机数目不包含1
console.log(Math.random())
// 0-100内的整数
console.log(Math.floor(Math.random()*100))
// 18.四舍五入
console.log(Math.round(a))
console.log(Math.round(b))
//11.开根号
console.log(Math.sqrt(9))
// 12.**幂方
console.log(Math.pow(9,2))
</script>
对象浅析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对象</title>
</head>
<body>
</body>
</html>
<script>
//1.创建一个人类
class Person{
// 类的成员一:属性
name ="zhangsan" ;
age = 18;
salary = 10000.0;
//类型的行为:函数
show(name,age,salary){
console.log(name)
console.log(age)
console.log(salary)
}
}
//实例化人类对象 new Person() new 类名()new Array()
var person =new Person();
person.show("zhangsan",18,10000.0)
</script>
时间对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时间对象</title>
</head>
<body>
</body>
</html>
<script>
//1.获取当前时间对象
var date = new Date();
console.log(date);//Mon Jul 15 2024 14:13:33 GMT+8800(中国标准时间)
//2.指定时间的时间对象
// var date = new Date("2023-11-09 15:30:30");
console.log(date)
//3.获取时间分量
//-获取年份
console.log(date.getFullYear())
//-获取月份
console.log(date.getMonth()+1)//S 1月份输出数字为8
//-获取秒
console.log(date.getSeconds())
//-获取星期数
console.log(date.getDay())//4 一个星期的第四天,星期4
//-时间戳 计算机时间是从1970年1月1日00:00:80 800 到现在所经历的毫秒数Var date = new Date();
console.log(date.getTime())
//-案例-计算距离国庆的时间
var guoqinDate = new Date("2024-10-01 00:00:00");
var endTime = guoqinDate.getTime();
var startTime = date.getTime();
var res =endTime - startTime;
console.log(Math.floor(res/1000/60/60/24))
</script>
字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>api</title>
</head>
<body>
</body>
</html>
<script>
//1.创建字符串的方式
var str1 =`this is zhangsan` ;
var str2 = new String("this is zhangsan");
var str3 = String(",nickname is Lee");
//2.常用API
console.log("长度:"+ str1.length)
console.log("concat:"+ str1.concat(str3))//连接
console.log("charAt:"+ str1.charAt(str1.length - 1))//根据索引找字符
console.log("indexof:"+ str1.indexOf('a'))//根据字符返回第一次出现的索引位置
console.log("lastIndexof:"+ str1.lastIndexOf('a'))//根据字符返回最后一次出现的索引位置
console.log("charcodeAt:"+ str1.charCodeAt(14))//a:97 根据索引找字符,并返回ASCII
console.log("substr:"+ str1.substr(5,2))//截取子串 参数为起始位置及长度
console.log("substring:"+ str1.substring(5,7))//截取子串,参数为起始位置和结束位置,也可以使用起始位置和长度
console.log("replace:"+ str1.replace("a","A"))//替换第一次出现字符串的值，原字符串及替换的字符串
console.log("replaceA11:"+ str1.replaceAll("a","A"))//替换所有出现字符串的值，原字符串及替换的字符生
console.log("split:"+ str1.split(""))//根据分隔符分割字符串,参数为分割
console.log(str1.toUpperCase())
console.log(str1.toLowerCase())
</script>
number
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>number</title>
</head>
<body>
</body>
</html>
<script>
//1.数字的最大值最小值!
console.log(Number.MAX_VALUE)
console.log(Number.MIN_VALUE)//2.正无穷和负无穷
console.log(Number.NEGATIVE_INFINITY)
console.log(Number.POSITIVE_INFINITY)//NaN
console.log(Number.NaN)
//3.数字转为对象
var a= new Number(10);
console.log(typeof a)
console.log(typeof a.toLocaleString())
//4.parseInt()将字符串转number
var str1 ="10.0";
var str1 ="aaa10.0aaa";//当需要转换的字符串中部符合数字转换条件时,会NaNconsole.log(typeof str1)
console.log( parseInt(str1))
console.log(typeof parseInt(str1))
console.log(parseFloat(str1))
console.log(typeof parseFloat(str1))
</script>
BOM
window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window</title>
<style>
div{
width: 1000px;
height: 1000px;
}
</style>
</head>
<body>
<div>
<button onclick="goBottom()">回到底部</button>
<button onclick="closescreen()">点击我关闭浏览器</button>
<button onclick="openBaidu()">点击我打开百度</button>
<button onclick="goTop()">回到顶部</button>
</div>
</body>
</html>
<script>
// 1.window对象常见属性
//-屏幕的宽高(除了下方任务栏和上方的导航栏)
console.log(window.innerWidth)
console.log(window.innerHeight)
//-当前窗口的宽高(包括菜单栏和任务栏)
console.log(window.outerWidth)
console.log(window.outerHeight)
//-当前窗口左上角的x坐标
console.log(window.screenLeft)
console.log(window.screenX)
//-当前窗口左上角的y坐标
console.log(window.screenTop)
console.log(window.screenY)
//-窗口的name属性但是不是页面的标题
window.name ="这是window对象的name属性"
console.log(name)
console.log(window.pageXOffset)
console.log(window.pageyOffset)
-在窗口滚动时,x和y轴偏移量
console.log(window.pageXOffset)
console.log(window.pageYOffset)
//使用window,聚售到任意坐标点 scrollTo
function goBottom(){
window.scrollTo(2000,1000)
}
function goTop(){
window.scrollTo(0,0)
}
//关闭浏览器
function closescreen(){
if( confirm ("确认关闭吗?")){
window.close()
}
}
function openBaidu(){
window.open("https://www.baidu.com")
}
</script>
浏览器操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浏览器操作</title>
</head>
<body>
<button onclick="login">跳转主页</button>
</body>
</html>
<script>
//-.history对象-操作浏览器历史ur1数据
console.log("打开浏览器页面的历史数量:"+ window.history.length)
function back(){
// window.history.back()
history.go(-1)
}
function foword(){
// history.forward()
history.go(1)
}
//二.screen对象,主要操作分辨率的问题
console.log("屏幕尺寸:"+ screen.width)
console.log("屏幕尺寸:"+ screen.height)
console.log("可视区分辨率:"+ screen.availWidth)
console.log("可视区分辨率:"+ screen.availHeight)
//三.navigator
console.log("浏览器的版本信息:" + navigator.appVersion)
console.log("浏览器的名称:"+ navigator.appName)
console.log("平台操作系统:"+ navigator.platform)
//四.*location 刷新页面reload跳转href//案例-登录成功后跳转主页
function login(){
location.href ="主页.html"
}
console.log(new Date())
setInterval(()=>{
// 1ocation.reload()//刷新页面
location.href ="主页.html"},3000)
</script>
DOM
document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
</head>
<body>
<div id="div1">div1</div>
<div class="div1">div2</div>
<div name="div3">div3</div>
</body>
</html>
<script>
//1.document的常见属性
console.log(window.document.domain)
console.log(window.document.cookie)
console.log(document.URL)
console.log(document.title)
// 2.document获取方式
//-通过id
var idDiv1 = document.getElementById("div1");
console.log(idDiv1)
//通过class
var classDiv1 = document.getElementsByclassName("div1");
console.log(classDiv1)//class属性可以为多个同样的，所以获取到了一个Htmlcollection集合
console.log(classDiv1[0])//可以通过集合索引获取对应的dom对象
console.log(classDiv1[1])
//-通过name属性获取
var nameDiv3=document.getElementsByName("div3")
console.log(nameDiv3)//name属性可以为多个同样的，所以获取到了一个NodeList节点列表
console.log(nameDiv3[0])//可以通过列表索引获取对应的dom对象
console.log(nameDiv3[1])
//通过标签
var div = document.getElementsByTagName("div")
console.log(div)//获取到了一个Htmlcollection集合,操作方式同class
//-通过选择器获取
var querySelectorDiv1 = document.queryselector(".div1");
console.log(querySelectorDiv1)//只会获取第-个div1的文档
//-通过选择器获取所用
var querySelectorAllDiv1 = document.queryselectorAll(".div1")
console.log(querySelectorAllDiv1)//得到一个节点列表NodeList,操作方式同name
</script>
DOM操作文档内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作文档内容</title>
<!--
innerHTML:可以解析HTML标签,容易造成XSS跨域脚本攻击
textcontent:W3c推荐，不解析htm1标签
innerText:非W3C标准，不解析也不提示
-->
</head>
<body>
<div id="hello" class="hello">hello dom</div>
</body>
</html>
<script>
//1.获取dom对象
var hello = document.getElementsByClassName("hello")[0]
// hel1o.innerHTML =“<h1>这是dom操作的一个标题</h1>"//可以解析HTML标签,容易造成XSS跨域脚本攻击
hello.textContent="<h1>这是dom操作的一个标题</h1>" //W3C推荐，不解析html标签
// hello.innerText ="<h1>这是dom操作的一个标题</h1>"//W3C标准，不解析也不提示
</script>
DOM操作属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作属性</title>
</head>
<style>
.divClass1{
width: 200px;
height: 200px;
background-color: aqua;
border: 1px solid red;
}
.divclassC{
width: 200px;
height: 200px;
background-color:rgb(59，11，218);
border:1px solid red;
}
</style>
<body>
<div id="divId1" title="默认的标题"class="divClass1">div</div>
<button onclick="changeColor()">点击我试试</button>
username:<input type="text" name="username" value="username" placeholder="username">
</body>
</html>
<SCript>
//1.获取当前divId1的dom对象
var div1 = document.getElementById("divId1");
//2.操作对象的属性:直接获取属性值/1-
console.log(div1.className)//divId1
//-通过中括号获取
console.log(div1['className'])//注意获取class属性时使用className
//-推荐
//getAttribute("属性名") 获取属性值,setAttribute("属性名",属性值)
console.log(div1.getAttribute("class"))
//3.案例一:修改div的标题
div1['title']="修改后的标题"
//4.案例二:改变div样式的值
div1.setAttribute("class","divClassC")
//5.案例三:点击按钮，改变div的颜色
div1.className ="divClass1";//先设置一个默认值
var input1 = document.getElementsByName("username")[0];//Nodelist节点列表
function changeColor(){
if(diV1.className =="divClass1"){
diV1.className ="divClassC";input1.setAttribute("value","zhangsan")}
else
{div1.className ="divClass1";input1.setAttribute("value","lisi")}
}
//6.可以改变文本框中的值//获取文本框的domvar input1 = document.getElementsByName("username")[0];//NodeList节点列表// console.log(input1.getAttribute("yalue"))
</SCript>
DOM操作样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作样式</title>
<style>
.divClass1{
height: 300px;
}
</style>
</head>
<body>
<div style="width: 300px; background-color: aqua;" class="divClass1" onclick="changeColor()">div1</div>
</body>
</html>
<script>
var div1 = document.getElementsByClassName("divClass1")[0];
//1.dom操作样式的三种方式
//--通过style获取，没有提示，不推荐 获取到的样式具备单位
console.log(div1.style.width)//300px
//--通过window对象的getcomputedstyle(dom节点对象)获取到的样式具备单位
console.log(getComputedStyle(div1).width)//300px
//--使用通过offerset获取 ---获取时样式值无单位
console.log(div1.offsetWidth)
console.log(div1.offsetHeight)
console.log(div1.offsetTop)
console.log(div1.offsetLeft)
//案例-:
function changeColor(){
div1.style.background ="blue"}
</script>
事件三要素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件三要素</title>
<!--
1.事件三要素 :
事件源:作用的标签对象
事件对象:在事件触发时，产生对事件操作的对象
事件函数:事件触发后操作的内容
2 .事件对象和this关键字。
-->
<style>
div{
width: 200px;
height: 200px;
background-color:aqua;text-align: center;
border:1px solid rgb (116，7，211);
box-shadow:10px 10px 10px rgb (230，218，218);
margin: auto;
}
</style>
</head>
<body>
<!--事件源 -->
<div id="divId" onclick="alertMsg()">div</div>
<div id="divId2">div2</div>
<div id="divId3">div3</div>
</body>
</html>
<script>
//1.事件的标签绑定模型-写在标签的内部---不推荐使用，但是在部分老的代码中，需要使用其做微调// 事件的操作函数
function alertMsg(node){
alert("div执行了")
// 通过标签绑定事件模型，没有得到事件对象
console.log(node)
console.log(this)//this:表示当前操作对象，this指向的是window对象
/*DoMe事件和DOM2事件中
使用匿名函数，做事件函数时，this指向dom对象
使用箭头函数，做事件函数时，this指向window对象，是因为箭头函数中，没有this，所以this的指向问题由箭头函数上下文决定，并不是this的指向改变了，而是上下文不同
所以根据自己需求考虑要不要使用箭头函数。
*/
}
//2.事件的DOMO模型
var div2 = document.getElementById("divId2");
div2.onclick=(e)=>{
alert("div2执行了")
// e就是该事件触发时产生的对象，可以对事件进行操作
console.log(e)
console.log(this)//window
}
//3.事件的DOM2模型---添加了事件的捕获和冒泡，绑定事件，解除事件
var div3= document.getElementById("divId3");
div3.addEventListener("click",(e)=>{
console.log(e)//事件对象
console.log(this)//window
},false)
</script>
捕获和冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>捕获和冒泡</title>
<!--
window->document->html->body->div-outer->div-inne!
1.dom2事件模型参数问题:
addEventListener(事件类型,事件回调,冒泡或捕获)
捕获:true 外层window开始向内层目标元素
冒泡:false 内层目标元素向外层window
2.捕获和冒泡的顺序:
先由外向内捕获，在由内向外冒泡
3.绑定事件，解除事件
在进行事件解除时，需要将回调函数function单独拿出来
-->
<style>
#div_outer{
width: 400px;
height: 400px;
background-color:antiquewhite;
}
div{
border: 1px solid red;
box-shadow:10px 10px 10px gray;
margin: auto;
}
#div_inner{
width: 150px;
height: 150px;
background-color:aquamarine;
}
#div3{
width: 100px;
height: 100px;
background-color:aqua;
}
</style>
</head>
<body>
<div id ="div_outer">
<div id="div_inner">
</div>
</div><div id="div3"></div>
</body>
</html>
<script>
//1.获取两个dom对象
var outer = document.getElementById("div_outer");
var inner = document.getElementById("div_inner");
//2.dom2事件
//-外层捕获和冒牌
outer.addEventListener("click",function(){
alert("外层捕获")
},true)
outer.addEventListener("click",function(){
alert("外层冒泡")
},false)
//-内层捕获和冒牌
inner.addEventListener("click",function(){
alert("内层捕获")},true)
inner.addEventListener("click",function(){
alert("内层冒泡")},false)
//2.事件的解除和绑定
var div3 = document.getElementById("div3")
//确保绑定和删除是同一个回调函数对象
var fn = function(e){alert("ok")
}
// 绑定
div3.addEventListener("click",fn,true)
// 解除
div3.removeEventListener("click",fn,true)
</script>
js案例
抽奖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽奖</title>
<style>
*{
margin: 0px;
}
body{background-color:antiquewhite;}
.container{
width: 1100px;
height: 600px;
box-shadow: 10px 10px 10px gray;
background-color:azure;
margin: auto;
margin-top: 20px;
text-align: center;
padding: top 40px;
}
.box{
width: 600px;
height: 350px;
background-color:口rgba(127,255,212,0.479);
border-radius:50%;
margin: auto;
box-shadow:10px 10px 10px gray;
Line-height: 4.2;
}
#show{
margin-top: 150px;
font-size: 70px;
color: brown;
font-weight: 900;
}
#start{
width: 450px;
height: 100px;
background-color:rgba(65,90,91,0.931);
margin-top: 50px;
color:口rgb(255，254，253);
font-size: 30px;
box-shadow:10px 10px 10px grey;
font-weight: 100;
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="box">
<span id="show">奖品</span>
</div>
<button id="start">开始抽奖</button>
</div>
</body>
</html>
<script>
//1.定义标志位，控制整个代码的启停
var flag = false;
//2.定义奖品
var goods =['1QB','18QB','代金卷','208刮刮乐','588刮刮乐','双人行','面包车','火箭'];
//3.获取dom对象var show = document.getElementById("show");
var box = document.getElementById("box");
var start = document.getElementById("start");
//4.定时器
var timer;
//5.绑定事件
start.onclick =function(){
if(!flag){ //抽奖开始
flag = true;//标志位变为true
start.innerHTML="停止抽奖";//修改按钮的提示信息
timer = setInterval(function(){ //定时器控制整个奖品的轮播速度0.01S
//根据奖品数组的长度，设置索引为长度内的随机数，通过数组的访问元素形式，设置奖品标签中的文字为数组中的元
show.innerHTML = goods[Math.floor(Math.random()*goods.length)];
},10)
}
else{//抽奖停止
flag=false;//标志位变为false
start.innerHTML="开始抽奖";
clearInterval(timer);//停止定时器，清楚上方的timer对象
}
}
</script>
多选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多选</title>
<style>
div{
width:1000px;
height: 650px;
margin: auto;
}
li{
list-style: none;}
</style>
</head>
<body>
<div>
<label><input type="checkbox" id="all">全选</label>
<h3>您需要选择的内容是:</h3>
<li><input type="checkbox" class="checkbox">A</li>
<li><input type="checkbox" class="checkbox">B</li>
<li><input type="checkbox" class="checkbox">C</li>
<li><input type="checkbox" class="checkbox">D</li>
<li><input type="checkbox" class="checkbox">E</li>
<li><input type="checkbox" class="checkbox">F</li>
</div>
</body>
</html>
<script>
var all = document.getElementById("all")
all.addEventListener("click",function(e){
//1.获取所有li dom对象
var all_checkBox = document.getElementsByClassName("checkbox");//Htmlcollection集合
console.log(all_checkBox)
//2.遍历所有的li dom对象
for(let i=0;i<all_checkBox.length;i++){
// 判断当前的每一个1i dom对象是否是选中状态
if(all.checked){
all_checkBox[i].checked = true;
}else{
all_checkBox[i].checked =false;
}
}
},false)
</script>
移动的div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div移动</title>
<style>
body{
background-color:antiquewhite;
}
div{
width: 200px;
height: 200px;
background-color:blue;
box-shadow:10px 10px 10px gray;
position: absolute;
top:100px;
left: 200px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
<script>
var box =document.getElementById("box")
// 鼠标按压事件
box.onmousedown =function(e){
var mouseX=e.clientX;//获取鼠标点击的屏幕坐标
var mouseY =e.clientY;//获取标点击的屏幕坐标
// 鼠标点击的位置和div左上角距离的偏移量，在移动过程中不要发生变化--恒值
var w= mouseX-box.offsetLeft;
var h=mouseY-box.offsetTop;
//鼠标移动事件
box.onmousemove = function(ev){
box.style.left=(ev.clientX-w)+"px";
box.style.top=(ev.clientY-h)+"px";
}
}
//鼠标松开事件
box.onmouseup = function(){
//停止移动事件，等价于为当前事件对象给nu11值
box.onmousemove =null
}
</script>
旋转相册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个旋转立方体的实现</title>
<style>
body {
/* 3d视距，如果没有，无法透视出3D效果 */
perspective: 5000px;
}
.container {
width: 200px;
height: 200px;
margin: 300px auto;
/*border: 1px solid red;*/
position: relative;
/* 以3D显示效果 */
transform-style: preserve-3d;
/* 开始执行动画 */
animation: myRotate 5s infinite linear;
}
/* 动画效果 */
@keyframes myRotate {
from {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg)
rotateZ(360deg);
}
}
.container>img {
width: 200px;
height: 200px;
position: absolute;
}
.container:hover >img:first-child {
transform: translateZ(-300px);
}
.container:hover >img:last-child {
transform: translateZ(100px);
}
.container:hover img:nth-child(2) {
transform: rotateY(-90deg) translateZ(100px);
}
.container:hover img:nth-child(3) {
transform: rotateX(90deg) translateZ(100px);
}
.container:hover img:nth-child(4) {
transform: rotateY(90deg) translateZ(100px);
}
.container:hover img:nth-child(5) {
bottom: -200px;
transform-origin: top;
transform: rotateX(-90deg) translateZ(100px);
}
.container>img:first-child {
/*底部的一张图片*/
/* 需要缩进200px，作为底部 */
transform: translateZ(-200px);
}
.container > img:last-child {
/* 顶部的一张图片*/
/*display: none;*/
}
.container>img:nth-child(2) {
/* 左侧 */
left: -200px;
transform-origin: right;
transform: rotateY(-90deg);
}
.container>img:nth-child(3) {
/* 上侧 */
top: -200px;
transform-origin: bottom;
transform: rotateX(90deg);
}
.container>img:nth-child(4) {
/* 右侧 */
right: -200px;
transform-origin: left;
transform: rotateY(90deg);
}
.container>img:nth-child(5) {
/* 下侧 */
bottom: -200px;
transform-origin: top;
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<div class="container">
<img src="img/mv1.png" alt="">
<img src="img/mv2.png" alt="">
<img src="img/mv3.png" alt="">
<img src="img/mv4.png" alt="">
<img src="img/mv6.png" alt="">
<img src="img/mv5.png" alt="">
</div>
</body>
</html>
jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入jquery -->
<script src="./JQuery.js"></script>
<style>
div{
width:1000px;
height: 650px;
margin: auto;
}
li{
list-style: none;
}
</style>
</head>
<body>
<div>
<label><input type="checkbox" id="all"><span>全选</span></label>
<h3>您需要选择的内容是:</h3>
<li><input type="checkbox" class="checkbox">A</li>
<li><input type="checkbox"class="checkbox">B</li>
<li><input type="checkbox"class="checkbox">C</li>
<li><input type="checkbox"class="checkbox">D</li>
<li><input type="checkbox" class="checkbox">E</li>
<li><input type="checkbox" class="checkbox" >F</li>
</div>
</body>
</html>
<script>
// 2.Jquery获取dom//$(“#btn").click(()=>falert(“111")})
// console.log($(“div"))
// console.log($("body>div"))
// console.log($("body div"))
// console.log($("[id='btn']”))
$("#all").click(function(){
console.log ($("#all").text())
if($(this).prop("checked")){
$("span").text("反选")
$("[class = checkbox]").prop("checked",true)
}
else{
$("span").text("全选")
$("[class=checkbox]").prop("checked",false)
}
});
</script>
