From 5a868a2de39082390cc4809c1d8cb135c875577b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B7=AF=E7=8E=B2?= <1516489926@qq.com>
Date: Mon, 18 Dec 2023 23:47:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=8D=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231218 \345\244\215\344\271\240.md"     | 378 ++++++++++++++++++
 1 file changed, 378 insertions(+)
 create mode 100644 "29 \350\267\257\347\216\262/20231218 \345\244\215\344\271\240.md"
diff --git "a/29 \350\267\257\347\216\262/20231218 \345\244\215\344\271\240.md" "b/29 \350\267\257\347\216\262/20231218 \345\244\215\344\271\240.md"
new file mode 100644
index 0000000..5f1965c
--- /dev/null
+++ "b/29 \350\267\257\347\216\262/20231218 \345\244\215\344\271\240.md"	
@@ -0,0 +1,378 @@
+04-获取DOM元素
+
+```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>Document</title>
+  <style>
+    .box {
+      width: 200px;
+      height: 200px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="box">123</div>
+  <div class="box">abc</div>  
+  <p id="nav">导航栏</p>
+  <ul class="nav">
+    <li>测试1</li>
+    <li>测试2</li>
+    <li>测试3</li>
+  </ul>
+  <script>
+
+// 1. document.querySelector 获取匹配的第一个元素
+  
+    let divv = document.querySelector('div');
+    console.log(divv); //在控制台上显示
+  
+
+  // p 导航
+  let p = document.querySelector('p');
+  console.log(p.value); //在控制台上显示
+
+  //另一种方法，通过ID来获取
+  let navigationBar = document.querySelector('#nav');
+   console.log(navigationBar.innerHTML);//显示为导航栏
+  
+      
+    // 1. 我要获取第一个小 ul li nav li
+  let boxx = document.querySelector('.box');
+  console.log(boxx);//这种方法有问题，建议用一下方式
+  let div2 = document.querySelectorAll('.box');//查找所有的box
+  console.log(div2[0]);//通过索引找到想要的结果·，索引为0，代表第一个，索引为2代表第二个
+    // 2. 选择所有的小li ul nav li
+  
+   let ul = document.querySelector('.nav');
+   console.log(ul);
+  //  //获取第一个小ul
+   let ul3 = document.querySelector('.nav li');
+   console.log(ul3);
+
+    // 3.ALL时获取元素，是伪数组
+    let liALL =document.querySelectorAll('.nav li');
+    //遍历出所有的li
+    for (let i = 0; i < liALL.length; i++) {
+          console.log(liALL[i]);  
+            
+    }
+
+    let ge = document.querySelectorAll('.nav li')
+ for (let i = 0; i < ge.length; i++) {
+ console.log(ge[i]);
+  
+ }
+
+    // 单个标签用ALL
+   
+    //获取导航栏
+
+
+    
+  </script>
+</body>
+
+</html>
+```
+
+05-修改对象内容
+
+```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>Document5</title>
+</head>
+
+<body>
+  <div class="box">我是文字的内容</div>
+  <script>
+    // 回忆对象是怎么取值和赋值的
+
+    // 1. 获取元素
+    let div = document.querySelector('div');
+    console.log(div.innerText);
+  
+    // 2. 修改文字内容  对象.innerText 属性
+   const ad = div.innerText='希望快点好起来！';
+ console.log(ad);//在控制台上显示
+ 
+    // 3. innerHTML 解析标签
+    //在网页中显示
+   div.innerHTML='<strong>希望我健健康康，快快乐乐!</storng>';
+  
+ 
+  </script>
+</body>
+
+</html>
+```
+
+06-随机抽奖
+
+```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>
+  <style>
+    .wrapper {
+      width: 840px;
+      height: 420px;
+      background: url(./images/bg01.jpg) no-repeat center / cover;
+      padding: 100px 250px;
+      box-sizing: border-box;
+      color: blue;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="wrapper">
+    <strong>年会抽奖</strong>
+    <h1>一等奖：<span id="one">???</span></h1>
+    <h3>二等奖：<span id="two">???</span></h3>
+    <h5>三等奖：<span id="three">???</span></h5>
+
+  </div>
+  <button>抽一等奖</button>
+  <button>抽二等奖</button>
+  <button>抽三等奖</button>
+  <script>
+    // 1 定义一个数组
+    let stuNames = ['庄珊珊', '陈正楠', '陈宇辉', '张辉', '林鑫', '林展', '吴良硼', '薛祖信', '林晟辉', '陈杰', '许荣法', '陈志勇', '章笑容', '黎俊杨', '叶俊轶', '洪锦洋', '陈新成', '吴斌', '林昀萱', '董庆强', '黄诗龙', '陈妃', '郑弘晖', '周闻祥', '施晟宸', '陈欣威', '陈晓灿', '林青茹', '沈晓琳', '郭若昕', '陈灵钰', '杨毅', '韩煜辉', '阎冠宇', '田雪琼', '刘莹莹', '闫雪莲', '曾浩', '王雪影', '韩震洋', '孙仕悦', '施成昊', '史学新', '李佳怡', '杨银珂', '赵向林', '王发槐', '徐先鑫', '杨旭东', '梅忠钦', '刘泰江', '陈胜杰', '林峰', '陈梦梦', '陈明函', '赖心妍', '李明健', '谢铖浩', '陈志伟', '刘文锋', '官文诚', '曹正波', '温贵雯', '邹亨伟', '林俊伟', '蔡嘉乐', '李俊兴', '谢先峻', '阙苏文', '周富', '徐永淳', '彭勇斌', '石良涛', '卢亨耀', '肖钟凯韩', '吴志翔', '陈佳炜', '杨梅', '路玲', '闫继周', '刘智翔', '揭阳丽', '郭悦迎', '时学安', '周亚辉', '方增兴', '韩文杰', '代瑞', '樊小郭', '马宏达', '李舒汶', '张起瑞', '程舜', '程帅翔', '周厚辰', '叶子豪', '赵敏', '黄流涛', '陈炳鑫'];
+
+    // 2 获取第一个按钮
+   const btn = document.querySelectorAll('button')
+  //  console.log(btn[0]);//第一个按钮
+
+    // 3 给按钮添加点击事件
+    
+    btn[0].addEventListener('click',function(){
+      // 2 生成一个数组范围内的随机索引
+        //floor()向下取整
+      let mathNum = Math.floor(Math.random()*stuNames.length)
+    //  console.log(stuNames[mathNum]);
+          // 3 根据索引截取一个名字
+  let name = stuNames.splice(mathNum,1)
+          // 4 获取一等奖名字的位置元素
+
+           let one = document.querySelector('#one');
+          // // one.innerHTML = mathNum
+          // one.innerHTML = stuNames[mathNum]//不完美方法
+          one.innerHTML = name
+    })
+    
+     
+      //二等奖
+
+    
+      btn[1].addEventListener('click',function(){
+      // 2 生成一个数组范围内的随机索引
+        //floor()向下取整
+      let mathNum = Math.floor(Math.random()*stuNames.length)
+    //  console.log(stuNames[mathNum]);
+          // 3 根据索引截取一个名字
+  
+          // 4 获取一等奖名字的位置元素
+
+           let two = document.querySelector('#two');
+           
+          two.innerHTML = stuNames[mathNum]
+
+    })
+
+    //三等奖
+        
+    btn[2].addEventListener('click',function(){
+      // 2 生成一个数组范围内的随机索引
+        //floor()向下取整
+      let mathNum = Math.floor(Math.random()*stuNames.length)
+    //  console.log(stuNames[mathNum]);
+          // 3 根据索引截取一个名字
+  
+          // 4 获取一等奖名字的位置元素
+
+           let three = document.querySelector('#three');
+          three.innerHTML = stuNames[mathNum]
+
+    })
+
+  </script>
+</body>
+
+</html>
+```
+
+07-修改元素常见的属性
+
+```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>Document</title>
+</head>
+
+<body>
+  <img src="./images/1.webp" alt="">
+  <script>
+    // // 1. 获取图片元素
+  let img = document.querySelector('img');
+  // const img = document.querySelector('[ src="./images/1.webp"]')这样也可以获取
+  // console.log(img);
+
+    // // 2. 修改图片对象的属性   对象.属性 = 值
+   img.src = './images/1.webp';
+
+  </script>
+</body>
+
+</html>
+```
+
+08-随机显示图片
+
+```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>Document</title>
+</head>
+
+<body>
+  <img src="./images/1.webp" alt="">
+  <script>
+    // 取到 N ~ M 的随机整数  公式 
+       //  function name(n,m) {
+    //   return Math.floor(Math.random()*(m-n+1)+n);
+    //  }
+  
+    // 1-6  
+
+    // let num = Math.floor( Math.random()*6+1);
+  //  console.log(Math.floor( Math.random()*6+1));
+
+
+   
+
+
+ 
+    // 1. 获取图片对象
+let img = document.querySelector('img')
+   
+    // 2. 随机得到序号
+  let num = Math.floor( Math.random()*6+1);
+    // 3. 更换路径
+ img.src = `./images/${num}.webp`;//每次刷新都会出现不一样的照片
+   
+  </script>
+</body>
+
+</html>
+```
+
+09-通过style属性修改样式
+
+```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>Document</title>
+  <style>
+    .box {
+      width: 200px;
+      height: 200px;
+      background-color: pink;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="box" ></div>
+  <script>
+    // 1. 获取元素
+  
+    let box = document.querySelector('.box');
+
+    //2. 修改样式属性 对象.style.样式属性 = '值'  别忘了跟单位
+  box.style.background = 'red';  //给背景添加颜色
+  box.style.width = '500px';  //改变宽
+  box.style.height = '500px'; //改变高
+   
+    // 多组单词的采取 小驼峰命名法 改背景和边框
+ box.style.border = '10px solid blue';//改变边框的长度，边框设为实线，设为颜色为红色
+    
+    
+  </script>
+</body>
+
+</html>
+```
+
+10-随机更换背景图片
+
+```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>Document</title>
+  <style>
+    body{
+      background: url('./images/desktop_1.jpg') no-repeat top center;
+    }
+  </style>
+</head>
+
+<body>
+  <script>
+   
+
+    // 取到 N ~ M 的随机整数
+   function random(n,m){
+    return Math.floor(Math.random()*(m-n+1)+n);
+   }
+  
+    // 随机数
+      let rdm = random(1,8)
+
+    // html ,head ,body ,title 唯一，是内置的对象 修改背景
+    document.body.style.background = `url(./images/desktop_${rdm}.jpg) no-repeat top center`;
+
+   
+  </script>
+</body>
+
+</html>
+```
+
-- 
Gitee

