一、DOM操作的分類

一般情況下，DOM操作分三個方面：DOM Core、HTML-DOM和CSS-DOM

1.1 DOM Core

並不是JavaScript所專有，也不僅僅只操作HTML文檔。只要文檔是DOM結構，都可以使用核心DOM中的方法，如html文檔和xml文檔都可以使用getElementByxx(s)相關的方法獲得元素

1.2 HTML-DOM

專門針對HTML的一種DOM操作。提供了一些專屬的方法。例如，直接通過document對象獲取標籤對象或操作標籤的屬性。這兩種DOM操作都是HTML-DOM。

例如：document.froms element.src

1.3 CSS-DOM

CSS-DOM是針對CSS的操作。主要作用就是獲取和數組style對象的各種屬性。讓網頁呈現出不同的效果。

例如：element.style.color = “red”;

二、JQuery基礎DOM操作

2.1 獲取和設置元素的內容

三個方法：text()、html()和 val()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function () {
                //獲取得到的標籤的內的文本，不包括內部的標籤。但是內部標籤與標籤中的空格會獲取到
                var text = $(".box").text();   // ele.innerText
                console.log(text);
                var html = $(".box").html();
                //標籤內的所有內容，包括子標籤本身   ele.innerHTML
                console.log(html);

                //上面的方法不傳入參數表示只是獲取，如果傳入字符串表示設置
//              $(".box").text("哈哈哈");
                //設置html，如果有標籤，則會解析出來
                $(".box").html("<button>點我啊</button>")
            })

            $(function () {
                $("div button").click(function () {
                  //獲取一個標籤的value值(如果有)
                    var inputText = $("div input").val();
                    alert(inputText);

                })
            })
        </script>

    </head>
    <body>
        <div class="box">
            <a href="http://www.yztcedu.com">點我去育知同創</a>
        </div>
        <div>
            <input type="text" name="user" id="user" value="" />
            <br />
            <button>獲取輸入框中的值</button>
        </div>
    </body>
</html>

2.2 獲取和修改元素的屬性

attr(屬性名)方法操作

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                //獲取屬性href的值
                var $href = $("div a").attr("href");
                console.log($href);
                //點擊按鈕的時候更換屬性的值
                $("div button").click(function () {
                    $("div a")
                    .attr("href", "http://www.sina.com.cn") //參數1：屬性名  參數2：屬性值
                    .attr("title", "浪浪")
                    .text("浪一下");
                })
            })
        </script>

    </head>

    <body>
        <div class="box">
            <a href="http://www.yztcedu.com">點我去育知同創</a>
        </div>
        <div><button>更換友情鏈接</button></div>
    </body>


</html>

如果需要同時設置多個屬性也可以把多個屬性封裝在一個對象中

$("div a")
  .attr({
        href:"http://www.sina.com.cn",
        title:"浪浪"
     })
  .text("浪一下");

2.3 元素的樣式操作

這裏的樣式操作主要是針對一個元素的class屬性進行操作。一般有一些潛規則：id是給js用的，class是給css用的。所以，大家希望用class去設置樣式。

對樣式的操作包括：獲取class，設置class，追加class，刪除class，切換class，判斷是否有class屬性

2.3.1 獲取和設置樣式

class也是屬性，所以獲取和設置的方法與獲取和設置屬性的方法一致。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div.nomal{
                width: 200px;
                height: 200px;
                background: pink;
                border: 1px dashed blue;
            }
            div ul{
                list-style: none;
            }
            .big{
                width: 400px;
                height: 400px;
                border: 1px dashed green;
            }
            .color{
                background: gray;
            }

        </style>
        <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">
            $(function () {
                $("li:nth-child(1)").click(function () {
                    $("div#box").attr("class", "big");
                })

                $("li:nth-child(2)").click(function  () {
                    $("div#box").attr("class", "color");
                })
            })
        </script>
    </head>
    <body>
        <div class="nomal" id="box">我是div中的元素</div>

        <div>
            <ul>
                <li><button>點我變大</button></li>
                <li><button>點我變色</button></li>
            </ul>
        </div>
    </body>
