JavaScript学习笔记

夏末°时光

已于 2023-12-02 09:45:13 修改

阅读量69

点赞数

文章标签： javascript 学习前端

于 2023-03-11 20:05:56 首次发布

本文链接：https://blog.csdn.net/qwer123459/article/details/129094699

版权

浏览器组成

渲染引擎：用来解析HTML和CSS，也称为内核，例如chrome的blink
JS引擎：也称为JS解析器，用来读取网页中的JavaScript代码，对其处理后运行，例如chrome的v8，JS引擎执行代码时逐行解释每一句源码转换为机器语言，然后有计算机去执行。

JS组成

ECMAScript：JavaScript的基础语法
DOM：页面文档对象模型
BOM：浏览器对象模型

ECMAScript：JavaScript的基础语法

JS注释

// 单行注释
/**/ 多行注释

输入输出语句

alert('请确认内容') // 浏览器弹出警示框
console.log('确认内容') // 浏览器控制台打印输出信息
prompt('请输入内容')//浏览器弹输入框，用户可以输入
console.dir(timer) // 打印返回的元素对象，更好的查看里面属性和方法

声明变量

变量：是存储数据的容器

// 声明变量
var name = prompt('输入内容')
// 声明多个变量
var name = 'zhangsan', age = '20'

var sex
console.log(sex) // 只声明不赋值，结果是undefined未定义的
cosole.log(tel) // 不声明不赋值，结果会报错 tel is not defined

qq  =100
console.log(qq) //不声明，直接赋值，结果100，此方式不提倡使用，因为最后qq会变成全局变量。

var x = 10  // x是数组型
x = 'world' // x是字符串型

数据类型的分类

简单的数据类型[值类型] number、string、boolean、undefined、null 。简单数据类型是直接存储在[栈空间]中，里面存的是值。
复杂的数据类型[引用类型] object、array。复杂数据类型先在栈空间存放地址，用十六进制表示，然后这个地址指向堆空间里面的值。

number数字型

// 数字前面加0表示八进制
var num1 =010 
console.log(num1) // 输出8
// 数字前面加0x表示十六进制
var num2 =0xA
console.log(num1) // 输出10
console.log(Number.Max_VALUE) // Number.Max_VALUE是数值的最大值
console.log(Number.MIN_VALUE) // Number.MIN_VALUE是数值的最小值
console.log(Number.Max_VALUE * 2) // 输出Infinity 无穷大
console.log(-Number.Max_VALUE * 2) // 输出-Infinity 无穷小
console.log('abc' - 1) // 输出NaN 非数字

isNaN('a') //判断是否是非数字

string字符串型

// 语法可以是单引号''，也可以是双引号""，推荐使用单引号。
var name = 'zhangsan'
var name2 = "wang"
// 可以单引号嵌套双引号，或双引号嵌套单引号
var name3 = 'zhang"gao"san'
var name3 = "zhang'gao'san"

var str = 'my name'
console.log(str.length) // 字符串长度，输出7 

console.log('zhang' + true) // 字符串拼接，输出zhangtrue。只要有字符串和其他类型拼接，最终结果就是字符串。

在这里插入图片描述

boolean布尔型

布尔型有两个值true 和false，其中ture相当于1，false相当于0

console.log(true + 1)// true参与加法运算，相当于1，输出 2
console.log(false + 1)// true参与加法运算，相当于0，输出 1

undefined未定义数据类型

声明了变量但是没有赋值

var a
console.log(a) // 输出undefined

var b = undefined
console.log(b)            // 输出undefined
console.log(b + 'world')  // 输出'undefinedworld'
console.log(b + 1)        // 输出NaN，undefined加上数值，结果是NaN非数字

null空值

var a = null
console.log(a)            // 输出null
console.log(a + 'world')  // 输出'nullworld'
console.log(a + 1)        // 输出1 ,空值加上数值，结果还是数值

typeof

检测变量的数据类型

var a = 10
console.log(typeof a) // 输出number
var b = 'world'
console.log(typeof b) // 输出stringboolean
var c = true
console.log(typeof c) // 输出boolean
var d = null
console.log(typeof d) // 输出object
var e = undefined
console.log(typeof e) // 输出undefined

数据类型的转换

转换成字符型
转换成数字

console.log(parseInt('123aaa')) //输出数字123
console.log('12' - 0) //输出数字12 -*/有隐式转换
console.log('12' - '5') //输出数字7

转换成布尔型

代表空、否定的值，例如：‘’、0、NaN、null、undefined会转成false，其余值都会转成true。

console.log(Boolean(''))         //输出flase
console.log(Boolean(0))          //输出flase
console.log(Boolean(NaN))        //输出flase
console.log(Boolean(null))       //输出flase
console.log(Boolean(undefined))  //输出flase
console.log(Boolean(‘11’))     //输出true

运算符

不能直接拿浮点数来比较是否相等

var a = 0.1+0.2 //结果a不是0.3，是0.30000000000000004
console.log(a == 0.3) // 输出false

全等 === 和不全等 !== ，要求值和数据类型都相等

Boolean(37 == '37') //true ，要求值相等，==会默认转换数据类型，会将字符串类型数据转换成数字型（隐式转换）
Boolean(37 === '37') //false，要求两侧值和数据类型都相等

//逻辑与中断（表达式是值类型，不是布尔类型）
console.log(表达式1 && 表达式2) 
// 如果表达式1结果为真，返回表达式2
console.log(123 && 456) // 输出456
// 如果表达式1结果为假，返回表达式1
console.log(0 && 456) // 输出0

//逻辑或中断（表达式是值类型，不是布尔类型）
console.log(表达式1 || 表达式2) 
// 如果表达式1结果为真，返回表达式1
console.log(123 || 456) // 输出123
// 如果表达式1结果为假，返回表达式2
console.log(0 || 456 || 789) // 输出456

