寫在前頭
在我決定走前端時，大概是21年暑假，那時參加了學(xué)校的ACM集訓(xùn)，在堅持了一個暑假期間，我也認(rèn)識到自己不是“小鎮(zhèn)做題家” 。當(dāng)然也沒那做題的腦子。 之前都是一直偶爾興趣來了學(xué)學(xué)前端。
大一折騰了很多其他的玩意(錢，嘻嘻嘻)，也賺到?jīng)]幾個硬幣。現(xiàn)在大二開始好好準(zhǔn)備春招。每天公眾號打卡，沒人看也無所謂。
春招倒計時
今天是2022年的第一天。
?每日小結(jié)
有效學(xué)習(xí)時間
6h
學(xué)習(xí)內(nèi)容
DOM 的部分操作、將某馬的HTML前面2個小節(jié)復(fù)習(xí)敲完了一遍（表單，列表，文本域等等）具體就不細(xì)說了
目前水平
HTML,CSS：看了某馬的html，css網(wǎng)課，全敲完了一遍。菜鳥教程也看了一遍。
JavaScript：還在上著某馬的課
2022.1.1
代碼粗糙筆記 -- 知道自己每天學(xué)了啥就行，哈哈哈。
目錄
DOM：P194～210
01-getElementById獲取元素
```JavaScript
<body>
? ? <div id="time">2019-9-9</div>
? ? <script>
? ? ? ? // 1. 因為我們文檔頁面從上往下加載，所以先得有標(biāo)簽 所以我們script寫到標(biāo)簽的下面
? ? ? ? // 2. get 獲得 element 元素 by 通過 駝峰命名法
? ? ? ? // 3. 參數(shù) id是大小寫敏感的字符串
? ? ? ? // 4. 返回的是一個元素對象
? ? ? ? var timer = document.getElementById('time');
? ? ? ? console.log(timer);
? ? ? ? console.log(typeof timer);
? ? ? ? // 5. console.dir 打印我們返回的元素對象 更好的查看里面的屬性和方法
? ? ? ? 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.返回的是 獲取過來元素對象的集合 以偽數(shù)組的形式存儲的
? ? ? ? var lis = document.getElementsByTagName('li');
? ? ? ? console.log(lis);
? ? ? ? console.log(lis[0]);
? ? ? ? // 2. 我們想要依次打印里面的元素對象我們可以采取遍歷的方式
? ? ? ? for (var i = 0; i < lis.length; i++) {
? ? ? ? ? ? console.log(lis[i]);
? ? ? ? }
? ? ? ? // 3. 如果頁面中只有一個li 返回的還是偽數(shù)組的形式
? ? ? ? // 4. 如果頁面中沒有這個元素 返回的是空的偽數(shù)組的形式
? ? ? ? // 5. element.getElementsByTagName('標(biāo)簽名'); 父元素必須是指定的單個元素
? ? ? ? // 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>首頁</li>
? ? ? ? ? ? <li>產(chǎn)品</li>
? ? ? ? </ul>
? ? </div>
? ? <script>
? ? ? ? // 1. getElementsByClassName 根據(jù)類名獲得某些元素集合
? ? ? ? var boxs = document.getElementsByClassName('box');
? ? ? ? console.log(boxs);
? ? ? ? // 2. querySelector 返回指定選擇器的第一個元素對象? 切記 里面的選擇器需要加符號 .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()返回指定選擇器的所有元素對象集合
? ? ? ? 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>
? ? ? ? // 點擊一個按鈕，彈出對話框
? ? ? ? // 1. 事件是有三部分組成? 事件源? 事件類型? 事件處理程序? 我們也稱為事件三要素
? ? ? ? //(1) 事件源 事件被觸發(fā)的對象? 誰? 按鈕
? ? ? ? var btn = document.getElementById('btn');
? ? ? ? //(2) 事件類型? 如何觸發(fā) 什么事件 比如鼠標(biāo)點擊(onclick) 還是鼠標(biāo)經(jīng)過 還是鍵盤按下
? ? ? ? //(3) 事件處理程序? 通過一個函數(shù)賦值的方式 完成
? ? ? ? btn.onclick = function() {
? ? ? ? ? ? alert('點秋香');
? ? ? ? }
? ? </script>
</body>
```
06-執(zhí)行事件步驟
```JavaScript
<body>
? ? <div>123</div>
? ? <script>
? ? ? ? // 執(zhí)行事件步驟
? ? ? ? // 點擊div 控制臺輸出 我被選中了
? ? ? ? // 1. 獲取事件源
? ? ? ? var div = document.querySelector('div');
? ? ? ? // 2.綁定事件 注冊事件
? ? ? ? // div.onclick
? ? ? ? // 3.添加事件處理程序
? ? ? ? div.onclick = function() {
? ? ? ? ? ? console.log('我被選中了');
? ? ? ? }
? ? </script>
</body>
```
07-操作元素之改變元素內(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)時間</button>
? ? <div>某個時間</div>
? ? <p>1123</p>
? ? <script>
? ? ? ? // 當(dāng)我們點擊了按鈕，? div里面的文字會發(fā)生變化
? ? ? ? // 1. 獲取元素
? ? ? ? var btn = document.querySelector('button');
? ? ? ? var div = document.querySelector('div');
? ? ? ? // 2.注冊事件
? ? ? ? btn.onclick = function() {
? ? ? ? ? ? // div.innerText = '2019-6-6';
? ? ? ? ? ? div.innerHTML = getDate();
? ? ? ? }
? ? ? ? function getDate() {
? ? ? ? ? ? var date = new Date();
? ? ? ? ? ? // 我們寫一個 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];
? ? ? ? }
? ? ? ? // 我們元素可以不用添加事件
? ? ? ? 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 不識別html標(biāo)簽 非標(biāo)準(zhǔn)? 去除空格和換行
? ? ? ? var div = document.querySelector('div');
? ? ? ? // div.innerText = '<strong>今天是：</strong> 2019';
? ? ? ? // 2. innerHTML 識別html標(biāo)簽 W3C標(biāo)準(zhǔn) 保留空格和換行的
? ? ? ? div.innerHTML = '<strong>今天是：</strong> 2019';
? ? ? ? // 這兩個屬性是可讀寫的? 可以獲取元素里面的內(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. 注冊事件? 處理程序
? ? ? ? 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-分時問候并顯示不同圖片案例
```JavaScript
<body>
? ? <img src="images/s.gif" alt="">
? ? <div>上午好</div>
? ? <script>
? ? ? ? // 根據(jù)系統(tǒng)不同時間來判斷，所以需要用到日期內(nèi)置對象
? ? ? ? // 利用多分支語句來設(shè)置不同的圖片
? ? ? ? // 需要一個圖片，并且根據(jù)時間修改圖片，就需要用到操作元素src屬性
? ? ? ? // 需要一個div元素，顯示不同問候語，修改元素內(nèi)容即可
? ? ? ? // 1.獲取元素
? ? ? ? var img = document.querySelector('img');
? ? ? ? var div = document.querySelector('div');
? ? ? ? // 2. 得到當(dāng)前的小時數(shù)
? ? ? ? var date = new Date();
? ? ? ? var h = date.getHours();
? ? ? ? // 3. 判斷小時數(shù)改變圖片和文字信息
? ? ? ? if (h < 12) {
? ? ? ? ? ? img.src = 'images/s.gif';
? ? ? ? ? ? div.innerHTML = '親，上午好，好好寫代碼';
? ? ? ? } else if (h < 18) {
? ? ? ? ? ? img.src = 'images/x.gif';
? ? ? ? ? ? div.innerHTML = '親，下午好，好好寫代碼';
? ? ? ? } else {
? ? ? ? ? ? img.src = 'images/w.gif';
? ? ? ? ? ? div.innerHTML = '親，晚上好，好好寫代碼';
? ? ? ? }
? ? </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. 注冊事件 處理程序
? ? ? ? btn.onclick = function() {
? ? ? ? ? ? // input.innerHTML = '點擊了';? 這個是 普通盒子 比如 div 標(biāo)簽里面的內(nèi)容
? ? ? ? ? ? // 表單里面的值 文字內(nèi)容是通過 value 來修改的
? ? ? ? ? ? input.value = '被點擊了';
? ? ? ? ? ? // 如果想要某個表單被禁用 不能再點擊 disabled? 我們想要這個按鈕 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. 注冊事件 處理程序
? ? ? ? var flag = 0;
? ? ? ? eye.onclick = function() {
? ? ? ? ? ? // 點擊一次之后， 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. 注冊事件 處理程序
? ? ? ? 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.注冊事件 程序處理
? ? ? ? btn.onclick = function() {
? ? ? ? ? ? box.style.display = 'none';
? ? ? ? }
? ? </script>
</body>
```
