05-JavaScript-Web-API

學(xué)習(xí)目標(biāo):

  • 掌握API和Web API的概念
  • 掌握常見的瀏覽器提供的API的調(diào)用方式
  • 能通過API開發(fā)常見的頁面交互功能
  • 能夠利用搜索引擎解決問題

Javascript Web API

ECMAScript - JavaScript的核心

定義了javascript的語法規(guī)范

JavaScript的核心，描述了語言的基本語法和數(shù)據(jù)類型，ECMAScript是一套標(biāo)準(zhǔn)，定義了一種語言的標(biāo)準(zhǔn)與具體實(shí)現(xiàn)無關(guān)

BOM - 瀏覽器對象模型

一套操作瀏覽器功能的API

通過BOM可以操作瀏覽器窗口，比如：彈出框、控制瀏覽器跳轉(zhuǎn)、獲取分辨率等

DOM - 文檔對象模型

一套操作頁面元素的API

DOM可以把HTML看做是文檔樹，通過DOM提供的API可以對樹上的節(jié)點(diǎn)進(jìn)行操作

DOM

DOM的概念

文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴(kuò)展標(biāo)志語言的標(biāo)準(zhǔn)編程接口。在網(wǎng)頁上，組織頁面（或文檔）的對象被組織在一個樹形結(jié)構(gòu)中，用來表示文檔中對象的標(biāo)準(zhǔn)模型就稱為DOM。Document Object Model的歷史可以追溯至1990年代后期微軟與Netscape的“瀏覽器大戰(zhàn)”，雙方為了在JavaScript與JScript一決生死，于是大規(guī)模的賦予瀏覽器強(qiáng)大的功能。微軟在網(wǎng)頁技術(shù)上加入了不少專屬事物，既有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網(wǎng)頁使用非微軟平臺及瀏覽器無法正常顯示。DOM即是當(dāng)時蘊(yùn)釀出來的杰作。

DOM又稱為文檔樹模型

  • 文檔：一個網(wǎng)頁可以稱為文檔
  • 節(jié)點(diǎn)：網(wǎng)頁中的所有內(nèi)容都是節(jié)點(diǎn)（標(biāo)簽、屬性、文本、注釋等）
  • 元素：網(wǎng)頁中的標(biāo)簽
  • 屬性：標(biāo)簽的屬性

DOM經(jīng)常進(jìn)行的操作

  • 獲取元素
  • 動態(tài)創(chuàng)建元素
  • 對元素進(jìn)行操作(設(shè)置其屬性或調(diào)用其方法)
  • 事件(什么時機(jī)做相應(yīng)的操作)

獲取頁面元素

案例

1.點(diǎn)擊按鈕彈出對話框
2.點(diǎn)擊按鈕修改超鏈接的地址和熱點(diǎn)文字
3.點(diǎn)擊(每個)圖片彈出對話框
4.點(diǎn)擊圖片設(shè)置自身寬和高
5.點(diǎn)擊按鈕修改每個圖片的title屬性
6.點(diǎn)擊按鈕顯示哈哈(排他功能)
7.點(diǎn)擊按鈕顯示和隱藏div
8.顯示和隱藏二維碼
9.點(diǎn)擊按鈕修改所有p標(biāo)簽內(nèi)容
10.點(diǎn)擊按鈕修改所有文本框內(nèi)容
11.點(diǎn)擊按鈕切換圖片
12.點(diǎn)擊超鏈接停止跳轉(zhuǎn)頁面
13.點(diǎn)擊小圖顯示大圖
14.美女相冊
15點(diǎn)擊按鈕選中性別和興趣

為什么要獲取頁面元素

例如：我們想要操作頁面上的某部分(顯示/隱藏，動畫)，需要先獲取到該部分對應(yīng)的元素，才進(jìn)行后續(xù)操作

根據(jù)id獲取元素

var div = document.getElementById('main');
console.log(div);

注意：由于id名具有唯一性，部分瀏覽器支持直接使用id名訪問元素，但不是標(biāo)準(zhǔn)方式，不推薦使用。

根據(jù)標(biāo)簽名獲取元素

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}

根據(jù)name獲取元素*

var inputs = document.getElementsByName('hobby');

根據(jù)類名獲取元素

var mains = document.getElementsByClassName('main');

根據(jù)選擇器獲取元素

var text = document.querySelector('#text');
  • 總結(jié)
掌握
    getElementById()
    getElementsByTagName()
了解
    getElementsByName()
    getElementsByClassName()
    querySelector()
    querySelectorAll()

事件

事件：觸發(fā)-響應(yīng)機(jī)制

Event接口表示在DOM中發(fā)生的任何事件，一些是用戶生成的（例如鼠標(biāo)或鍵盤事件），而其他由API生成。

事件三要素

  • 事件源:觸發(fā)(被)事件的元素
  • 事件類型:事件的觸發(fā)方式(例如鼠標(biāo)點(diǎn)擊或鍵盤點(diǎn)擊)
  • 事件處理程序:事件觸發(fā)后要執(zhí)行的代碼(函數(shù)形式)

