什么是 HTML 以及怎樣使用 HTML 編寫網(wǎng)頁(yè)
網(wǎng)頁(yè)的結(jié)構(gòu)是怎樣
什么是 CSS 以及怎樣使用 CSS
如何在網(wǎng)頁(yè)中引入 JavaScript 代碼
什么是 DOM, 常用 DOM API 使用
Fe-5-1 html
Fe-5-2 js
- 兩種引入js代碼
- 直接寫
- 外部引用
html
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<script type="text/javascript">
console.log('in');
</script>
<script src="topic.js" charset="utf-8"></script>
</body>
</html>
js
console.log('out');
*運(yùn)行結(jié)果
微信截圖_20180106025204.png
- js代碼放在body最后執(zhí)行
- DOM文檔對(duì)象類型，是瀏覽器對(duì)html文件的描述方式
- DOM API 是瀏覽器提供給js操作html頁(yè)面內(nèi)元素的方式
// 查找元素
// ===
//
// 查找元素使用 document.querySelector() 函數(shù)
// 這個(gè)函數(shù)的參數(shù)是一個(gè)選擇器(和 CSS 選擇器一樣)
// 選擇器語(yǔ)法和 CSS 選擇器一樣, 現(xiàn)在只用 3 個(gè)基礎(chǔ)選擇器
// 元素選擇器
var body = document.querySelector('body')
// class 選擇器, 用的是 .類名
var form = document.querySelector('.login-form')
// id 選擇器, 用的是 #id
var loginButton = document.querySelector('#id-button-login')
// log 出來(lái)看看
log(body, form, loginButton)
// 操作元素的默認(rèn)屬性
// ===
//
// 獲得特定屬性值
// 注意想虎， getAttribute 只能得到默認(rèn)值妓布，而不是得到當(dāng)前的值
// 當(dāng)前的值可能是被改動(dòng)后的值
var user = document.querySelector('#id-input-username')
var userValue = user.getAttribute('value')
log('user value', userValue)
// 不存在的屬性會(huì)返回 null, 它在 js 中代表不存在
log('沒(méi)有的屬性', user.getAttribute('不存在'))
//
// 設(shè)置特定屬性值
user.setAttribute('value', '新用戶名')
// 查詢屬性是否存在
log(user.hasAttributes()) // 查看元素是否有屬性
log(user.hasAttribute('value')) // 查看元素是否有特定屬性
// 刪除某個(gè)屬性
user.removeAttribute('type')
// 獲得所有屬性
var attributes = user.attributes
log('所有屬性', attributes)
// 操作元素(創(chuàng)建, 刪除, 修改)
// ===
//
// 用 document.createElement 函數(shù)創(chuàng)建一個(gè)元素
var button = document.createElement('button');
// 用 innerHTML 設(shè)置屬性
button.innerHTML = '注冊(cè)用戶'
// 修改
// 用 appendChild 給一個(gè)元素添加子元素
// 這里我們給 .login-form 添加剛才創(chuàng)建好的按鈕
var form = document.querySelector('.login-form')
form.appendChild(button)
//
// 刪除元素
var pwd = document.querySelector('#id-input-password')
// 以下兩種方法都可以刪除元素
// 一種是自毀
// 一種是父節(jié)點(diǎn)刪除子元素
pwd.remove()
// form.removeChild(pwd)
// 事件
// ===
//
// 事件是用來(lái)處理響應(yīng)的一個(gè)機(jī)制
// 這個(gè)響應(yīng)可以來(lái)自于用戶(點(diǎn)擊, 鼠標(biāo)移動(dòng), 滾動(dòng))
// 也可以來(lái)自于瀏覽器
//
// 下面的鏈接描述了所有事件, 不過(guò)我們先從最常用的事件學(xué)起, click 事件
// https://developer.mozilla.org/en-US/docs/Web/Events
//
// 常用例子, 給按鈕添加一個(gè)點(diǎn)擊的事件
// 1, 獲得按鈕
var loginButton = document.querySelector('#id-button-login')
// 2, 聲明一個(gè)函數(shù), 用于在按鈕點(diǎn)擊后執(zhí)行
var clicked = function(event) {
log('按鈕被點(diǎn)擊到了', event)
}
// 3, 添加事件, 使用 addEventListener 函數(shù), 它有兩個(gè)參數(shù)
// 第一個(gè)是事件的名字, 第二個(gè)是事件發(fā)生后會(huì)被自動(dòng)調(diào)用的函數(shù)
// loginButton.addEventListener('click', clicked)
// loginButton 發(fā)生了 'click' 事件后調(diào)用 clicked 函數(shù)
//
// 添加完成, 可以自己在瀏覽器試試, 記得打開(kāi) console
// 批量添加事件
var buttons = document.querySelectorAll('button')
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i]
button.addEventListener('click', function(event){
var self = event.target
if (self.innerHTML == '注冊(cè)用戶') {
log('注冊(cè)按鈕')
} else {
log('登錄按鈕')
}
console.log('循環(huán)批量添加click事件', self.id)
})
}
//
// 復(fù)雜的例子，添加選項(xiàng)卡效果（看不懂下節(jié)課就能看懂了）
// 給多個(gè)元素掛上同一個(gè)事件
// 選擇多個(gè)元素使用函數(shù) querySelectorAll
var buttons = document.querySelectorAll('.radio-button')
// 循環(huán)遍歷每個(gè)元素, 并且綁定點(diǎn)擊事件
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i]
button.addEventListener('click', function(event){
// 注意, 這次我們直接定義了函數(shù)作為參數(shù)傳遞, 這樣做是合法的
// 另外, 我們?cè)黾恿艘粋€(gè) event 參數(shù)
// 瀏覽器會(huì)給事件響應(yīng)函數(shù)傳遞一個(gè)參數(shù), 它代表了事件本身
// 我們可以用 event.target 取出響應(yīng)事件的元素
var self = event.target
// clearActive 函數(shù)是我們自己定義的
// 目的是刪除其他元素的 active class
clearActive()
// add 可以增加一個(gè) class
self.classList.add('active')
})
}
//
var clearActive = function() {
var s = document.querySelector('.active')
if (s != null) {
// 使用 classList 可以訪問(wèn)一個(gè)元素的所有 class
// remove 可以刪除一個(gè) class
s.classList.remove("active")
}
}
- var self = event.target 獲取點(diǎn)擊目標(biāo)
