长春火车站照片,南昌网站开发制作公司,查域名备案信息,怎样设计网页的首页Web APIs 1 引入#xff1a;const优先Web API 基本认知01 作用和分类02 什么是DOM03 DOM树04 DOM对象 获取DOM对象01 根据CSS选择器获取02 其他获取DOM元素方法 操作元素内容01 innerText 属性02 innerHTML 属性 操作元素属性操作元素的常用属性操作元素的样式属性操作表单元素… Web APIs 1 引入const优先Web API 基本认知01 作用和分类02 什么是DOM03 DOM树04 DOM对象 获取DOM对象01 根据CSS选择器获取02 其他获取DOM元素方法 操作元素内容01 innerText 属性02 innerHTML 属性 操作元素属性操作元素的常用属性操作元素的样式属性操作表单元素的属性自定义属性 定时器-间歇函数案例阅读注册协议案例轮播图定时器版 ECMAScript 简称 ES 它提供了一套语言标准规范如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大部分的规范加以实现并且在此基础上又扩展一些实用的功能这些被扩展出来的内容我们称为 Web APIs。 引入const优先
const 优先
const 语义化更好很多变量我们声明的时候就知道他不会被更改了那为什么不用 const呢实际开发中也是比如react框架基本const也可以有了变量先给const如果发现它后面是要被修改的再改为let
请判断下面的变量是否能从let改成const
//不不不不不可以把let 改为 const
//因为变量进行了重新赋值
let num 1
num num 1
console.log(num)//可以把let 改为 const
let arr [red, green]
arr.push(pink)
console.log(arr)//可以把let 改为 const
let person {uname: pinkage: 18gender: 女
}
person.address 武汉黑马
console.log(person)// 这是错的
const arr [red, blue]
arr [1, 2]数组和对象是引用类型里面存储的是地址只要地址不变就不会报错
建议数组和对象使用const来声明
Web API 基本认知
01 作用和分类
作用就是使用 JS 去操作 html 和浏览器
分类DOM (文档对象模型)、BOM浏览器对象模型 02 什么是DOM
DOMDocument Object Model——文档对象模型是用来呈现以及与任意 HTML 或 XML文档交互的API
白话文DOM是浏览器提供的一套专门用来 操作网页内容 的功能
DOM作用 开发网页内容特效和实现用户交互
03 DOM树
将 HTML 文档以树状结构直观的表现出来我们称之为文档树或 DOM 树
描述网页内容关系的名词
作用文档树直观的体现了标签与标签之间的关系 最大的document节点整个页面是一个文件
04 DOM对象
DOM对象浏览器根据html标签生成的 JS对象只要是对象就会有属性和方法
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上
DOM的核心思想
把网页内容当做对象来处理
//在HTML里面叫标签
div/div//在JS里叫DOM对象
const div document.querySelector(div)
console.dir(div)document 对象 DOM里面最大的对象是document对象
是 DOM 里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的
例document.write()
网页所有内容都在document里面
获取DOM对象
01 根据CSS选择器获取
1、选择匹配的第一个元素
语法
document.querySelector(css选择器)页面所有的内容都在document对象中存放可以通过document
参数:
包含一个或多个有效的CSS选择器 字符串
返回值
CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到则返回null
示例
bodydiv classbox111/divdiv classbox222/divscriptconst box document.querySelector(div);const box2 document.querySelector(.box);console.log();console.log(box);console.log(box2);/script
/body注意只能获取第一个div
bodyp idnav/pscriptconst nav document.querySelector(#nav)const nav2 document.querySelector(p)console.log(nav);console.log(nav2);/script
/body注意 这里 id和class 是不一样的
bodyulli测试/lili测试/lili测试/li/ulscriptconst li document.querySelector(ul li)/script2、选择匹配的多个元素
语法
document.querySelectorAll(css选择器)参数:
包含一个或多个有效的CSS选择器 字符串
返回值
CSS选择器匹配的NodeList 对象集合
得到的是一个伪数组有长度有索引号的数组但是没有 pop() push() 等数组方法。想要得到里面的每一个对象则需要遍历for的方式获得。
注意哪怕只有一个元素通过querySelectAll() 获取过来的也是一个伪数组里面只有一个元素而已
案例
document.querySelectorAll(ul li)bodyul classnavli我的首页/lili产品介绍/lili联系方式/li/ulscriptconst nav document.querySelector(.nav)const lis document.querySelectorAll(ul li)for(let i0; ilis.length; i) {console.log(lis[i]); // 每一个小li对象}/script
/body
02 其他获取DOM元素方法 div idnav/divdiv classw/divdocument.getElementById(nav)
document.getElementsByClassName(w)
document.getElementsByTagName(div)操作元素内容
在获取了DOM对象之后希望能修改元素的文本更换内容 DOM对象都是根据标签生成的所以操作标签本质上就是操作DOM对象。 就是操作对象使用的点语法。 如果想要修改标签元素的里面的内容则可以使用如下几种方式
对象.innerText 属性对象.innerHTML 属性
01 innerText 属性
将文本内容添加/更新到任意标签位置
显示纯文本不解析标签
bodydiv classbox我是文字内容/divscript// 1、获取元素const box document. querySelector(.box)// 2、修改文字内容console.log(box.innerText) //获取文字内容box.innerText 我是一个盒子/script
/body02 innerHTML 属性
将文本内容添加/更新到任意标签位置
会解析标签多标签建议使用模板字符
bodydiv classbox我是文字内容/divscript// 1、获取元素const box document. querySelector(.box)// 2、修改文字内容// INNERHTMLconsole.log(box.innerHTML);box.innerHTML strong我是一个盒子/strong/script
/body案例 年会抽奖案例
需求从数组随机抽取一等奖、二等奖和三等奖显示到对应的标签里面。
思路分析
① 声明数组
② 实现随机抽取人
③ innerHTML修改 bodydiv classwrapperstrong传智教育年会抽奖/strongh1一等奖span idone???/span/h1h3二等奖span idtwo???/span/h3h5三等奖span idthree???/span/h5/divscriptlet names [周杰伦, 刘德华, 周星驰, Pink老师, 张学友]const random Math.floor(Math.random()*names.length)// console.log(names[random]);const one document.querySelector(#one)one.innerHTML names[random]names.splice(random, 1)/script
/body操作元素属性
操作元素的常用属性
常用的属性比如href, title, src
比如在HTML中 img是图片标签JS中是图像对象其中有src属性 语法 对象.属性 值 注如果原本有这个属性就修改如果无就新增。 案例 需求刷新页面页面随机显示不同的图片 分析 ①随机显示则需要用到随机函数 ②更换图片需要用到图片的 src 属性进行修改 ③核心思路 获取图片元素随机得到图片序号图片.src 图片随机路径
bodyimg src./images/1.webp altscript// 取到 N ~ M 的随机整数function getRandom(N, M) {return Math.floor(Math.random() * (M - N 1)) N}// 1. 获取图片对象const img document.querySelector(img)// 2. 随机得到序号const random getRandom(1, 6)// 3. 更换路径img.src ./images/${random}.webp/script
/body操作元素的样式属性
学习路径
通过 style 属性操作CSS适用于样式比较少的情况操作类名(className) 操作CSS多个类名操作麻烦⭐通过 classList 操作类控制CSS三个方法 add remove toggle
1 通过 style 属性操作CSS 语法对象.style.样式属性 值 这里修改之后变成行内样式优先级高 注意事项
① 修改样式通过style属性引出
② 如果属性有-连接符需要转换为小驼峰命名法。比如background-color 写成backgroundColor
③ 赋值的时候需要的时候不要忘记加css单位
bodydiv classbox/divscript// 获取对象const box document.querySelector(.box)// 修改样式box.style.height 900px //注意这里不能漏掉单位// box.style.background-color red; 这里是错的box.style.backgroundColor red// 解决方式是小驼峰命名法/script
/body
style.box {width: 200px;height: 200px;background-color: pink;}
/style案例页面刷新页面随机更换背景图片
需求当我们刷新页面页面中的背景图片随机显示不同的图片
分析
① 随机函数
② css页面背景图片 background-image
③ 标签选择body 因为body是唯一的标签可以直接写 document.body.style
2 操作类名(className) 操作CSS
如果修改的样式比较多直接通过style属性修改比较繁琐我们可以通过借助于css类名的形式。 语法元素.className ‘active’ // active是一个css类名 注意
由于class是关键字, 所以使用className去代替className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名直接使用 className 赋值会覆盖以前的类名
bodydiv classmybox/div
/bodystyle.mystyle {width: 300px;height: 300px;margin: 100px auto;border: 1px solid black;}.color {background-color: red;}
/stylescriptconst mybox document.querySelector(.mybox);mybox.className mystyle/script如果相同添加 mystyle color,只需要 mybox.className mystyle color即可
3 通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名我们可以通过classList方式追加和删除类名 语法 // 追加一个类 元素.classList.add(‘类名’) // 删除一个类 元素.classList.remove(‘类名’) // 切换一个类有就删掉没有就加上 元素.classList.toggle(‘类名’) 案例轮播图简易版 ①页面一刷新图片会随机变换 ②底部盒子背景颜色和文字内容会变换 ③小圆点随机一个高亮显示 分析
① 准备一个数组对象里面包含详细信息素材包含
② 随机选择一个数字选出数组对应的对象更换图片底部盒子背景颜色以及文字内容
③ 利用这个随机数字让小圆点添加高亮的类addClass 利用css 结构伪类选择器
bodydiv classsliderdiv classslider-wrapperimg src./images/slider01.jpg alt //divdiv classslider-footerp对人类来说会不会太超前了/pul classslider-indicatorli/lili/lili/lili/lili/lili/lili/lili/li/uldiv classtogglebutton classprevlt;/buttonbutton classnextgt;/button/div/div/divscript// 1. 初始数据const sliderData [{ url: ./images/slider01.jpg, title: 对人类来说会不会太超前了, color: rgb(100, 67, 68) },{ url: ./images/slider02.jpg, title: 开启剑与雪的黑暗传说, color: rgb(43, 35, 26) },{ url: ./images/slider03.jpg, title: 真正的jo厨出现了, color: rgb(36, 31, 33) },{ url: ./images/slider04.jpg, title: 李玉刚让世界通过B站看到东方大国文化, color: rgb(139, 98, 66) },{ url: ./images/slider05.jpg, title: 快来分享你的寒假日常吧~, color: rgb(67, 90, 92) },{ url: ./images/slider06.jpg, title: 哔哩哔哩小年YEAH, color: rgb(166, 131, 143) },{ url: ./images/slider07.jpg, title: 一站式解决你的电脑配置问题, color: rgb(53, 29, 25) },{ url: ./images/slider08.jpg, title: 谁不想和小猫咪贴贴呢, color: rgb(99, 72, 114) },]// 图片、文字、背景颜色、li都要修改//随机选中哪一个数据function getRandom(N, M) {return Math.floor(Math.random() * (M - N 1)) N}const random getRandom(1,8)// 修改图片const img document.querySelector(.slider-wrapper img)img.src sliderData[random].url// 修改文字const p document.querySelector(.slider-footer p)p.innerHTML sliderData[random].title //修改背景颜色const footer document.querySelector(.slider-footer)footer.style.backgroundColor sliderData[random].color//修改liconst lis document.querySelectorAll(.slider-indicator li)lis[random-1].classList.add(active) //这里也可以用 li:ntd-child// const li document.querySelector(.slider-indicator li:nth-child(${random}))// li.classList.add(active) /script
/body操作表单元素的属性
操作 表单元素 的属性 表单很多情况也需要修改属性比如点击眼睛可以看到密码本质是把表单类型转换为文本框 正常的有属性有取值的 跟其他的标签属性没有任何区别 操作方法 获取: DOM对象.属性名 设置: DOM对象.属性名 新值 表单的重要属性value 和 type
value是表单的值单标签的值如果是双标签的内容就是innerHTMLbutton是双标签所以不是value而是innerHTML
bodyinput typetext value电脑
/bodyscript// step 1 获取元素const uname document.querySelector(input)// step 2 获取值获取表单里面的值 用的是表单.valueconsole.log(uname.value);console.log(uname.innerHTML); //innerHTML得不到表单的内容// step 3 修改值uname.type password
/script表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
例如表单的 disabled、checked、selected bodyinput typecheckbox
/bodyscriptconst ipt document.querySelector(input)console.log(ipt.checked) // checked默认falseipt.checked true
/script注意这里 ipt.checked ’true‘ 还是会有效果但是不提倡。因为字符串里面只有空字符串着一种情况才为 false其余的全部为 true
bodybutton点击/button
/bodyscriptconst button document.querySelector(button)button.disabled true
/script自定义属性
标准属性:
标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如 disabled、checked、selected
自定义属性
在html5中推出来了专门的data-自定义属性
在标签上一律以 data- 开头
在DOM对象上一律以dataset 对象方式获取
示例
bodydiv data-id1 data-spmhaha data-hahaaa1/divdiv data-id22/divdiv data-id33/divdiv data-id44/divdiv data-id55/div
/body
scriptconst one document.querySelector(div) // 获取第一个divconsole.log(one.dataset)console.log(one.dataset.id)console.log(one.dataset.spm)console.log(one.dataset.haha)
/script定时器-间歇函数
引入
网页中经常会需要一种功能每隔一段时间需要自动执行一段代码不需要我们手动去触发。例如网页中的倒计时
要实现这种需求需要定时器函数
定时器函数有两种今天先讲间歇函数
定时器函数可以开启和关闭定时器
1. 开启定时器
setInterval(函数间隔时间)
间隔时间单位是毫秒作用每隔一段时间调用这个函数
注意 举例
// 方法1 匿名函数
script//setInterval()setInterval(function(){//匿名函数console.log(一秒执行一次);},1000)
/script// 方法2 函数
scriptfunction fn() {console.log(一秒执行一次);}setInterval(fn, 1000)//请注意代码执行到这里的时候会隔一秒之后再第一次打印
/script2. 关闭定时器
场景轮播图一般一直在播放但是用户鼠标放上去之后就应该停止
let 变量名 setInterval(函数间歇时间) //这里不可以用const
clearInterval(变量名)let timer setInterval(function() {console.log(hihihi)
}, 1000)clearInterval(timer)每一个定时器都有对应的一个号相互独立
一般不会刚创建就停止而是满足一定条件再停止
案例阅读注册协议
需求按钮60秒之后才可以使用
分析
①开始先把按钮禁用disabled 属性
②一定要获取元素
③函数内处理逻辑
秒数开始减减
按钮里面的文字跟着一起变化
如果秒数等于0 停止定时器 里面文字变为 同意 最后 按钮可以点击
bodytextarea name id cols30 rows10用户注册协议欢迎注册成为京东用户在您注册过程中您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议/textareabrbutton classbtn disabled我已经阅读用户协议(5)/button/body
scriptconst btn document.querySelector(.btn)let i 5let cl setInterval(function(){i--btn.innerHTML 我已经阅读用户协议(${i})if(i 0) {clearInterval(cl) //关闭定时器btn.disabled falsebtn.innerHTML 同意}},1000)
/script案例轮播图定时器版
需求每隔一秒钟切换一个图片
bodydiv classsliderdiv classslider-wrapperimg src./images/slider01.jpg alt //divdiv classslider-footerp对人类来说会不会太超前了/pul classslider-indicatorli class active/lili/lili/lili/lili/lili/lili/lili/li/uldiv classtogglebutton classprevlt;/buttonbutton classnextgt;/button/div/div/divscript// 1. 初始数据const sliderData [{ url: ./images/slider01.jpg, title: 对人类来说会不会太超前了, color: rgb(100, 67, 68) },{ url: ./images/slider02.jpg, title: 开启剑与雪的黑暗传说, color: rgb(43, 35, 26) },{ url: ./images/slider03.jpg, title: 真正的jo厨出现了, color: rgb(36, 31, 33) },{ url: ./images/slider04.jpg, title: 李玉刚让世界通过B站看到东方大国文化, color: rgb(139, 98, 66) },{ url: ./images/slider05.jpg, title: 快来分享你的寒假日常吧~, color: rgb(67, 90, 92) },{ url: ./images/slider06.jpg, title: 哔哩哔哩小年YEAH, color: rgb(166, 131, 143) },{ url: ./images/slider07.jpg, title: 一站式解决你的电脑配置问题, color: rgb(53, 29, 25) },{ url: ./images/slider08.jpg, title: 谁不想和小猫咪贴贴呢, color: rgb(99, 72, 114) },]// 获取元素const img document.querySelector(.slider-wrapper img)const p document.querySelector(.slider-footer p)const footer document.querySelector(.slider-footer)//开启定时器let i 0setInterval(function() {//刚打开网页的时候默认了第一张图片所以定时器应该从第二张开始ii i % 8// console.log(sliderData[i]);img.src sliderData[i].urlp.innerHTML sliderData[i].titlefooter.style.backgroundColor sliderData[i].color//先删除以前的active document.querySelector(.slider-indicator .active).classList.remove(active)//找出当前的 .active然后删掉//注意在HTML中一定一定在最开始需要加上 一个 active//只让当前li添加 activedocument.querySelector(.slider-indicator li:nth-child(${i1})).classList.add(active)// 数组从0开始小li从1开始}, 1000)/script
/body/html
