webApi筆記

api的概念：
簡單理解就是程序內(nèi)置的函數(shù)

webapi的概念
瀏覽器提供的一套操作瀏覽器功能和頁面元素的方法（函數(shù)）BOM和DOM

js的組成

image.png

ES：定義了js的語法規(guī)范鬼廓，是js標(biāo)準(zhǔn)不是編程語言

BOM對象肿仑，瀏覽器對象模型
可以對瀏覽器窗口及逆行操作，例如彈框碎税，跳轉(zhuǎn)和窗口分辨率

DOM對象尤慰，文檔對象模型

DOM把html看成一個文檔樹，通過DOM可以操作樹上的節(jié)點

DOM樹的構(gòu)成

image.png

DOM的操作

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

獲取元素的方法

根據(jù)id獲取元素

方法：調(diào)用document對象的getElementById方法
參數(shù)：字符串類型的id屬性值
返回值：對應(yīng)的id名的元素對象
注意

由于id具有唯一性雷蹂，所以有的瀏覽器支持直接通過id名訪問元素伟端，但是不推薦
js在html前時，由于代碼執(zhí)行順序問題無法獲取到元素

<p id="para"> 232 </p>
<p id="box">text2</p>
//聲名一個變量用來接受返回的對象
var para = document.getElementById('para')
//調(diào)用對象的一些屬性進行修改萎河，例如荔泳，調(diào)用style屬性，修改樣式
para.style.background = "pink"
//直接使用id值調(diào)用屬性虐杯，有兼容問題玛歌，最好別用
box.style.background = "blue"

一個方法，在控制臺打印具體對象：console.dir()

image.png

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

方法：document.getElementByTag()
參數(shù)：標(biāo)簽名擎椰，字符串
返回值：同名元素對象組成的數(shù)組
注意

操作數(shù)據(jù)時需要按照數(shù)組方法操作
getElementByTag內(nèi)部數(shù)據(jù)是動態(tài)增加的支子，因此寫在html前也可以獲取元素
getElementByTag獲取后，還可以使用getElementByTag达舒，但是不能使用getElementById

例子：

<html>
<body>
    <p id="para">text1</p>
    <p id="box">text2</p>
    <p>text3</p>
    <p>text4</p>
    <div>div3</div>
    <div>div2</div>
    <div>div1</div>
</body>
</html>

<script>
    //聲名一個變量接受數(shù)組
    var a = document.getElementsByTagName("p")
    console.log(a)
    for(var i =0;i<=a.length;i++){
        console.log(a[i])
        a[k].style.background = "blue"http://正確的值朋，下面顯示的結(jié)果沒這里的數(shù)據(jù)
    }
</script>
/*注意：
a.style.background = "blue"是錯誤的，數(shù)組沒有style屬性巩搏，只有標(biāo)簽才有昨登，所以a只能進行數(shù)組操作，遍歷之后的a[i]可以進行標(biāo)簽的屬性操作
*/

