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) //20
2. 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) //3
1.4.3 有参、有返回值
function add(a,b){
return a+b;
}
var c = add(1,2);
console.log(c) // 3
1.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, 因此打印 NaN
1.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); // 1212
1.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 点击取消返回false
3.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: 793
3.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)
}