web api 文件 html css js
Web API
Web API介紹
API的概念
API(Application Programming Interface,應用程式程式設計介面)是一些預先定義的函式,目的是提供應用程式與開發人員基於某軟體或硬體得以訪問一組例程的能力,而又無需訪問原始碼,或理解內部工作機制的細節。
- 任何開發語言都有自己的API
- API的特徵輸入和輸出(I/O)
- API的使用方法(console.log())
Web API的概念
瀏覽器提供的一套操作瀏覽器功能和頁面元素的API(BOM和DOM)
此處的Web API特指瀏覽器提供的API(一組方法),Web API在後面的課程中有其它含義
掌握常見的瀏覽器提供的API的呼叫方式
JavaScript的組成
ECMAScript - JavaScript的核心
定義了javascript的語法規範
JavaScript的核心,描述了語言的基本語法和資料型別,ECMAScript是一套標準,定義了一種語言的標準與具體實現無關
BOM - 瀏覽器物件模型
一套操作瀏覽器功能的API
通過BOM可以操作瀏覽器視窗,比如:彈出框、控制瀏覽器跳轉、獲取解析度等
DOM - 文件物件模型
一套操作頁面元素的API
DOM可以把HTML看做是文件樹,通過DOM提供的API可以對樹上的節點進行操作
BOM
BOM的概念
BOM(Browser Object Model) 是指瀏覽器物件模型,瀏覽器物件模型提供了獨立於內容的、可以與瀏覽器視窗進行互動的物件結構。BOM由多個物件組成,其中代表瀏覽器視窗的Window物件是BOM的頂層物件,其他物件都是該物件的子物件。
我們在瀏覽器中的一些操作都可以使用BOM的方式進行程式設計處理,
比如:重新整理瀏覽器、後退、前進、在瀏覽器中輸入URL等
BOM的頂級物件window
window是瀏覽器的頂級物件,當呼叫window下的屬性和方法時,可以省略window 注意:window下一個特殊的屬性 window.name
對話方塊
- alert()
- prompt()
- confirm()
頁面載入事件
- onload
window.onload = function () {
// 當頁面載入完成執行
// 當頁面完全載入所有內容(包括影象、指令碼檔案、CSS 檔案等)執行
}
- onunload
window.onunload = function () {
// 當用戶退出頁面時執行
}
定時器
setTimeout()和clearTimeout()
在指定的毫秒數到達之後執行指定的函式,只執行一次
// 建立一個定時器,1000毫秒後執行,返回定時器的標示
var timerId = setTimeout(function () {
console.log('Hello World');
}, 1000);
// 取消定時器的執行
clearTimeout(timerId);
setInterval()和clearInterval()
定時呼叫的函式,可以按照給定的時間(單位毫秒)週期呼叫函式
// 建立一個定時器,每隔1秒呼叫一次
var timerId = setInterval(function () {
var date = new Date();
console.log(date.toLocaleTimeString());
}, 1000);
// 取消定時器的執行
clearInterval(timerId);
location物件
location物件是window物件下的一個屬性,時候的時候可以省略window物件
location可以獲取或者設定瀏覽器位址列的URL
URL
統一資源定位符 (Uniform Resource Locator, URL)
- URL的組成
scheme://host:port/path?query#fragment
scheme:通訊協議
常用的http,ftp,maito等
host:主機
伺服器(計算機)域名系統 (DNS) 主機名或 IP 地址。
port:埠號
整數,可選,省略時使用方案的預設埠,如http的預設埠為80。
path:路徑
由零或多個'/'符號隔開的字串,一般用來表示主機上的一個目錄或檔案地址。
query:查詢
可選,用於給動態網頁傳遞引數,可有多個引數,用'&'符號隔開,每個引數的名和值用'='符號隔開。例如:name=zs
fragment:資訊片斷
字串,錨點.
location有哪些成員?
使用chrome的控制檯檢視
查MDN
成員
- assign()/reload()/replace()
- hash/host/hostname/search/href……
案例
解析URL中的query,並返回物件的形式
function getQuery(queryStr) {
var query = {};
if (queryStr.indexOf('?') > -1) {
var index = queryStr.indexOf('?');
queryStr = queryStr.substr(index + 1);
var array = queryStr.split('&');
for (var i = 0; i < array.length; i++) {
var tmpArr = array[i].split('=');
if (tmpArr.length === 2) {
query[tmpArr[0]] = tmpArr[1];
}
}
}
return query;
}
console.log(getQuery(location.search));
console.log(getQuery(location.href));
history物件
- back()
- forward()
- go()
navigator物件
- userAgent
通過userAgent可以判斷使用者瀏覽器的型別
- platform
通過platform可以判斷瀏覽器所在的系統平臺型別.
DOM
DOM的概念
文件物件模型(Document Object Model,簡稱DOM),是W3C組織推薦的處理可擴充套件標誌語言的標準程式設計介面。在網頁上,組織頁面(或文件)的物件被組織在一個樹形結構中,用來表示文件中物件的標準模型就稱為DOM。Document Object Model的歷史可以追溯至1990年代後期微軟與Netscape的“瀏覽器大戰”,雙方為了在JavaScript與JScript一決生死,於是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物,既有VBScript、ActiveX、以及微軟自家的DHTML格式等,使不少網頁使用非微軟平臺及瀏覽器無法正常顯示。DOM即是當時蘊釀出來的傑作。
DOM又稱為文件樹模型
- 文件:一個網頁可以稱為文件
- 節點:網頁中的所有內容都是節點(標籤、屬性、文字、註釋等)
- 元素:網頁中的標籤
- 屬性:標籤的屬性
模擬文件樹結構
function Element(option) {
this.id = option.id || '';
this.nodeName = option.nodeName || '';
this.nodeValue = option.nodeValue || '';
this.nodeType = 1;
this.children = option.children || [];
}
var doc = new Element({
nodeName: 'html'
});
var head = new Element({
nodeName: 'head'
});
var body = new Element({
nodeName: 'body'
})
doc.children.push(head);
doc.children.push(body);
var div = new Element({
nodeName: 'div',
nodeValue: 'haha',
});
var p = new Element({
nodeName: 'p',
nodeValue: '段落'
})
body.children.push(div);
body.children.push(p);
function getChildren(ele) {
for(var i = 0; i < ele.children.length; i++) {
var child = ele.children[i];
console.log(child.nodeName);
getChildren(child);
}
}
getChildren(doc);
DOM經常進行的操作
- 獲取元素
- 動態建立元素
- 對元素進行操作(設定其屬性或呼叫其方法)
- 事件(什麼時機做相應的操作)
獲取頁面元素
案例
1.點選按鈕彈出對話方塊 2.點選按鈕修改超連結的地址和熱點文字 3.點選(每個)圖片彈出對話方塊 4.點選圖片設定自身寬和高 5.點選按鈕修改每個圖片的title屬性 6.點選按鈕顯示哈哈(排他功能) 7.點選按鈕顯示和隱藏div 8.顯示和隱藏二維碼 9.點選按鈕修改所有p標籤內容 10.點選按鈕修改所有文字框內容 11.點選按鈕切換圖片 12.點選超連結停止跳轉頁面 13.點選小圖顯示大圖 14.美女相簿 15點選按鈕選中性別和興趣
為什麼要獲取頁面元素
例如:我們想要操作頁面上的某部分(顯示/隱藏,動畫),需要先獲取到該部分對應的元素,才進行後續操作
根據id獲取元素
var div = document.getElementById('main');
console.log(div);
// 獲取到的資料型別 HTMLDivElement,物件都是有型別的
// HTMLDivElement <-- HTMLElement <-- Element <-- Node <-- EventTarget
注意:由於id名具有唯一性,部分瀏覽器支援直接使用id名訪問元素,但不是標準方式,不推薦使用。
根據標籤名獲取元素
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
console.log(div);
}
根據name獲取元素*
var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
console.log(input);
}
根據類名獲取元素
var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
var main = mains[i];
console.log(main);
}
根據選擇器獲取元素
var text = document.querySelector('#text');
console.log(text);
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
console.log(box);
}
- 總結
掌握
getElementById()
getElementsByTagName()
瞭解
getElementsByName()
getElementsByClassName()
querySelector()
querySelectorAll()
事件
事件:觸發-響應機制
Event介面表示在DOM中發生的任何事件,一些是使用者生成的(例如滑鼠或鍵盤事件),而其他由API生成。
事件三要素
- 事件源:觸發(被)事件的元素
- 事件型別:事件的觸發方式(例如滑鼠點選或鍵盤點選)
- 事件處理程式:事件觸發後要執行的程式碼(函式形式)
事件的基本使用
var box = document.getElementById('box');
box.onclick = function() {
console.log('程式碼會在box被點選後執行');
};
案例
- 點選按鈕彈出提示框
- 點選按鈕修改元素的樣式
屬性操作
非表單元素的屬性
href、title、id、src、className
var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);
var pic = document.getElementById('pic');
console.log(pic.src);
案例:
點選按鈕,切換img標籤裡的圖片
點選按鈕顯示隱藏div
- innerHTML和innerText
var box = document.getElementById('box');
box.innerHTML = '我是文字<p>我會生成為標籤</p>';
console.log(box.innerHTML);
box.innerText = '我是文字<p>我不會生成為標籤</p>';
console.log(box.innerText);
- HTML轉義符
" "
‘ '
& &
< < //less than 小於
> > // greater than 大於
空格
© ©
innerHTML和innerText的區別
innerText的相容性處理
表單元素屬性
- value 用於大部分表單元素的內容獲取(option除外)
- type 可以獲取input標籤的型別(輸入框或複選框等)
- disabled 禁用屬性
- checked 複選框選中屬性
- selected 下拉選單選中屬性
案例
- 給文字框賦值,獲取文字框的值
- 點選按鈕禁用文字框
- 搜尋文字框
- 檢測使用者名稱是否是3-6位,密碼是否是6-8位,如果不滿足要求高亮顯示文字框
- 設定下拉框中的選中項
- 全選反選
自定義屬性操作
- getAttribute() 獲取標籤行內屬性
- setAttribute() 設定標籤行內屬性
- removeAttribute() 移除標籤行內屬性
- 與element.屬性的區別: 上述三個方法用於獲取任意的行內屬性。
樣式操作
- 使用style方式設定的樣式顯示在標籤行內
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
注意
通過樣式屬性設定寬高、位置的屬性型別是字串,需要加上px
類名操作
- 修改標籤的className屬性相當於直接修改標籤的類名
var box = document.getElementById('box');
box.className = 'clearfix';
案例
- 開關燈
- 點選按鈕變色
- 圖片切換二維碼案例
- 當前輸入的文字框高亮顯示
- 點選按鈕改變div的大小和位置
- 列表隔行變色、高亮顯示
- 京東商品展示
- tab選項卡切換
建立元素的三種方式
document.write()
document.write('新設定的內容<p>標籤也可以生成</p>');
innerHTML
var box = document.getElementById('box');
box.innerHTML = '新內容<p>新標籤</p>';
document.createElement()
var div = document.createElement('div');
document.body.appendChild(div);
效能問題
- innerHTML方法由於會對字串進行解析,需要避免在迴圈內多次使用。
- 可以藉助字串或陣列的方式進行替換,再設定給innerHTML
- 優化後與document.createElement效能相近
案例
- 動態建立列表,高亮顯示
- 根據資料動態建立表格
- 模擬百度搜索文字框
節點操作
var body = document.body;
var div = document.createElement('div');
body.appendChild(div);
var firstEle = body.children[0];
body.insertBefore(div,firstEle);
body.removeChild(firstEle);
var text = document.createElement('p');
body.replaceChild(text, div);
案例:
許可權選擇
節點層級
重點講父子屬性,兄弟屬性畫圖講解
var box = document.getElementById('box');
console.log(box.parentNode);
console.log(box.childNodes);
console.log(box.children);
console.log(box.nextSibling);
console.log(box.previousSibling);
console.log(box.firstChild);
console.log(box.lastChild);
注意
childNodes和children的區別,childNodes獲取的是子節點,children獲取的是子元素
nextSibling和previousSibling獲取的是節點,獲取元素對應的屬性是nextElementSibling和previousElementSibling獲取的是元素
nextElementSibling和previousElementSibling有相容性問題,IE9以後才支援
總結
節點操作,方法
appendChild()
insertBefore()
removeChild()
replaceChild()
節點層次,屬性
parentNode
childNodes
children
nextSibling/previousSibling
firstChild/lastChild
事件詳解
註冊/移除事件的三種方式
var box = document.getElementById('box');
box.onclick = function () {
console.log('點選後執行');
};
box.onclick = null;
box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);
box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);
function eventCode() {
console.log('點選後執行');
}
相容程式碼
function addEventListener(element, type, fn) {
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent){
element.attachEvent('on' + type,fn);
} else {
element['on'+type] = fn;
}
}
function removeEventListener(element, type, fn) {
if (element.removeEventListener) {
element.removeEventListener(type, fn, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, fn);
} else {
element['on'+type] = null;
}
}
事件的三個階段
捕獲階段
當前目標階段
冒泡階段
事件物件.eventPhase屬性可以檢視事件觸發時所處的階段
事件物件的屬性和方法
- event.type 獲取事件型別
- clientX/clientY 所有瀏覽器都支援,視窗位置
- pageX/pageY IE8以前不支援,頁面位置
- event.target || event.srcElement 用於獲取觸發事件的元素
- event.preventDefault() 取消預設行為
案例
- 跟著滑鼠飛的天使
- 滑鼠點哪圖片飛到哪裡
- 獲取滑鼠在div內的座標
阻止事件傳播的方式
- 標準方式 event.stopPropagation();
- IE低版本 event.cancelBubble = true; 標準中已廢棄
常用的滑鼠和鍵盤事件
- onmouseup 滑鼠按鍵放開時觸發
- onmousedown 滑鼠按鍵按下觸發
- onmousemove 滑鼠移動觸發
- onkeyup 鍵盤按鍵按下觸發
- onkeydown 鍵盤按鍵擡起觸發
特效
偏移量
- offsetParent用於獲取定位的父級元素
- offsetParent和parentNode的區別
var box = document.getElementById('box');
console.log(box.offsetParent);
console.log(box.offsetLeft);
console.log(box.offsetTop);
console.log(box.offsetWidth);
console.log(box.offsetHeight);
客戶區大小
var box = document.getElementById('box');
console.log(box.clientLeft);
console.log(box.clientTop);
console.log(box.clientWidth);
console.log(box.clientHeight);
滾動偏移
var box = document.getElementById('box');
console.log(box.scrollLeft)
console.log(box.scrollTop)
console.log(box.scrollWidth)
console.log(box.scrollHeight)
案例
- 勻速動畫函式
- 變速動畫函式
- 回到頂部
- 無縫輪播圖
- 模擬滾動條
- 拖拽案例
- 放大鏡案例