1. Web APIs 和 JS 基礎關聯性
1.1 JS 的組成
1.2 JS 基礎階段以及 Web APIs 階段
JS 基礎階段
- 我們學習的是 ECMAScript 標準規定的基本語法
- 要求同學們掌握 JS 基礎語法
- 只學習基本語法，做不了常用的網頁交互效果
- 目的是爲了 JS 後面的課程打基礎、做鋪墊
Web APIs 階段
- Web APIs 是 W3C 組織的標準
- Web APIs 我們主要學習 DOM 和 BOM
- Web APIs 是我們 JS 所獨有的部分
- 我們主要學習頁面交互功能
- 需要使用 JS 基礎的課程內容做基礎
JS 基礎學習 ECMAScript 基礎語法爲後面作鋪墊， Web APIs 是 JS 的應用，大量使用 JS 基礎語法做交互效果
2. API 和 Web API
2.1 API
API（Application Programming Interface,應用程序編程接口）是一些預先定義的函數，目的是提供應用程序與開發人員基於某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，或理解內部工作機制的細節。
簡單理解：API 是給程序員提供的一種工具，以便能更輕鬆的實現想要完成的功能。
比如手機充電的接口：
我們要實現充電這個功能：
- 我們不關心手機內部變壓器，內部怎麼存儲電等
- 我們不關心這個充電線怎麼製作的
- 我們只知道，我們拿着充電線插進充電接口就可以充電
- 這個充電接口就是一個 API
2.2 Web API
Web API 是瀏覽器 提供的一套操作 瀏覽器功能 和 頁面元素 的 API ( BOM 和 DOM )。
現階段我們主要針對於瀏覽器講解常用的 API , 主要針對瀏覽器做交互效果。
比如我們想要瀏覽器彈出一個警示框， 直接使用 alert(‘彈出’)
MDN 詳細 API : https://developer.mozilla.org/zh-CN/docs/Web/API
因爲 Web API 很多，所以我們將這個階段稱爲 Web APIs
2.3 API 和 Web API 總結
- API 是爲我們程序員提供的一個接口，幫助我們實現某種功能，我們會使用就可以了，不必糾結內部如何實現
- Web API 主要是針對於瀏覽器提供的接口，主要針對於瀏覽器做交互效果。
- Web API 一般都有輸入和輸出（函數的傳參和返回值），Web API 很多都是方法（函數）
- 學習 Web API 可以結合前面學習內置對象方法的思路學習
1. DOM 簡介
1.1 什麼是 DOM
文檔對象模型（Document Object Model，簡稱 DOM），是 W3C 組織推薦的處理可擴展標記語言（HTML或者XML）的標準 編程接口。
W3C 已經定義了一系列的 DOM 接口，通過這些 DOM 接口可以改變網頁的內容、結構和樣式。
1.2 DOM 樹
-
文檔：一個頁面就是一個文檔，DOM 中使用 document 表示
-
元素：頁面中的所有標籤都是元素，DOM 中使用 element 表示
-
節點：網頁中的所有內容都是節點（標籤、屬性、文本、註釋等），DOM 中使用 node 表示
DOM 把以上內容都看做是對象
2. 獲取元素
2.1 如何獲取頁面元素
DOM在我們實際開發中主要用來操作元素。
我們如何來獲取頁面中的元素呢?
獲取頁面中的元素可以使用以下幾種方式：
- 根據 ID 獲取
- 根據標籤名獲取
- 通過 HTML5 新增的方法獲取
- 特殊元素獲取
2.2 根據 ID 獲取
使用 getElementById() 方法可以獲取帶有 ID 的元素對象。
document.getElementById('id');
使用 console.dir() 可以打印我們獲取的元素對象，更好的查看對象裏面的屬性和方法。
01 - getElementById獲取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01 - getElementById獲取元素</title>
</head>
<body>
<div id="time">2020-6-1</div>
<script>
// 1. 因爲我們文檔頁面從上往下加載，所以先得有標籤 所以我們script寫到標籤的下面
// 2. get 獲得 element 元素 by 通過 駝峯命名法
// 3. 參數 id是大小寫敏感的字符串
// 4. 返回的是一個元素對象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5. console.dir 打印我們返回的元素對象 更好的查看裏面的屬性和方法
console.dir(timer);
</script>
</body>
</html>
2.3 根據標籤名獲取
使用 getElementsByTagName() 方法可以返回帶有指定標籤名的對象的集合。
document.getElementsByTagName('標籤名');
注意：
1. 因爲得到的是一個對象的集合，所以我們想要操作裏面的元素就需要遍歷。
2. 得到元素對象是動態的
3. 如果獲取不到元素,則返回爲空的僞數組(因爲獲取不到對象)
還可以獲取某個元素(父元素)內部所有指定標籤名的子元素.
element.getElementsByTagName('標籤名');
注意：父元素必須是 單個對象(必須指明是哪一個元素對象). 獲取的時候不包括父元素自己。
02 - getElementsByTagName獲取某些元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02 - getElementsByTagName獲取某些元素</title>
</head>
<body>
<ul>
<li>知否知否，應是等你好久11</li>
<li>知否知否，應是等你好久11</li>
<li>知否知否，應是等你好久11</li>
<li>知否知否，應是等你好久11</li>
</ul>
<ol id="ol">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ol>
<script>
// 1.返回的是 獲取過來元素對象的集合 以僞數組的形式存儲的
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 返回的還是僞數組的形式
// 4. 如果頁面中沒有這個元素 返回的是空的僞數組的形式
// 5. element.getElementsByTagName('標籤名'); 父元素必須是指定的單個元素
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
</script>
</body>
</html>
2.4 通過 HTML5 新增的方法獲取
1. document.getElementsByClassName(‘類名’); // 根據類名返回元素對象集合
2. document.querySelector('選擇器'); // 根據指定選擇器返回第一個元素對象
3. document.querySelectorAll('選擇器'); // 根據指定選擇器返回
注意：
querySelector 和 querySelectorAll裏面的選擇器需要加符號
比如:document.querySelector( '#nav ');
03 - H5新增獲取元素方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03 - H5新增獲取元素方式</title>
</head>
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首頁</li>
<li>產品</li>
</ul>
</div>
<script>
// 1. getElementsByClassName 根據類名獲得某些元素集合
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>
</html>
2.5 獲取特殊元素（body，html）
獲取body元素
1. doucumnet.body // 返回body元素對象
獲取html元素
1. document.documentElement // 返回html元素對象
04 - 獲取特殊元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04 - 獲取特殊元素</title>
</head>
<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>
</html>
3. 事件基礎
3.1 事件概述
JavaScript 使我們有能力創建動態頁面，而事件是可以被 JavaScript 偵測到的行爲。
簡單理解： 觸發— 響應機制。
網頁中的每個元素都可以產生某些可以觸發 JavaScript 的事件，例如，我們可以在用戶點擊某按鈕時產生一個事件，然後去執行某些操作。
3.2 事件三要素
- 事件源 （誰）
- 事件類型 （什麼事件）
- 事件處理程序 （做啥）
3.3 常見的鼠標事件
| 鼠標事件 | 觸發條件 |
|---|---|
| onclick | 鼠標點擊左鍵觸發 |
| onmouseover | 鼠標經過觸發 |
| onmouseout | 鼠標離開觸發 |
| onfocus | 獲得鼠標焦點觸發 |
| onblur | 失去鼠標焦點觸發 |
| onmousemove | 鼠標移動觸發 |
| onmouseup | 鼠標彈起觸發 |
| onmousedown | 鼠標按下觸發 |
05 - 事件三要素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05 - 事件三要素</title>
</head>
<body>
<button id="btn">唐伯虎</button>
<script>
// 點擊一個按鈕，彈出對話框
// 1. 事件是有三部分組成 事件源 事件類型 事件處理程序 我們也稱爲事件三要素
//(1) 事件源 事件被觸發的對象 誰 按鈕
var btn = document.getElementById('btn');
//(2) 事件類型 如何觸發 什麼事件 比如鼠標點擊(onclick) 還是鼠標經過 還是鍵盤按下
//(3) 事件處理程序 通過一個函數賦值的方式 完成
btn.onclick = function() {
alert('點秋香');
}
</script>
</body>
</html>
06 - 執行事件步驟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06 - 執行事件步驟</title>
</head>
<body>
<div>123</div>
<script>
// 執行事件步驟
// 點擊div 控制檯輸出 我被選中了
// 1. 獲取事件源
var div = document.querySelector('div');
// 2.綁定事件 註冊事件
// div.onclick
// 3.添加事件處理程序
div.onclick = function() {
console.log('我被選中了');
}
</script>
</body>
</html>
4. 操作元素
JavaScript 的 DOM 操作可以改變網頁內容、結構和樣式，我們可以利用 DOM 操作元素來改變元素裏面的內容 、屬性等。注意以下都是屬性
4.1 改變元素內容
element.innerText
從起始位置到終止位置的內容, 但它去除 html 標籤， 同時空格和換行也會去掉
element.innerHTML
起始位置到終止位置的全部內容，包括 html 標籤，同時保留空格和換行
07 - 操作元素之改變元素內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07 - 操作元素之改變元素內容</title>
<style>
div,
p {
margin-top: 30px;
width: 300px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: #2ecc71;
}
</style>
</head>
<body>
<button>顯示當前系統時間</button>
<div>某個時間</div>
<p>1123</p>
<script>
// 當我們點擊了按鈕， div裏面的文字會發生變化
// 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();
// 我們寫一個 2020年 6月 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>
</html>
08 - innerText和innerHTML的區別
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08 - innerText和innerHTML的區別</title>
</head>
<body>
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
// innerText 和 innerHTML的區別
// 1. innerText 不識別html標籤 非標準 去除空格和換行
var div = document.querySelector('div');
// div.innerText = '<strong>今天是：</strong> 2020';
// 2. innerHTML 識別html標籤 W3C標準 保留空格和換行的
div.innerHTML = '<strong>今天是：</strong> 2020';
// 這兩個屬性是可讀寫的 可以獲取元素裏面的內容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
</body>
</html>
4.2 常用元素的屬性操作
- innerText、innerHTML 改變元素內容
- src、href
- id、alt、title
09 - 操作元素之修改元素屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09 - 操作元素之修改元素屬性</title>
<style>
img {
width: 300px;
}
</style>
</head>
<body>
<button id="chuoye">戳爺</button>
<button id="jiesen">傑森斯坦森</button> <br>
<img src="images/chuoye.jpg" alt="" title="劉德華">
<script>
// 修改元素屬性 src
// 1. 獲取元素
var chuoye = document.getElementById('chuoye');
var jiesen = document.getElementById('jiesen');
var img = document.querySelector('img');
// 2. 註冊事件 處理程序
chuoye.onclick = function() {
img.src = 'images/chuoye.jpg';
img.title = '戳爺';
}
jiesen.onclick = function() {
img.src = 'images/jiesen.jpg';
img.title = '傑森斯坦森';
}
</script>
</body>
</html>
10 - 分時問候並顯示不同圖片案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10 - 分時問候並顯示不同圖片案例</title>
<style>
img {
width: 300px;
}
</style>
</head>
<body>
<img src="images/s.gif" alt="">
<div>上午好</div>
<script>
// 根據系統不同時間來判斷，所以需要用到日期內置對象
// 利用多分支語句來設置不同的圖片
// 需要一個圖片，並且根據時間修改圖片，就需要用到操作元素src屬性
// 需要一個div元素，顯示不同問候語，修改元素內容即可
// 1.獲取元素
var img = document.querySelector('img');
var div = document.querySelector('div');
// 2. 得到當前的小時數
var date = new Date();
var h = date.getHours();
// 3. 判斷小時數改變圖片和文字信息
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>
</html>
11 - 操作元素之表單屬性設置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11 - 操作元素之表單屬性設置</title>
</head>
<body>
<button>按鈕</button>
<input type="text" value="輸入內容">
<script>
// 1. 獲取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2. 註冊事件 處理程序
btn.onclick = function() {
// input.innerHTML = '點擊了'; 這個是 普通盒子 比如 div 標籤裏面的內容
// 表單裏面的值 文字內容是通過 value 來修改的
input.value = '被點擊了';
// 如果想要某個表單被禁用 不能再點擊 disabled 我們想要這個按鈕 button禁用
// btn.disabled = true;
this.disabled = true;
// this 指向的是事件函數的調用者 btn
}
</script>
</body>
</html>
12 - 仿京東顯示隱藏密碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12 - 仿京東顯示隱藏密碼</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>
</html>
13 - 操作元素之修改樣式屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13 - 操作元素之修改樣式屬性</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>
</html>
14 - 關閉淘寶二維碼案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14 - 關閉淘寶二維碼案例</title>
<style>
.box {
position: relative;
width: 76px;
height: 90px;
border: 1px solid #eee;
margin: 100px auto;
font-size: 12px;
text-align: center;
color: #ff5000;
/* display: block; */
}
.box span {
line-height: 22px;
}
.box img {
width: 62px;
height: 62px;
}
.close-btn {
position: absolute;
top: -1px;
left: -16px;
width: 14px;
height: 14px;
border: 1px solid #eee;
line-height: 14px;
color: #ddd;
font-family: tahoma, Arial, Helvetica, sans-serif;
cursor: pointer;
text-decoration: none;
}
</style>
</head>
<body>
<div class="box">
<span>手機淘寶</span>
<img src="images/tao.png" alt="">
<s class="close-btn">x</s>
</div>
<script>
// 1. 獲取元素
var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
// 2.註冊事件 程序處理
btn.onclick = function() {
box.style.display = 'none';
}
</script>
</body>
</html>
15 - 循環精靈圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15 - 循環精靈圖</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.box {
width: 250px;
margin: 100px auto;
}
.box li {
float: left;
width: 24px;
height: 24px;
background-color: pink;
margin: 15px;
background: url(images/sprite.png) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 1. 獲取元素 所有的小li
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
// 讓索引號 乘以 44 就是每個li 的背景y座標 index就是我們的y座標
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
</body>
</html>
測試
考點：獲取元素
-
關於獲取元素,以下描述正確的是 ( D )。
A. document.getElementById()獲取到的是元素集合
B. document.getElementsByTagName()獲取到的是單個元素
C. document.querySelector()獲取到的是元素集合
D. document.getElementsByClassName()有瀏覽器兼容性問題
解析：
A選項，返回的是單個元素對象或null；
B選項返回的是元素集合；
C選項返回的單個元素對象；
D選項，是h5新增的方法，所以有瀏覽器兼容性問題 -
關於獲取元素,以下獲取到單個元素的方法是 （ A ）
A. document.getElementById()
B. document.getElementsByTagName()
C. document.querySelectorAll()
D. document.getElementsByClassName()
-
（多選）關於獲取元素,以下獲取到元素集合的方法是（ AD ）。
A. document.getElementById()
B. document.getElementsByClassName()
C. document.querySelector()
D. document.querySelectorAll()
考點：註冊事件
-
點擊一個按鈕，彈出對話框，____ 應該填寫的正確代碼是（ A ）。
<body> <button id="btn">唐伯虎</button> <script> var btn = document.getElementById('btn'); ____________ </script> </body>A.
btn.onclick = function() {alert('點秋香');}B.
btn.onclick = alert('點秋香');C.
btn.click = function() {alert('點秋香');D.
btn.click() -
（多選題）關於事件，下列描述正確的是（ BD ）。
A. 當頁面一打開，所有的事件就會被觸發
B. 註冊事件的格式爲： 事件源.事件 = 事件處理程序
C. 一個事件只能觸發執行一次
D. 事件函數內this指的是當前觸發事件的元素
考點：操作元素內容
-
（多選題）關於操作元素的內容，說法正確的是（ ABC ）。
A. innerHTML可以識別渲染html標籤
B. innerText不可以識別html標籤
C. element.innerHTML = ‘’; 和 element.innerText = ‘’; 作用一樣
D. var content = element.innerHTML; 和 var content = element.innerText; 的作用一樣
解析： innerText和innerHTML的區別。修改內容時,innerHTML可以識別渲染標籤，innerText不可以，所有AB選項正確。C選項，都是清空標籤的內容，正確。D選項，獲取內容時，innerHTML會原封不動的獲取內容包括標籤、空白、換行，而innerText會過濾標籤、空白、換行。
-
（單選題）關於操作元素的屬性，錯誤的是（ D ）。
A. element.id = ‘box01’;
B. element.src = ‘image/new.jpg’;
C. element.title = ‘冰冰’;
D. element.class = ‘contentLeft’;
解析： 操作元素常用屬性。操作元素屬性的格式爲：元素對象.屬性名 = 值; 但是class屬性特殊，用className。
作業
1 - 輸入框內容顯示和隱藏（加強訓練）
-
題目描述
仿世紀佳緣網，顯示和隱藏輸入框中的提示內容，具體表現：
1）輸入框獲得焦點，提示內容消失，邊框變色
2）輸入框失去焦點，如果內容爲空，提示內容恢復，邊框變色；如果內容不爲空，只有邊框變色
-
分析
-
給文本框註冊獲得焦點事件，清空value值，改變border的顏色
-
給文本框註冊失去焦點事件
-
獲取並判斷文本框的內容
-
內容爲空，恢復提示內容，邊框恢復原來的顏色
-
內容不爲空，邊框恢復原來的顏色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1 - 輸入框內容顯示和隱藏（加強訓練）</title>
<style>
.input_text {
border: 1px solid #d9d9d9;
color: #aaa;
outline: none;
}
.input_text_focus {
border: 1px solid #ffd6db;
color: #888;
outline: none;
}
</style>
</head>
<body>
<div class="new_header">
<div class="new_wrap">
<div class="form_login">
<form action="" id="hder_login_form_new" method="post">
<input type="text" class="input_text" id="uname" value="郵箱/ID/手機號">
</form>
</div>
</div>
</div>
<script>
var inputObj = document.getElementById('uname');
inputObj.onfocus = function(){
if(this.value == '郵箱/ID/手機號'){
this.value = '';
this.className = 'input_text_focus';
}
}
inputObj.onblur = function(){
if(this.value == ''){
this.className = 'input_text';
this.value = '郵箱/ID/手機號';
}
}
</script>
</body>
</html>
2 - 京東關閉廣告（直接隱藏即可）（加強訓練）
-
題目描述
仿京東網，單擊關閉廣告。
-
分析
-
獲取要操作的關閉按鈕和廣告元素
-
關閉按鈕註冊單擊事件
-
隱藏廣告元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2 - 京東關閉廣告（直接隱藏即可）（加強訓練）</title>
<style>
*{
margin: 0;
padding: 0;
}
.activity-top {
background: rgb(226, 66, 8);
}
.jd_container{
background: url(./images/dj.webp) no-repeat 50% 0;
width: 1190px;
height: 80px;
position: relative;
margin: auto;
}
.jd_container .jd_618 {
background: url(./images/dj_618.webp);
width: 190px;
height: 80px;
}
.jd_container .top-parts {
position: absolute;
top: 18px;
right: 30px;
height: 100%;
line-height: 80px;
}
.jd_container .top-parts a{
width: 116px;
height: 46px;
margin-right: 10px;
display: inline-block;
}
.jd_container .jd_close {
background: url(./images/dj_close.png) top/100%;
width: 20px;
height: 20px;
display: block;
position: absolute;
top: 5px;
right: 0px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="J_promtional-top">
<div class="activity-top">
<div class="jd_container">
<div class="jd_618"></div>
<div class="top-parts">
<a href="">
<img src="./images/top-parts__item1.webp" alt="">
</a>
<a href="">
<img src="./images/top-parts__item2.webp" alt="">
</a>
</div>
<i class="jd_close"></i>
</div>
</div>
</div>
<script>
var closeObj = document.querySelector('.jd_close');
var activityObj = document.querySelector('.activity-top');
closeObj.onclick = function(){
activityObj.style.display = 'none';
}
</script>
</body>
</html>
3 - 新浪下拉菜單（加強訓練）
-
題目描述
仿新浪網，鼠標移入顯示下拉菜單，鼠標移出隱藏下拉菜單。
-
分析
- 獲取要操作的“微博”和下拉菜單元素
- 給“微博”註冊鼠標移入事件，顯示下拉菜單
- 給“微博”註冊鼠標移出事件，隱藏下拉菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3 - 新浪下拉菜單（加強訓練）</title>
<style>
*{
margin: 0;
padding: 0;
font-size: 12px;
}
a{
text-decoration: none;
color: #333;
}
ul li{
list-style: none;
}
.top-nav {
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
height: 40px;
}
.weibo {
width: 78px;
margin: 0 auto;
}
.weibo li i{
width: 40px;
display: inline-block;
height: 16px;
font-style: normal;
color: #4C4C4C;
padding: 12px 15px 12px 18px;
cursor: pointer;
}
.weibo li i:hover{
background-color: #EDEEF0;
color: #ff8400;
}
.arrow {
display: inline-block;
width: 8px;
height: 5px;
background: url(./images/icon.png) 0 -977px no-repeat;
margin-left: 6px;
margin-bottom: 1px;
}
.topmenulist {
display: none;
width: 78px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
border: 1px solid #EBBE7A;
border-bottom: none;
border-top: none;
}
.topmenulist .nav a {
display: block;
width: 48px;
line-height: 30px;
padding: 0 15px;
border-bottom: 1px solid #fecc58;
}
.topmenulist .nav a:hover{
color: #E67902;
background: #FFF5DA;
}
</style>
</head>
<body>
<div class="top-nav">
<ul class="weibo" id="top_weibo">
<li>
<i href="">微博<span class="arrow"></span></i>
<div class="topmenulist" id="weibo_list">
<nav class="nav">
<a href="">私信</a>
<a href="">評論</a>
<a href="">@我</a>
</nav>
</div>
</li>
</ul>
</div>
<script>
var i_weibo = document.querySelector('i');
var top_weibo = document.getElementById('top_weibo');
var weibo_list = document.getElementById('weibo_list');
top_weibo.onmouseover = function(){
i_weibo.style.backgroundColor = '#EDEEF0';
weibo_list.style.display = 'block';
}
top_weibo.onmouseout = function(){
i_weibo.style.backgroundColor = '#fcfcfc';
weibo_list.style.display = 'none';
}
</script>
</body>
</html>
4 - 網頁開關燈（加強訓練）
-
題目描述
單擊按鈕，控制網頁開關燈
-
分析
1.獲取要操作的按鈕和body元素
2.給按鈕註冊單擊事件
3.使用全局變量記錄燈的狀態
4.根據燈的狀態，控制body元素的背景色，實現開關燈效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4 - 開關燈案例</title>
</head>
<body>
<button id="btn">開關燈</button>
<script>
var btn = document.getElementById('btn');
var flag = 0;
btn.onclick = function() {
if (flag == 0) {
document.body.style.backgroundColor = 'black';
flag = 1;
} else {
document.body.style.backgroundColor = '#fff';
flag = 0;
}
}
</script>
</body>
</html>
