网站标题图片怎么做,潍坊专业精密活塞杆,有限公司和责任公司的区别,网站开发算固定资产蓝旭前端05#xff1a;JavaScript进阶
基础简单复习
数据类型
基本数据类型#xff1a;Number、String、Boolean、Null、Undefined等。引用数据类型#xff1a;Object、Array、Function等。typeof操作符#xff1a;返回数据类型的字符串形式。
变量 变量声明#xff1…蓝旭前端05JavaScript进阶
基础简单复习
数据类型
基本数据类型Number、String、Boolean、Null、Undefined等。引用数据类型Object、Array、Function等。typeof操作符返回数据类型的字符串形式。
变量 变量声明var、let、const。区别var没有块级作用域let和const有块级作用域const声明的变量不能修改。什么是块级作用域{}。举例 {var a 1let b 2const c 3
}
console.log(a) // 1
console.log(b) // 报错
console.log(c) // 报错变量赋值赋值操作符。 变量命名字母、数字、下划线、$不能以数字开头。 变量作用域全局作用域、局部作用域。 变量提升变量声明会提升到作用域的最前面。 变量作用域链内部作用域可以访问外部作用域的变量反之不行。
运算符
算术运算符、-、*、/、%。赋值运算符、、-、*、/、%。比较运算符、!、、!、、、、。逻辑运算符、||、!。三元运算符condition ? expr1 : expr2。
控制语句
if语句if、else if、else。switch语句switch、case、break、default。for循环for、break、continue。while循环while、do while。break语句跳出循环。continue语句跳过本次循环。return语句返回值。
JavaScript引入
!DOCTYPE html
html
head-- 为什么不推荐在head引入script阻塞页面渲染 --script srcscript.js/scripttitleJavaScript引入/title
/head
bodyscript// JavaScript代码/script
/body
/htmlJavaScript输出
console.log(Hello, World!)JavaScript注释
// 单行注释
/* 多行注释 */JavaScript弹窗
alert(Hello, World!)Overview
获取元素事件监听事件对象事件委托事件绑定事件解绑事件触发事件处理程序异步编程(回调函数、Promise、async/await)
获取元素
通过ID获取元素
ID: 元素的id属性是唯一的。
document.getElementById(id)通过类名获取元素
class: 元素的class属性可以有多个相同的类名。
document.getElementsByClassName(class)多个类名之间用空格隔开返回的是一个数组。
通过标签名获取元素
tag: 元素的标签名如div、p、a等。
document.getElementsByTagName(tag)通过选择器获取元素
selector: CSS选择器如#id、.class、tag等。
document.querySelector(selector)
document.querySelectorAll(selector)// 举例
document.querySelector(#id)
document.querySelectorAll(.class)
document.querySelectorAll(tag)区别querySelector只返回第一个匹配的元素querySelectorAll返回所有匹配的元素。
事件监听
事件监听
element.addEventListener(event, function, useCapture)解释event是事件的类型function是事件触发时执行的函数useCapture是一个布尔值表示事件是否在捕获阶段执行。
事件类型click、mouseover、mouseout、keydown、keyup等。事件处理函数事件触发时执行的函数。捕获阶段事件从最外层元素向内层元素传播的阶段。例如点击一个按钮事件会从document传播到按钮。
事件监听的例子
举例
document.getElementById(id).addEventListener(click, function() {console.log(click)
}, false)解释点击id为id的元素时控制台输出click。这里false表示事件在冒泡阶段执行若为true则表示事件在捕获阶段执行默认是false(可不写)。
什么是冒泡阶段事件从内层元素向外层元素传播的阶段。例如点击一个按钮事件会从按钮传播到document。捕获阶段事件从最外层元素向内层元素传播的阶段。例如点击一个按钮事件会从document传播到按钮。
冒泡阶段和捕获阶段的执行顺序先捕获再冒泡。
冒泡和捕获的例子
!DOCTYPE html
html
headtitle事件监听/title
/head
bodydiv iddivbutton idbtn按钮/button/divscriptdocument.getElementById(div).addEventListener(click, function() {console.log(div)}, false)document.getElementById(btn).addEventListener(click, function() {console.log(btn)}, false)/script
/body
/html点击按钮控制台输出
btn
div解释点击按钮事件先在按钮上触发再在div上触发。 怎么阻止冒泡使用event.stopPropagation()方法。 例如
document.getElementById(btn).addEventListener(click, function(event) {console.log(btn)event.stopPropagation()
}, false)这样点击按钮时只会输出btn。
事件对象
事件对象
事件对象是事件触发时传递给事件处理函数的一个对象包含了事件的相关信息。
element.addEventListener(event, function(event) {// 事件对象
})事件对象的属性type、target、currentTarget、clientX、clientY等。事件对象的方法preventDefault()、stopPropagation()等。事件对象的类型click、mouseover、mouseout、keydown、keyup等。事件对象的坐标事件触发时的坐标。
事件对象的例子
举例
document.getElementById(id).addEventListener(click, function(event) {console.log(event.type) // clickconsole.log(event.target) // 点击的元素console.log(event.currentTarget) // 绑定事件的元素console.log(event.clientX) // 鼠标点击的x坐标console.log(event.clientY) // 鼠标点击的y坐标
}, false)事件委托
事件委托
事件委托是指将事件绑定到父元素上通过事件对象的target属性判断事件源从而执行对应的事件处理函数。
element.addEventListener(event, function(event) {if (event.target.tagName tag) {// 事件处理函数}
})事件委托的优点减少事件绑定提高性能。事件委托的原理事件冒泡。事件委托的应用动态添加元素。
事件委托的例子
举例
!DOCTYPE html
html
headtitle事件委托/title
/head
bodyul idulli1/lili2/lili3/li/ulscriptdocument.getElementById(ul).addEventListener(click, function(event) {// 为什么要判断tagName防止事件源不是li注意tagName是大写这是一个坑这个属于DOM的知识// console.log(event.target.tagName)if (event.target.tagName LI) {console.log(event.target.innerHTML)}}, false)/script
/body
/html事件绑定
事件绑定
事件绑定是指将事件处理函数绑定到元素上当事件触发时执行对应的事件处理函数。
element.addEventListener(event, function, useCapture)事件绑定的优点解耦提高代码的可维护性。事件绑定的原理事件监听。
事件绑定的例子
举例
!DOCTYPE html
html
headtitle事件绑定/title
/head
bodybutton idbtn按钮/buttonscriptdocument.getElementById(btn).addEventListener(click, function() {console.log(click)}, false)/script
/body
/html事件解绑
事件解绑
事件解绑是指将事件处理函数从元素上解绑当事件不再触发时不执行对应的事件处理函数。
element.removeEventListener(event, function, useCapture)事件解绑的优点减少内存占用提高性能。事件解绑的原理事件监听。
事件解绑的例子
举例
!DOCTYPE html
html
headtitle事件解绑/title
/head
bodybutton idbtn按钮/buttonscript// 点击按钮一次后再点击按钮按钮的点击事件就会被解绑var btn document.getElementById(btn);function clickHandler() {console.log(click);btn.removeEventListener(click, clickHandler);}btn.addEventListener(click, clickHandler);/script
/body/html事件触发
事件触发
事件触发是指手动触发元素上的事件执行对应的事件处理函数。
element.dispatchEvent(event)事件触发的应用模拟用户操作。事件触发的原理事件监听。
触发的类型click、mouseover、mouseout、keydown、keyup等。
事件触发的例子
举例
!DOCTYPE html
html
headtitle事件触发/title
/head
bodybutton idbtn按钮/buttondiv idclr变化颜色/divdiv idkeyon现在没有按下/divscriptvar btn document.getElementById(btn);btn.addEventListener(click, function() {console.log(click);}, false);// 手动触发按钮的点击事件btn.dispatchEvent(new Event(click));var clr document.getElementById(clr);clr.addEventListener(mouseover, function() {this.style.backgroundColor red;}, false);// 手动触发div的mouseover事件// clr.dispatchEvent(new Event(mouseover));var keyon document.getElementById(keyon);document.addEventListener(keydown, function() {keyon.innerHTML 按下了键盘;}, false);document.addEventListener(keyup, function() {keyon.innerHTML 现在没有按下;}, false);// 手动触发键盘事件document.dispatchEvent(new KeyboardEvent(keydown, {key: a}));/script
/body
/html事件处理程序
事件处理程序
事件处理程序是指事件触发时执行的函数用于处理事件。
事件处理程序的类型内联事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序。事件处理程序的优点解耦提高代码的可维护性。
内联事件处理程序
内联事件处理程序是指将事件处理函数直接写在元素的事件属性中。
!DOCTYPE html
html
headtitle内联事件处理程序/title
/head
bodybutton onclickconsole.log(click)按钮/button
/body
/html优点简单、直观。缺点不推荐使用不利于代码的维护。
DOM0级事件处理程序
DOM0级事件处理程序是指将事件处理函数赋值给元素的事件属性。
!DOCTYPE html
html
headtitleDOM0级事件处理程序/title
/head
bodybutton idbtn按钮/buttonscriptdocument.getElementById(btn).onclick function() {console.log(click);}/script
/body
/html优点简单、直观。缺点同一事件只能绑定一个处理函数。注意DOM0级事件处理程序会覆盖元素原有的事件处理函数。注意DOM0级事件处理程序不支持事件委托、不支持事件解绑、不支持事件触发、不支持事件对象。注意DOM0级事件处理程序不推荐使用不利于代码的维护。
DOM2级事件处理程序
DOM2级事件处理程序是指使用addEventListener方法绑定事件处理函数。
!DOCTYPE html
html
headtitleDOM2级事件处理程序/title
/head
bodybutton idbtn按钮/buttonscriptdocument.getElementById(btn).addEventListener(click, function() {console.log(click);}, false)/script
/body
/html优点支持事件委托、支持事件解绑、支持事件触发、支持事件对象。注意DOM2级事件处理程序不会覆盖元素原有的事件处理函数。注意DOM2级事件处理程序推荐使用提高代码的可维护性。注意DOM2级事件处理程序的第三个参数useCapture是一个布尔值表示事件是否在捕获阶段执行默认是false(可不写)。
异步编程
异步编程
异步编程是指在程序执行过程中不按照顺序执行而是通过回调函数、Promise、async/await等方式实现异步执行。
异步编程的优点提高程序的性能、提高用户体验。异步编程的原理事件循环。异步编程的应用Ajax、定时器、事件监听等。
回调函数
回调函数是指将一个函数作为参数传递给另一个函数当满足条件时执行回调函数。
function callback() {console.log(callback)
}function fn(callback) {callback()
}fn(callback)回调函数的优点解耦、提高代码的可维护性。回调函数的缺点回调地狱、代码难以维护。回调函数的应用Ajax、事件监听、定时器等。
举例
console.log(start)
setTimeout(() {console.log(setTimeout)
}, 0)
console.log(end)输出
start
end
setTimeout解释setTimeout是异步执行的会等到同步执行完毕后再执行。
回调地狱
setTimeout(() {console.log(1)setTimeout(() {console.log(2)setTimeout(() {console.log(3)}, 1000)}, 1000)
}, 1000)解决回调地狱的方法Promise、async/await。
Promise
Promise是ES6新增的一种异步编程解决方案用于处理异步操作。
new Promise((resolve, reject) {if (true) {resolve(成功)} else {reject(失败)}
}).then((value) {console.log(value)
}).catch((reason) {console.log(reason)
})Promise的状态pending、fulfilled、rejected。Promise的方法then、catch、finally。Promise的优点解决回调地狱、提高代码的可维护性。Promise的缺点无法取消、无法中途改变、无法多个一起执行。Promise的应用Ajax、事件监听、定时器等。
async/await
async/await是ES8新增的一种异步编程解决方案用于处理异步操作。
async function fn() {try {let value await new Promise((resolve, reject) {if (true) {resolve(成功)} else {reject(失败)}})console.log(value)} catch (reason) {console.log(reason)}
}fn()async/await的优点解决回调地狱、提高代码的可维护性。async/await的缺点无法取消、无法中途改变、无法多个一起执行。async/await的应用Ajax、事件监听、定时器等。
实践猜数游戏
代码演示
小作业选做其中任意一个有兴趣的同学可以做多个
作业1实现一个简单的轮播图效果。作业2实现一个简单的猜数游戏作业3实现一个简单的下拉菜单效果。作业4实现一个简单的模态框效果。作业5实现一个简单的时钟效果。作业6实现一个简单的瀑布流效果。作业7实现一个简单的懒加载效果。作业8实现一个简单的拖拽效果。作业9实现一个简单的放大镜效果。作业10实现一个简单的无缝滚动效果。作业11实现一个简单的图片预览效果。