运算符优先级

在这里插入图片描述

数组

创建数组

var arr = new Array() //创建一个新的空数组

var arr1 = [] //使用数组字面量,创建空数组
var arr2 = ['a','b'，1，true] //使用数组字面量,创建数组

console.log(arr2[1]，arr2[2]) //输出多个变量用,号分隔
console.log(arr2[4]) //输出的是undefined

//修改length长度
var arr = ['a','b','c']
console.log(arr.length) //输出的数组长度是3
arr.length = 5
console.log(arr) //输出的是['a','b','c',empty * 2]
console.log(arr[3]) //输出的是undefined

//追加数组元素
var arr = ['a','b','c']
arr[3]='d'
console.log(arr) //输出的是['a','b','c','d']

函数

声明函数

在这里插入图片描述

// ①声明函数 函数的名字是getsum6
function getsum6(){
	console.log('100')
}
// ②声明函数(匿名函数) var 变量名 = function(){}
// getsum是变量名，里面存的是一个函数。此函数没有名字
var getsum5 = function (){
	console.log('100')
}

// 带参函数，参数个数不限。形参可以看作是不用声明的变量，默认值是undefined
function getsum(arr1,arr2){
	console.log(arr1+arr2)
}
getsum(1,2) //输出3
getsum(1,2,3) //输出3 ,实参个数 > 形参个数，会取到形参的个数，多余的实参会丢掉
getsum(1) //输出NAN ,实参个数 < 形参个数，多余的没有传的形参会定义为undefined

function getsum3(arr1,arr2){
	return arr1+arr2
}
//函数名()=return后面的结果
getsum3(1,2) // getsum(1,2) = 3
var aa = getsum3(1,2) // aa = 3