</html>

2.3.2 追加樣式

替換樣式會把原來的全部更新，有的時候，我們只想向更新某個樣式，則使用追加。

CSS規定，一個元素的class屬性可以多個值，多個值之間用空格隔開。表示合併這些樣式的值。如果有重複的，則以後面的爲準

JQuery使用addClass方法來追加樣式.

addClass方法可以完成追加的效果

$(function () {
    $("ul li:first").click(function () {
        //追加樣式
        $("#box").
        ("big");
    })

    $("li:eq(1)").click(function  () {
        $("#box").addClass("color");

    })
})

2.3.3 移除樣式

removeClass(樣式名)

2.3.4 切換樣式

toggleClass(樣式)

切換樣式，如果類名存在則刪除，不存在則添加

$(function () {
    $("li:last").click(function () {
        //該方法會自動判斷這個class是否存在，如果存在就刪除，不存在就添加
        $("#box").toggleClass("color");
    })

})

2.4.5 判斷是否有指定的class

hasClass(樣式)

2.4 each方法的使用

<script type="text/javascript">
    $(function () {
        //變量選擇到的所有元素。  傳入的參數中有兩個參數：參數1：遍歷的元素的下標 參數2：遍歷的那個元素(dom對象，不是jq對象)
        $("div").each(function (index, ele) {
            $(ele).html("呵呵呵")
        })

    })  
</script>

三、CSS-DOM操作

CSS-DOM操作就是操作讀取和設置sytle對象的各種操作。使用style屬性只能獲取行內style屬性，內部樣式和外部樣式則無法獲取。用JQuery一切都變得簡單很多。

3.1 使用css方法獲取和設置css屬性

css方法既可以獲取行間樣式屬性，也可以獲取內部和外部樣式的屬性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 300px;
                height: 300px;
                border: 1px dashed red;
                background: pink;
            }
        </style>
        <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                $("div button").click(function () {
                    var bg = $(".box").css("backgroundColor"); //獲取背景色。返回的是rgb顏色
//                  alert(bg);
                    //設置背景色。
//                  $(".box").css("background-color", "#808080");
                    //也可是使用對象同時設置多個css屬性
                    $(".box").css({"background-color":"#808080", "border":"10px solid green"});
                    //單獨設置透明度。第二個參數是number可以不加引號。(加上也可以的)
                    $(".box").css("opacity",0.5);
                    //設置寬高屬性既可以用css方法，也可以使用width方法和height方法
//                  $(".box").css("width", "800px");  //使用css設置寬
                    //使用width方法。只傳遞數字表示爲1200px。 也可以寫"1200px"
                    $(".box").width(1200);
                })
            })
        </script>
    </head>
    <body>
        <div id="box" class="box">

        </div>
        <div>
            <button>更換顏色</button>
        </div>
    </body>
</html>

css方法使用總結：

如果只傳入一個字符串，則是獲取匹配的第一元素的這個字符串表示的屬性的值。css(“backgroundColor”)獲取背景色。

如果傳入的是一個數組，則可以獲取匹配的第一個元素的多個屬性值。

如果傳入兩個參數：第一個參數是一個字符串，第二個參數是字符串或者數字。則表示設置所有匹配元素的屬性的值。

如果傳入的是一個js對象，則表示同時設置多個css屬性和值

3.2 offset方法

