怎么建设国际网站首页,wordpress轻语博客,网站做支付需要什么备案,深圳品牌女装品牌大全WebAPI知识详解day11.Web API 基本认知作用和分类什么是DOM#xff1f;DOM树的概念DOM对象2.获取DOM对象通过css选择器获取dom对象通过其他方法获取dom3.设置/修改DOM元素内容方法1. document.write() 方法方法2. 对象.innerText 属性方法3. 对象.innerHTML4.设置/修改DOM元素…
WebAPI知识详解day11.Web API 基本认知作用和分类什么是DOMDOM树的概念DOM对象2.获取DOM对象通过css选择器获取dom对象通过其他方法获取dom3.设置/修改DOM元素内容方法1. document.write() 方法方法2. 对象.innerText 属性方法3. 对象.innerHTML4.设置/修改DOM元素属性案列一随机点名**通过style修改样式**案列二随机展示图片**通过classname修改样式**通过 classList 操作类控制CSS设置/修改 表单元素 属性5.定时器-间歇函数开启定时器关闭定时器定时器6.综合案例day21.事件事件监听拓展阅读-事件监听版本事件类型2.高阶函数表达式回调函数具体操作3.环境对象this操作4.编程思想排他思想概念具体操作5.综合案例day31.节点操作DOM 节点查找节点增加节点删除节点2. 时间对象实例化时间对象方法时间戳3.综合案例微博发布案例列重绘和回流day41. 事件对象获取事件对象事件对象常用属性2.事件流事件流与两个阶段说明事件捕获和事件冒泡阻止事件流动3.事件委托4.综合案例day5滚动事件和加载事件滚动事件加载事件元素大小和位置1 scroll家族2 offset家族3 client家族day6Window对象BOM(浏览器对象模型)定时器-延时函数JS执行机制location对象navigator对象histroy对象swiper 插件本地存储综合案例day7正则表达式• 介绍• 语法• 元字符• 修饰符day1
1.Web API 基本认知
作用和分类
作用: 就是使用 JS 去操作 html 和浏览器 分类DOM (文档对象模型)、BOM浏览器对象模型
什么是DOM
DOM是浏览器提供的一套专门用来 操作网页内容 的功能
DOM树的概念
将 HTML 文档以树状结构直观的表现出来我们称之为文档树或 DOM 树 描述网页内容关系的名词 作用文档树直观的体现了标签与标签之间的关系
DOM对象
概念浏览器根据html标签生成的 JS对象说白了就是类似java的那种面向对象的对象 document 对象 是 DOM 里提供的一个对象 它提供的属性和方法都是用来访问和操作网页内容的 例document.write() 网页所有内容都在document里面
2.获取DOM对象
通过css选择器获取dom对象
qs和qsa选则部分和多个 语法 2.1下面表示只选则一个选择器 特别强调里面必须是字符串也就是必须加引号
document.querySelector(css属性选择器)
//注意这里的css选择器就是之前学css的那些比如像divspan之类的东西返回值 CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到则返回null。 2.2下面表示选则多个选择器的语法 注意区别
document.querySelectorAll(ul li)CSS选择器匹配的NodeList 对象集合 注意qsa全选最终返回的元素是一个数组形式的我们想得到的话要用for循环进行遍历 for循环遍历全选的实操如下 div我是一个盒子/divdiv我是er个盒子/divdiv classthree我是三个盒子/divulli1/lili2/lili3/li/ulspan就1个/spanscript// 1. js 获取 第一个元素 // let div document.querySelector(div)// let div document.querySelector(.three)// console.log(div)// let li document.querySelector(ul li:last-child)// console.log(li)// 2. 获取多个元素 伪数组let lis document.querySelectorAll(ul li)// console.log(lis) [div, div, div]// 通过遍历的方式获得里面的每一个dom对象元素for (let i 0; i lis.length; i) {console.log(lis[i])}let span document.querySelectorAll(span)console.log(span)/script注意上面li标签和span标签都是采用全选并且控制台打印输出但是结果却呈现下面不同的结果第四个就是span遍历的时候因为不是for遍历的是直接打印的结果就出错
通过其他方法获取dom 3.设置/修改DOM元素内容
方法1. document.write() 方法
直接就在页面就打印出来了跟前面input差不多
方法2. 对象.innerText 属性
下面的html元素已经把这个的作用包括完了主要讲下面的东西
方法3. 对象.innerHTML // 1. 获取标签(元素)let box document.querySelector(div)// 2. 修改标签元素内容 box是对象 innerText 属性// 对象.属性 值 不识别标签// box.innerText 有点意思~// box.innerText strong有点意思~/strong// 3. innerHTML解析标签box.innerHTML strong有点意思~/strong这里的innerHTML后面可以添加任何文字类的东西不过需要注意的是要用单引号包括起来4.设置/修改DOM元素属性 案列一随机点名 // 1. 获取元素let box document.querySelector(div)// 2. 得到随机的名字// 随机数要求背过function getRandom(min, max) {return Math.floor(Math.random() * (max - min 1)) min}// 声明一个数组let arr [赵云, 黄忠, 关羽, 张飞, 马超, 刘备, 曹操, pink老师]// 生成1个随机数 作为数组的索引号取得随机数对象let 对象getRandom开始下标结束下标let random getRandom(0, arr.length - 1)// console.log(random)// 3. 写入标签内部box.innerHTML arr[random]// 之后删除这个 人的名字// arr.splice(从哪里开始删 删几个)arr.splice(random, 1)// console.log(arr)通过style修改样式 案列二随机展示图片 img src./images/1.webp altscript// 1. 获取图片元素let pic document.querySelector(img)// 2. 随机得到图片序号function getRandom(min, max) {return Math.floor(Math.random() * (max - min 1)) min}let num getRandom(1, 6)// 3. 完成src 属性赋值pic.src ./images/${num}.webp/script通过classname修改样式
解释这个操作的目的就是用一个新的类名且新的操作来修改原来的样式将原来的类名和操作样式更换 实操演示 div {width: 200px;height: 200px;background-color: pink;}.active {width: 300px;height: 300px;background-color: hotpink;margin-left: 100px;}/style
/head
bodydiv classone/divscript// 1.获取元素let box document.querySelector(div)//修改样式box.className one active/script通过 classList 操作类控制CSS script// 1.获取元素// let box document.querySelector(css选择器)let box document.querySelector(div)// add是个方法 添加 追加,这个相当于就是在类名后面加个active的名字box.classList.add(active)// remove() 移除 类移除相当于就是把类名删除了但是这个盒子的长宽高和颜色依旧保留box.classList.remove(one)// 切换类就是两个类名的css选择器能一个能切换到宁外个去转换类名//one类中盒子是黑色然后我可以切换到是白色的two类中去最后显示白色盒子// box.classList.toggle(one)/script设置/修改 表单元素 属性 input typetext value请输入button disabled按钮/buttoninput typecheckbox name id classagreescript// 1. 获取元素let input document.querySelector(input)// 2. 取值或者设置值 得到input里面的值可以用 value// console.log(input.value)input.value 小米手机input.type password// 2. 启用按钮let btn document.querySelector(button)// disabled 不可用 false 这样可以让按钮启用btn.disabled false// // 3. 勾选复选框let checkbox document.querySelector(.agree)checkbox.checked true/script5.定时器-间歇函数
开启定时器 关闭定时器 定时器
script//就是网页上常见的那个效果打开网页自动翻页那个//语法 setInterval(函数间隔时间)//上面的语法表示 每隔一个时间就调用一次那个时间函数// setInterval(function () {// console.log(高薪就业)// }, 1000)function show() {console.log(月薪过2万)}let timer setInterval(show, 1000)// let timer1 setInterval(show, 1000)// 清除定时器,就是停止在定时操作// clearInterval(timer)/script6.综合案例 // 数据 let data [ { imgSrc: ‘images/b01.jpg’, title: ‘挑战云歌单欢迎你来’ }, { imgSrc: ‘images/b02.jpg’, title: ‘田园日记上演上京记’ }, { imgSrc: ‘images/b03.jpg’, title: ‘甜蜜攻势再次回归’ }, { imgSrc: ‘images/b04.jpg’, title: ‘我为歌狂生为歌王’ }, { imgSrc: ‘images/b05.jpg’, title: ‘年度校园主题活动’ }, { imgSrc: ‘images/b06.jpg’, title: ‘pink老师新歌发布5月10号正式推出’ }, { imgSrc: ‘images/b07.jpg’, title: ‘动力火车来到西安’ }, { imgSrc: ‘images/b08.jpg’, title: ‘钢铁侠3英雄镇东风’ }, { imgSrc: ‘images/b09.jpg’, title: ‘我用整颗心来等你’ }, ] //获取元素图片和h3 let pic document.querySelector(‘.pic’) let text document.querySelector(‘.text’) let i 0//记录图片的张数 //因为这几张图片都是采用的是数组存储的方式那么我们可以通过数组下标类似于遍历的做法 //2开启定时器setInterval(function () {i//因为点开了网页首先显示的是i0即第一张图片然后第二张图片进行操作//并且图片换了那么图片里的字也要换//则修改图片中的src属性pic.src data[i].imgSrc//这句话的意思相当于就是前面pic.src表示重定值//后面的date[i]表示date数组中第i个元素的值然后又调用imgSrc表示将date数组中进行i加到哪个数//然后那个对应的图片的路径赋值给pic对象中的src属性//简单地说上面的操作就是按到顺序来进行图片换图片text.innerHTML data[i].title//然后有一个值得注意的点就是//图片和文字只有9张那么在数组里头相当于就是只有0-8的索引号//我们想要的效果就是第九张图片播放完了然后会接着播放就是那种循环的效果//那么这里就可以设置循环来播放// 无缝衔接if (i data.length - 1) {i -1}// i 8 ? i -1 : i}, 1000)day2
1.事件
什么是事件 事件是在编程时系统内发生的动作或者发生的事情 比如用户在网页上单击一个按钮 就是一个
事件监听
什么是事件监听 就是让程序检测是否有事件产生一旦有事件触发就立即调用一个函数做出响应也称为 注册事件 语法 实操 解释步骤就两步 1获取元素用个变量来接 2变量名addEventListener(‘事件’, 事件处理函数) 注意;这里的事件可以是点击click还有就是后面的会学的鼠标移开的事件 button点击我/buttonscript//1. 获取按钮元素let btn document.querySelector(button)//2. 事件监听 绑定事件 注册事件 事件侦听// 事件源.addEventListener(事件, 事件处理函数)btn.addEventListener(click, function () {alert(月薪过万)})/script案列关闭二维码 script// 1. 获取元素 事件源 i 关闭的 erweima let close_btn document.querySelector(.close_btn)let erweima document.querySelector(.erweima)// 2. 事件监听close_btn.addEventListener(click, function () {// erweima 关闭 他是隐藏的erweima.style.display none})/script拓展阅读-事件监听版本 事件类型 案列小米搜索框 涉及到;focus和burl两个事件。具体含义如下 Focus事件当元素获得焦点时触发focus事件。当通过鼠标点击或选中元素或通过tab键定位到元素时该元素就会获得焦点。Focus()方法触发focus事件或规定当发生focus事件是运行的函数。 Blur事件会在元素失去焦点时触发既可以是鼠标行为也可以是按tab键离开的。与foucsout一样元素失去焦点时触发。两者唯一的区别存在于foucsout可以在父 元素上检测子元素失去焦点的情况。 当元素获得焦点时触发focus事件执行focus函数。失去焦点时触发blur事件执行blur函数。 // 1. 获取元素 input let search document.querySelector(input)let list document.querySelector(.result-list)// 2. 事件监听 获得光标事件 focus个人理解他这里的获取标focus应该意思应该就是鼠标一点了过后search.addEventListener(focus, function () {// 显示下拉菜单list.style.display block// 文本框变色this.classList.add(search)})// 3. 事件监听 失去光标事件 blursearch.addEventListener(blur, function () {// 隐藏下拉菜单list.style.display none// 文本框去色this.classList.remove(search)})效果 案列二全选文本框
script// 1. 获取元素 全选 和 ck 小复选框let all document.querySelector(#checkAll)let cks document.querySelectorAll(.ck)let span document.querySelector(span)// 2. 事件监听 全选按钮 all.addEventListener(click, function () {// console.log(all.checked) // true false // 我们需要做的就是把 all.checked 给下面三个小按钮// 因为三个按钮在伪数组里面我们需要遍历的方式挨着取出来依次给值for (let i 0; i cks.length; i) {cks[i].checked all.checked}// 当我们的全选按钮处于选中状态则可以改为取消if (all.checked) {// console.log(要改)span.innerHTML 取消} else {span.innerHTML 全选}})// 3. 小按钮的做法 同时给多个元素绑定相同事件for (let i 0; i cks.length; i) {// 绑定事件cks[i].addEventListener(click, function () {// console.log(11)// 只要点击任何一个小按钮都要遍历所有的小按钮 for (let j 0; j cks.length; j) {// 都来看看是不是有人没有选中if (cks[j].checked false) {// 如果有false 则退出循环 结束函数all.checked falsespan.innerHTML 全选return}}// 当我们的循环结束如果代码走到这里说明没有false都被选中了则全选按钮要选中all.checked truespan.innerHTML 取消})}注意这里省略了一个发布文字的案列那个效果就是你发布文字他能显示出你写了多少字‘了并且还会有个字数限制
2.高阶函数
表达式 回调函数 具体操作
scriptlet num 10//函数表达式let fn function () { }btn.onclick function () { }// 高阶函数 函数的高级用法把函数当值来看看// 回调函数// setInterval(function(){}, 1000)function fn() { }setInterval(fn, 1000)// 此时 fn 就是回调函数 回头去调用的函数box.addEventListener(click, fun)function fun() {}/script3.环境对象
this 操作 button点击/buttonscript// 环境对象 this 他就是个对象function fn() {console.log(this)//这里会打印出结果也就是window因为window指向了这个对象}// fn()window.fn()///let btn document.querySelector(button)btn.addEventListener(click, function () {console.log(typeof this)// 会打印btn 因为btn 调用了这个函数所以 this 指向btn})/script4.编程思想
排他思想
概念
排他思想就相当于是网页中的那种操作两个相同的css选择器中比如两个黑白色的盒子然后我们想得到白色的盒子就先要让两个盒子先采用for循环给每个都添加事件然后采用第二个for移除每个对象加的事件最后用环境对象this把自己添加事件也就是通俗意义上的复活
具体操作 button第1个/buttonbutton第2个/buttonbutton第3个/buttonbutton第4个/buttonbutton第5个/buttonscriptlet btns document.querySelectorAll(button)for (let i 0; i btns.length; i) {btns[i].addEventListener(click, function () {// this.classList.add(pink)// 干掉所有人for (let j 0; j btns.length; j) {btns[j].classList.remove(pink)}// 复活我自己this.classList.add(pink)})}/script案列
5.综合案例
day3
1.节点操作
DOM 节点
概念DOM树里每一个内容都称之为节点
查找节点 子元素.parentNode父节点操作 div classfatherdiv classson儿子/div/divscript子元素.parentNodelet son document.querySelector(.son)// 找爸爸// console.log(son.parentNode)son.parentNode.style.display none/script案列关闭二维码就是给二维码打×就会关闭二维码照片
script// 1. 获取元素 关闭按钮let close_btn document.querySelectorAll(.close)// 2. 绑定多个点击事件给closefor (let i 0; i close_btn.length; i) {close_btn[i].addEventListener(click, function () {// 3. 关闭当前的那个二维码 点击谁就关闭谁的爸爸this.parentNode.style.visibility hidden})}/script子节点操作 语法
父元素.children操作就是一点按钮会把几个小li变色 let btn document.querySelector(button)let ul document.querySelector(ul)btn.addEventListener(click, function () {// console.log(ul.children)for (let i 0; i ul.children.length; i) {ul.children[i].style.color red}})ul.children[0].style.color green// console.log(ul.childNodes)兄弟节点操作 实操
button点击/buttonulli第1个/lili classtwo第2个/lili第3个/lili第4个/li/ulscriptlet btn document.querySelector(button)let two document.querySelector(.two)btn.addEventListener(click, function () {// two.style.color redtwo.nextElementSibling.style.color redtwo.previousElementSibling.style.color red})/script增加节点 语法
document.createElement实操
ulli我是大毛/lili我是二毛/li/ulscript// 二毛 ul.children[1]// 1. 创建新的标签节点// let div document.createElement(div)// div.className currentlet ul document.querySelector(ul)let li document.createElement(li)li.innerHTML 我是xiao ming// 2. 追加节点 父元素.appendChild(子元素) 后面追加// ul.appendChild(li)// 3. 追加节点 父元素.insertBefore(子元素 放到那个元素的前面) ul.insertBefore(li, ul.children[0])/script追加节点 克隆节点
删除节点 操作 button点击/buttonulli我是内容11111/li/ulscript// 需求点击按钮删除小lilet btn document.querySelector(button)let ul document.querySelector(ul)btn.addEventListener(click, function () {// 删除的语法 父元素.removeChild(子元素)ul.removeChild(ul.children[0])})/script2. 时间对象
时间对象用来表示时间的对象 作用可以得到当前系统时间
实例化 let date new Date()console.log(date)// 小括号里面写上时间可以返回指定的时间 let last new Date(2021-8-29 18:30:00)console.log(last)作用在控制台输出打印可以得到当前时间和指定时间不过都是英文格式的时间
时间对象方法 // new 实例化 时间对象// 小括号为空可以得到当前的时间let date new Date()console.log(date.getFullYear())console.log(date.getMonth() 1)console.log(date.getDate())// 时分秒console.log(date.getHours())console.log(date.getMinutes())console.log(date.getSeconds())// 星期几console.log(date.getDay())
结果 案列页面显示的时间 let arr [星期日, 星期一, 星期二, 星期三, 星期四, 星期五, 星期六]let div document.querySelector(div)// 先调用就省去了1秒的空白期getTime()setInterval(getTime, 1000)function getTime() {// 1. 实例化时间对象 一定写到定时器里面才可以额let date new Date()let year date.getFullYear()let month date.getMonth() 1let date1 date.getDate()let hour date.getHours()let min date.getMinutes()let sec date.getSeconds()let day date.getDay()div.innerHTML 今天是 ${year}年${month}月${date1}日 ${hour}:${min}:${sec} ${arr[day]}}时间戳 获取当前时间戳
理解通俗地说就是返回从1970年后到现在时间的毫秒值 时间戳的操作 // 时间戳是总的毫秒数 是独一无二的 // 计算倒计时 核心思想:// 将来时间 9.1 12:00 有一个时间戳 2000000// 现在的时间 8.29 15:00 有一个时间戳 1000000// 可以利用将来的时间戳 减去 现在的时间戳 就是剩余的时间毫秒数// 转换为时分秒就是剩余的时间了// 1. getTime()// let date new Date()// console.log(date.getTime())// 2. new Date()console.log(new Date()) // 当前的时间戳console.log(new Date(2023-8-30 12:00:00)) // 指定时间的时间戳// 3. 只能得到当前的// console.log(Date.now())显示 关于时间戳的倒计时案列
let hour document.querySelector(#hour)let minutes document.querySelector(#minutes)let scond document.querySelector(#scond)time()setInterval(time, 1000)function time() {// 1. 得到现在的时间戳let now new Date()// 2. 得到指定时间的时间戳let last new Date(2023-1-22 00:00:00)// 3. 计算剩余的毫秒数 / 1000 剩余的秒数let count (last - now) / 1000// console.log(count)// 4. 转换为时分秒// h parseInt(总秒数 / 60 / 60 % 24) // 计算小时let h parseInt(count / 60 / 60 % 24)h h 10 ? 0 h : h// m parseInt(总秒数 / 60 % 60); // 计算分数let m parseInt(count / 60 % 60)m m 10 ? 0 m : m// s parseInt(总秒数 % 60); // 计算当前秒数let s parseInt(count % 60);s s 10 ? 0 s : s// console.log(h, m, s)hour.innerHTML hminutes.innerHTML mscond.innerHTML s}3.综合案例
微博发布案例列 script// maxlength 是一个表单属性, 作用是给表单设置一个最大长度// 模拟数据let dataArr [{ uname: 司马懿, imgSrc: ./images/9.5/01.jpg },{ uname: 女娲, imgSrc: ./images/9.5/02.jpg },{ uname: 百里守约, imgSrc: ./images/9.5/03.jpg },{ uname: 亚瑟, imgSrc: ./images/9.5/04.jpg },{ uname: 虞姬, imgSrc: ./images/9.5/05.jpg },{ uname: 张良, imgSrc: ./images/9.5/06.jpg },{ uname: 安其拉, imgSrc: ./images/9.5/07.jpg },{ uname: 李白, imgSrc: ./images/9.5/08.jpg },{ uname: 阿珂, imgSrc: ./images/9.5/09.jpg },{ uname: 墨子, imgSrc: ./images/9.5/10.jpg },{ uname: 鲁班, imgSrc: ./images/9.5/11.jpg },{ uname: 嬴政, imgSrc: ./images/9.5/12.jpg },{ uname: 孙膑, imgSrc: ./images/9.5/13.jpg },{ uname: 周瑜, imgSrc: ./images/9.5/14.jpg },{ uname: 老夫子, imgSrc: ./images/9.5/15.jpg },{ uname: 狄仁杰, imgSrc: ./images/9.5/16.jpg },{ uname: 扁鹊, imgSrc: ./images/9.5/17.jpg },{ uname: 马可波罗, imgSrc: ./images/9.5/18.jpg },{ uname: 露娜, imgSrc: ./images/9.5/19.jpg },{ uname: 孙悟空, imgSrc: ./images/9.5/20.jpg },{ uname: 黄忠, imgSrc: ./images/9.5/21.jpg },{ uname: 百里玄策, imgSrc: ./images/9.5/22.jpg },]// 需求1检测用户输入字数// 1. 注册input事件// 2. 将文本的内容的长度赋值给对应的数值// 3. 表单的maxlength属性可以直接限制在200个数之间let textarea document.querySelector(textarea)let useCount document.querySelector(.useCount)// 发布按钮let send document.querySelector(#send)// ullet ul document.querySelector(#list)textarea.addEventListener(input, function () {// console.log(this.value.length)// this.value可以获取当前输入的值那么就可以想方法把this的value输入值和那个串联起来useCount.innerHTML this.value.length})// 需求2 输入不能为空注意观察就是在输入框里点了一下然后你按空格他这里面也会计入数值的我们就需要设置判断条件让他按空格之后不会算字符数并且发布不能为空// 点击button之后判断// 判断如果内容为空则提示不能输入为空, 并且直接return 不能为空// 防止输入无意义空格, 使用字符串.trim()去掉首尾空格// console.log( str)// console.log( str .trim())// 并将表单的value值设置为空字符串// 同时下面红色为设置为0send.addEventListener(click, function () {if (textarea.value.trim() ) {// 并将表单的value值设置为空字符串textarea.value // 同时下面红色为设置为0useCount.innerHTML 0return alert(内容不能为空)}// 随机数function getRandom(min, max) {return Math.floor(Math.random() * (max - min 1)) min}let random getRandom(0, dataArr.length - 1)// 需求3 新增留言 写到send 的里面// 创建一个小li然后里面通过innerHTML追加数据注意这里的creatElment是创建一个新的节点的意思表示随着新发布一个评论多一个新节点let li document.createElement(li)// 随机获取数据数组里面的内容, 替换newNode的图片和名字以及留言内容注意这里的innerHTML表示的意思是追加的意思表示新添加一个li.innerHTML div classinfoimg classuserpic src${dataArr[random].imgSrc}span classusername${dataArr[random].uname}/spanp classsend-time ${new Date().toLocaleString()} /p/divdiv classcontent${textarea.value}/divspan classthe_delX/span// 需求4删除留言 放到追加的前面// 在事件处理函数里面获取点击按钮, 注册点击事件// (易错点: 必须在事件里面获取, 外面获取不到)// 删除对应的元素(通过this获取对应的那条需要删除的元素)// 教你一招: 放到追加进ul的前面这样创建元素的同时顺便绑定了事件赞~~// 使用 li.querySelector()let del li.querySelector(.the_del)del.addEventListener(click, function () {// 删除操作 点击的是X 删除的小li 父元素.removeChild(子元素)ul.removeChild(li)})// 利用时间对象将时间动态化 new Date().toLocaleString()// 追加给 ul 用 父元素.insertBefore(子元素, 那个元素的前面)ul.insertBefore(li, ul.children[0])// 需求5重置// 将表单域内容重置为空// 将userCount里面的内容重置为0textarea.value // 同时下面红色为设置为0useCount.innerHTML 0})/script重绘和回流 day4
1. 事件对象
获取事件对象 写法 button点击/buttonscriptlet btn document.querySelector(button)btn.addEventListener(mouseenter, function (e) {console.log(e)})事件对象常用属性 // mousemove 鼠标移动事件document.addEventListener(click, function (e) {// console.log(11)// pageX 和 pageY 跟文档坐标有关系// console.log(e)console.log(clientX: e.clientX, clientY: e.clientY)console.log(pageX: e.pageX, pageY: e.pageY)console.log(offsetX: e.offsetX, offsetY: e.offsetY)})案列
document.addEventListener(mousemove, function (e) {// 不断得到当前的鼠标坐标// console.log(e.pageX)// console.log(e.pageY)// 把坐标给图片// img.style.left 100pximg.style.left e.pageX - 50 pximg.style.top e.pageY - 40 px})2.事件流
事件流与两个阶段说明
说明假设页面里有个div当触发事件时会经历两个阶段分别是捕获阶段、冒泡阶段 简单来说捕获阶段是 从父到子 冒泡阶段是从子到父
事件捕获和事件冒泡 let fa document.querySelector(.father)let son document.querySelector(.son)fa.addEventListener(click, function () {alert(我是爸爸)}, true)son.addEventListener(click, function () {alert(我是儿子)}, true)document.addEventListener(click, function () {alert(我是爷爷)}, true)
注意就是这里的末尾添加了true表示确认事件捕获
点击后界面弹出来的是自上而下的爷父子然而如果去掉true或者设置为false就会成事件捕获即自上而下子父爷的弹出// btn.onclick function() {}阻止事件流动 let fa document.querySelector(.father)let son document.querySelector(.son)fa.addEventListener(click, function (e) {alert(我是爸爸)e.stopPropagation()这里就是具体的用法})son.addEventListener(click, function (e) {alert(我是儿子)// 阻止流动 Propagation 传播e.stopPropagation()})document.addEventListener(click, function () {alert(我是爷爷)})
鼠标经过事件 推荐还是主要写mouseenter和mouseleave 因为前面的mouseover和mouseout会产生冒泡即就是在鼠标移动的时候会自动增加 let fa document.querySelector(.father)let son document.querySelector(.son)fa.addEventListener(mouseenter, function () {console.log(111)})默认阻止事件
a hrefhttp://www.baidu.com跳转到百度/ascriptlet a document.querySelector(a)a.addEventListener(click, function (e) {// 阻止默认行为 方法e.preventDefault()})/script两种注册事件对比 button点击/buttonscriptlet btn document.querySelector(button)// 1.l0 on// 多次相同的事件只执行最后一次// btn.onclick function () {// alert(第一次)// }// btn.onclick function () {// alert(第二次)// }// 解绑事件// btn.onclick null// 2. addEventListenerbtn.addEventListener(click, add)function add() {alert(第一次)}// btn.addEventListener(click, function () {// alert(第二次)// })btn.removeEventListener(click, add)/script3.事件委托 script// 不要每个小li注册事件了 而是把事件委托给他的爸爸 // 事件委托是给父级添加事件 而不是孩子添加事件let ul document.querySelector(ul)ul.addEventListener(click, function (e) {// alert(我点击了)// 得到当前的元素// console.log(e.target)e.target.style.color red})/script4.综合案例 // 1. 准备好数据后端的数据let arr [{ stuId: 1001, uname: 欧阳霸天, age: 19, gender: 男, salary: 20000, city: 上海 },{ stuId: 1002, uname: 令狐霸天, age: 29, gender: 男, salary: 30000, city: 北京 },{ stuId: 1003, uname: 诸葛霸天, age: 39, gender: 男, salary: 2000, city: 北京 },]// 获取父元素 tbodylet tbody document.querySelector(tbody)// 添加数据按钮 // 获取录入按钮let add document.querySelector(.add)// 获取各个表单的元素let uname document.querySelector(.uname)let age document.querySelector(.age)let gender document.querySelector(.gender)let salary document.querySelector(.salary)let city document.querySelector(.city)// 渲染函数 把数组里面的数据渲染到页面中function render() {// 先干掉以前的数据 让tbody 里面原来的tr 都没有tbody.innerHTML // 在渲染新的数据// 根据数据的条数来渲染增加 tr for (let i 0; i arr.length; i) {// 1.创建tr let tr document.createElement(tr)// 2.tr 里面放内容tr.innerHTML td${arr[i].stuId}/tdtd${arr[i].uname}/tdtd${arr[i].age}/tdtd${arr[i].gender}/tdtd${arr[i].salary}/tdtd${arr[i].city}/tdtda hrefjavascript: id${i}删除/a/td// 3.把tr追加给 tobdy 父元素.appendChild(子元素)tbody.appendChild(tr)}}// 页面加载就调用函数render()add.addEventListener(click, function () {// alert(11)// 获得表单里面的值 之后追加给 数组 arr 用 push方法arr.push({// 得到数组最后一条数据的学号 1003 1stuId: arr[arr.length - 1].stuId 1,uname: uname.value,age: age.value,gender: gender.value,salary: salary.value,city: city.value})// console.log(arr)// 重新渲染我们的函数render()// 复原所有的表单数据uname.value age.value salary.value gender.value 男city.value 北京})// 删除操作 删除的也是数组里面的数据 但是我们用事件委托tbody.addEventListener(click, function (e) {// alert(11)// 我们只能点击了链接 a 才会执行删除操作// 那我们怎么知道你点击了a呢// 俺们只能点击了链接才能做删除操作// console.dir(e.target.tagName)if (e.target.tagName A) {// alert(你点击了链接)// 删除操作 删除 数组里面的数据 arr.splice(从哪里开始删1)// 我要得到a的id 需要// console.log(e.target.id)arr.splice(e.target.id, 1)// 重新渲染我们的函数render()}})/scriptday5
滚动事件和加载事件
滚动事件 div我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字/divscriptlet div document.querySelector(div)window.addEventListener(scroll, function () {console.log(111)})// div.addEventListener(scroll, function () {// console.log(111)// })/script加载事件 元素大小和位置
1 scroll家族
使用场景 我们想要页面滚动一段距离比如100px就让某些元素 显示隐藏那我们怎么知道页面滚动了100像素呢 就可以使用scroll 来检测页面滚动的距离~~ 在这里插入图片描述
2 offset家族
使用场景 前面案例滚动多少距离都是我们自己算的最好是页面 滚动到某个元素就可以做某些事。 简单说就是通过js的方式得到元素在页面中的位置 这样我们可以做页面滚动到这个位置就可以返回 顶部的小盒子显示
3 client家族 day6
Window对象
BOM(浏览器对象模型) 定时器-延时函数 两种定时器对比 setInterval 的特征是重复执行首次执行会延时 setTimeout 的特征是延时执行只执行 1 次 setTimeout 结合递归函数能模拟 setInterval 重复执行 clearTimeout 清除由 setTimeout 创建的定时任务
JS执行机制 JavaScript 语言的一大特点就是单线程也就是说同一个时间只能做一件事。这是因为 Javascript 这 门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互以及操作 DOM 而诞生的。比 如我们对某个 DOM 元素进行添加和删除操作不能同时进行。 应该先进行添加之后再删除。 单线程就意味着所有任务需要排队前一个任务结束才会执行后一个任务。这样所导致的问 题是 如果 JS 执行的时间过长这样就会造成页面的渲染不连贯导致页面渲染加载阻塞的感觉。 location对象 navigator对象 histroy对象 swiper 插件 本地存储
3.1 本地存储特性 随着互联网的快速发展基于网页的应用越来越普遍同时也变的越来越复杂为了满足各种各样的需求会经常性在 本地存储大量的数据HTML5规范提出了相关解决方案。 1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大sessionStorage和localStorage约 5M 左右
3.2 localStorage 1、生命周期永久生效除非手动删除 否则关闭页面也会存在 2、可以多窗口页面共享同一浏览器可以共享 3. 以键值对的形式存储使用
综合案例 day7
正则表达式
• 介绍 • 语法 • 元字符 为了方便记忆和学习我们对众多的元字符进行了分类
边界符表示位置开头和结尾必须用什么开头用什么结尾量词 表示重复次数字符类 比如 \d 表示 0~9
• 修饰符