result：
HTMLCollection(4) [p#para, p#box, p, p, para: p#para, box: p#box]
0: p#para
1: p#box
2: p
3: p
box: p#box
para: p#para
length: 4
[[Prototype]]: HTMLCollection

getElementByTag獲取后贯底，還可以使用getElementByTag丰辣，但是不能使用getElementById

<html>
<body>

    <p id="para">text1</p>
    <p >text2</p>
    <p>text3</p>
    <p>text4</p>
    <div id="box">
        <p>text5</p>
    </div>
    <div>div2</div>
    <div>div1</div>

</body>
</html>
<script>
    //聲名一個變量接受元素對象的數(shù)組
     var a = document.getElementById("box").getElementsByTagName('p')
    console.log(a)
</script>

根據(jù)name獲取元素

方法：document.getElementByName
參數(shù)：name屬性值，string
返回值：name屬性相同元素組成的數(shù)組
不建議使用禽捆，ie和opera有兼容問題

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

和標(biāo)簽獲取類似笙什，可以在標(biāo)簽元素對象中再次調(diào)用
動態(tài)添加的可以卸載html前面
方法：document.getElementByClassName
參數(shù)：class屬性名，string
返回值：class相同元素組成的數(shù)組
瀏覽器兼容問題：不支持ie8一下瀏覽器

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

方法1：document.querySelector（）
通過css中的選擇器去選取第一個符合條件的標(biāo)簽元素
方法2：document.querySelectorAll（）
通過css中的選擇器去選取所有符合條件的標(biāo)簽元素
參數(shù)：css中的選擇器胚想，string
瀏覽器兼容問題：不支持ie8以下

image.png

注意
方法1只返回第一個滿足條件的值琐凭，沒有就返回null，只有在加載后才能生效
方法2返回的是nodelist浊服，不是動態(tài)只能在html后獲取元素

DOM的事件

事件的說明：

事件：什么時候該做的事
執(zhí)行機制：觸發(fā)-響應(yīng)的機制
綁定事件三要素：
- 事件源：給誰綁定事件
- 事件類型：綁定什么類型的事件统屈，例如click單擊
- 事件函數(shù)：事件發(fā)生后執(zhí)行的內(nèi)容，寫在函數(shù)內(nèi)
  監(jiān)聽事件：
綁定html元素屬性
綁定DOM對象屬性
事件監(jiān)聽的定義：js解析器會給有綁定事件的元素添加一個監(jiān)聽牙躺，一直檢測這個元素鸿吆，只要觸發(fā)對應(yīng)的綁定事件，會立即執(zhí)行事件函數(shù)

常見的鼠標(biāo)事件

onclick 點擊鼠標(biāo)左鍵
ondblclick 雙擊左鍵
onmousedown 按下鼠標(biāo)按鍵
onmouseup 鼠標(biāo)放開案件
onmouseover 鼠標(biāo)移到元素上
onmouseout 鼠標(biāo)移出邊界值

非表單元素的屬性

例如：href述呐、title惩淳、id、src
調(diào)用方式：獲取元素后直接調(diào)用元素屬性名

image.png

案例：修改class屬性隱藏顯示
點擊隱藏顯示div

hide {

displa：none

}

image.png

美女畫廊案例

image.png

Dom中取消a標(biāo)簽的跳轉(zhuǎn)效果乓搬，在事件函數(shù)中（return Fasle）

for循環(huán)中要使用this思犁。監(jiān)聽事件調(diào)用函數(shù)時，相當(dāng)于在循環(huán)外調(diào)用了定義的函數(shù)进肯，這時的i是循環(huán)結(jié)束之后的數(shù)值激蹲，所以只能獲取最后的數(shù)。
<mark>可以理解為for循環(huán)只是作為js語句執(zhí)行了一遍江掩。然后再循環(huán)外調(diào)用函數(shù)学辱，這時全局變量i的值時累加的乘瓤，但是實際是沒有第4個a的，所是函數(shù)返回的是undefined</mark>策泣，而使用this時衙傀，指向的是實例本身

     <script>
            // 1.獲取元素
            var imagegallery = document.getElementById("imagegallery");
            var links = imagegallery.getElementsByTagName("a");
            var image = document.getElementById("image");
            var des = document.getElementById("des");
    
            // 2.遍歷數(shù)組，添加點擊事件
            for (var i = 0 ; i <= links.length - 1 ; i++) {
                //這里是個匿名函數(shù)萨咕，所以只會執(zhí)行最后一個i
                links[i].onclick = function () {
                    // alert("aaa");
                    // 3.更改 image 內(nèi)部的 src 屬性值
                    // this 關(guān)鍵字指代的是觸發(fā)事件的真正事件源
                    image.src = this.href;
                    // 4.更改 des 內(nèi)部的文字內(nèi)容
                    des.innerText = this.title;
                    // 5.取消 a 標(biāo)簽的默認跳轉(zhuǎn)效果
                    return false;
                };
            }
    
            // for 循環(huán)內(nèi)部添加的綁定事件统抬，在觸發(fā)時，所有的批量添加的事件已經(jīng)成功危队，觸發(fā)事件時都是在循環(huán)結(jié)束之后
            // 批量綁定的事件的事件函數(shù)內(nèi)部如果有 變量 i聪建，要注意，函數(shù)執(zhí)行時已經(jīng)是在循環(huán)結(jié)束后
            // 循環(huán)內(nèi)部定義的變量是一個全局變量茫陆，在循環(huán)后執(zhí)行的 i 變量的值是 i 跳出循環(huán)時的值
            // image.src = links[i].href;
            // console.log(i);
        </script>

總結(jié)

區(qū)分不同函數(shù)內(nèi)部this的指向

普通函數(shù)：指向windows對象

構(gòu)造函數(shù)：this指向生成的實例對象

對象的方法（通過函數(shù)進行封裝的）：指向的是對象本身

事件函數(shù)：指向的是事件源金麸，例如btn.onclick

獲取標(biāo)簽內(nèi)部內(nèi)容的屬性

獲取標(biāo)簽內(nèi)部內(nèi)容的屬性有兩個：innerHTML，innerText
- innerHTML獲取時會識別html標(biāo)簽
- innertext獲取是簿盅，只識別文檔
  
  image.png

表單元素屬性

value用于大部分表單元素內(nèi)容的獲取钱骂，除了option
type可以獲取input標(biāo)簽的類型（輸入框或者復(fù)選框）
disable禁用屬性
checked 復(fù)選框選中屬性
selected 下拉菜單選中屬性
注意：在dom中元素對象的屬性值只有一個時，會被轉(zhuǎn)成布爾值顯示挪鹏，例如txt.disabled = true

options標(biāo)簽單獨記憶

image.png

表單元素特有的屬性

屬性名和屬性值一致见秽，例如disable，返回true

image.png

設(shè)置disalbe屬性

image.png

案例

image.png

因為windows類中有name屬性讨盒，所以命名沖突

可以把name變量名改成username即可

模擬出現(xiàn)錯誤無法提交數(shù)據(jù)解取，使用return終止代碼

image.png

案例二：隨機設(shè)置下拉菜單選中項

基礎(chǔ)操作

image.png

注意：options中屬性名和屬性值是一致的，直接使用布爾值

image.png

案例三：搜索文本框返顺，獲取焦點

image.png

使用onfocus事件禀苦，獲得焦點。失去焦點遂鹊，使用onblur事件

image.png

案例三：反選或全選

結(jié)構(gòu)振乏，使用checkbox

<div class="wrap">
      <table>
          <thead>
            <tr>
                <th>
                    <input type="checkbox" id="all" />
                </th>
                <th>商品</th>
                <th>價錢</th>
            </tr>
          </thead>
          <tbody id="tb">
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPhone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPad Pro</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPad Air</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>Apple Watch</td>
                <td>2000</td>
            </tr>

          </tbody>
      </table>
      <input type="button" value="  反 選  " id="btn">
  </div>

制作全選

image.png

制作子選項關(guān)聯(lián)全選

image.png

制作反選效果

image.png

DOM元素自定義屬性操作

image.png

用來操作自定義屬性的方法

image.png

style樣式屬性操作

image.png

獲取符合屬性的單一屬性時，例如background-color和background-size要去掉劃線，用駝峰代替

element.style只能獲取寫在行內(nèi)的屬性，內(nèi)嵌和外聯(lián)式的屬性都不能獲取

image.png

案例：開關(guān)燈

image.png

案例：圖片切換二維碼

image.png

案例：當(dāng)前輸入框高亮顯示

排他思想灭必，重點記憶

image.png

案例：設(shè)置元素大小和位置

image.png

案例：表格隔行變色高亮顯示

image.png

使用節(jié)點的方法實現(xiàn)：

image.png

案例：tab選項卡切換

image.png

html結(jié)構(gòu)壕鹉，使用給span增加類名的方式

image.png

對應(yīng)控制思想

image.png

體驗節(jié)點
利用生成新的元素對象缎罢，并添加到頁面

image.png

移除元素

image.png

獲取子節(jié)點，只獲取子集，不會深入獲取inner p標(biāo)簽

image.png

節(jié)點屬性

image.png

父子節(jié)點的常用屬性

image.png

兄弟節(jié)點

image.png

常用的方法

image.png

添加節(jié)點到dom樹

image.png

創(chuàng)建節(jié)點并追加子節(jié)點

image.png

替換節(jié)點

image.png

插入節(jié)點，第二個參數(shù)表示參考忆谓，null表示在最后

image.png

克隆節(jié)點

image.png

注意：克隆后要修改id，只能克隆標(biāo)簽上的元素踱承，不能克隆js中的

image.png

判斷方法

image.png

案例：動態(tài)創(chuàng)建列表

image.png

案例：動態(tài)創(chuàng)建表格

image.png

案例：選擇水果

image.png

DOM事件倡缠，綁定事件

image.png

DOM事件哨免，解綁

image.png

DOM的事件流

image.png

點擊box3的事件流，從3-1執(zhí)行

image.png

從1-3執(zhí)行

image.png

先執(zhí)行1-3昙沦，在執(zhí)行3-1琢唾，相當(dāng)于綁定了兩個事件

image.png

事件流圖

image.png

祖先級和目標(biāo)元素都綁定了相同事件時，事件執(zhí)行的三個階段

image.png

使用box.onclick方法時只能冒泡

image.png

事件委托

image.png

事件對象

image.png

<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        // 獲取元素
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var box3 = document.getElementById("box3");

        // 添加事件
        box1.onclick = function (e) {
            // e指的就是存儲事件對象的參數(shù)桅滋，只要事件被觸發(fā)慧耍，e就會自動接收數(shù)據(jù)
            // 兼容問題
            e = e || window.event;
            // e.eventPhase 判斷出事件執(zhí)行時處于哪個階段
            // 1：捕獲階段
            // 2：目標(biāo)階段
            // 3：冒泡階段
            // console.log(e.eventPhase);

            // 獲取真正觸發(fā)事件的元素
            var target = e.target || e.srcElement;
            // console.log(target);
            // 獲取綁定事件的事件源元素
            console.log(e.currentTarget);
            // this 指向 e.currentTarget
            console.log(this);
        };

    </script>
</body>

e.type的用法

image.png

圖片跟隨鼠標(biāo)效果

image.png

取消默認行為和阻止冒泡

image.png

偏移量屬性

image.png

offseerwidth和offsetheight指的是盒子自己的寬高

image.png

客戶端相關(guān)屬性身辨，將元素當(dāng)做客戶端

image.png

scroll系列屬性

image.png

彈出層案例

 <script>
        // 獲取元素
        var link = document.getElementById("link");
        var login = document.getElementById("login");
        var bg = document.getElementById("bg");
        var closeBtn = document.getElementById("closeBtn");

        // 添加 link 的點擊事件丐谋，讓登錄窗口和遮蓋層顯示
        link.onclick = function () {
            login.style.display = "block";
            bg.style.display = "block";
        };

        // 添加 btn 的點擊事件，讓登錄窗口和遮蓋層隱藏
        closeBtn.onclick = function () {
            login.style.display = "none";
            bg.style.display = "none";
        };
    </script>

BOM瀏覽器對象模型

image.png

加載類型事件

image.png

延時器

image.png

var func = function(){}

settimeout(func()煌珊，200)

image.png

函數(shù)節(jié)流

image.png

定時器

image.png

延時器只執(zhí)行一次号俐，定時器相當(dāng)于每日鬧鐘定時執(zhí)行
第一次執(zhí)行是在第一個時間間隔之后
定時器也是異步語句

image.png

image.png

image.png

簡單運動制作

image.png

注意：因為定時器是異步的所以多次點擊會多次執(zhí)行onclick事件，信號量的數(shù)值會一直累加定庵，出現(xiàn)加速效果吏饿。且onclick指向的事件時最后一個，因此無法停止之前的事件蔬浙，詳情見下面解釋

image.png

解決辦法

image.png

<script>
    // 簡單運動
    // 獲取元素
    var start = document.getElementById("start");
    var box = document.getElementById("box");

    // 已知 開始位置猪落、結(jié)束位置、總時長畴博、時間間隔
    // 總距離 = 步長 * 總次數(shù)
    // 總距離 = 結(jié)束位置 - 起始位置  笨忌，已知可以求出來
    // 總次數(shù) = 總時長 / 時間間隔 ，已知可以求出來
    // 步長 = （結(jié)束位置 - 起始位置） / （總時長 / 時間間隔）
    // 信號量 ,也相當(dāng)于初始值
    var nowLeft = 200;
    // 結(jié)束位置
    var endLeft = 500;
    // 總時長
    var time = 1000;
    // 時間間隔
    var interval = 50;
    // 運算總次數(shù)
    var maxcount = time / interval;
    // 運算出每一次的步長
    var step = (endLeft - nowLeft) / maxcount;
    // console.log(step);
    // 定義一個次數(shù)的累加器
    var count = 0;
    // 準(zhǔn)備條件結(jié)束可以開始定時器了
    var timer;
    start.onclick = function () {
      timer = setInterval(function () {
        // 讓元素的屬性每一次變化一個步長
        nowLeft += step;
        // 每運動一次讓次數(shù)累加器加 1
        count++;
        // 停止定時器
        if (count >= maxcount) {
          // 拉終停表
          nowLeft = endLeft;
          clearInterval(timer);
        }
        // 給屬性賦值
        box.style.left = nowLeft + "px";
      },interval);
    };
  </script>

封裝動畫函數(shù)

單一運動
多屬性運動

image.png

image.png

image.png

image.png

image.png

案例1俱病，簡單的無縫滾動

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .scroll{
            position: relative;
            width: 830px;
            height: 130px;
            border: 10px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
        .scroll ul{
            position: absolute;
            top: 0;
            left: 0;
            width: 5000px;
            height: 130px;
        }
        .scroll ul li{
            float: left;
            width: 200px;
            height: 130px;
            margin-right: 10px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="scroll" id="scroll">
        <ul id="munit">
            <li><img src="images/shuzi/0.png" alt="" /></li>
            <li><img src="images/shuzi/1.png" alt="" /></li>
            <li><img src="images/shuzi/3.png" alt="" /></li>
            <li><img src="images/shuzi/4.png" alt="" /></li>
            <li><img src="images/shuzi/5.png" alt="" /></li>
            <li><img src="images/shuzi/6.png" alt="" /></li>
            <li><img src="images/shuzi/7.png" alt="" /></li>
            <li><img src="images/shuzi/0.png" alt="" /></li>
            <li><img src="images/shuzi/1.png" alt="" /></li>
            <li><img src="images/shuzi/3.png" alt="" /></li>
            <li><img src="images/shuzi/4.png" alt="" /></li>
            <li><img src="images/shuzi/5.png" alt="" /></li>
            <li><img src="images/shuzi/6.png" alt="" /></li>
            <li><img src="images/shuzi/7.png" alt="" /></li>
        </ul>
    </div>

image.png

高級運動方法

image.png

之后就是運動函數(shù)

點擊切換輪播圖

按鈕事件

image.png

小圓點事件

image.png

返回頂部案例

image.png

Location

image.png

reload相當(dāng)于F5刷新

image.png

hash存儲的是fragment數(shù)據(jù)

history對象

image.png

案例

image.png

go方法官疲，go(1)是前進一頁，go(-1)是后退一頁

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末亮隙，一起剝皮案震驚了整個濱河市途凫，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌溢吻，老刑警劉巖维费，帶你破解...
沈念sama閱讀 219,188評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異促王，居然都是意外死亡掩完，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,464評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門硼砰，熙熙樓的掌柜王于貴愁眉苦臉地迎上來且蓬，“玉大人，你說我怎么就攤上這事题翰《褚酰” “怎么了诈胜？”我有些...
開封第一講書人閱讀 165,562評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長冯事。經(jīng)常有香客問我焦匈，道長，這世上最難降的妖魔是什么昵仅？我笑而不...
開封第一講書人閱讀 58,893評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任缓熟，我火速辦了婚禮，結(jié)果婚禮上摔笤，老公的妹妹穿的比我還像新娘够滑。我一直安慰自己，他們只是感情好吕世，可當(dāng)我...
茶點故事閱讀 67,917評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布彰触。她就那樣靜靜地躺著，像睡著了一般命辖。火紅的嫁衣襯著肌膚如雪况毅。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,708評論 1贊 305
城市分裂傳說
那天尔艇，我揣著相機與錄音尔许，去河邊找鬼。笑死终娃，一個胖子當(dāng)著我的面吹牛味廊，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播尝抖，決...
沈念sama閱讀 40,430評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼毡们，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了昧辽？” 一聲冷哼從身側(cè)響起衙熔，我...
開封第一講書人閱讀 39,342評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎搅荞，沒想到半個月后红氯，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,801評論 1贊 317
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡咕痛，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,976評論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年痢甘，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片茉贡。...
茶點故事閱讀 40,115評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡塞栅，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出腔丧，到底是詐尸還是另有隱情放椰，我是刑警寧澤作烟，帶...
沈念sama閱讀 35,804評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站砾医，受9級特大地震影響拿撩，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜如蚜，卻給世界環(huán)境...
茶點故事閱讀 41,458評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一压恒、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧错邦，春花似錦探赫、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,008評論 0贊 22
一樁弒父案期吓，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽早歇。三九已至倾芝，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間箭跳，已是汗流浹背晨另。一陣腳步聲響...
開封第一講書人閱讀 33,135評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留谱姓，地道東北人借尿。一個月前我還...
沈念sama閱讀 48,365評論 3贊 373
代替公主和親
正文我出身青樓，卻偏偏與公主長得像屉来，于是被迫代替她去往敵國和親路翻。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,055評論 2贊 355

webApi筆記

DOM對象尤慰，文檔對象模型

DOM樹的構(gòu)成

DOM的操作

獲取元素的方法

根據(jù)id獲取元素

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

根據(jù)name獲取元素

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

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

DOM的事件

非表單元素的屬性

獲取標(biāo)簽內(nèi)部內(nèi)容的屬性

表單元素屬性

表單元素特有的屬性

案例

點擊box3的事件流，從3-1執(zhí)行

事件流圖

e.type的用法

彈出層案例

BOM瀏覽器對象模型

封裝動畫函數(shù)

案例1俱病，簡單的無縫滾動

點擊切換輪播圖

返回頂部案例

Location

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