獲取這個元素在當前文檔的相對偏移。其中返回的對象包含兩個屬性，left和top。(這個值類似pageX和pageY)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 300px;
                height: 300px;
                border: 1px dashed red;
                background: pink;

            }
        </style>
        <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                $("button").click(function () {
                    //獲取相對文檔偏移量 獲取到的對象有兩個屬性，一個left一個top
                    var $off = $(".box").offset();
                    console.log($off.left + "  " + $off.top);
                    //設置相對文檔偏移量
                    $(".box").offset({top:300, left:300})
                })
            })
        </script>
    </head>
    <body>
        <div id="" style="position:absolute;left: 20px;">
            <div id="box" class="box"></div>        
        </div>
        <div>
            <button>獲取偏移量</button>
        </div>
    </body>
</html>

3.3 position方法

獲取標籤相對於參照定位標籤(參照物父容器)的偏移量

position（）方法的返回值和offset()一樣，有top和left

注意：這個方法不接受任何參數，所以只能獲取不能設置。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 400px;
                height: 400px;
                border: 1px dashed red;
                background: pink;
                position: relative;
                left: 50px;
            }
            .box div{
                width: 300px;
                height: 300px;
                border: 1px solid green;
                background: #808080;
                position: absolute;
                left: 20px;
            }
        </style>
        <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                $("button:first").click(function () {
                    var $position = $(".box div").position();
                    console.log($position.left + "  " + $position.top);
                })
            })
        </script>
    </head>
    <body>
        <div class="box">
            <div></div>
        </div>
        <div>
            <button>獲取偏移量</button>
            <button>設置偏移量</button>
        </div>
    </body>
</html>

3.4 scrollTop()和scrollLeft()方法

獲取某個元素的滾動條距離上端和左端的滾動的距離。

也可以設置讓滾動條去滾動

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p {
                width: 400px;
                height: 100px;
                overflow-x: scroll;
                overflow-y:
            }
        </style>
        <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                $("button:eq(0)").click(function() {
                    var top = $("p:first").scrollTop();//獲取垂直滾動條距離頂端的距離
                    var left = $("p:first").scrollLeft();//獲取水平滾動條距離左端的距離
                    console.log(top + "  " + left);
                })
                var per = 1;
                var $p = $("p:first");
                var timerId;
                //自動滾屏
                $("button:eq(1)").click(function() {
                    timerId = setInterval(function() {
                        var top = $p.scrollTop();
                        $p.scrollTop(top + per);//更改垂直滾動條距離頂端的距離，則滾動條滾起來
                    }, 50);

                })
                $("button:eq(2)").click(function() {
                    //取消自動滾屏
                    clearInterval(timerId);

                })

            })
        </script>
    </head>

    <body>
        <p>我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1 我要滾動了 1
        </p>
        <p>我要滾動了 2 </p>
        <button>獲取滾動距離 </button>
        <button>自動滾屏 </button>
        <button>取消自動滾屏 </button>
    </body>

</html>

四、DOM節點操作

4.1 創建節點

4.1.1 創建元素節點

var $li1 =$("<li></li>"); //創建一個li節點

4.1.2 創建文本節點

var $li1 =$("<li>JavaScript</li>");   //創建一個li節點和一個文本節點。元素節點和文本節點一起創建的

4.1.3 創建屬性節點

var $li1 = $("<li id='js'>javaScrpt</li>"); //創建屬性節點同元素節點文本節點一起創建

4.2 插入節點

a.append(b) : 向a中追加一個b

a.appendTo(b) : 把a追加的b中

a.prepend(b): 在a中的最前面追加b

a.prependTo(b): 把a追加到b的最前面

a.after(b) : 在a元素的後面插入一個b

a.before(b) : 在a元素的前面插入一個b

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function () {
                var $li1 = $("<li id='js'>javaScrpt</li>");
                var $ul = $("ul");
//              $ul.append($li1);  //向ul中追加一個li標籤。 插入之後 li是ul的子標籤
//              $li1.appendTo($ul);  // 將$li1追加到$ul中。  其實是顛倒了append的邏輯
//              $ul.prepend($li1);  //向ul的最前面追加一個li標籤
//              $ul.after($li1);  //在匹配的元素之後插入。  插入之後li是ul的兄弟標籤
                $ul.before($li1);  ////在匹配的元素之前插入。  插入之後li是ul的兄弟標籤
            })  
        </script>
    </head>
    <body>
        <ul>
            <li>c++</li>
        </ul>
    </body>
