JavaScript從入門(mén)到精通系列(7)

Web API(一)

1.1. Web API介紹

1.1.1 API的概念

API(Application Programming Interface募舟,應(yīng)用程序編程接口)是一些預(yù)先定義的函數(shù),目的是提供應(yīng)用程序與開(kāi)發(fā)人員基于某軟件或硬件得以訪問(wèn)一組例程的能力唬渗,而又無(wú)需訪問(wèn)源碼,無(wú)需理解其內(nèi)部工作機(jī)制細(xì)節(jié)肩榕,只需直接調(diào)用使用即可吹泡。


舉例解釋什么是API。

例如吃沪,

? C語(yǔ)言中有一個(gè)函數(shù) fopen()可以打開(kāi)硬盤(pán)上的文件,這個(gè)函數(shù)對(duì)于我們來(lái)說(shuō)什猖,就是一個(gè)C語(yǔ)言提供的打開(kāi)文件的工具票彪。

? javascript中有一個(gè)函數(shù)alert()可以在頁(yè)面彈一個(gè)提示框,這個(gè)函數(shù)就是js提供的一個(gè)彈框工具不狮。

這些工具(函數(shù))由編程語(yǔ)言提供降铸,內(nèi)部的實(shí)現(xiàn)已經(jīng)封裝好了,我們只要學(xué)會(huì)靈活的使用這些工具即可摇零。

1.1.2 Web API的概念

? Web API 是瀏覽器提供的一套操作瀏覽器功能和頁(yè)面元素的 API ( BOM 和 DOM )垮耳。

? 現(xiàn)階段我們主要針對(duì)于瀏覽器講解常用的 API , 主要針對(duì)瀏覽器做交互效果。比如我們想要瀏覽器彈出一個(gè)警示框遂黍, 直接使用 alert(‘彈出’)

? MDN 詳細(xì) API : https://developer.mozilla.org/zh-CN/docs/Web/API

? 因?yàn)?Web API 很多,所以我們將這個(gè)階段稱為 Web APIs俊嗽。

? 此處的 Web API 特指瀏覽器提供的一系列API(很多函數(shù)或?qū)ο蠓椒?雾家,即操作網(wǎng)頁(yè)的一系列工具。例如:操作html標(biāo)簽绍豁、操作頁(yè)面地址的方法芯咧。

1.1.3 API 和 Web API 總結(jié)

  1. API 是為我們程序員提供的一個(gè)接口,幫助我們實(shí)現(xiàn)某種功能竹揍,我們會(huì)使用就可以了敬飒,不必糾結(jié)內(nèi)部如何實(shí)現(xiàn)

  2. Web API 主要是針對(duì)于瀏覽器提供的接口,主要針對(duì)于瀏覽器做交互效果芬位。

  3. Web API 一般都有輸入和輸出(函數(shù)的傳參和返回值)无拗,Web API 很多都是方法(函數(shù))

  4. 學(xué)習(xí) Web API 可以結(jié)合前面學(xué)習(xí)內(nèi)置對(duì)象方法的思路學(xué)習(xí)

1.2. DOM 介紹

1.2.1 什么是DOM

? 文檔對(duì)象模型(Document Object Model,簡(jiǎn)稱DOM)昧碉,是 W3C 組織推薦的處理可擴(kuò)展標(biāo)記語(yǔ)言(html或者xhtml)的標(biāo)準(zhǔn)編程接口英染。

? W3C 已經(jīng)定義了一系列的 DOM 接口揽惹,通過(guò)這些 DOM 接口可以改變網(wǎng)頁(yè)的內(nèi)容、結(jié)構(gòu)和樣式四康。

DOM是W3C組織制定的一套處理 html和xml文檔的規(guī)范搪搏,所有的瀏覽器都遵循了這套標(biāo)準(zhǔn)。

1.2.2. DOM樹(shù)

DOM樹(shù) 又稱為文檔樹(shù)模型闪金,把文檔映射成樹(shù)形結(jié)構(gòu)疯溺,通過(guò)節(jié)點(diǎn)對(duì)象對(duì)其處理,處理的結(jié)果可以加入到當(dāng)前的頁(yè)面哎垦。

  • 文檔:一個(gè)頁(yè)面就是一個(gè)文檔囱嫩,DOM中使用document表示
  • 節(jié)點(diǎn):網(wǎng)頁(yè)中的所有內(nèi)容,在文檔樹(shù)中都是節(jié)點(diǎn)(標(biāo)簽撼泛、屬性挠说、文本、注釋等)愿题,使用node表示
  • 標(biāo)簽節(jié)點(diǎn):網(wǎng)頁(yè)中的所有標(biāo)簽损俭,通常稱為元素節(jié)點(diǎn),又簡(jiǎn)稱為“元素”潘酗,使用element表示

