佛山网站建设找千界,九狐建设网站,网站设计制作 建网站,做网站准备内容1.变量声明 1.1以后声明变量我们优先使用哪个#xff1f; const 有了变量先给const#xff0c;如果发现它后面是要被修改的#xff0c;再改为let 1.2 为什么const声明的对象可以修改里面的属性#xff1f; 因为对象是引用类型#xff0c;里面存储的是地址#x…1.变量声明 1.1以后声明变量我们优先使用哪个 · const · 有了变量先给const如果发现它后面是要被修改的再改为let 1.2 为什么const声明的对象可以修改里面的属性 · 因为对象是引用类型里面存储的是地址只要地址不变就不会报错 · 建议数组和对象使用 const 来声明 1.3 什么时候使用let声明变量 · 如果基本数据类型的值或者引用类型的地址 发生变化 的时候需要用 let · 比如 一个变量进行加减运算比如 for循环中的 i 2.Web API 基本认知 2.1 Web API阶段我们学习那两部分 · DOM · BOM 2.2 DOM 是什么有什么作用 · DOM 是文档对象模型 · 操作网页内容可以开发网页内容特效和实现用户交互 2.3 DOM 树是什么 · 将 HTML 文档以树状结构直观的表现出来我们称之为文档树或 DOM树 · 作用 文档树直观的体现了标签与标签之间的关系 2.4 DOM对象怎么创建的 · 浏览器根据html标签生成的 JS对象DOM对象 · 所有的标签属性都可以在这个对象上面找到修改这个对象的属性会自动映射到标签身上 · DOM的核心就是把内容当 对象 来处理 2.5 document 是什么 · 是 DOM 里提供的一个 对象 ·所以它提供的属性和方法都是 用来访问和操作网页内容的 例document.write() · 网页所有内容都在document里面 3.获取DOM元素 3.1 根据CSS选择器来获取DOM元素 (重点) 1. 选择匹配的第一个元素 语法 参数: 包含一个或多个有效的CSS选择器 字符串 返回值 CSS选择器匹配的 第一个元素 ,一个 HTMLElement对象。 如果没有匹配到则返回null。 多参看文档https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector 2. 选择匹配的多个元素 语法 参数: 包含一个或多个有效的CSS选择器 字符串 返回值 CSS选择器匹配的 NodeList 对象集合 例如 得到的是一个 伪数组 ·有长度有索引号的数组 ·但是没有 pop() push() 等数组方法 想要得到里面的每一个对象则需要遍历for的方式获得。 注意 哪怕只有一个元素通过querySelectAll() 获取过来的也是一个 伪数组 里面只有一个元素而已 1. 获取页面中的标签我们最终常用那两种方式 · querySelectorAll() · querySelector() 2. 他们两者的区别是什么 · querySelector() 只能选择一个元素 可以直接操作 · querySelectorAll() 可以选择多个元素得到的是伪数组需要遍历得 到每一个元素 3. 他们两者小括号里面的参数有神马注意事项 · 里面写css选择器 · 必须是字符串也就是必须加引号 练习 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodyul classnavli我的首页/lili产品介绍/lili联系方式/li/ulscriptconst li document.querySelectorAll(.nav li);// console.log(li)for (let i 0; i li.length; i) {console.log(li[i]);}/script/body
/html3.2 其他获取DOM元素方法了解 4.操作元素内容
4.1 设置/修改DOM元素内容有哪2种方式 · 元素.innerText 属性 · 元素.innerHTML 属性
4.2 两者的区别是什么 · 元素.innerText 属性 只识别文本不能解析标签 · 元素.innerHTML 属性 能识别文本能够解析标签 · 如果还在纠结到底用谁你可以选择innerHTML 练习
!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/divscript//声明数组const 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
/html5.操作元素属性 5.1 操作元素常用属性 还可以通过 JS 设置/修改标签元素属性比如通过 src更换 图片 最常见的属性比如 href、title、src 等 语法 举例说明 练习 页面刷新图片随机更换 需求当我们刷新页面页面中的图片随机显示不同的图片 分析 ①随机显示则需要用到随机函数 ②更换图片需要用到图片的 src 属性进行修改 ③核心思路 1. 获取图片元素 2. 随机得到图片序号 3. 图片 .src 图片随机路径 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodyimg src alt /script// function getRandom(N, M) {// return Math.floor(Math.random() * (M - N 1) N);// }//生成随机数const random Math.floor(Math.random() * 6 1);const img document.querySelector(img);img.src ./images/${random}.webp;/script/body
/html
5.2 操作元素样式属性
1.通过 style 属性操作CSS 语法 举例说明 注意 1. 修改样式通过 style 属性引出 2. 如果属性有- 连接符需要转换为 小驼峰 命名法 3. 赋值的时候需要的时候不要忘记加 css单位 练习 页面刷新页面随机更换背景图片 需求当我们刷新页面页面中的背景图片随机显示不同的图片 分析 ① 随机函数 ② css页面背景图片 background-image ③ 标签选择body 因为body是唯一的标签可以直接写 document.body.style !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestylebody {background-image: url(./images/desktop_1.jpg);}/style/headbodyscript//生成随机数function getRandom(N, M) {return Math.floor(Math.random() * (M - N 1)) N;}const random getRandom(1, 10);const body document.querySelector(body);// body.style.background url(./images/desktop_${random}.jpg) no-repeat top center/cover;body.style.backgroundImage url(./images/desktop_${random}.jpg);/script/body
/html2. 操作类名(className) 操作CSS 如果修改的样式比较多直接通过style属性修改比较繁琐我们可以通过借助于css类名的形式。 语法 注意 1. 由于class是关键字, 所以使用className去代替 2. className是使用新值 换 旧值, 如果需要添加一个类,需要保留之前的类名 3. 通过 classList 操作类控制CSS 为了解决className 容易覆盖以前的类名我们可以通过classList方式追加和删除类名 语法 //切换类toggle()有就删掉没有就加上 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box {width: 200px;height: 200px;color: black;}.active {color: red;background-color: pink;}/style/headbodydiv classbox文字/divscriptconst div document.querySelector(div);//className// div.className active;//classList//添加类名add()// div.classList.add(active);//删除类名remove()// div.classList.remove(box);//切换类toggle() active有就删掉没有就加上div.classList.toggle(active);/script/body
/html5.3 操作表单元素 属性 表单很多情况也需要修改属性比如点击眼睛可以看到密码本质是 把表单类型转换为文本 正常的有属性有取值的 跟其他的标签属性没有任何区别 · 获取: DOM对象.属性名 · 设置: DOM对象.属性名 新值 注意修改表单内容用 表单.value 不用表单.innerHTML 。button除外 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性字符串类型除了空以外都为true 比如 disabled是否禁用按钮、checked是否勾选、selected 举例说 5.4 自定义属性 标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如 disabled、checked、 selected 自定义属性 · 在html5中推出来了专门的data-自定义属性 · 在标签上一律以data-开头 · 在DOM对象上一律以dataset对象方式获取 6. 定时器-间歇函数 目标能够使用定时器函数重复执行代码 定时器函数可以开启和关闭定时器 6.1 开启定时器 · 作用每隔一段时间调用这个函数 · 间隔时间单位是毫秒 举例说明 举例说明 注意 1. 函数名字 不需要加括号 加括号会立即执行 2. 定时器返回的是一个id数字 6.2 关闭定时器 一般不会刚创建就停止而是满足一定条件再停止 举例说明 练习 阅读注册协议 需求按钮60秒之后才可以使用 分析 ①开始先把按钮禁用 disabled 属性 ②一定要获取元素 ③函数内处理逻辑 秒数开始减减 按钮里面的文字跟着一起变化 如果秒数等于0 停止定时器 里面文字变为 同意 最后 按钮可以点击 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodytextarea name id cols30 rows10用户注册协议欢迎注册成为京东用户在您注册过程中您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议请您务必仔细阅读、充分理解协议中的条款内容后再点击同意尤其是以粗体或下划线标识的条款因为这些条款可能会明确您应履行的义务或对您的权利有所限制。【请您注意】如果您不同意以下协议全部或任何条款约定请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息阅读并点击同意上述协议且完成全部注册流程后即表示您已充分阅读、理解并接受协议的全部内容并表明您同意我们可以依据协议内容来处理您的个人信息并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方详情查看/textareabr /button classbtn disabled我已经阅读用户协议(5)/buttonscript//1.获取元素const btn document.querySelector(.btn);//2.倒计时let i 5;//3.定时器function time() {i--;btn.innerHTML 我已经阅读用户协议(${i});if (i 0) {clearInterval(m);btn.innerHTML 同意;btn.disabled false;}}let m setInterval(time, 1000);/script/body
/html综合案例 轮播图定时器版 需求每隔一秒钟切换一个图片 分析 ①准备一个数组对象里面包含详细信息素材包含 ②获取元素 ③设置定时器函数 设置一个变量 找到变量对应的对象 更改图片、文字信息 激活小圆点移除上一个高亮的类名当前变量对应的小圆点添加类 ④处理图片自动复原从头播放放到变量后面紧挨 如果图片播放到最后一张 就是大于等于数组的长度 则把变量重置为0 !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),},];//2.获取元素const img document.querySelector(.slider-wrapper img);const p document.querySelector(.slider-footer p);const footer document.querySelector(.slider-footer);let i 0;//3.定时器let n setInterval(function () {i;img.src sliderData[i].url;p.innerHTML sliderData[i].title;footer.style.backgroundColor sliderData[i].color;//小圆点//先删除以前的.activelet active document.querySelector(.slider-indicator .active);active.classList.remove(active);//只给当前li添加类名let li document.querySelector(.slider-indicator li:nth-child(${i 1}));li.classList.add(active);if (i 7) {i -1;}}, 1000);/script/body
/html