</html>

4.3 刪除節點

remove() 刪除這個節點，綁定的事件會丟失。幹掉自己

detach() 刪除節點，但是綁定的事件還在幹掉自己

empty() 清空這個節點的所有內容。但是這個節點還在。幹掉所有的後代

三個方法可以完成刪除節點的操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function () {
                $(".btns button:eq(0)").click(function () {
                    //刪除找到的標籤。刪除的標籤會返回。  綁定的事件會丟失。
                    var $removed = $(".languages li:nth-child(2)").remove();
                    //追加到末尾
                    $("ul.languages").append($removed);

                })
                $(".btns button:eq(1)").click(function () {
                    //與remove不同的是，他綁定的事件、附加的數據還在
                    var $removed = $(".languages li:nth-child(2)").detach();
                    $("ul.languages").append($removed);

                })

                $(".btns button:eq(2)").click(function () {
                    //清空找到的節點的所有內容，包括所有後代節點。節點還在。  這個其實並沒有清除節點
                    $(".languages li:nth-child(2)").empty()
                })
            })  
        </script>
    </head>
    <body>
        <ul class="languages">
            <li>c++</li>
            <li>javaScript</li>
            <li>java</li>
            <li>php</li>
        </ul>
        <ul class="btns">
            <li><button>使用remove刪除第二個li</button></li>
            <li><button>使用detach刪除第二個li</button></li>
            <li><button>清空元素內容</button></li>
        </ul>
    </body>
</html>

4.4 複製節點

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function () {
                $(".btns button:eq(0)").click(function () {
                    //複製節點，並添加到尾部
                    $(".languages li:first").clone().appendTo($(".languages"));
                })  
            })  
        </script>
    </head>
    <body>
        <ul class="languages">
            <li>c++</li>
            <li>javaScript</li>
            <li>java</li>
            <li>php</li>
        </ul>
        <ul class="btns">
            <li><button>複製第一個節點，然後追加到最後</button></li>       
        </ul>
    </body>
</html>

4.5 替換節點

a.replaceWith(b): a中的每一個元素都用 b去替換 b幹掉a

a.replaceAll(b) : 用a去把滿足b的每一個替換掉。 a幹掉b

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function () {
                $(".btns button:eq(0)").click(function () {
                    //找到的所有的li用參數中的節點替換
//                  $(".languages li").replaceWith("<li>我要全部幹掉你們</li>");
                    //或者用replaceAll,效果同上。
                    $("<li>我要全部幹掉你們</li>").replaceAll($(".languages li"));
                })  
            })  
        </script>
    </head>
    <body>
        <ul class="languages">
            <li>c++</li>
            <li>javaScript</li>
            <li>java</li>
            <li>php</li>
        </ul>
        <ul class="btns">
            <li><button>替換所有的節點</button></li>

        </ul>
    </body>
</html>

4.6 包裹節點

b.wrap(a) 每一個b分別用一個a包裹

b.wrapAll(a) 所有的b用同一個a包裹，如果有其他元素則扔到包裹的後面

b.wrapInner(a); 用a去包裹b的內容。不包裹b這個標籤本身。

b.unwap()去除b的父元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function () {
                $(".btns button:eq(0)").click(function () {
                    //用div把 .languages 包裹起來。  如果多個元素需要包裹，則會有多個div
//                  $(".languages").wrap("<div></div>");
                    //所有的用一個div包裹起來。  如果中間有其他元素，其他元素則放置包裹之後
//                  $("ul").wrapAll("<div></div>");
                    //.languages li 標籤中的內容用span包括。  注意：不包裹標籤字節，只包括標籤的內容
                    $(".languages li").wrapInner("<sapn></span>");
                })  
            })  
        </script>
    </head>
    <body>
        <ul class="languages">
            <li>c++</li>
            <li>javaScript</li>
            <li>java</li>
            <li>php</li>
        </ul>
        <p>擦，我竟然被扔出來了</p>
        <ul class="btns">
            <li><button>給ul包裹一個div</button></li>

        </ul>
    </body>
