寫(xiě)在前頭
在我決定走前端時(shí)忆畅，大概是21年暑假，那時(shí)參加了學(xué)校的ACM集訓(xùn)氓轰，在堅(jiān)持了一個(gè)暑假期間婚夫，我也認(rèn)識(shí)到自己不是“小鎮(zhèn)做題家” 。當(dāng)然也沒(méi)那做題的腦子署鸡。 之前都是一直偶爾興趣來(lái)了學(xué)學(xué)前端案糙。
大一折騰了很多其他的玩意(錢(qián)限嫌，嘻嘻嘻)花墩，也賺到?jīng)]幾個(gè)硬幣∧幔現(xiàn)在大二開(kāi)始好好準(zhǔn)備春招士八。每天公眾號(hào)打卡旨别，沒(méi)人看也無(wú)所謂县恕。
春招倒計(jì)時(shí)
今天是2022年的第一天冰啃。
?每日小結(jié)
有效學(xué)習(xí)時(shí)間
6h
學(xué)習(xí)內(nèi)容
DOM 的部分操作枫攀、將某馬的HTML前面2個(gè)小節(jié)復(fù)習(xí)敲完了一遍（表單偎快，列表禽笑，文本域等等）具體就不細(xì)說(shuō)了
目前水平
HTML,CSS：看了某馬的html入录，css網(wǎng)課，全敲完了一遍佳镜。菜鳥(niǎo)教程也看了一遍僚稿。
JavaScript：還在上著某馬的課
2022.1.1
代碼粗糙筆記 -- 知道自己每天學(xué)了啥就行，哈哈哈蟀伸。
目錄
DOM：P194～210
01-getElementById獲取元素
```JavaScript
<body>
? ? <div id="time">2019-9-9</div>
? ? <script>
? ? ? ? // 1. 因?yàn)槲覀兾臋n頁(yè)面從上往下加載蚀同，所以先得有標(biāo)簽 所以我們script寫(xiě)到標(biāo)簽的下面
? ? ? ? // 2. get 獲得 element 元素 by 通過(guò) 駝峰命名法
? ? ? ? // 3. 參數(shù) id是大小寫(xiě)敏感的字符串
? ? ? ? // 4. 返回的是一個(gè)元素對(duì)象
? ? ? ? var timer = document.getElementById('time');
? ? ? ? console.log(timer);
? ? ? ? console.log(typeof timer);
? ? ? ? // 5. console.dir 打印我們返回的元素對(duì)象 更好的查看里面的屬性和方法
? ? ? ? console.dir(timer);
? ? </script>
```
02-getElementsByTagName獲取某些元素
```JavaScript
<body>
? ? <ul>
? ? ? ? <li>知否知否，應(yīng)是等你好久11</li>
? ? ? ? <li>知否知否啊掏，應(yīng)是等你好久11</li>
? ? ? ? <li>知否知否蠢络，應(yīng)是等你好久11</li>
? ? ? ? <li>知否知否，應(yīng)是等你好久11</li>
? ? </ul>
? ? <ol id="ol">
? ? ? ? <li>生僻字</li>
? ? ? ? <li>生僻字</li>
? ? ? ? <li>生僻字</li>
? ? ? ? <li>生僻字</li>
? ? </ol>
? ? <script>
? ? ? ? // 1.返回的是 獲取過(guò)來(lái)元素對(duì)象的集合 以偽數(shù)組的形式存儲(chǔ)的
? ? ? ? var lis = document.getElementsByTagName('li');
? ? ? ? console.log(lis);
? ? ? ? console.log(lis[0]);
? ? ? ? // 2. 我們想要依次打印里面的元素對(duì)象我們可以采取遍歷的方式
? ? ? ? for (var i = 0; i < lis.length; i++) {
? ? ? ? ? ? console.log(lis[i]);
? ? ? ? }
? ? ? ? // 3. 如果頁(yè)面中只有一個(gè)li 返回的還是偽數(shù)組的形式
? ? ? ? // 4. 如果頁(yè)面中沒(méi)有這個(gè)元素 返回的是空的偽數(shù)組的形式
? ? ? ? // 5. element.getElementsByTagName('標(biāo)簽名'); 父元素必須是指定的單個(gè)元素
? ? ? ? // var ol = document.getElementsByTagName('ol'); // [ol]
? ? ? ? // console.log(ol[0].getElementsByTagName('li'));
? ? ? ? var ol = document.getElementById('ol');
? ? ? ? console.log(ol.getElementsByTagName('li'));
? ? </script>
</body>
```
03-H5新增獲取元素方式(1)
```JavaScript
<body>
? ? <div class="box">盒子1</div>
? ? <div class="box">盒子2</div>
? ? <div id="nav">
? ? ? ? <ul>
? ? ? ? ? ? <li>首頁(yè)</li>
? ? ? ? ? ? <li>產(chǎn)品</li>
? ? ? ? </ul>
? ? </div>
? ? <script>
? ? ? ? // 1. getElementsByClassName 根據(jù)類(lèi)名獲得某些元素集合
? ? ? ? var boxs = document.getElementsByClassName('box');
? ? ? ? console.log(boxs);
? ? ? ? // 2. querySelector 返回指定選擇器的第一個(gè)元素對(duì)象? 切記 里面的選擇器需要加符號(hào) .box? #nav
? ? ? ? var firstBox = document.querySelector('.box');
? ? ? ? console.log(firstBox);
? ? ? ? var nav = document.querySelector('#nav');
? ? ? ? console.log(nav);
? ? ? ? var li = document.querySelector('li');
? ? ? ? console.log(li);
? ? ? ? // 3. querySelectorAll()返回指定選擇器的所有元素對(duì)象集合
? ? ? ? var allBox = document.querySelectorAll('.box');
? ? ? ? console.log(allBox);
? ? ? ? var lis = document.querySelectorAll('li');
? ? ? ? console.log(lis);
? ? </script>
</body>
```
04-獲取特殊元素
```JavaScript
<body>
? ? <script>
? ? ? ? // 1.獲取body 元素
? ? ? ? var bodyEle = document.body;
? ? ? ? console.log(bodyEle);
? ? ? ? console.dir(bodyEle);
? ? ? ? // 2.獲取html 元素
? ? ? ? // var htmlEle = document.html;
? ? ? ? var htmlEle = document.documentElement;
? ? ? ? console.log(htmlEle);
? ? </script>
</body>
```
#### 事件
05-事件三要素
```JavaScript
<body>
? ? <button id="btn">唐伯虎</button>
? ? <script>
? ? ? ? // 點(diǎn)擊一個(gè)按鈕迟蜜，彈出對(duì)話(huà)框
? ? ? ? // 1. 事件是有三部分組成? 事件源? 事件類(lèi)型? 事件處理程序? 我們也稱(chēng)為事件三要素
? ? ? ? //(1) 事件源 事件被觸發(fā)的對(duì)象? 誰(shuí)? 按鈕
? ? ? ? var btn = document.getElementById('btn');
? ? ? ? //(2) 事件類(lèi)型? 如何觸發(fā) 什么事件 比如鼠標(biāo)點(diǎn)擊(onclick) 還是鼠標(biāo)經(jīng)過(guò) 還是鍵盤(pán)按下
? ? ? ? //(3) 事件處理程序? 通過(guò)一個(gè)函數(shù)賦值的方式 完成
? ? ? ? btn.onclick = function() {
? ? ? ? ? ? alert('點(diǎn)秋香');
? ? ? ? }
? ? </script>
</body>
```
06-執(zhí)行事件步驟
```JavaScript
<body>
? ? <div>123</div>
? ? <script>
? ? ? ? // 執(zhí)行事件步驟
? ? ? ? // 點(diǎn)擊div 控制臺(tái)輸出 我被選中了
? ? ? ? // 1. 獲取事件源
? ? ? ? var div = document.querySelector('div');
? ? ? ? // 2.綁定事件 注冊(cè)事件
? ? ? ? // div.onclick
? ? ? ? // 3.添加事件處理程序
? ? ? ? div.onclick = function() {
? ? ? ? ? ? console.log('我被選中了');
? ? ? ? }
? ? </script>
</body>
```
07-操作元素之改變?cè)貎?nèi)容
```JavaScript
<head>
? ? <style>
? ? ? ? div,
? ? ? ? p {
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? background-color: pink;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <button>顯示當(dāng)前系統(tǒng)時(shí)間</button>
? ? <div>某個(gè)時(shí)間</div>
? ? <p>1123</p>
? ? <script>
? ? ? ? // 當(dāng)我們點(diǎn)擊了按鈕刹孔，? div里面的文字會(huì)發(fā)生變化
? ? ? ? // 1. 獲取元素
? ? ? ? var btn = document.querySelector('button');
? ? ? ? var div = document.querySelector('div');
? ? ? ? // 2.注冊(cè)事件
? ? ? ? btn.onclick = function() {
? ? ? ? ? ? // div.innerText = '2019-6-6';
? ? ? ? ? ? div.innerHTML = getDate();
? ? ? ? }
? ? ? ? function getDate() {
? ? ? ? ? ? var date = new Date();
? ? ? ? ? ? // 我們寫(xiě)一個(gè) 2019年 5月 1日 星期三
? ? ? ? ? ? var year = date.getFullYear();
? ? ? ? ? ? var month = date.getMonth() + 1;
? ? ? ? ? ? var dates = date.getDate();
? ? ? ? ? ? var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
? ? ? ? ? ? var day = date.getDay();
? ? ? ? ? ? return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
? ? ? ? }
? ? ? ? // 我們?cè)乜梢圆挥锰砑邮录?/p>
? ? ? ? var p = document.querySelector('p');
? ? ? ? p.innerHTML = getDate();
? ? </script>
</body>
```
08-innerText和innerHTML的區(qū)別
```JavaScript
<body>
? ? <div></div>
? ? <p>
? ? ? ? 我是文字
? ? ? ? <span>123</span>
? ? </p>
? ? <script>
? ? ? ? // innerText 和 innerHTML的區(qū)別
? ? ? ? // 1. innerText 不識(shí)別html標(biāo)簽 非標(biāo)準(zhǔn)? 去除空格和換行
? ? ? ? var div = document.querySelector('div');
? ? ? ? // div.innerText = '<strong>今天是：</strong> 2019';
? ? ? ? // 2. innerHTML 識(shí)別html標(biāo)簽 W3C標(biāo)準(zhǔn) 保留空格和換行的
? ? ? ? div.innerHTML = '<strong>今天是：</strong> 2019';
? ? ? ? // 這兩個(gè)屬性是可讀寫(xiě)的? 可以獲取元素里面的內(nèi)容
? ? ? ? var p = document.querySelector('p');
? ? ? ? console.log(p.innerText);
? ? ? ? console.log(p.innerHTML);
? ? </script>
</body>
```
09-操作元素之修改元素屬性
```JavaScript
<body>
? ? <button id="ldh">劉德華</button>
? ? <button id="zxy">張學(xué)友</button> <br>
? ? <img src="images/ldh.jpg" alt="" title="劉德華">
? ? <script>
? ? ? ? // 修改元素屬性? src
? ? ? ? // 1. 獲取元素
? ? ? ? var ldh = document.getElementById('ldh');
? ? ? ? var zxy = document.getElementById('zxy');
? ? ? ? var img = document.querySelector('img');
? ? ? ? // 2. 注冊(cè)事件? 處理程序
? ? ? ? zxy.onclick = function() {
? ? ? ? ? ? img.src = 'images/zxy.jpg';
? ? ? ? ? ? img.title = '張學(xué)友思密達(dá)';
? ? ? ? }
? ? ? ? ldh.onclick = function() {
? ? ? ? ? ? img.src = 'images/ldh.jpg';
? ? ? ? ? ? img.title = '劉德華';
? ? ? ? }
? ? </script>
</body>
```
10-分時(shí)問(wèn)候并顯示不同圖片案例
```JavaScript
<body>
? ? <img src="images/s.gif" alt="">
? ? <div>上午好</div>
? ? <script>
? ? ? ? // 根據(jù)系統(tǒng)不同時(shí)間來(lái)判斷，所以需要用到日期內(nèi)置對(duì)象
? ? ? ? // 利用多分支語(yǔ)句來(lái)設(shè)置不同的圖片
? ? ? ? // 需要一個(gè)圖片娜睛，并且根據(jù)時(shí)間修改圖片髓霞，就需要用到操作元素src屬性
? ? ? ? // 需要一個(gè)div元素，顯示不同問(wèn)候語(yǔ)畦戒，修改元素內(nèi)容即可
? ? ? ? // 1.獲取元素
? ? ? ? var img = document.querySelector('img');
? ? ? ? var div = document.querySelector('div');
? ? ? ? // 2. 得到當(dāng)前的小時(shí)數(shù)
? ? ? ? var date = new Date();
? ? ? ? var h = date.getHours();
? ? ? ? // 3. 判斷小時(shí)數(shù)改變圖片和文字信息
? ? ? ? if (h < 12) {
? ? ? ? ? ? img.src = 'images/s.gif';
? ? ? ? ? ? div.innerHTML = '親方库，上午好，好好寫(xiě)代碼';
? ? ? ? } else if (h < 18) {
? ? ? ? ? ? img.src = 'images/x.gif';
? ? ? ? ? ? div.innerHTML = '親障斋，下午好纵潦，好好寫(xiě)代碼';
? ? ? ? } else {
? ? ? ? ? ? img.src = 'images/w.gif';
? ? ? ? ? ? div.innerHTML = '親，晚上好垃环，好好寫(xiě)代碼';
? ? ? ? }
? ? </script>
</body>
```
11-操作元素之表單屬性設(shè)置
```JavaScript
<body>
? ? <button>按鈕</button>
? ? <input type="text" value="輸入內(nèi)容">
? ? <script>
? ? ? ? // 1. 獲取元素
? ? ? ? var btn = document.querySelector('button');
? ? ? ? var input = document.querySelector('input');
? ? ? ? // 2. 注冊(cè)事件 處理程序
? ? ? ? btn.onclick = function() {
? ? ? ? ? ? // input.innerHTML = '點(diǎn)擊了';? 這個(gè)是 普通盒子 比如 div 標(biāo)簽里面的內(nèi)容
? ? ? ? ? ? // 表單里面的值 文字內(nèi)容是通過(guò) value 來(lái)修改的
? ? ? ? ? ? input.value = '被點(diǎn)擊了';
? ? ? ? ? ? // 如果想要某個(gè)表單被禁用 不能再點(diǎn)擊 disabled? 我們想要這個(gè)按鈕 button禁用
? ? ? ? ? ? // btn.disabled = true;
? ? ? ? ? ? this.disabled = true;
? ? ? ? ? ? // this 指向的是事件函數(shù)的調(diào)用者 btn
? ? ? ? }
? ? </script>
</body>
```
12-仿京東顯示隱藏密碼
```JavaScript
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>Document</title>
? ? <style>
? ? ? ? .box {
? ? ? ? ? ? position: relative;
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? border-bottom: 1px solid #ccc;
? ? ? ? ? ? margin: 100px auto;
? ? ? ? }
? ? ? ? .box input {
? ? ? ? ? ? width: 370px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? border: 0;
? ? ? ? ? ? outline: none;
? ? ? ? }
? ? ? ? .box img {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 2px;
? ? ? ? ? ? right: 2px;
? ? ? ? ? ? width: 24px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="box">
? ? ? ? <label for="">
? ? ? ? ? ? <img src="images/close.png" alt="" id="eye">
? ? ? ? </label>
? ? ? ? <input type="password" name="" id="pwd">
? ? </div>
? ? <script>
? ? ? ? // 1. 獲取元素
? ? ? ? var eye = document.getElementById('eye');
? ? ? ? var pwd = document.getElementById('pwd');
? ? ? ? // 2. 注冊(cè)事件 處理程序
? ? ? ? var flag = 0;
? ? ? ? eye.onclick = function() {
? ? ? ? ? ? // 點(diǎn)擊一次之后邀层， flag 一定要變化
? ? ? ? ? ? if (flag == 0) {
? ? ? ? ? ? ? ? pwd.type = 'text';
? ? ? ? ? ? ? ? eye.src = 'images/open.png';
? ? ? ? ? ? ? ? flag = 1; // 賦值操作
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? pwd.type = 'password';
? ? ? ? ? ? ? ? eye.src = 'images/close.png';
? ? ? ? ? ? ? ? flag = 0;
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</body>
```
13-操作元素之修改樣式屬性
```JavaScript
head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>Document</title>
? ? <style>
? ? ? ? div {
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? background-color: pink;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div></div>
? ? <script>
? ? ? ? // 1. 獲取元素
? ? ? ? var div = document.querySelector('div');
? ? ? ? // 2. 注冊(cè)事件 處理程序
? ? ? ? div.onclick = function() {
? ? ? ? ? ? // div.style里面的屬性 采取駝峰命名法
? ? ? ? ? ? this.style.backgroundColor = 'purple';
? ? ? ? ? ? this.style.width = '250px';
? ? ? ? }
? ? </script>
</body>
```
14-關(guān)閉淘寶二維碼案例
```JavaScript
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>Document</title>
? ? <style>
? ? ? ? .box {
? ? ? ? ? ? position: relative;
? ? ? ? ? ? width: 74px;
? ? ? ? ? ? height: 88px;
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? margin: 100px auto;
? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? color: #f40;
? ? ? ? ? ? /* display: block; */
? ? ? ? }
? ? ? ? .box img {
? ? ? ? ? ? width: 60px;
? ? ? ? ? ? margin-top: 5px;
? ? ? ? }
? ? ? ? .close-btn {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: -1px;
? ? ? ? ? ? left: -16px;
? ? ? ? ? ? width: 14px;
? ? ? ? ? ? height: 14px;
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? line-height: 14px;
? ? ? ? ? ? font-family: Arial, Helvetica, sans-serif;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="box">
? ? ? ? 淘寶二維碼
? ? ? ? <img src="images/tao.png" alt="">
? ? ? ? <i class="close-btn">×</i>
? ? </div>
? ? <script>
? ? ? ? // 1. 獲取元素
? ? ? ? var btn = document.querySelector('.close-btn');
? ? ? ? var box = document.querySelector('.box');
? ? ? ? // 2.注冊(cè)事件 程序處理
? ? ? ? btn.onclick = function() {
? ? ? ? ? ? box.style.display = 'none';
? ? ? ? }
? ? </script>
</body>
```