1.3. 獲取元素

為什么要獲取頁(yè)面元素杆兵?

例如:我們想要操作頁(yè)面上的某部分(顯示/隱藏,動(dòng)畫(huà))仔夺,需要先獲取到該部分對(duì)應(yīng)的元素琐脏,再對(duì)其進(jìn)行操作。

1.3.1. 根據(jù)ID獲取

語(yǔ)法:document.getElementById(id)
作用:根據(jù)ID獲取元素對(duì)象
參數(shù):id值缸兔,區(qū)分大小寫(xiě)的字符串
返回值:元素對(duì)象 或 null

案例代碼

<body>
    <div id="time">2019-9-9</div>
    <script>
        // 因?yàn)槲覀兾臋n頁(yè)面從上往下加載日裙,所以先得有標(biāo)簽 所以我們script寫(xiě)到標(biāo)簽的下面
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // console.dir 打印我們返回的元素對(duì)象 更好的查看里面的屬性和方法
        console.dir(timer);
    </script>
</body>

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

語(yǔ)法:document.getElementsByTagName('標(biāo)簽名') 或者 element.getElementsByTagName('標(biāo)簽名') 
作用:根據(jù)標(biāo)簽名獲取元素對(duì)象
參數(shù):標(biāo)簽名
返回值:元素對(duì)象集合(偽數(shù)組,數(shù)組元素是元素對(duì)象)

案例代碼

<body>
    <ul>
        <li>知否知否惰蜜,應(yīng)是等你好久11</li>
        <li>知否知否昂拂,應(yīng)是等你好久22</li>
        <li>知否知否,應(yīng)是等你好久33</li>
        <li>知否知否抛猖,應(yīng)是等你好久44</li>
        <li>知否知否格侯,應(yīng)是等你好久55</li>
    </ul>
    <ul id="nav">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ul>
    <script>
        // 1.返回的是 獲取過(guò)來(lái)元素對(duì)象的集合 以偽數(shù)組的形式存儲(chǔ)的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我們想要依次打印里面的元素對(duì)象我們可以采取遍歷的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3. element.getElementsByTagName()  可以得到這個(gè)元素里面的某些標(biāo)簽
        var nav = document.getElementById('nav'); // 這個(gè)獲得nav 元素
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>
</body>

注意:getElementsByTagName()獲取到是動(dòng)態(tài)集合,即:當(dāng)頁(yè)面增加了標(biāo)簽财著,這個(gè)集合中也就增加了元素联四。

1.3.3. H5新增獲取元素方式

案例代碼

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首頁(yè)</li>
            <li>產(chǎn)品</li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 根據(jù)類名獲得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2. querySelector 返回指定選擇器的第一個(gè)元素對(duì)象  切記 里面的選擇器需要加符號(hào) .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()返回指定選擇器的所有元素對(duì)象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
</body>

1.3.4 獲取特殊元素(body,html)

1.4. 事件基礎(chǔ)

1.4.1. 事件概述

JavaScript 使我們有能力創(chuàng)建動(dòng)態(tài)頁(yè)面撑教,而事件是可以被 JavaScript 偵測(cè)到的行為朝墩。

簡(jiǎn)單理解: 觸發(fā)--- 響應(yīng)機(jī)制

? 網(wǎng)頁(yè)中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 的事件伟姐,例如鱼辙,我們可以在用戶點(diǎn)擊某按鈕時(shí)產(chǎn)生一個(gè) 事件廉嚼,然后去執(zhí)行某些操作。

1.4.2. 事件三要素

  • 事件源(誰(shuí)):觸發(fā)事件的元素
  • 事件類型(什么事件): 例如 click 點(diǎn)擊事件
  • 事件處理程序(做啥):事件觸發(fā)后要執(zhí)行的代碼(函數(shù)形式)倒戏,事件處理函數(shù)

案例代碼

<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 點(diǎn)擊一個(gè)按鈕怠噪,彈出對(duì)話框
        // 1. 事件是有三部分組成  事件源  事件類型  事件處理程序   我們也稱為事件三要素
        //(1) 事件源 事件被觸發(fā)的對(duì)象   誰(shuí)  按鈕
        var btn = document.getElementById('btn');
        //(2) 事件類型  如何觸發(fā) 什么事件 比如鼠標(biāo)點(diǎn)擊(onclick) 還是鼠標(biāo)經(jīng)過(guò) 還是鍵盤(pán)按下
        //(3) 事件處理程序  通過(guò)一個(gè)函數(shù)賦值的方式 完成
        btn.onclick = function() {
            alert('點(diǎn)秋香');
        }
    </script>