事件的基本使用

var box = document.getElementById('box');
box.onclick = function() {
  console.log('代碼會在box被點(diǎn)擊后執(zhí)行');  
};

案例

  • 點(diǎn)擊按鈕彈出提示框
  • 點(diǎn)擊按鈕修改元素的樣式

屬性操作

非表單元素的屬性

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);

案例：

? 點(diǎn)擊按鈕，切換img標(biāo)簽里的圖片

? 點(diǎn)擊按鈕顯示隱藏div

  • innerHTML和innerText
var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我會生成為標(biāo)簽</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不會生成為標(biāo)簽</p>';
console.log(box.innerText);
  • HTML轉(zhuǎn)義符
<       &lt;    //less than  小于
>       &gt;   // greater than  大于
空格     &nbsp;

  • innerHTML和innerText的區(qū)別

  • innerText的兼容性處理

表單元素屬性

  • value 用于大部分表單元素的內(nèi)容獲取(option除外)
  • type 可以獲取input標(biāo)簽的類型(輸入框或復(fù)選框等)
  • disabled 禁用屬性
  • checked 復(fù)選框選中屬性
  • selected 下拉菜單選中屬性

案例

  • 給文本框賦值，獲取文本框的值
  • 點(diǎn)擊按鈕禁用文本框
  • 搜索文本框
  • 檢測用戶名是否是3-6位，密碼是否是6-8位，如果不滿足要求高亮顯示文本框
  • 設(shè)置下拉框中的選中項(xiàng)
  • 全選反選

自定義屬性操作

  • getAttribute() 獲取標(biāo)簽行內(nèi)屬性
  • setAttribute() 設(shè)置標(biāo)簽行內(nèi)屬性
  • removeAttribute() 移除標(biāo)簽行內(nèi)屬性
  • 與element.屬性的區(qū)別: 上述三個方法用于獲取任意的行內(nèi)屬性。

樣式操作

  • 使用style方式設(shè)置的樣式顯示在標(biāo)簽行內(nèi)
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';

  • 注意

    通過樣式屬性設(shè)置寬高、位置的屬性類型是字符串，需要加上px

類名操作

  • 修改標(biāo)簽的className屬性相當(dāng)于直接修改標(biāo)簽的類名
var box = document.getElementById('box');
box.className = 'clearfix';

案例

  • 開關(guān)燈
  • 點(diǎn)擊按鈕變色
  • 圖片切換二維碼案例
  • 當(dāng)前輸入的文本框高亮顯示
  • 點(diǎn)擊按鈕改變div的大小和位置
  • 列表隔行變色、高亮顯示
  • tab選項(xiàng)卡切換

創(chuàng)建元素的三種方式

document.write()

document.write('新設(shè)置的內(nèi)容<p>標(biāo)簽也可以生成</p>');

innerHTML

var box = document.getElementById('box');
box.innerHTML = '新內(nèi)容<p>新標(biāo)簽</p>';

document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);

案例

  • 動態(tài)創(chuàng)建列表，高亮顯示
  • 根據(jù)數(shù)據(jù)動態(tài)創(chuàng)建表格
  • 模擬百度搜索文本框

節(jié)點(diǎn)操作

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);

節(jié)點(diǎn)層級

重點(diǎn)講父子屬性，兄弟屬性畫圖講解

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);
  • 總結(jié)
節(jié)點(diǎn)操作，方法
    appendChild()
    insertBefore()
    removeChild()
    replaceChild()
節(jié)點(diǎn)層次，屬性
    parentNode
    childNodes
    children
    nextSibling/previousSibling
    firstChild/lastChild

事件詳解

注冊/移除事件的三種方式

var box = document.getElementById('box');
box.onclick = function () {
  console.log('點(diǎn)擊后執(zhí)行');
};
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('點(diǎn)擊后執(zhí)行');
}

事件的三個階段

  1. 捕獲階段

  2. 當(dāng)前目標(biāo)階段

  3. 冒泡階段

    事件對象.eventPhase屬性可以查看事件觸發(fā)時所處的階段

事件對象的屬性和方法

  • event.type 獲取事件類型
  • clientX/clientY 所有瀏覽器都支持，窗口位置
  • pageX/pageY IE8以前不支持，頁面位置
  • event.target || event.srcElement 用于獲取觸發(fā)事件的元素
  • event.preventDefault() 取消默認(rèn)行為

案例

  • 跟著鼠標(biāo)飛的天使
  • 鼠標(biāo)點(diǎn)哪圖片飛到哪里
  • 獲取鼠標(biāo)在div內(nèi)的坐標(biāo)

阻止事件傳播的方式

  • 標(biāo)準(zhǔn)方式 event.stopPropagation();
  • IE低版本 event.cancelBubble = true; 標(biāo)準(zhǔn)中已廢棄