//return 只能返回一个值
function getsum2(arr1,arr2){
	return arr1,arr2 // 如果用，号隔开多个值，返回的结果是最后一个值
}
console.log(getsum2(1,2)）//最终返回的是2

function getsum1(){
}
console.log(getsum1()）//如果函数没有return，则输出的是undefined

arguments

arguments是函数的一个内置对象，只有函数才有，arguments对象中存储了传递的所有实参，argument的展示形式是伪数组
伪数组：

具有数组的length属性
按照索引方式进行存储
没有真正数组的一些方法，如push()，pop()

在这里插入图片描述

function getsum(){
	console.log(arguments) //输出的是Arguments(3) 里面是 'a','b','c'
	console.log(arguments.length)//输出的是3
	console.log(arguments[1])//输出的是b
}
getsum('a','b','c')

作用域

就是代码名字在某个范围内起作用和效果
全局作用域(ES6之前) ：整个script标签，或者一个单独的js文件

var num = 20
var num = 30
console.log(num)//输出30
function getsum(){
	var num = 20
	console.log(num)//输出20
}
getsum()

全局变量：在全局作用域下用var声明的变量。
※如果在函数内部没有使用var声明，直接赋值的变量也属于全局变量。
局部变量：在函数中用var声明的变量。

function getsum(){
	var num = 20
	num1 = 30  //如果在函数内部没有声明，直接赋值的变量也属于全局变量
}
getsum()
console.log(num1) // 输出30，num1没有声明，但直接赋值也属于全局变量
console.log(num)  //报错，num是局部变量，只能在函数内部使用

预解析

问题1

console.log(num)  //报错 没有声明的变量

//问题1
console.log(num1)  //输出 undefined
var num1 = 10

//问题1用预解析解释相当于以下代码，把所有的变量声明提升到当前的作用域最前面，不提升赋值操作
var num1
console.log(num1)  //输出 undefined
num1 = 10

问题2

getsum() //输出11
function getsum(){
	console.log(11) 
}

//问题2
getsum1() //报错
var getsum1 = function (){
	console.log(22) 
}

//问题2用预解析解释相当于以下代码，把所有的变量声明提升到当前的作用域最前面，不提升赋值操作
var getsum1
getsum1() //报错
getsum1 = function (){
	console.log(22) 
}

JS解析器执行代码时分为两步骤：预解析，代码执行

预解析 ：js引擎会把js里面所有的var和function提升到当前作用域的最前面
代码执行：按照代码书写的顺序从上往下执行

预解析分为：变量预解析(变量提升)和函数预解析(函数提升)

变量提升 ：就是把所有的变量声明提升到当前的作用域最前面，不提升赋值操作
函数提升 ：就是把所有的函数声明提升到当前的作用域最前面，不调用函数

var a=b=c=9;
//相当于
var a = 9 ; b = 9 ; c = 9

对象

对象：object是一组无序的相关属性和方法的集合。例如字符串，数值，数组，函数。

创建对象

利用 字面量{} 创建对象，里面属性和方法采用键值对形式，键 (属性名)：值（属性值），用逗号隔开

var obj = {} //创建了一个空的对象

var obj1 = {
	uname: 'zhangsan',    //属性在对象里面，不需要声明
	age: 16,
	sayHi: function(){    //方法冒号后面跟的是一个匿名函数
		console.log('hi')
	}
}
console.log(obj1.uname)       //对象名.属性名
console.log(obj1['uname'])    //对象名['属性名']
console.log(obj1.sayHi())     //对象名.方法名()

利用 new Object() 创建对象

var obj = new Object();  //创建了一个空的对象

var obj1 = new Object();  //创建对象
obj1.uname = 'zhangsan'
obj1.age = 16
obj1.sayHi = function() {
	console.log('hi')
}

利用 构造函数 创建对象，构造函数：就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面。

//声明构造函数
function 构造函数名 () {
	this.属性 = 值;     //this指定当前的
	this.方法 = function (){}
}
//使用构造函数
new 构造函数名()

① 构造函数，函数名首字母大写
② 构造函数里面不需要return就能返回结果
③ 调用构造函数必须使用new
④ 只要new Star()调用构造函数就返回一个对象
⑤ 属性和方法前面必须添加this

function Star (uname,age) {   //构造函数，函数名首字母大写
	this.uname = uname;
	this.age = age;
	this.sing = function (song){
		console.log(song)
	};
}
// new 关键字执行过程
// 1.new构造函数可以在内存中创建一个空的对象
// 2.this就会指向刚才创建的空对象
// 3.执行构造函数里面的代码，给这个空对象添加属性和方法
// 4.返回这个对象
var zha = new Star('张三',16) //创建对象或实例
zha.sing('hihi')

new 关键字执行过程

new构造函数可以在内存中创建一个空的对象
this就会指向刚才创建的空对象
执行构造函数里面的代码，给这个空对象添加属性和方法
返回这个对象

遍历对象
for…in：语句用于对数组或对象的属性进行循环操作

for (变量 in 对象) {}

var obj = {
	uname: 'zhangsan', 
	age: 16
}
for(var k in obj){
	console.log(k)      //输出对象中的属性名
	console.log(obj.k)  //输出对象中的属性值
	console.log(obj[k]) //输出对象中的属性值
}

内置对象

Math

console.log(Math.PI)
console.log(Math.max(1,3))  //输出3
console.log(Math.max(1,3,'a'))  //输出NAN

Date

var date = new Date()
console.log(date.getFullYear())  //输出当前日期的年
console.log(date.getMonth())  //输出当前日期的月
console.log(date.getDate())  //输出当前日期的日
console.log(date.valueOf())  //输出当前(时间戳：距离1970.1.1 总的毫秒数) 
console.log(date.getTime())  //输出当前时间戳

var date1 = +new Date() // +new Date()返回的就是当前时间戳

console.log(Date.now())  //输出当前时间戳

Array

var array = new Array()  //创建空数组
var array1 = new Array(2) //2表示数组的长度为2，里面有两个空的数组元素
var array2 = new Array(2，3) //等价于[2,3]，里面有两个数组元素是2和3

// instanceof 运算符 检查是否为数组
var array3 = []
console.log(arrays instanceof Array) //输出true

// Array.isArray() 检查是否为数组
console.log(Array.isArray([1,2])) //输出true

添加删除数组元素
在这里插入图片描述

var array = [1，2，3]
array.push(4) //向数组末尾添加一个元素
array.pop() //删除数组末尾的一个元素
array.unshift(5) //向数组开头添加一个元素
array.shift() //删除数组开头的一个元素

排序或颠倒数组
在这里插入图片描述

var array = [5，2，3]
array.reverse() //颠倒数组
array.sort() //排序数组

var array1 = [13，4，77,1,7]
array.sort() //输出1,13,4,7,77

//解决方法
array.sort(function(a,b){
	return a-b //按照升序排序
	// return b-a //按照降序排序
})

数组索引方法
在这里插入图片描述

var array = ['red'，'blue'，'yellow'，'blue']
console.log(array.indexOf('blue')） //输出1，从前往后查找，返回第一个满足的索引号
console.log(array.indexOf('blue')） //输出3，从后往前查找，返回第一个满足的索引号

数组转换为字符串
在这里插入图片描述
var array = [‘a’, ‘b’, ‘c’]
console.log(array.toString()) //输出a,b,c
console.log(array.join()) //输出a,b,c
console.log(array.join(‘-’)) //输出a-b-c

String
基本包装类型：就是将简单数据类型，包装成复杂数据类型。String、Number、Boolean

var str = 'aaa'
str.length //为什么str有length属性，因为基本包装类型

//(1)相当于 将简单数据类型，包装成复杂数据类型
var temp = new String('aaa')
//(2)把临时变量的值给str
str = temp
//(3)销毁临时变量
temp = null

字符串是不可变：值不可变，看上去改变了内容，其实改变的是地址，在内存中新开了一个内存空间，指向新的内存空间，原来的地址还是存在的。
字符串中的方法都不会修改字符串本身，而是返回一个新的字符串

var num = 'hello'
num = 'hi'

根据字符返回位置

var str = 'hello world'
console.log(str.indexOf('e')) //输出1
console.log(str.indexOf('l',5)) //从索引号5开始往后找，输出9

根据位置返回字符
在这里插入图片描述

var str = 'hello world'
console.log(str.charAt(1)) //输出e
console.log(str.charCodeAt(0)) //输出104
console.log(str[1]) //输出e

字符串操作
在这里插入图片描述

var str = 'hello '
console.log(str.concat('world')) //输出hello world

// 替换字符 replace(被替换的字符,替换为的字符) ，只会替换第一个字符
console.log(str.replace('h','H')) //输出Hello

var str2 = 'hello,world,hi '
//字符转换为数组 split('分隔符')
console.log(str.split(',')) //输出['hello','world','hi']

DOM文档对象模型

文档对象模型：处理可扩展标记语言的标准编程接口，通过DOM接口可以改变网页的内容、结构、样式。
DOM是把文档当作一个对象，DOM中顶级对象是document，DOM主要是操作页面元素。
在这里插入图片描述

获取页面中元素

根据ID获取元素对象

<div id = "time">111</div>
<script>
	var timer = document.getElementById("time")
	console.log(timer) //返回Element对象。输出<div id = "time">111</div>
	// 打印返回的元素对象，更好的查看里面属性和方法
	console.dir(timer)
</script>

根据标签名获取指定标签的对象集合

<ul>
	<li>1</li>
	<li>2</li>
</ul>
<script>
	// 返回的是获取过来元素对象的集合，以伪数组形式存储
	// 如果只有一个li，返回的还是伪数组形式
	// 如果页面中没有这个元素，返回空的伪数组
	var lis = document.getElementByTagName("li")
	console.log(lis) 
	console.dir(timer)

	// 获取父元素ul
	var uls = document.getElementByTagName("ul")
	// <element>.getElementByTagName() 其中element是父元素，并且父元素必须是单个对象，如uls[0]
	var lis2 = uls[0].getElementByTagName("li")
</script>

根据类名获取元素对象集合

<div class = "time">111</div>
<script>
	// 返回的是获取过来元素对象的集合，以伪数组形式存储
	var times = document.getElementByClassName("time")
	console.log(timer) 
</script>

根据指定选择器返回第一个元素对象

<div class = "time">111</div>
<div class = "time">222</div>
<script>
	// 返回的是第一个对象 <div class = "time">111</div>
	// 里面的选择器要加符号,【类加.】 【id加#】
	var times = document.querySelector('.time')
	console.log(timer) 
</script>

根据指定选择器返回所有元素对象

<div class = "time">111</div>
<div class = "time">222</div>
<script>
	// 返回的是获取过来元素对象的集合，以伪数组形式存储
	var times = document.querySelectorAll('.time')
	console.log(timer) 
</script>

获取特殊元素（Html、body）

	//获取body元素对象
	var bodyEle= document.body
	console.dir(bodyEle)

	//获取html元素对象
	var htmlEle= document.documentElement
	console.dir(htmlEle)

事件基础

事件： 是可以被JavaScript检测到的行为，即触发 — 响应机制，网页中任何元素都可以触发事件
事件组成： 事件源、事件类型、事件处理程序

事件源.事件类型=事件处理程序
事件源：事件被触发的对象
事件类型：怎么触发的
事件处理程序：通过函数赋值的方式完成

执行事件步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（通过函数赋值的形式）

<button id = "btn">222</button>
<script>
	// 返回的是获取过来元素对象的集合，以伪数组形式存储
	var buttons = document.getElementById('btn')
	//事件源：buttons
	//事件类型：onclick
	//事件处理程序：匿名函数fuction
	buttons.onclick = fuction () {
		alert('666')
	}
</script>

常见的鼠标事件

在这里插入图片描述

contextmenu：主要控制应该何时显示上下文菜单
selectstart：开始选中

<script>
	btn.addEventListener('contextmenu', function(e){ //取消鼠标右键菜单
		e.preventDefault()
	})
	btn.addEventListener('selectstart', function(e){ //禁止鼠标选中
		e.preventDefault()
	})
</script>

鼠标事件对象：MouseEvent

在这里插入图片描述

<script>
	document.addEventListener('click',function(e){
		console.log(e.clientX) //获取鼠标相对窗口的X坐标
	})
</script>

事件高级

注册事件

传统方式注册事件：

事件源.事件类型=事件处理程序。注册事件的唯一性，同一个元素同一个事件只能添加一个处理函数。

方法监听注册事件：

< 事件源 >.addEventListener(type, listener, [useCapture]) (IE9以上)同一个元素同一个事件可以添加多个事件处理函数。按注册顺序执行
type：事件类型，是字符串，例如click、mouseover、前面不要带on
listener：事件处理函数，事件发生时会调用该监听函数。
useCapture：可选参数默认false，决定处于冒泡阶段还是捕获阶段
< 事件源 >.attachEvent(eventNameWithOn, callback) (IE9以下，尽量不使用)
eventNameWithOn：事件类型是字符串，例如onclick、onmouseover、前面要带on
callback：事件处理函数，事件发生时会调用该回调函数。

<button id = "btn">222</button>
<script>
	var btn= document.getElementById('btn')
	// 传统方式注册事件
	btn.onclick = fuction () {
		alert('hi')            //根据唯一性原则，不会输出hi，被后面的覆盖掉了
	}
	// 传统方式注册事件
	btn.onclick = fuction () {
		alert('hello')      //根据唯一性原则，最终点击按钮输出hello
	}

	//方法监听注册事件
	btn.addEventListener('click', fuction(){ 
		alert('hi')   
	})
	//方法监听注册事件
	btn.addEventListener('click', fuction(){
		alert('hello') //点击按钮先输出hi，再输出hello
	})
</script>

删除事件

传统方式删除事件：

事件源.事件类型 = null

方法监听删除事件：

< 事件源 >.removeEventListener(type, listener, [useCapture])
< 事件源 >.detachEvent(eventNameWithOn, callback) (IE9以下，尽量不使用)

<button id = "btn">222</button>
<script>
	var btn= document.getElementById('btn')
	btn.onclick = fuction () {
		alert('hi')    
		// 传统方式删除事件
		btn.onclick = null       
	}

	btn.addEventListener('click', aa) //里面的aa不需要调用加小括号
	fuction aa(){ 
		alert('hi')   
		//方法监听删除事件
		btn.removeEventListener('click', aa)
	}
</script>

DOM事件流

事件流：描述的是从页面接收事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，即事件传播的过程

在这里插入图片描述

DOM事件流分为：

事件捕获阶段
事件冒泡阶段

JS代码中只能执行捕获或者冒泡其中一个阶段。
有些事件没有冒泡：onblur、onfocus、onmouseenter、onmouseleave

<div id = "divfa">
	<div id = "divson"></div>
</div>
<script>
	var divfa= document.getElementById('divfa')
	var divson= document.getElementById('divson')
	//方法监听注册事件
	// addEventListener第三个参数是true，那么处于捕获阶段 document -> html -> body -> divfa -> divson
	divfa.addEventListener('click', fuction(){ 
		alert('hi')   
	},true)
	divson.addEventListener('click', fuction(){   //当点击divson时，根据捕获阶段从外到内的流程，会先弹出hi，再弹出hello。
		alert('hello')   
	},true)
	/*-------------------------------------------*/
	// addEventListener第三个参数是false或省略，那么处于冒泡阶段 divson -> divfa -> body -> html -> document
	divfa.addEventListener('click', fuction(){ 
		alert('hi')   
	},false)
	divson.addEventListener('click', fuction(){   //当点击divson时，根据捕获阶段从内到外的流程，会先弹出hello，再弹出hi。
		alert('hello')   
	},false)
</script>

事件对象

btn.onclick = fuction (event) {} ：event就是事件对象

<button id = "btn">222</button>
<script>
	var btn= document.getElementById('btn')
	// event就是事件对象，当形参来看
	// 事件对象是只有有了事件才会存在，系统自动创建的不需要传递参数。
	// 事件对象是事件一系列相关数据的集合，比如鼠标点击，就包含鼠标相关信息。键盘点击就包含键盘事件的信息，用户按了什么键
	btn.onclick = fuction (event) {
		console.log(event)  //事件对象
		console.log(window.event) //IE6，7，8
	}
</script>

在这里插入图片描述

阻止默认行为或事件冒泡

<a href = "http://www.baidu.com">百度</a>
<script>
	var a= document.querySelector('a')
	a.addEventListener('click', function(e){
		event.preventDefault() //点击链接不跳转，阻止默认行为（鼠标点击）
		event.stopPropagation() //阻止冒泡，如果父级也定义了事件，是不再执行的父级的
	}
	a.onclick = fuction (event) {
		// return false也能阻止默认行为，只能用于传统的注册方式
		return false
	}
</script>

事件委托（代理、委派）

事件委托核心原理：不要给每个子节点单独设置事件监听器，而是给其父节点设置事件监听器，然后利用冒泡原理影响每个子节点。

<ul>
	<li> aaa </li>
	<li> bbb </li>
	<li> ccc </li>
</ul>
<script>
	var ul = ul.querySelector('ul')
	ul.addEventListener('click',function(e){
		e.target //获取触发事件的对象，如果点击li，返回的就是li对象
	})
</script>

常用键盘事件

在这里插入图片描述
onkeyup弹起才会触发，onkeydown和onkeypress是只要按下不松开，就会一直触发。
三个事件的执行顺序：onkeydown – onkeypress – onkeyup。

键盘事件对象：KeyboardEvent

在这里插入图片描述

<script>
	// keyup和keydown不区分字母大小写
	document.addEventListener('keyup',function(e){
		//获取点击的键盘按键对应的ASCII值
		
		console.log(e.keyCode) 
	})
	// keypress区分字母大小写
	document.addEventListener('keypress',function(e){
		//获取点击的键盘按键对应的ASCII值
		console.log(e.keyCode) 
	})
</script>

操作元素

改变元素的内容（也可以获取元素里的内容）

< element >.innerText 非标准
< element >.innerHTML W3C标准在这里插入图片描述

<div id = "divs">222</div>
<script>
	var divs = document.getElementById('divs')
	console.log(divs.innerText) //输出222，可以获取元素里面的内容，去除html标签，去除空格和换行
	console.log(divs.innerHTML) //输出222，可以获取元素里面的内容，保留html标签，保留空格和换行
	// 改变元素内容<element>.innerText
	divs.innerText = '<strong>666666</strong>' //最后元素内容是<strong>666666</strong>,innerText不识别html标签
	// 改变元素内容<element>.innerHTML
	divs.innerHTML = '<strong>666666</strong>' //最后元素内容是666666,其中666666加粗了,innerHTML识别html标签
</script>

改变元素的属性

<img src = "aaa.jpg">
<script>
	var img = document.querySelector('img')
	img.src = 'bbb.jpg'
</script>

改变表单元素的属性

<button id = "btn">222</button>
<input value = "123">
<script>
	var input = document.querySelector('input')
	var btn= document.getElementById('btn')
	btn.onclick = fuction () {
		// 表单里面的文字内容是通过value来修改的
		input.value = '66666'
		
		//this指向的是事件函数的调用者，即btn
		this.disabled = true
	}
</script>

改变元素的样式属性

< element >.style 行内样式操作
< element >.className 类名样式操作(className会直接更改元素的类名,覆盖原先的类名)

<style>
	.change {
		background-color: purple;
		font-size: 20px
	}
</style>
<div sytle = "background-color: pink">123123</div>
<script>
	var div = document.querySelector('div')
	//js里的样式采取的是驼峰命名法
	div.style.backgroundColor = 'purple'

	//当样式比较复杂时使用
	//将我们当前元素样式的类名改成了 change  相当于<div class = "change">123123</div> className会直接更改元素的类名,覆盖原先的类名
	div.className = 'change '.
</script>

自定义属性值操作

< element >.属性获取属性值，内置属性
< element >.getAttribute(‘属性’) 获取属性值，内置属性和自定义属性

<div sytle = "background-color: pink" index = "1">123123</div>
<script>
	var div = document.querySelector('div')
	console.log(div.style)
	console.log(div.getAttribute('style')) //获取内置属性值
	console.log(div.getAttribute('index ')) //获取自定义属性
</script>

< element >.属性 = 值设置元素属性值，内置属性
< element >.setAttribute(‘属性’,‘值’) 设置元素属性值，内置属性和自定义属性

<div sytle = "background-color: pink" index = "1">123123</div>
<script>
	var div = document.querySelector('div')
	div.style.backgroundColor = 'purple'
	div.setAttribute('index ','2')) //设置自定义元素属性值
</script>

< element >.removeAttribute(‘属性’) 移除属性值，内置属性和自定义属性

<div index = "1">123123</div>
<script>
	var div = document.querySelector('div')
	div.removeAttribute('index')) //移除自定义元素属性值
</script>

H5自定义属性

自定义属性必须以 data- 开头
H5新增 < element >.dataset.index 或者 < element >.dataset[‘index’] 获取以data-开头的自定义属性值

<!--自定义属性以data- 开头-->
<div data-index-name = "1">123123</div>
<script>
	var div = document.querySelector('div')
	// dataset是一个集合，里面存放了所有以data开头的自定义属性
	console.log(div.dataset) 
	// < element >.dataset.indexName获取属性值
	// 如果自定义属性中有多个-连接的单词，采用驼峰命名法
	console.log(div.dataset.indexName) //输出123123
</script>

节点操作

利用节点层级关系可以获取元素常见的是父子兄层级关系，网页中所有内容都是节点，用node来表示

在这里插入图片描述

父级节点：

< node >.parentNode ：获取父级节点

子节点：

< node >.childrenNodes（一般不使用）：获取所有子节点集合（包含元素节点或者文本节点【换行，回车，注释】）
< node >.firstChild（一般不使用）：获取第一个子节点，包含元素节点或者文本节点，找不到返回为null
< node >.lastChild（一般不使用）：获取最后一个子节点，包含元素节点或者文本节点，找不到返回为null
< node >.children ：获取所有的元素子节点集合，找不到返回为null
< node >.firstElemlentChild ：获取第一个子元素节点，找不到返回为null
< node >.lastElemlentChild ：获取最后一个元素子节点，找不到返回为null

兄弟节点：

< node >.previousSibling（一般不使用）：获取上一个兄弟节点，包含元素节点或者文本节点，找不到返回为null
< node >.nextSibling（一般不使用）：获取下一个兄弟节点，包含元素节点或者文本节点，找不到返回为null
< node >.previousElementSibling：获取上一个兄弟元素节点，找不到返回为null
< node >.nextElementSibling：获取下一个兄弟元素节点，找不到返回为null

<ul>
	<li> aaa </li>
	<li> bbb </li>
	<li> ccc </li>
</ul>
<script>
	var li = ul.querySelector('li')
	Console.log(li.parentNode)  //输出的是li的父节点，即ul节点 如果找不到返回为空即null

	var ul = ul.querySelector('ul')
	Console.log(ul.children[0])  //获取第一个子元素节点
	Console.log(ul.children[ul.children.length-1])  //获取最后一个元素子节点
</script>

创建节点或元素

doucment.write(HTML元素)使用较少：动态创建元素节点，当文档流执行完毕，会导致页面全部重绘
< element >.innerHTML：动态创建元素节点
doucment.createElement(HTML元素) ：动态创建元素节点

添加节点或元素

< node >.insertBefore(child,指定元素) // 追加元素节点，并放到指定的子节点前面
< node >.appendChild(child) // 追加元素节点，并放到子节点列表末尾

<ul>
	<li>666</li>
</ul>
<script>
	// doucment.write(HTML元素) 动态创建元素节点
	document.write('<div></div>')
	// 动态创建元素节点doucment.createElement(HTML元素)
	var li = doucment.createElement('li')  
	// < element >.innerHTML 动态创建元素节点，如<a>元素节点。javascipt:;是阻止连接跳转，或者javascript:void(0)
	li.innerHTML = "<a href ='javascript:;'>bb</a>"

	var ul = document.querySelector('ul')
	// 添加元素节点< node >.appendChild(child)
	ul.appendChild(li) 
	// 添加元素节点< node >.insertBefore(child,指定元素)
	ul.insertBefore(li,ul.children[0]) 

	// 往innerHTML中赋值如果拼接字符串，效率比createElement低，
	for(var i=0 ; i<100 ; i++){
		li.innerHTML += "<a href ='javascript:;'>bb</a>"
	}
	
	// 往innerHTML中赋值如果拼接字符串，采用数组拼接形式拼接，效率比createElement高
	var array = []
	for(var i=0 ; i<100 ; i++){
		array.push("<a href ='javascript:;'>bb</a>")
	}
	li.innerHTML = array.join('')
</script>

删除节点或元素

< node >.removeChild(child) 删除节点，node是父节点，删除的是父节点中的子节点

<ul>
	<li> aaa </li>
</ul>
<script>
	var ul = document.querySelector('ul')
	// < node >.removeChild(child) 删除子节点
	ul.removeChild(ul.children[0])
</script>

复制节点或元素（克隆节点）

< node >.cloneNode() 复制节点，node是父节点，删除的是父节点中的子节点

<ul>
	<li> aaa </li>
</ul>
<script>
	var ul = document.querySelector('ul')
	// < node >.cloneNode()  复制节点
	// 如果cloneNode()参数为空或者为false，是浅拷贝，只复制节点本身，不复制里面的内容
	// 如果cloneNode(true)是深拷贝，只复制节点本身，也复制里面的内容
	ul.children[0].cloneNode() 
</script>

BOM浏览器对象模型

浏览器对象模型：提供了独立于内容与浏览器窗口进行交互的对象，BOM的顶级对象是window，把浏览器当做是一个对象，主要是浏览器窗口交互的一些对象，BOM是浏览器厂商在各自的浏览器上定义的，所有兼容性较差。
在这里插入图片描述
BOM比DOM更大，它包含DOM。window.document.querySelector()

<div>aaa</div>
<script>
	window.document.querySelector('div')
</script>

window对象

它是JS访问浏览器窗口的一个接口
它是一个全局对象，定义在全局作用域中的变量和函数，都会变成window对象的属性和方法。

<script>
	var num = 10
	console.log(window.num)
	alert('111')
	window.alert('222')
	console.log(window.name) // 输出空字符串，name是window的一个特殊属性
</script>

window对象的常见事件

窗口（页面）加载事件

window.onload是窗口（页面）加载事件，当所有文档内容（dom元素、图像、脚本文件、css等等）完全加载完成后，才会触发该事件，调用处理函数

window.onload = function(){}
window.addEventListener("load",function(){})

DOMContentLoaded是窗口（页面）加载事件，仅当DOM加载完成（不包含式样表，图片等等），就触发事件。加载速度比onload更快一些。

document.addEventListener('DOMContentLoaded',function(){})

pageshow重新加载页面触发事件，浏览器点后退按钮也会触发

document.addEventListener('pageshow',function(e){
	console.log(e.persisted)//输出true，表示这个页面是从缓存中取过来的
})

调整窗口大小事件

resize：是只要窗口大小发生变化就触发事件，调用处理函数

window.onresize = function(){}
window.addEventListener("resize",function(){})
window.innerWidth  //获取当前屏幕宽度

定时器

window.setTimeout(调用函数,[延迟的毫秒数])：设置定时器，在定时器到期后执行调用函数，第二个参数省略默认是0。setTimeout这个函数也称为回调函数，时间到了才调用这个函数。
停止setTimeout()定时器：window.clearTimeout(定时器名字)

var timer = window.setTimeout(function(){},2000) //设置定时器
window.clearTimeout(timer) //停止定时器

window.setInterval(回调函数,[间隔的毫秒数])：重复调用一个函数，每隔一段时间，就去调用一次回调函数
取消setInterval()定时器：window.clearInterval(定时器名字)

var timer = window.setInterval(function(){},2000) //设置重复定时器
window.clearInterval(timer) //停止重复定时器

this

this指向调用它的对象

//在全局作用域或普通函数中this指向的是全局对象window
console.log(this) //指向的是window
function fn(){
	console.log(this) //指向的是window
}
fn()
// 在方法中this指向对象
var aa = {
	say: function(){
		console.log(this) //指向的是aa
	}
}
aa.say()
//构造函数this指向构造函数的实例
function Fun(){
	console.log(this)
}
var abc = new Fun()  //this指向的是abc

JS执行机制

js是单线程，同一时间只能做一件事。

JS执行机制：

先执行执行栈中的同步任务
异步任务放入任务队列中，不执行
一旦执行栈中的同步任务执行完毕，系统会按次序读取任务队列中的异步任务，异步任务结束等待状态，进入执行栈开始执行。

任务：

同步任务：同步任务都在主线程上执行，形成一个执行栈中
异步任务：通过回调函数实现，放到**任务队列（消息队列）**中。异步：同时进行多个任务

//输出的顺序是123
console.log(1)
setTimeout(function(){   //setTimeout是同步任务，但里面的function是异步任务
	console.log(3)
},0)
console.log(2)

异步任务有以下三类：

普通事件：如click，resize
资源加载：load，error
定时器：setInterval，setTimeout

onclick回调是只有点击了鼠标，才会由异步进程，把异步任务放到任务队列
setTimeout是只有时间到了，才会由异步进程，把异步任务放到任务队列
在这里插入图片描述
事件循环(event loop)：同步任务会重复看任务队列中是否有新的异步任务，有就把异步任务拿到执行栈执行。

location对象

用于获取或设置窗体的URL，并且可以解析URL

location对象属性

在这里插入图片描述

console.log(location.href)
location.href = 'http://www/baidu.com' //跳转页面

location对象方法

在这里插入图片描述

navigator对象

navigator对象包含了浏览器的相关信息，最常用的是userAgent，该属性返回客户机发给服务器的user-agent头部值，

navigator.userAgent

history对象

与浏览器历史进行交互，包含用户访问过的URL
在这里插入图片描述

history.forward()
history.go(1)

PC端网页特效

元素偏移量offset

在这里插入图片描述

<style>
	.fa {
		position:relative; /*相对定位*/
	}
</style>
<div class ="fa"> 
	<div class = "son"></div>
</div>
<script>
	var fa = document.querySelector('.fa')
	var son = document.querySelector('.son')
	//以带有定位的父级为准，如fa是son的父级，fa有position:relative定位
	console.log(son.offsetTop) 
	console.log(son.offsetLeft)
</script>

offset属性是只读属性，只能获取，不能赋值
在这里插入图片描述

元素可视区client

动态后期该元素的边框大小，元素大小
在这里插入图片描述

立即执行函数

立即执行函数：不需要调用立马能执行的函数。
(function(){})() 作用：是创建一个独立的作用域。

// ()() 然后在第一个小括号中写入匿名函数，第二个小括号可以看做调用函数
(fucntion(){})()
//或者
(fucntion(){}())

//无参数
(fucntion(){
	console.log("2") //不需要调用，立马执行，返回2
})()

//有参数
(fucntion(name){
	console.log(name) //不需要调用，立马执行，返回zhangsan
})('zhangsan');  //当有多个立即执行函数用;隔开，否则会报错
//有参数
(fucntion(name){
	console.log(name) //不需要调用，立马执行，返回zhangsan
}('zhangsan'))

元素滚动scroll

在这里插入图片描述

div.addEventListener('scroll',function(){}) //页面滚动事件

在这里插入图片描述

页面被卷去的顶部：window.pageYOffset，内容被卷去的顶部element.scrollTop
页面被卷去的左部：window.pageXOffset
mouseover是经过自身盒子会触发，经过子盒子也会触发，mouseenter只有经过自身盒子才会触发，因为mouseenter不会冒泡。mouseleave鼠标离开，也不会冒泡。

<div id ="fa">
	<div id = "so"></div>
</div>
<script>
	var fa = document.querySelector('.fa')
	fa.addEventListener('mouseover',fucntion(){
		condole.log('11') //当鼠标经过fa盒子会触发事件，经过so也会触发事件
	})
	fa.addEventListener('mouseenter',fucntion(){
		condole.log('11') //当鼠标经过fa盒子会触发事件，经过so不会触发事件
	})
</script>

动画函数封装

动画实现原理：通过定时器**setInterval()**不断移动盒子位置

<style>
	span{
		position: absolute    /*动画必须加上定位，不然动不起来*/
	}
</style>

回调函数

回调函数原理： 函数作为一个参数，传递到另一个函数里，当那个函数执行完之后，再执行传递的函数，这个过程就是回调。

function time(timer,callback)(){
	console.log(timer)
	// 当函数执行完之后，再执行传递的函数
	if(callback) callback()
}
// function(){}函数作为一个参数，传递到另一个函数timer里
time("2023/01/01", function(){
	console.log("666")
})

手动调用事件

	div222.addEventListener('click',fucntion(){
		condole.log('11') 
	})
	div222.click() // 手动调用点击事件

滚动窗口至文档特定位置

window.scroll(x,y)
window.scroll(0,0) //滚动到页面顶部

移动端网页特效

触屏事件touch（触摸事件）

在这里插入图片描述

	div.addEventListener('touchstart',fucntion(){
		condole.log('11') 
	})

触摸事件对象touchEvent

在这里插入图片描述

var div = document.querySelector('div')
div.addEventListener('touchstart',fucntion(e){
	condole.log(e) // 触摸事件对象touchEvent
	condole.log(e.touches) // 触摸列表t
	e.preventDefault()// 阻止屏幕滚动的默认行为
})
div.addEventListener('transitionend',fucntion(){
	condole.log(11) // 监听页面轮播图过渡完成的事件

})

classList属性

添加类名：div.classList.add(‘类名’)
移除类名：div.classList.remove(‘类名’)
切换类名：div.classList.toggle(‘类名’)

<div class = "one two"></div>
<script>
	//div.classList返回元素类名
	console.log(div.classList) //DOMTokneList，里面["one","two"]

	//添加类名与 className不同，是在后面追加类，不会覆盖原来的。
	div.classList.add('three') // 里面是["one","two","three"]

	//移除类名
	div.classList.remove('three') // 里面是["one","two"]

	//切换类名
	div.classList.toggle('four') // 如果当前类中没有four就加上，有就去掉。
</script>

JS插件

JS插件就是js文件。

fastclick插件，解决300ms延迟，官方地址https://github.com/ftlabs/fastclick

<head>
	<!--1.引入fastclick插件-->
	<script src = "fastclick.js"></script>
</head>
<body>
	<script src = "fastclick.js">
		// 2.语法规范
		if ('addEventListener' in document) {
			document.addEventListener('DOMContentLoaded', function() {
				FastClick.attach(document.body);
			}, false);
		}
		//点击事件
		div.addEventListener('click',fucntion(){
			condole.log(11) // 就没有300ms延迟
		})
	</script>
</body>

Swiper插件：轮播图官网https://www.swiper.com.cn/
zy.media.js插件：视频插件，同一各个浏览器视频的风格

本地存储

数据存储在用户的浏览器中。
容量较大 sessionStorage 大约5M，localStorage 大约20M
只能存储字符串可以将对象,JOSN.stringify()编码后存储

window.sessionStorage

生命周期：刷新页面不失效，只有关闭浏览器窗口才失效
在同一个窗口（页面）下数据可以共享
以键值对形式进行存储的

存储数据：

sessionStorage.setItem(key,value)

获取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

删除所有数据：

sessionStorage.clear()

<script>
	sessionStorage.setItem("name","zhangsan")
</script>

window.localStorage

生命周期：永久生效。页面关闭也生效，除非手动删除。
在多个窗口（页面）下数据可以共享，即（同一个浏览器可以共享）
以键值对形式进行存储的

存储数据：

localStorage.setItem(key,value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

删除所有数据：

localStorage.clear()

<script>
	localStorage.setItem("name","zhangsan")
</script>

prototype

在Javascript中每个函数都有一个Portotype属性，而对象没有。

function Phone(brand) {
	this.brand = brand
}
//添加方法，通过原型对象
Phone.prototype.call = function(){}

夏末°时光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记

javascript学习笔记
复制链接

扫一扫

JavaScript学习笔记

浏览器组成

JS组成

ECMAScript：JavaScript的基础语法

JS注释

输入输出语句

声明变量

数据类型的分类

number数字型

string字符串型

boolean布尔型

undefined未定义数据类型

null空值

typeof

数据类型的转换

运算符

运算符优先级

数组

创建数组

函数

声明函数

arguments

作用域

预解析

对象

创建对象

内置对象

DOM文档对象模型

获取页面中元素

根据ID获取元素对象

根据标签名获取指定标签的对象集合

根据类名获取元素对象集合

根据指定选择器返回第一个元素对象

根据指定选择器返回所有元素对象

获取特殊元素（Html、body）

事件基础

常见的鼠标事件

鼠标事件对象：MouseEvent

事件高级

注册事件

删除事件

DOM事件流

事件对象

阻止默认行为或事件冒泡

事件委托（代理、委派）

常用键盘事件

键盘事件对象：KeyboardEvent

操作元素

改变元素的内容（也可以获取元素里的内容）

改变元素的属性

改变表单元素的属性

改变元素的样式属性

自定义属性值操作

H5自定义属性

节点操作

父级节点：

子节点：

兄弟节点 ：

创建节点或元素

添加节点或元素

删除节点或元素

复制节点或元素（克隆节点）

BOM浏览器对象模型

window对象的常见事件

窗口（页面）加载事件

调整窗口大小事件

定时器

this

JS执行机制

location对象

location对象属性

location对象方法

navigator对象

history对象

PC端网页特效

元素偏移量offset

元素可视区client

立即执行函数

元素滚动scroll

动画函数封装

兄弟节点：