Web前端105天-day46-DOM
2024-06-21 12:26:44
DOM02
目录
前言
一、querySelector
二、classList
三、下拉选框
四、图片大小图效果
五、菜单折叠
六、广告弹窗
总结
前言
DOM02学习开始
一、querySelector
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习 09:08</title><link rel="stylesheet" href="./reset.css"><style>#box {display: flex;padding: 10px;background-color: #eee;}/* id=box 元素下的 所有 子元素li */#box>li {margin: 8px;cursor: pointer;}#box>li.active {color: #ff5d23;border-bottom: 3px solid #ff5d23;font-weight: bold;}</style> </head><body><ul id="box"><li class="active">推荐</li><li>颜值</li><li>英雄联盟</li><li>王者荣耀</li><li>热门游戏</li></ul><script>// 昨天: 先通过id找到 ul 元素, 然后获取其子元素// 更直接的方案: 利用 css 选择器, 来精确查找元素// query: 查询 selector: 选择器 all: 所有// 查询到所有满足选择器要求的元素// qsa// 返回值的原型是 NodeList, 虽然是伪数组类型, 但是拥有 forEach 方法const lis = document.querySelectorAll('#box>li')console.log(lis)lis.forEach((li, index) => {console.log(index, li)li.onclick = function () {console.log('this', this) //这个 触发事件的元素// 给新的添加激活之前, 先找到之前激活的元素, 删除其 激活样式// querySelector: 精确找到 唯一满足条件的元素const active = document.querySelector('#box>li.active')console.log('active', active)active.className = '' //样式类清空// 修改classthis.className = 'active'}})</script> </body></html>
- 练习
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习 09:08</title><link rel="stylesheet" href="./reset.css"><style>#box {display: flex;padding: 10px;background-color: #eee;}/* id=box 元素下的 所有 子元素li */#box>li {margin: 8px;cursor: pointer;}#box>li.active {color: #ff5d23;border-bottom: 3px solid #ff5d23;font-weight: bold;}</style> </head><body><ul id="box"><li class="active">推荐</li><li>颜值</li><li>英雄联盟</li><li>王者荣耀</li><li>热门游戏</li></ul><script>// 昨天: 先通过id找到 ul 元素, 然后获取其子元素// 更直接的方案: 利用 css 选择器, 来精确查找元素// query: 查询 selector: 选择器 all: 所有// 查询到所有满足选择器要求的元素// qsa// 返回值的原型是 NodeList, 虽然是伪数组类型, 但是拥有 forEach 方法const lis = document.querySelectorAll('#box>li')console.log(lis)lis.forEach((li, index) => {console.log(index, li)li.onclick = function () {console.log('this', this) //这个 触发事件的元素// 给新的添加激活之前, 先找到之前激活的元素, 删除其 激活样式// querySelector: 精确找到 唯一满足条件的元素const active = document.querySelector('#box>li.active')console.log('active', active)active.className = '' //样式类清空// 修改classthis.className = 'active'}})</script> </body></html>
- 练习
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习</title><link rel="stylesheet" href="./reset.css"><style>#box {border: 1px solid #bbb;border-radius: 4px;display: inline-block;margin: 4px;overflow: hidden;}#box>li {padding: 10px;cursor: pointer;color: #444;}#box>li:hover {background-color: #b7e1ff;}#box>li.active {background-color: #6fc3ff;color: white;}</style> </head><body><ul id="box"><li class="active">为你推荐</li><li>热门速递</li><li>都市生活</li><li>奇幻异界</li><li>古风恋爱</li></ul><script>// css选择器: 非常灵活 选中任何的标签// 关注: 目标元素是 多个 还是 1个const lis = document.querySelectorAll('#box>li')lis.forEach(li => {li.onclick = function () {// 旧的不去, 新的不来const ac = document.querySelector('#box>li.active')ac.className = ''this.className = 'active'}})</script> </body></html>
二、classList
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>开关 10:18</title><link rel="stylesheet" href="./reset.css"><style>.switch {cursor: pointer;display: inline-block;width: 70px;height: 40px;border: 1px solid #555;margin: 3px;border-radius: 100px;/* 子绝父相 */position: relative;transition: 0.3s;}.switch>span {transition: 0.3s;width: 36px;height: 36px;border-radius: 50%;background-color: #ccc;position: absolute;left: 1px;top: 1px;}.switch.open {background-color: #007aff;border-color: #007aff;}.switch.open>span {/* calc() : css3提供的函数, 可以进行一些简单的计算 *//* 强调: 运算符号的左右 必须空格间隔; 没有JS强大, 必须严格格式 */left: calc(100% - 1px - 36px);}</style> </head><body><div class="switch"><span></span></div><script>// 单个元素const sw = document.querySelector('.switch')console.dir(sw);// 元素: 统称 elsw.onclick = function () {console.log(this)// 作者在 classList 属性中 提供了很多 操作class的方法, 比我们直接操作className 更加简单易用this.classList.toggle('open')// toggle: 切换; 自动判定是否存在open样式, 来决定 移除还是添加// 判断: 如果没有open, 就添加; 否则就删除// if (this.className == 'switch') {// // alt + 方向键: 可以快速移动光标行代码// this.className = 'switch open'// } else {// this.className = 'switch'// }}</script> </body></html>
- 练习
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习 11:27</title><link rel="stylesheet" href="./reset.css"><style>ul {display: flex;padding: 20px;}ul>li {margin-right: 10px;display: flex;flex-direction: column;align-items: flex-end;font-size: 14px;}ul>li>img {border: 4px solid #7a7a7a;border-radius: 0 15px;}/* li 激活时, 其下方的img */ul>li.active>img {border-color: #f3c258;}</style> </head><body><ul><li class="active"><img src="./imgs/smallskin-5.jpg" alt=""><span>时之愿境</span></li><li><img src="./imgs/smallskin-4.jpg" alt=""><span>时之祈愿</span></li><li><img src="./imgs/smallskin-3.jpg" alt=""><span>遇见神鹿</span></li><li><img src="./imgs/smallskin-2.jpg" alt=""><span>森 </span></li><li><img src="./imgs/smallskin-1.jpg" alt=""><span>鹿灵守心</span></li></ul><script>const lis = document.querySelectorAll('ul>li')lis.forEach(li => {// onmouseover: 鼠标移到某元素之上li.onmouseover = function () {const ac = document.querySelector('ul>li.active')ac.classList.remove('active') // remove: 移除// 不推荐直接操作 class 的本体, 有可能会覆盖其原有的其他class// this.className = 'active'// 推荐使用作者提供的专业的方法this.classList.add('active') //add:添加,新增}})</script> </body></html>
三、下拉选框
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>下拉选框 14:01</title><link rel="stylesheet" href="./reset.css"><style>.select {margin: 4px;border: 1px solid #bbb;background-color: #f9f9fb;padding: 4px;position: relative;}.select>ul {overflow: hidden;position: absolute;border: 1px solid #bbb;background-color: #f9f9fb;border-radius: 4px;top: calc(100% + 4px);}.select>ul>li {padding: 10px 20px;color: #333;cursor: pointer;font-size: 13px;}.select>ul>li.active {background-color: orange;}.hide {display: none;}</style> </head><body><select><option value="0">奔驰</option><option value="1">宝马</option><option value="2">奥迪</option><option value="3">雅迪</option></select><hr><div class="select"><button>English</button><ul class="hide"><li>日本语</li><li>中文</li><li class="active">English</li><li>韩语</li></ul></div><script>// 元素之间的关系只有4种// 1. 儿子们 childern// 2. 父 parentElement// 3. 弟弟 nextElementSibling// 4. 哥哥 previousElementSibling// DOM的套路: 找到要操作的元素 -> 操作他const lis = document.querySelectorAll('.select>ul>li')lis.forEach(li => {// 鼠标悬浮li.onmouseover = function () {const ac = document.querySelector('.select>ul>li.active')ac.classList.remove('active')this.classList.add('active')}// 鼠标点击li.onclick = function () {// 父元素: parentElementthis.parentElement.classList.add('hide')console.dir(this) //查看元素的内容文本在哪个属性?// previousElementSibling: 上一个 元素 兄弟const btn = this.parentElement.previousElementSibling// 按钮的内容 等于 当前点击项的内容btn.innerHTML = this.innerHTML}})const btn = document.querySelector('.select>button')btn.onclick = function () {// 选择元素的 下一个兄弟// next: 下一个 element: 元素 sibling: 兄弟姐妹const ul = this.nextElementSiblingconsole.log('ul', ul)// toggle: 切换ul.classList.toggle('hide')}</script> </body></html>
四、图片大小图效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习 15:12</title><link rel="stylesheet" href="./reset.css"><style>.select {/* border: 1px solid red; */display: inline-block;position: relative;}.select>ul {position: absolute;top: 0;left: calc(100% + 5px);width: 200px;padding: 10px;background-color: #eee;display: flex;flex-wrap: wrap;}.select>ul>li {padding: 5px 10px;border: 2px solid red;margin: 0 10px 10px 0;cursor: pointer;}.select>ul>li.active {background-color: orange;}.hide {display: none !important;}</style> </head><body><div class="select"><button>澜</button><ul class="hide"><li>瑶</li><li>司马懿</li><li>夏洛特</li><li>孙策</li><li class="active">澜</li></ul></div><script>const btn = document.querySelector('.select>button')btn.onclick = function () {this.nextElementSibling.classList.toggle('hide')}const lis = document.querySelectorAll('.select>ul>li')lis.forEach(li => {li.onclick = function () {this.parentElement.classList.add('hide')const ac = document.querySelector('.select>ul>li.active')ac.classList.remove('active')this.classList.add('active')this.parentElement.previousElementSibling.innerHTML = this.innerHTML}})</script> </body></html>
- 练习
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习</title><link rel="stylesheet" href="./reset.css"><style>ul {display: inline-block;width: 300px;}ul>li {height: 80px;border-radius: 10px;margin-bottom: 5px;background-size: cover;transition: 0.5s;}ul>li.active {height: 137px;}</style> </head><body><ul><!-- 为什么不用 img 而使用 背景图: 因为 img 显示的图, 如果宽高比例错误, 图片会变形 --><li class="active" style="background-image: url(./imgs/bigskin-1.jpg);"></li><li style="background-image: url(./imgs/bigskin-2.jpg);"></li><li style="background-image: url(./imgs/bigskin-3.jpg);"></li><li style="background-image: url(./imgs/bigskin-4.jpg);"></li><li style="background-image: url(./imgs/bigskin-5.jpg);"></li></ul><script>const lis = document.querySelectorAll('ul>li')lis.forEach(li => {li.onmouseover = function () {document.querySelector('ul>li.active').classList.remove('active')this.classList.add('active')}})</script> </body></html>
五、菜单折叠
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习 17:13</title><link rel="stylesheet" href="./reset.css"><style>.menu {padding: 10px;display: inline-block;width: 200px;}.menu>li>h3 {padding: 10px;background-color: #eee;border-radius: 4px;}.menu>li>ul {margin-left: 10px;padding: 10px 0;}.menu>li>ul>li {padding: 10px 0;border-bottom: 1px dashed gray;}.hide {display: none;}.menu>li {margin-bottom: 4px;}</style> </head><body><ul class="menu"><li><h3>阶段1</h3><ul class="hide"><li>html</li><li>css</li><li>js</li></ul></li><li><h3>阶段2</h3><ul class="hide"><li>node.js</li><li>express</li><li>sql</li></ul></li></ul><script>const h3s = document.querySelectorAll('.menu>li>h3')h3s.forEach(h3 => {h3.onclick = function () {this.nextElementSibling.classList.toggle('hide')}})</script> </body></html>
六、广告弹窗
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习 17:40</title><link rel="stylesheet" href="./reset.css"><style>#box {padding: 10px;background-color: #eee;width: 150px;height: 250px;position: fixed;bottom: 0;right: 0;transition: 1s;}#box.hide {bottom: -250px;}</style> </head><body><div id="box" class="hide"><button>关闭</button><p>大家好，我系渣渣辉，戏我演过很多；但游戏，我只喜欢贪玩蓝月，装备秒回收；交易自由，来到就是赚到。赶快过来一起贪玩蓝月。 </p></div><script>const box = document.getElementById('box')setTimeout(() => {// 删除隐藏的classbox.classList.remove('hide')}, 5000);document.querySelector('#box>button').onclick = function () {this.parentElement.classList.add('hide')setTimeout(() => {this.parentElement.classList.remove('hide')}, 1500);}</script> </body></html>
总结
DOM02学习结束
Web前端105天-day46-DOM相关推荐
- Web前端105天-day13-BOOT
day13 目录 前言 一. 响应式 1.响应式的概念 2.设备的宽度 3.媒体查询的规则 4.响应式断点 5.相对于视口的尺寸 二. Bootstrap 1.Bootstrap概述 2.学习UI框架 ...
- Web前端第三阶段--DOM
Web前端第三阶段–DOM 文章目录 Web前端第三阶段--DOM DOM树 初识DOM DOM作用 固定元素的读取 标签读取元素 CSS选择器读取元素 class操作 classList 简单实例 ...
- Web前端105天-day01-HTML
day01 目录 前言 一.软件工程 1.软件的生命周期 2.生命周期的环节和角色 二.软件开发设计的基础知识 1.客户端 2.服务器端 3.数据库 三.软件的基础知识 1.快捷键 2.学习辅助 3. ...
- Web前端105天-day32-Node.js
node.jsday04 目录 前言 一.复习 二.http模块 三.express框架 3.1创建WEB服务器 3.2路由 3.3使用插件将post传参转为对象 总结 前言 node.jsday04 ...
- 【响应式Web前端设计】HTML DOM padding 属性
定义和用法 padding 属性设置元素的内边距. padding 属性定义元素边框与元素内容之间的空间. 该属性可采取 4 个值: 如果规定一个值,比如 div {padding: 50px} - ...
- Web前端105天-day14-BOOT
day14-boot第二天 目录 前言 一.工具类 1. 边框border 2. display显示 3.浮动 4.定位 5.flex布局 6.文本 二.布局 栅格系统 Grid 1.行和列 2.栅格 ...
- web前端-JS（DOM、BOM）
web前端-JS(DOM.BOM) 1. DOM- 操作元素 1.1 获取元素 1.2 事件基础 1.3 操作元素 1.3.1 改变元素的内容 1.3.2 常见元素的属性操作 1.3.3 表单元素的属 ...
- web前端面试高频考点——Vue原理（理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM）
系列文章目录 内容 参考链接 Vue基本使用 Vue的基本使用(一文掌握Vue最基础的知识点) Vue通信和高级特性 Vue组件间的通信及高级特性(多种组件间的通信.自定义v-model.nextTi ...
- 2016年最权威的1000集大型web前端视频教程（爱创课堂出品）
爱创课堂Web前端开发工程师培训-价值1万8课程 Web前端开发工程师,主要职责是利用HTML.XHTML.CSS.JAVAScript.FLASH等各种Web前端技术进行客户端产品的开发.完成客户 ...
最新文章
- ati显卡驱动安装linux,恭喜自己 ati显卡驱动安装成功
- 获取地址栏URL中参数, getQuerySting()方法
- Swift之extension的使用
- Servlet底层原理、Servlet实现方式、Servlet生命周期
- es查询大文本效率_es之路由：进一步提高Elasticsearch的检索效率（适用大规模数据集）...
- java已知一个二叉树_#二叉树复习#
- web全栈架构师所需技术栈_统一架构–一种构建全栈应用程序的简单方法
- 【LeetCode】剑指 Offer 52. 两个链表的第一个公共节点
- shell tr命令
- su室内插件_SketchUp必学插件TOP100，每一个都是[室内/装饰/景观]设计的效率神器...
- ADI官方提供的源码AD9361+ZC706 利用TCL构建Vivado工程,利用no-OS-master搭建SDK工程
- php连接mysql超时问题
- 对异常 java.lang.IllegalStateException: getAttribute: Session already invalidated的理解
- 我想参加计算机俱乐部用英文翻译,加入音乐俱乐部的英文怎么写_我参加音乐俱乐部已经两年了。用英语咋说...
- Test类中的@testSetup标注 测试环境数据准备
- 私密聊天加密聊天伪装界面聊天软件产品UI分析,qiaoyu5，feige5
- 20221017在线识鸟
- linux压缩后删原文件夹,Linux tar 如何在压缩之后删除原文件及相关拓展用法
- 对于程序员来说养成规范的打字真的很重要
- PHP定义梯形,利用css来画出各种样式不同的梯形