DOM02
目录
前言
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 = '' //样式类清空 // 修改class this.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 = '' //样式类清空 // 修改class this.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); // 元素: 统称 el sw.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 () { // 父元素: parentElement this.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.nextElementSibling console.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(() => { // 删除隐藏的class box.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学习结束