</html>

五、JQuery中的事件

5.1 基礎事件

5.1.1 事件綁定

元素對象.bind(事件，[可選的額外參數], 事件處理函數)

可選參數2一般省略

參數2的事件類型：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            //這裏綁定的事件是沒有on的。
            $("button:first").bind("click", function () {
                alert("我被點擊了");
            })
        })
    </script>
</head>
<body>
    <button>我有事件了</button>
</body>
</html>

5.1.2 解除綁定

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            var firstBtn = $("button:first");
            firstBtn.bind("click", function () {
                alert("我被點擊了");
            })

            firstBtn.bind("mouseover", function () {
                $(this).css("background", "red");
            })

            firstBtn.bind("mouseout", function () {
                $(this).css("background", "#FFC0CB");
            })

            $("button:eq(1)").click(function () {
                firstBtn.unbind("click");  //解除click事件的綁定
            })

            $("button:eq(2)").click(function () {
                firstBtn.unbind(); //不傳參數表示解除所有的事件綁定
            })
        })
    </script>
</head>
<body>
    <button>我有事件了</button>
    <button>解除點擊事件</button>
    <button>解除所有事件</button>
</body>
</html>

5.1.3 簡寫事件

經常用到的事件，jquery也提供了一種簡寫的方式，效率一樣，只是代碼寫法簡化了

$("button:eq(1)").click(function () {
    alert("解除")
    firstBtn.unbind("click");  //解除click事件的綁定           
})

5.1.4 複合事件

JQuery提供了兩個合成事件：hover和toggle

hover(f1, f2)用於模擬光標懸停事件，當光標移動到元素上的時候，會觸發指定的第一個函數，當光標移除這個元素時，會觸發第二個元素
功能1：toggle(f1, f2, … fn) 用於模擬鼠標連續單擊事件，當第一次單擊時只需第一個函數，當第二次單擊執行第二個函數，…，執行完畢之後再循環來。功能2：不傳任何參數，可以讓元素隱藏或顯示。但是從1.9版本開始，只剩下了功能2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                border: 1px solid red;
                text-align: center;
                line-height: 200px;
            }
        </style>
        <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function () {
                $("div").hover(function () {
                    //鼠標進入元素區域
                    $(this).css("background", "red");
                }, function () {
                    //鼠標離開元素區域
                    $(this).css("background", "pink")
                });

                /*$("div").toggle(function  () {
                    $("p").html("第一次點我")
                }, function () {
                    $("p").html("第二次點我")
                }, function () {
                    $("p").html("第三次點我")
                })*/            
                $("button").click(function () {
                    $("div").toggle(); //如果隱藏就顯示，如果顯示就隱藏。
                })
            })

        </script>
    </head>
    <body>
        <div id="box">
            我是個盒子
        </div>
        <p>哈哈哈</p>
        <button>點我</button>
    </body>
</html>

5.2 事件對象

5.2.1 事件對象的獲取

獲取事件對象非常簡單，只需要在綁定事件的時候的事件處理函數添加一個參數即可。例如：

ele.click(function(event){ }); event就是事件對象。函數觸發的時候，事件對象創建，函數執行完畢事件對象銷燬，只能在函數內部使用。

<script type="text/javascript">
    $(function() {
        //匿名函數的參數就是事件對象。執行的時候瀏覽器會自動創建事件對象，並傳入函數中。
        //這裏的事件對象，已經經過了JQuery的封裝。是JQuery對象
        $("span").click(function(event) {
            console.log(event);
        })
        $("span").bind("click", function(event) {
            console.log(event);
        })
    })