</body>

1.4.3. 執(zhí)行事件的步驟

案例代碼

<body>
    <div>123</div>
    <script>
        // 執(zhí)行事件步驟
        // 點(diǎn)擊div 控制臺(tái)輸出 我被選中了
        // 1. 獲取事件源
        var div = document.querySelector('div');
        // 2.綁定事件 注冊(cè)事件
        // div.onclick 
        // 3.添加事件處理程序 
        div.onclick = function() {
            console.log('我被選中了');
        }
    </script>
</body>

1.4.4. 常見(jiàn)的鼠標(biāo)事件

1.4.5. 分析事件三要素

  • 下拉菜單三要素

  • 關(guān)閉廣告三要素

1.5. 操作元素

JavaScript的 DOM 操作可以改變網(wǎng)頁(yè)內(nèi)容、結(jié)構(gòu)和樣式杜跷,我們可以利用 DOM 操作元素來(lái)改變?cè)乩锩娴膬?nèi)容傍念、屬性等。(注意:這些操作都是通過(guò)元素對(duì)象的屬性實(shí)現(xiàn)的)

1.5.1. 改變?cè)貎?nèi)容(獲取或設(shè)置)

innerText改變?cè)貎?nèi)容

<body>
    <button>顯示當(dāng)前系統(tǒng)時(shí)間</button>
    <div>某個(gè)時(shí)間</div>
    <p>1123</p>
    <script>
        // 當(dāng)我們點(diǎn)擊了按鈕葛闷,  div里面的文字會(huì)發(fā)生變化
        // 1. 獲取元素 
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.注冊(cè)事件
        btn.onclick = function() {
            // div.innerText = '2019-6-6';
            div.innerHTML = getDate();
        }
        function getDate() {
            var date = new Date();
            // 我們寫(xiě)一個(gè) 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];
        }
    </script>
</body>

innerText和innerHTML的區(qū)別

  • 獲取內(nèi)容時(shí)的區(qū)別:

? innerText會(huì)去除空格和換行憋槐,而innerHTML會(huì)保留空格和換行

  • 設(shè)置內(nèi)容時(shí)的區(qū)別:

? innerText不會(huì)識(shí)別html,而innerHTML會(huì)識(shí)別

案例代碼

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        // innerText 和 innerHTML的區(qū)別 
        // 1. innerText 不識(shí)別html標(biāo)簽 非標(biāo)準(zhǔn)  去除空格和換行
        var div = document.querySelector('div');
        // div.innerText = '<strong>今天是:</strong> 2019';
        // 2. innerHTML 識(shí)別html標(biāo)簽 W3C標(biāo)準(zhǔn) 保留空格和換行的
        div.innerHTML = '<strong>今天是:</strong> 2019';
        // 這兩個(gè)屬性是可讀寫(xiě)的  可以獲取元素里面的內(nèi)容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

1.5.2. 常用元素的屬性操作

獲取屬性的值

元素對(duì)象.屬性名

設(shè)置屬性的值

元素對(duì)象.屬性名 = 值

案例代碼

<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. 注冊(cè)事件  處理程序
        zxy.onclick = function() {
            img.src = 'images/zxy.jpg';
            img.title = '張學(xué)友思密達(dá)';
        }
        ldh.onclick = function() {
            img.src = 'images/ldh.jpg';
            img.title = '劉德華';
        }
    </script>
</body>

1.5.3. 案例:分時(shí)問(wèn)候

1.5.4. 表單元素的屬性操作

獲取屬性的值

元素對(duì)象.屬性名

設(shè)置屬性的值

元素對(duì)象.屬性名 = 值

表單元素中有一些屬性如:disabled淑趾、checked阳仔、selected,元素對(duì)象的這些屬性的值是布爾型扣泊。

案例代碼

<body>
    <button>按鈕</button>
    <input type="text" value="輸入內(nèi)容">
    <script>
        // 1. 獲取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 注冊(cè)事件 處理程序
        btn.onclick = function() {
            // 表單里面的值 文字內(nèi)容是通過(guò) value 來(lái)修改的
            input.value = '被點(diǎn)擊了';
            // 如果想要某個(gè)表單被禁用 不能再點(diǎn)擊 disabled  我們想要這個(gè)按鈕 button禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函數(shù)的調(diào)用者 btn
        }
    </script>
