网站建设应注意哪些事项,网站是否能够被恶意镜像,wordpress 自动收录,做商务网站需要什么资料目录 Web APIs第一天Dom获取属性操作Web API基本认知变量声明作用和分类什么是DOMDOM树DOM对象 获取Dom对象根据CSS选择器来获取DOM元素#xff08;重点#xff09;其他获取DOM元素方法#xff08;了解#xff09; 操作元素内容对象.innerText 属性对象.innerHTML 属性… 目录 Web APIs第一天Dom获取属性操作Web API基本认知变量声明作用和分类什么是DOMDOM树DOM对象 获取Dom对象根据CSS选择器来获取DOM元素重点其他获取DOM元素方法了解 操作元素内容对象.innerText 属性对象.innerHTML 属性年会抽奖案例 操作元素属性操作元素常用属性操作元素样式属性操作表单元素属性自定义属性 定时器-间歇函数定时器函数介绍定时器函数基本使用 综合案例 Web APIs第一天
Dom获取属性操作
Web API基本认知
变量声明
变量声明有三个 var let 和 const
建议 const 优先尽量使用const原因是
const 语义化更好很多变量我们声明的时候就知道他不会被更改了那为什么不用 const呢实际开发中也是比如react框架基本const
⭐️有了变量先给const如果发现它后面是要被修改的再改为let
以下可以把let改成const let arr [red,green]arr.push(pink)console.log(arr) let person {uname:pink老师,age:18,gender:女}person.address 武汉黑马console.log(person)const 声明的值不能更改而且const声明变量的时候需要里面进行初始化但是对于引用数据类型const声明的变量里面存的不是 值不是值不是值是 地址。
const arr [1,2,3]// 错误他们地址不一样const names []names [1,2,3]const obj {}obj {uname:pink老师}// 正确const names []names [1,2,3]const obj {}obj {uname:pink老师}作用和分类
作用: 就是使用 JS 去操作 html 和浏览器
API分类DOM (文档对象模型)、BOM浏览器对象模型 什么是DOM
DOMDocument Object Model——文档对象模型是用来呈现以及与任意 HTML 或 XML文档交互的API白话文DOM是浏览器提供的一套专门用来 操作网页内容 的功能DOM作用开发网页内容特效和实现用户交互
DOM树
DOM树是什么
将 HTML 文档以树状结构直观的表现出来我们称之为文档树或 DOM 树
描述网页内容关系的名词
作用文档树直观的体现了标签与标签之间的关系 DOM对象
DOM对象浏览器根据html标签生成的 JS对象
所有的标签属性都可以在这个对象上面找到修改这个对象的属性会自动映射到标签身上
DOM的核心思想
把网页内容当做对象来处理
document 对象
是 DOM 里提供的一个对象所以它提供的属性和方法都是用来访问和操作网页内容的例document.write()网页所有内容都在document里面
bodydiv123/divscriptconst div document.querySelector(div)// 打印对象console.dir(div) // dom 对象/script
/body获取Dom对象
根据CSS选择器来获取DOM元素重点
⭐️1.选择匹配的第一个元素
语法
document.querySelector(css选择器)参数
包含一个或多个有效的CSS选择器 字符串
返回值
CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到则返回null。
bodydiv123/divdivabc/divscript// 获取第一个匹配元素const box document.querySelector(div)console.log(box)/script
/bodybodyp idnav导航栏/pscriptconst nav document.querySelector(#nav)console.log(nav)/script
/bodybodyulli测试1/lili测试2/lili测试3/li/ul/script --scriptconst li document.querySelector(ul li:first-child)console.log(li)/script
/body⭐️2.选择匹配的多个元素
语法
document.querySelectorAll(css选择器)参数:
包含一个或多个有效的CSS选择器 字符串
返回值
CSS选择器匹配的NodeList 对象集合
例如
document.querySelectorAll(ul li)得到的是一个伪数组
有长度有索引号的数组但是没有 pop() push() 等数组方法
想要得到里面的每一个对象则需要遍历for的方式获得。
⭕️哪怕只有一个元素通过querySelectAll() 获取过来的也是一个伪数组里面只有一个元素而已
其他获取DOM元素方法了解
// 根据id获取一个元素
document.getElementById(nav)
// 根据标签获取一类元素获取页所有div
document.getElementsByTagName(div)
// 根据类名获取元素获取页面所有类名为w的
document.getElementsByclassName(w)操作元素内容
对象.innerText 属性
将文本内容添加/更新到任意标签位置显示纯文本不解析标签 const info ducument.querySelect(.info)// 获取标签内部文字// console.log(info.innerText)// 添加/修改标签内部文字内容info.innerText 你好我是刘德华对象.innerHTML 属性
将文本内容添加/更新到任意标签位置会解析标签多标签建议使用模板字符 const info ducument.querySelect(.info)// 获取标签内部文字// console.log(info.innerHTML)// 添加/修改标签内部文字内容info.innerHTML 你好我是strong刘德华/strong年会抽奖案例 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title年会抽奖/titlestyle.wrapper {width: 840px;height: 420px;background: url(./images/bg01.jpg) no-repeat center / cover;padding: 100px 250px;box-sizing: border-box;}/style
/headbodydiv classwrapperstrong传智教育年会抽奖/strongh1一等奖span idone???/span/h1h3二等奖span idtwo???/span/h3h5三等奖span idthree???/span/h5/divscriptconst personArr [周杰伦, 刘德华, 周星驰, Pink老师, 张学友]// 一等奖const random1 Math.floor(Math.random() * personArr.length)const one document.querySelector(#one)one.innerHTML personArr[random1]personArr.splice(random1, 1)// 二等奖const random2 Math.floor(Math.random() * personArr.length)const two document.querySelector(#two)two.innerHTML personArr[random2]personArr.splice(random2, 1)// 三等奖const random3 Math.floor(Math.random() * personArr.length)const three document.querySelector(#three)three.innerHTML personArr[random3]personArr.splice(random3, 1)/script
/body/html操作元素属性
操作元素常用属性
可以通过 JS 设置/修改标签元素属性比如通过 src更换 图片最常见的属性比如 href、title、src 等
⭐️语法
对象.属性 值举例说明 // 1.获取元素const img document.querySelector(img)// 2.修改元素img.src ./images/2.webpimg.title 刘德华操作元素样式属性
可以通过 JS 设置/修改标签元素的样式属性。
比如通过 轮播图小圆点自动更换颜色样式点击按钮可以滚动图片这是移动的图片的位置 left 等等
⭐️1.通过 style 属性操作CSS
语法
对象.style.样式属性 值举例说明 const box document.querySelector(.box)// 修改元素样式box.style.width 200pxbox.style.marginTop 15px // margin-topbox.style.backgroundColor pink // background-color⭕️
修改样式通过style属性引出如果属性有-连接符需要转换为小驼峰命名法赋值的时候需要的时候不要忘记加css单位
☁️练习页面刷新页面随机更换背景图片
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {background: url(./images/desktop_1.jpg) no-repeat top center/cover;}/style
/headbodyscriptfunction getRandom(N, M) {return Math.floor(Math.random() * (M - N 1)) N}const random getRandom(1, 10)document.body.style.backgroundImage url(./images/desktop_${random}.jpg)/script
/body/html⭐️2.操作类名(className) 操作CSS
操作类名(className) 操作CSS
如果修改的样式比较多直接通过style属性修改比较繁琐我们可以通过借助于css类名的形式。
语法
// active 是一个css类名
元素.className active⭕️
由于class是关键字, 所以使用className去代替className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
例子
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 200px;height: 200px;background-color: pink;}.box {width: 300px;height: 300px;background-color: skyblue;margin: 100px auto;padding: 10px;border: black}/style
/headbodydiv/divscript// 1.获取元素const div document.querySelector(div)// 2.添加类名 class 是个关键字 我们用classNamediv.className box/script
/body/html⭐️3.通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名我们可以通过classList方式追加和删除类名
语法
// 追加一个类
元素.classList.add(类名)
// 删除一个类
元素.classList.remove(类名)
// 切换一个类
元素.classList.toggle(类名)例子
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 200px;height: 200px;}.ative {color: red;background-color: pink;}/style
/headbodydiv classbox文字/divscript// 1.获取元素const box document.querySelector(.box)// 2.修改样式// 2.1 追加类 add() 类名不加点并且是字符串box.classList.add(ative)// 2.2 删除类 remove() 类名不加点并且是字符串box.classList.remove(box)// 2.3 切换类 toggle() 有就删掉没有就加上box.classList.toggle(active)/script
/body/html☁️练习轮播图随机版 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title轮播图点击切换/titlestyle* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}/style
/headbodydiv 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) },]// 1.需要一个随机数const random parseInt(Math.random() * sliderData.length)// console.log(sliderData[random])// 2.把对应的数据渲染到标签里面// 2.1 获取图片const img document.querySelector(.slider-wrapper img)// 2.2 修改图片路径 对象.urlimg.src sliderData[random].url// 3. 把p里面的文字内容更换// 3.1 获取pconst p document.querySelector(.slider-footer p)// 3.2 修改pp.innerHTML sliderData[random].title// 4.修改背景颜色const sf document.querySelector(.slider-footer)sf.style.backgroundColor sliderData[random].color// 5.小圆点const li document.querySelector(.slider-indicator li:nth-child(${random 1}))li.classList.add(active)/script
/body/html操作表单元素属性
获取: DOM对象.属性名
设置: DOM对象.属性名 新值
表单.value 用户名
表单.type password表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性比如 disabled、checked、selected
bodyinput typecheckboxbutton60秒后再次获取验证码/buttonscript// checkedconst ipt document.querySelector(input)ipt.checked true// ipt.checked true // 会选中不提倡 有隐式转换// disabledconst button document.querySelector(button)// console.log(button.disabled) // 默认false 不禁用button.disabled true/script
/body自定义属性
标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如 disabled、checked、
selected
自定义属性
在html5中推出来了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取
bodydiv classbox data-id10盒子/divscriptconst box document.querySelector(.box)console.log(box.dataset.id)/script
/body定时器-间歇函数
定时器函数介绍
网页中经常会需要一种功能每隔一段时间需要自动执行一段代码不需要我们手动去触发例如网页中的倒计时要实现这种需求需要定时器函数定时器函数有两种其中一种是间歇函数
定时器函数基本使用
定时器函数可以开启和关闭定时器
⭐️1. 开启定时器
setInterval(函数,间隔时间)作用每隔一段时间调用这个函数间隔时间单位是毫秒
举例说明 // setInterval(函数名,间隔时间)setInterval(function () {console.log(一秒钟执行一次)}, 1000)function fn() {console.log(一秒执行一次)}setInterval(fn, 1000)⭕️
函数名字不需要加括号定时器返回的是一个id数字
⭐️2. 关闭定时器
let 变量名 setInterval(函数,间隔时间)
clearInterval(变量名)let timer setInterval(function () {console.log(一秒钟执行一次)}, 1000)clearInterval(timer)一般不会刚创建就停止而是满足一定条件再停止
☁️案例阅读注册协议 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytextarea name id cols30 rows10用户注册协议欢迎注册成为京东用户在您注册过程中您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议请您务必仔细阅读、充分理解协议中的条款内容后再点击同意尤其是以粗体或下划线标识的条款因为这些条款可能会明确您应履行的义务或对您的权利有所限制。【请您注意】如果您不同意以下协议全部或任何条款约定请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息阅读并点击同意上述协议且完成全部注册流程后即表示您已充分阅读、理解并接受协议的全部内容并表明您同意我们可以依据协议内容来处理您的个人信息并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方详情查看/textareabrbutton classbtn disabled我已经阅读用户协议(5)/buttonscript// 1.获取元素const btn document.querySelector(.btn)// 2.开启定时器let i 5let n setInterval(function () {i--btn.innerHTML 我已经阅读用户协议(${i})if (i 0) {clearInterval(n) // 3.关闭定时器btn.disabled falsebtn.innerHTML 同意}}, 1000)/script
/body/html综合案例 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title轮播图点击切换/titlestyle* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}/style
/headbodydiv classsliderdiv classslider-wrapperimg src./images/slider01.jpg alt //divdiv classslider-footerp对人类来说会不会太超前了/pul classslider-indicatorli classactive/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) },]// 1.获取元素const img document.querySelector(.slider-wrapper img)const p document.querySelector(.slider-footer p)const sf document.querySelector(.slider-footer)let i 0// 2.开启定时器setInterval(function () {iimg.src sliderData[i].url // 更改图片路径p.innerHTML sliderData[i].title // 把字写到p里sf.style.backgroundColor sliderData[i].color // 更改背景颜色// 小圆点// 先删除以前的activedocument.querySelector(.slider-indicator .active).classList.remove(active)// 只让当前的li添加activedocument.querySelector(.slider-indicator li:nth-child(${i 1})).classList.add(active)if (i sliderData.length - 1) {i -1}}, 1000)/script
/body/html