</script>

5.2.2 事件對象的常用屬性

經過JQuery封裝後的事件對象，有如下常用的屬性可供使用。

type屬性獲取事件類型
preventDefault()方法阻止事件的默認行爲。兼容各種瀏覽器。
stopPropation()方法阻止事件的冒泡
target屬性獲取到觸發事件的元素
pageX和pageY屬性光標相對於頁面的距離。如果有滾動條，還要加上滾動條的距離
offsetX和offsetY
clientX和clientY
which屬性。如果是鼠標事件則獲取鼠標的左(1)中(2)右(3)鍵，如果是鍵盤則獲取鍵盤的按鍵。
metaKey屬性。獲取ctrl按鍵。

<script type="text/javascript">
  $(function() {
    $("span").click(function(event) {
      console.log("事件類型：" + event.type);
      console.log("targe屬性：" + event.target);
      console.log("pageX:" + event.pageX);
      console.log("pageY:" + event.pageY);
      console.log("which:" + event.which)
    })
  })
</script>

5.2.3 事件的冒泡以及默認處理

preventDefault()阻止默認行爲，stopPropation()阻止冒泡。事件函數中返回false，可以同時停止默認行爲和冒泡。所以，可以直接返回false，而不用調用上述兩個方法。

5.3 高級事件

5.3.1 事件模擬操作

ele.trigger(事件類型)

<script type="text/javascript">
    $(function  () {
        $("button").click(function() {
            alert("我被點擊了");
        })
        //模擬用戶的點擊行爲
        $("button").trigger("click");
        //簡寫
        //$("button").click();
    })
</script>

trigger也可以觸發自定義事件

<script type="text/javascript">
    $(function  () {
        //自定義事件
        $("button").bind("myClick", function () {
            alert("這個是我自定義的事件");
        })
        $("button").trigger("myClick");

    })
</script>

執行默認操作：trigger觸發的事件，不僅僅觸發了事件函數，也會觸發瀏覽器的默認操作。比如，給input註冊一個focus事件，則不但觸發focus事件，還會觸發瀏覽器的默認事件，使input獲得焦點。使用trigerHanddler可以避免瀏覽器的默認操作

<script type="text/javascript">
    $(function  () {
        $("input:last").focus(function () {
            console.log("擦，我獲得焦點了");
        })
        $("input:last").triggerHandler("focus");
//      $("input:last").trigger("focus");
    })
</script>

5.3.2 事件命名空間

JQuery爲了方便管理事件，給事件提出了命名空間的概念。語法：事件.命名空間

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                //此時綁定的事件就使用了命名空間。
                $("button:eq(0)").bind("click.space", function() {
                    alert("你點擊了按鈕1");
                }).bind("mouseover", function () {
                    alert("鼠標來了")
                })

                $("button:eq(1)").bind("click.space", function() {
                    alert("你點擊了按鈕2");
                })

                $("button:eq(2)").bind("click", function() {
                    alert("你點擊了按鈕3");
                })

                $("button:eq(3)").click(function () {
                    //解除這個命名空間下的所有事件: 按鈕3的click事件和按鈕1mouseover事件沒有命名空間，所以不會解綁
                    $("button").unbind(".space")
                })
            })
        </script>
    </head>
    <body>
        <ul>
            <li>
                <button>第1個按鈕</button>
            </li>
            <li> <button>第2個按鈕</button>
            </li>
            <li><button>第3個按鈕</button></li>
            <li><button>解綁space命名空間內的所有事件</button></li>
        </ul>
    </body>
</html>

5.3.3 事件委託

delegate委託
undelegate解除委託

做人要厚道2013

發佈了79 篇原創文章 · 獲贊 375 · 訪問量 29萬+

私信關注

jQuery系列2---DOM操作和事件