</body>

1.5.5. 案例:仿京東顯示密碼

1.5.6. 樣式屬性操作

我們可以通過(guò) JS 修改元素的大小近范、顏色、位置等樣式延蟹。

常用方式

方式1:通過(guò)操作style屬性

元素對(duì)象的style屬性也是一個(gè)對(duì)象评矩!

元素對(duì)象.style.樣式屬性 = 值;

案例代碼

<body>
    <div></div>
    <script>
        // 1. 獲取元素
        var div = document.querySelector('div');
        // 2. 注冊(cè)事件 處理程序
        div.onclick = function() {
            // div.style里面的屬性 采取駝峰命名法 
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>
</body>

案例:淘寶點(diǎn)擊關(guān)閉二維碼

案例:循環(huán)精靈圖背景

案例:顯示隱藏文本框內(nèi)容

方式2:通過(guò)操作className屬性

元素對(duì)象.className = 值;

因?yàn)閏lass是關(guān)鍵字,所有使用className阱飘。

案例代碼

<body>
    <div class="first">文本</div>
    <script>
        // 1. 使用 element.style 獲得修改元素樣式  如果樣式比較少 或者 功能簡(jiǎn)單的情況下使用
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';

            // 2. 我們可以通過(guò) 修改元素的className更改元素的樣式 適合于樣式較多或者功能復(fù)雜的情況
            // 3. 如果想要保留原先的類名斥杜,我們可以這么做 多類名選擇器
            // this.className = 'change';
            this.className = 'first change';
        }
    </script>
</body>

案例:密碼框格式提示錯(cuò)誤信息

image.png

1.6. 總結(jié)

image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市沥匈,隨后出現(xiàn)的幾起案子蔗喂,更是在濱河造成了極大的恐慌,老刑警劉巖高帖,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件弱恒,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡棋恼,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)锈玉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)爪飘,“玉大人,你說(shuō)我怎么就攤上這事拉背∈ζ椋” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵椅棺,是天一觀的道長(zhǎng)犁罩。 經(jīng)常有香客問(wèn)我齐蔽,道長(zhǎng),這世上最難降的妖魔是什么床估? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任含滴,我火速辦了婚禮,結(jié)果婚禮上丐巫,老公的妹妹穿的比我還像新娘谈况。我一直安慰自己,他們只是感情好递胧,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布碑韵。 她就那樣靜靜地躺著,像睡著了一般缎脾。 火紅的嫁衣襯著肌膚如雪祝闻。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天遗菠,我揣著相機(jī)與錄音联喘,去河邊找鬼。 笑死舷蒲,一個(gè)胖子當(dāng)著我的面吹牛耸袜,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播牲平,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼堤框,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了纵柿?” 一聲冷哼從身側(cè)響起蜈抓,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎昂儒,沒(méi)想到半個(gè)月后沟使,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡渊跋,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年腊嗡,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拾酝。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡燕少,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蒿囤,到底是詐尸還是另有隱情客们,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站底挫,受9級(jí)特大地震影響恒傻,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜建邓,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一盈厘、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧涝缝,春花似錦扑庞、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至滩援,卻和暖如春栅隐,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背玩徊。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工租悄, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人恩袱。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓泣棋,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親畔塔。 傳聞我的和親對(duì)象是個(gè)殘疾皇子潭辈,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • ??JavaScript 與 HTML 之間的交互是通過(guò)事件實(shí)現(xiàn)的把敢。 ??事件,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,503評(píng)論 1 11
  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,223評(píng)論 0 3
  • 前端開(kāi)發(fā)知識(shí)點(diǎn) HTML&CSS對(duì)Web標(biāo)準(zhǔn)的理解谅辣、瀏覽器內(nèi)核差異修赞、兼容性、hack桑阶、CSS基本功:布局柏副、盒子模型...
    Hebborn_hb閱讀 845評(píng)論 0 1
  • Web前端技術(shù)由 html、css 和 javascript 三大部分構(gòu)成蚣录,是一個(gè)龐大而復(fù)雜的技術(shù)體系割择,其復(fù)雜程度...
    hnscdg閱讀 651評(píng)論 0 0
  • Web前端技術(shù)由html、css和 javascript三大部分構(gòu)成包归,是一個(gè)龐大而復(fù)雜的技術(shù)體系,其復(fù)雜程度不低于...
    Hebborn_hb閱讀 287評(píng)論 0 1