常用的鼠標(biāo)和鍵盤事件

  • onmouseup 鼠標(biāo)按鍵放開時觸發(fā)
  • onmousedown 鼠標(biāo)按鍵按下觸發(fā)
  • onmousemove 鼠標(biāo)移動觸發(fā)
  • onkeyup 鍵盤按鍵按下觸發(fā)
  • onkeydown 鍵盤按鍵抬起觸發(fā)

BOM

BOM的概念

BOM(Browser Object Model) 是指瀏覽器對象模型，瀏覽器對象模型提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動的對象結(jié)構(gòu)。BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。

我們在瀏覽器中的一些操作都可以使用BOM的方式進(jìn)行編程處理，

比如：刷新瀏覽器、后退、前進(jìn)、在瀏覽器中輸入URL等

BOM的頂級對象window

window是瀏覽器的頂級對象，當(dāng)調(diào)用window下的屬性和方法時，可以省略window
注意：window下一個特殊的屬性 window.name

對話框

  • alert()
  • prompt()
  • confirm()

頁面加載事件

  • onload
window.onload = function () {
  // 當(dāng)頁面加載完成執(zhí)行
  // 當(dāng)頁面完全加載所有內(nèi)容（包括圖像、腳本文件、CSS 文件等）執(zhí)行
}
  • onunload
window.onunload = function () {
  // 當(dāng)用戶退出頁面時執(zhí)行
}

定時器

setTimeout()和clearTimeout()

在指定的毫秒數(shù)到達(dá)之后執(zhí)行指定的函數(shù)，只執(zhí)行一次

// 創(chuàng)建一個定時器，1000毫秒后執(zhí)行，返回定時器的標(biāo)示
var timerId = setTimeout(function () {
  console.log('Hello World');
}, 1000);

// 取消定時器的執(zhí)行
clearTimeout(timerId);

setInterval()和clearInterval()

定時調(diào)用的函數(shù)，可以按照給定的時間(單位毫秒)周期調(diào)用函數(shù)

// 創(chuàng)建一個定時器，每隔1秒調(diào)用一次
var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);

// 取消定時器的執(zhí)行
clearInterval(timerId);

location對象

location對象是window對象下的一個屬性，時候的時候可以省略window對象

location可以獲取或者設(shè)置瀏覽器地址欄的URL

URL

  • URL的組成
scheme://host:port/path?query#fragment
scheme:通信協(xié)議
    常用的http,ftp,maito等
host:主機(jī)
    服務(wù)器(計(jì)算機(jī))域名系統(tǒng) (DNS) 主機(jī)名或 IP 地址。
port:端口號
    整數(shù)，可選，省略時使用方案的默認(rèn)端口，如http的默認(rèn)端口為80。
path:路徑
    由零或多個'/'符號隔開的字符串，一般用來表示主機(jī)上的一個目錄或文件地址。
query:查詢
    可選，用于給動態(tài)網(wǎng)頁傳遞參數(shù)，可有多個參數(shù)，用'&'符號隔開，每個參數(shù)的名和值用'='符號隔開。例如：name=zs
fragment:信息片斷
    字符串，錨點(diǎn).

location有哪些成員？

  • 使用chrome的控制臺查看

  • 成員

    • assign()/reload()/replace()
    • hash/host/hostname/search/href……

history對象

  • back()
  • forward()
  • go()

navigator對象

  • userAgent

通過userAgent可以判斷用戶瀏覽器的類型

  • platform

通過platform可以判斷瀏覽器所在的系統(tǒng)平臺類型.

特效

偏移量

  • offsetParent用于獲取定位的父級元素
  • offsetParent和parentNode的區(qū)別
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);

可視區(qū)大小

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)

案例

  • 勻速動畫函數(shù)
  • 變速動畫函數(shù)
  • 回到頂部
  • 無縫輪播圖
  • 模擬滾動條
  • 拖拽案例
  • 放大鏡案例
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ??JavaScript 與 HTML 之間的交互是通過事件實(shí)現(xiàn)的。 ??事件，就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,703評論 1贊 11
  • 一、JS前言 （1）認(rèn)識JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu))，知道了CSS樣式(也稱為表示)，會使用HT...
    凜0_0閱讀 2,935評論 0贊 8
  • 學(xué)習(xí)目標(biāo): 掌握API和Web API的概念 掌握常見的瀏覽器提供的API的調(diào)用方式 能通過API開發(fā)常見的頁面交...
    自敘閱讀 372評論 0贊 0
  • 前端開發(fā)知識點(diǎn) HTML&CSS對Web標(biāo)準(zhǔn)的理解、瀏覽器內(nèi)核差異、兼容性、hack、CSS基本功：布局、盒子模型...
    Hebborn_hb閱讀 896評論 0贊 1
  • Week 1 Reading Material Lesson 1 Lecture 1.1 Raspberry Pi...
    Vinchent閱讀 604評論 0贊 1

友情鏈接更多精彩內(nèi)容