1. 语言基础
1.1 数据类型
var a = 1;
console.log(typeof a)----------》js中只要是数字，是number类型
a=true;
console.log(typeof a)------------》boolean true false
a='q'
console.log(typeof a)----------->string 字符串 单引号和双引号js 字符串
console.log(typeof b)-----》没有定义的变量， 数据类型 undefined
但是直接打印变量，出错，变量没有定义
console.log( null)-----》特殊类型 1.2 运算符
1.2.1 算术运算符
+ - * / %
var a = 23;
var b = 4
console.log(a+b)
console.log(a-b)
console.log(a*b)
console.log(a/b)-------》如果有小数，结果中包含小数
console.log(a%b)1.2.2 赋值运算符
= += -= *= /= %=
var a = 23;
var b = 4
console.log(a+=b)
console.log(a-=b)
console.log(a*=b)
console.log(a/=b)
console.log(a%=b)运算符： ++ --
变量++ 先用后加 ++变量 先加后用
拼接字符串：+
console.log(++a+"jfdkjfdkf")
1.2.3 关系运算符
> >= < <= == != 独有的运算符 ===
var a = 23;
var b = -4
console.log(a>b)
console.log(a>=b)
console.log(a<b)
console.log(a<=b)
console.log(a==b)
console.log(a!=b)
注意：数据的比较
console.log(a==b) == 只能比较数据值，不会进行数据类型的比较
console.log(a===b) 比较数据值，进行数据类型的比较1.2.4 逻辑运算符
console.log(a<b&&b<c) 两个条件同时成立，结果是true，否则结果是false
短路运算符，如果前面的表达式决定了整个表达式的结果，后面的不执行
console.log(a<b||b<c) 两个条件同时不成立，结果是false，否则结果是true
短路运算符，如果前面的表达式决定了整个表达式的结果，后面的不执行 注意：
js中boolean true 对应的数字值 1 false对象的数字值 0
//数字 从数字转成boolean
//非0数字转成boolean类型 true
console.log(Boolean(-100))
//0数字转成boolean类型 false
console.log(Boolean(0))
console.log(Boolean(""))=======》空字符串 false
console.log(Boolean(" "))=======》非空字符串 true
console.log(Number(true))------》1
console.log(Number(false))======》0
console.log(Number(null))--------》对应的数字 0
console.log(Number("1234"))----》结果1234，可以把字符串格式的数字转成数字number
如果要转换的字符串中包含非数字的字符，结果不是一个数字
console.log(Number("1234abc"))------》结果NaN not a number
如果字符串中都是数字，可以进行数据的转换，如果字符串是以数字开头
开头的数字转成number类型
console.log(parseInt("12345af"))
判断数据是否不是一个数字
console.log(isNaN("a"))1.3 流程控制语句
1.3.1 if-else
var t =6;
var s = 14;
if(t>s){
console.log(t)
}else{
console.log(s)
} 1.3.2 switch case
switch(t){
case 3:
console.log(3)
break;
case 6:
console.log(6) //没有break,会造成穿透
case 9:
console.log(9)
break;
default:
console.log("没有匹配值")
break;
} var t = true;
switch(t){------》boolean true false
case true:
console.log(3)
break;
case 6:
console.log(6)
}1.3.3 循环 for while do {} while()
console.log("循环前i值"+i)======》值没有赋值
for(var i=0;i<=10;i++){
console.log(i)
}while do {} while() 和java一样
1.3.4 作用域
1. var
var定义的变量，全局作用域，当前的js中，var定义的变量都可以使用,默认值，undefined 值
var a;
console.log(a)//undefined
var a = 10; //10
console.log(a)
a = 20;
console.log(a) //202. let
let 定义变量，作用域针对于代码块内部
//console.log(i); //报错，提示没有这个变量
for(let i=0; i<10; i++){
console.log(i)//正常打印
}
//console.log(i) //报错，提示没有这个变量3. const
const 常量定义，赋值后不能更新
//const a; //报错提示没有赋值
//console.log(a)
const a = 10;
console.log(a) // 10
a = 20; //报错不能在赋值
console.log(a)1.3.5 中断循环关键词
- continue
- break
for(let i=0;i<=10;i++){
if(i==3){
// continue 当次不执行
// break 循环提前结束
}
console.log(i)
}1.4 方法定义和执行
1.4.1 无参、无返回值
add() //3
function add(){
let a = 1;
let b =2;
console.log(a + b)
}
add() //3 1.4.2 无参、有返回值
function add(){
let a = 1;
let b =2;
return a+b;
}
var c = add();
console.log(c) //31.4.3 有参、有返回值
function add(a,b){
return a+b;
}
var c = add(1,2);
console.log(c) // 31.4.4 Javascript 没有重载，如果出现相同方法名的方法，后定义的覆盖前面的方法，所有后面的方法生效
function add(){
var a =1;
var b =2;
console.log(a+b)
}
function add(a,b){
console.log(a+b) ;
}
add(); //NaN 就可以看出，调用的是add(a, b)方法，因为我们没有传a,b， 因此打印 NaN1.4.5 可变长参数
function add(...rest){
//方法中 有一个数组，存储方法的参数
//数组比较灵活，传入几个参数，长度就是几
// console.log(rest)
if(rest.length==0){
console.log(0)
}else if(rest.length==1){
console.log(rest[0])
}else {
let sum = 0;
for(let i = 0;i<rest.length;i++){
sum+=rest[i]
}
console.log(sum)
}
}
add(); // 0
add(1); // 1
add(10,100,100,1000,2); // 12121.4.6 方法function
console.log(typeof add) -----------》function
function add(){
}-----------推荐大家使用 调用的位置可以任意
var a = function(){
console.log("a method ")
}
a();必须先定义后调用，顺序，调用的代码在定义后1.5 针对于不同的数据类型进行不同方法的运算
1.5.1 数字类型
// 3的4次方
console.log(Math.pow(3,4)) //81
// 9开方
console.log(Math.sqrt(9)) //3
// 向下转
console.log(Math.floor(9.9)) //9
// 向上转
console.log(Math.ceil(9.1)) //10
// 给8开立方根
console.log(Math.cbrt(8))
// 四舍五入
console.log(Math.round(4.4)) //4
// 随机数
console.log(Math.random())1.5.2 字符串类型
var a = " abc defa "
console.log(a.length)
for(let i =0;i<a.length;i++){
console.log(a[i])
console.log(a.charAt(i))
}
console.log(a.toUpperCase())
console.log(a.toLowerCase())
console.log(a.startsWith("a"))
console.log(a.endsWith("a"))
console.log(a.indexOf("a"))
console.log(a.lastIndexOf("a"))
console.log(a.substr(3))
console.log(a.substr(3,2))
console.log(a.repeat(3))
console.log(a.replaceAll("a","X"))
console.log(a.trim())1.5.3 js 类和对象
js的类将一些属性和行为（方法）放在一起
// 创建一个类，将一些属性和方法放在一起
function Cat(){
//内部属性
this.name = "Tom";
this.age = 12;
this.type = "胖猫";
//内部方法
this.eat = function eat(){
console.log(this.name + "吃鱼");
}
}我们从上面看出，我们创建一个cat类，类中有各种属性和行为；
我们使用一下行为和属性
// 使用类中的属性和方法
//创建类对象
var cat = new Cat();
//调用类中的属性
console.log(cat.name,cat.age,cat.type); //Tom 12 胖猫
//调用类中的方法
cat.eat(); //Tom吃鱼类对象可以给类中添加属性和方法。如果属性和方法存在覆盖，不存在则添加；
cat.weight = 20;
//覆盖属性age的值
cat.age = 30;
//类中添加方法
cat.run = function run(){
console.log("我是跑的方法")
}我们console.log(cat)，看一下对象中属性和方法
我们也可以使用循环来查看类中的属性
循环方式1：
for(let i in cat){
// 打印对应的key
console.log(i) //name
// 打印key对应的属性值或者方法
console.log(cat[i]) //Tom
} 
循环方式2：
for (let i of Object.entries(cat)) {
//打印的是对象的属性和属性对应的值以及方法
console.log(i) //['name', 'Tom']、 ['eat', ƒ]
//我们可以通过数组的索引值去获取
console.log(i[0]) //name
console.log(i[1]) //Tom
}
for(const [key,value] of Object.entries(cat)){
console.log(key,value) //name Tom
console.log(`${key} ${value}`) //name Tom
}
1.5.4 日期
Date 类型 创建日期对象
js 对象
Date实际是function类型
js中描述一类具有相同特征和行为的事物，
通过jsfunction进行一类事物的描述
var date = new Date();
//获取当前年
var year = date.getFullYear()
console.log(year)
//获取当前月 date.getMonth()默认获取上一个月，因此要+1
var month = date.getMonth()+1
console.log(month)
//获取当天日期
var day = date.getDate()
console.log(day)
//格式化输出
console.log(`${year}-${month}-${day}`) //2022-5-30
//如果要展示2022-05-30 ,我们需要借助字符串的padStart方法
//转换成字符串
month = month+""
/* padStart方法 str.padStart(targetLength [, padString])
当前字符串长长度大于目标长度（targetLength），则返回当前字符串本身。
如果长度小于目标长度（targetLength），则使用padString进行填充，直到达到目标长度；
* */
var m = month.padStart(2,0)
console.log(m) //05
1.5.5 数组类型
1.5.5.1 数组创建
var arr = [1,32,4,35,4,65,6,345,32,4];
console.log(arr) // [1, 32, 4, 35, 4, 65, 6, 345, 32, 4]
var arr1 = new Array(1,32,4,35)
console.log(arr1) //[1, 32, 4, 35]1.5.5.2 数组循环
/*方式1*/
for(let i=0; i<arr.length; i++){
console.log(arr[i])
}
/**
* 方式2
*/
for (let i in arr) {
console.log(arr[i])
}
/**
* 方式3
*/
for(let i of arr){
console.log(i)
}1.5.5.3 数组操作
//末尾添加
arr.push(100)
//首位添加
arr.unshift(2)
//从m位置开始删除n个
arr.splice(2,4)
//如果传入的是多余两个数据的参数,先删除,第三个数据开始进行的添加
arr.splice(2,4,35,65)
//形成新的数组
var s = arr.slice(0,4);
console.log(s)
//拼接
console.log(arr.concat(s))
//形成新的字符串，指定的字符进行分割
console.log(arr.join(" "))
回调函数
arr.forEach(function(i){ //======>callback 回调函数
console.log(i)
})JS lambda表达式
arr.forEach((i)=> console.log(i))
//自定义排序和java一样
var ii =arr.sort((o1,o2)=>{
return o1-o2
})
console.log(ii)
//设置过滤条件
var ii = arr.filter((i)=>{
return i>50
})
console.log(ii)
使用对象进行对，数组中重复的数据进行去重
var arr = [1,32,4,35,4,65,6,345,32,4];
var obj = {};
for (let i of arr) {
obj[i] = 0;
}
console.log(obj) //{1: 0, 4: 0, 6: 0, 32: 0, 35: 0, 65: 0, 345: 0}
var new_arr = [];
for (let i in obj) {
new_arr.push(Number(i))
}
console.log(new_arr) //[1, 4, 6, 32, 35, 65, 345]2. DOM节点
2.1 dom节点基础
dom节点就是标签，只不过js中不称为html标签，dom节点
DOM：文档 document 当前的整个html的页面就是一个document对象
console.log(document) 页面中包含的所有的内容都在document对象
对象 js中，页面中所有的标签都是object类型
模型 js中，每个标签都是一个数据模型
// 可以根据标签的id进行dom节点的获取
var d = document.getElementById("di")
console.log(d) 结果： <div id="di">fdfdf</div>2.1.1设置样式
//获取到标签,可以设置标签的样式
d.style.width="300px"
d.style.height="200px"
d.style.border="solid 1px red"
//样式每写一个样式,就要写一句代码,样式比较多 不合适
d.style="width: 300px; height: 200px; border: 1px solid red;"
//样式字符串,没有提醒,容易出错
//css中定义一个样式,在js中给指定的标签添加样式
d.setAttribute("class","a")2.1.2 标签内部的文本进行操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="t1">
<div id="t2">
</div>
</div>
<script>
var t1 = document.getElementById("t1")
t1.innerText="112";
</script>
</body>
</html>
t1.innerText="112" 给t1标签内部设置文本为112，内部其他标签消失
t1.innerHTML="<div>2222222222</div>"; 给t1内部设置标签
2.1.3 创建dom节点
//创建dom节点
var r = document.createElement("div");
//节点 拼接到哪个元素下(拼接成子节点)
r.innerText="js中创建的div 元素"
//给最后插入
t1.appendChild(r)2.2 节点操作
var t2 = document.getElementsByClassName("t2")[0]
t2.style.width = "100px"
t2.style.height = "100px"
t2.style.backgroundColor = "red"
// 通过class="t2"属性获取一组元素
var as = document.getElementsByClassName("t2")
//获取第一个元素
as[0]
//input标签，需要有name属性，通过name属性进行的获取 name=more 的所有元素
var as = document.getElementsByName("more")
//获取所有子元素
var childs = as.children
//只能选中一个标签
var as = document.querySelector(".a p") //获取class = a 下面的p标签，如果有多个获取第一个
//选中满足条件的全部
var as1 = document.querySelectorAll(".a p") //获取class = a 下面所有的p标签2.3 js事件
2.3.1 键盘按下事件
//键盘按键按下触发事件，/只能获取到前一次数据值
var na = document.querySelector("#t1");
na.onkeydown = function(){
console.log(na.value)
}2.3.2 键盘抬起事件
na.onkeyup = function(){
console.log(na.value)
}
//可以在按键事件触发时，进行实时的数据验证2.3.3 input事件
输入框中的数据，输入完毕，鼠标在其他的位置上点击，进行数据的验证
- 失去焦点 光标不在当前的输入框上触发
na.onblur = function(){
console.log(na.value)
}- 获取焦点 选中当前输入框,触发事件
na.onfocus=function(){
console.log(na.value)
}
- 内容改变事件 当前输入框中数据发生了改变，事件触发
na.onchange=function(){
console.log(na.value)
}- 切换浏览器窗口，触发事件
window.onblur=function(){
alert(1)
}- 当前浏览器窗口键盘按键，触发的事件
window.onkeyup = function(e){
console.log(e) //KeyboardEvent {isTrusted: true, key: 's', code: 'KeyS', location: 0, ctrlKey: false, …}
//KeyboardEvent 记录当前点击的按键
}2.3.4 鼠标的事件
- 单击 鼠标左键
na.onclick = function(){
console.log("鼠标左键点击")
}- 双击 鼠标左键双击
na.ondblclick = function(){
console.log("鼠标左键双击击")
}
- 鼠标按下事件
na.onmousedown = function(){
console.log("鼠标按下事件")
}
- 鼠标抬起事件
na.onmouseup = function(){
console.log("鼠标抬起事件")
}- 鼠标悬浮事件：鼠标放上事件，只要放到自己的位置上,包括子元素空间事件执行
<div style="background: red; width: 100px; height: 100px;" id="t3">
<div style="background: black; width: 50px; height: 50px;" id="t4"></div>
</div>
var na = document.querySelector("#t3");
na.onmouseenter = function(){
console.log("鼠标从父元素移动到子元素上不触发事件，从子元素移动到父元素上不触发事件")
}- 子元素不含在当前事件触发的范围内
na.onmouseover = function(){
console.log("鼠标悬浮到父元素上触发事件，悬浮到子元素上触发事件，从子元素移动到父元素上触发事件")
}- 放到子元素也算是离开
na.onmouseout=function(){
console.log("鼠标放到父元素上，移动到子元素触发事件或者移动到外面触发事件")
}- 放到子元素不算是离开
na.onmousleave=function(){
console.log("鼠标放在父元素上，移动到子元素不触发事件。移动到外面触发事件")
}
- 鼠标移动事件，记录当前鼠标在页面的位置
na.onmousemove=function(e){ //鼠标事件，记录当前数据的位置
console.log(e) //MouseEvent {isTrusted: true, screenX: 46, screenY: 232, clientX: 46, clientY: 129, …}
}- 鼠标移动事件，记录当前鼠标在页面的位置
na.onmousemove=function(e){ //鼠标事件，记录当前数据的位置
console.log(e) //MouseEvent {isTrusted: true, screenX: 46, screenY: 232, clientX: 46, clientY: 129, …}
}- 鼠标在页面中的位置
window.onmousemove=function(e){
console.log(e)
}- 滚轮滚动
window.onmousewheel=function(e){ //-------》wheelEvent
console.log(e)
}例子：
window.onmousewheel=function(e){
if(e.pageY>=200){
a.style.position="fixed"
a.style.left="200px"
}else{
a.style.position="static"
}
}图片预览：
<form action="">
<input type="file" onchange="a(this)" />
<img src="" alt="" />
</form>
<script>
var im = document.querySelector("img")
function a(e){
var f = e.files[0]
//图片预览功能
var readr = new FileReader();
readr.readAsDataURL(f)
readr.onload=function(e1){----------------- ProgressEvent
im.setAttribute("src",e1.target.result)
}
}3.BOM节点 浏览器对象模型
3.1 弹窗
3.1.1 弹窗对象
alert() 弹窗的信息是提醒信息3.1.2 确认框
var r = confirm("fjdkfjdf")
console.log(r)-----》点击确认返回true 点击取消返回false3.1.3 带输入条的确认框
var r = prompt("确定要删除 输入del")
console.log(r)
输入数据，点击确定，接收到输入框中的数据，判断3.2 地址栏对象
当前页面的地址，location对象中
ancestorOrigins: DOMStringList {length: 0}
assign: ƒ assign()
hash: ""
host: "127.0.0.1:8020"
hostname: "127.0.0.1"
href: "http://127.0.0.1:8020/html2204/js16.html"
origin: "http://127.0.0.1:8020"
pathname: "/html2204/js16.html"
port: "8020"
protocol: "http:"
获取地址：console.log(location.href)
设置location.href=地址
显示显示内容的窗口的大小：
innerHeight: 603
innerWidth: 7933.3 数据存储
3.3.1 localStorage 本地存储，存储在硬盘上，只要不手动删除，数据一直存在
window.localStorage.setItem("a","asssssss")
localStorage.b="fdjkfjdk"
localStorage["c"]="rrrrrrrrrrr"
获取：
console.log(localStorage.getItem("a"))
console.log(localStorage.b)
console.log(localStorage["c"])3.3.2 sessionStorage 临时存储，存在于浏览器内存中，只要程序关闭，数据清空
window.sessionStorage.setItem("a","asssssss")
sessionStorage.b="fdjkfjdk"
sessionStorage["c"]="rrrrrrrrrrr"
console.log(sessionStorage.getItem("a"))
console.log(sessionStorage.b)
console.log(sessionStorage["c"])4. 定时器
4.1 一次性定时器，（执行一次）
window.setTimeout(function(){
console.log(1)
//毫秒
},5000) //5000毫秒后执行4.2 每隔指定的之间进行的逻辑执行
window.setInterval(function(){
console.log(1)
},1000) //每隔1000毫秒执行一次 页面中自己动态变化的数据，定时器完成的
var r = window.setInterval(function(){
i++;
d.innerText=i;
},1000)
//定时器返回值，表示页面中定义其的第几个
console.log(r)
d.onmouseover=function(){
//清除定时器
clearInterval(r)
}
d.onmouseleave=function(){
r = window.setInterval(function(){
i++;
d.innerText=i;
},1000)
}
1502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
