jQuery 知識點總結

【文章根據 尚硅谷 教學材料 總結】

發博備查。

1.    
    . class選擇器
    # id選擇器
    : 選取

2. $(function(){})相當于 window.onload 方法.
    window.onload = function(){...}
    
3. 加載DOM的兩種方式: jQuery 和 window.onload
    $(document).ready(function(){...})
    $(function(){...}

4. 選取button 并添加 onClick 響應函數. $("button").click(function(){}

5. jQuery 和 DOM 對象
    [1]. 由 jQuery 對象轉為 DOM 對象.
        1). 獲取一個 jQuery 對象.
            var $btn = $("button");
        2). jQuery 對象是一個數組.
            alert($btn.length);
        3). 可以通過數組下標轉為 DOM 對象.
            alert($btn[1].firstChild.nodeValue);
    [2]. 由 DOM 對象轉為 jQuery 對象.
        1). 選取一個 DOM 對象.
            var btn = document.getElementById("btn");
        2). 把 DOM 對象轉為一個 jQuery 對象:使用 $() 進行包裝.
            alert($(btn).text());

6. 使用 id 選擇器選擇 id=btn1 的元素, 并為選擇的 jQuery 對象添加 onclick 響應函數.
        $("#btn1").click(function(){...});

7. jQuery 對象遍歷的方式是 each , 在 each 內部的 this 是得到的 DOM 對象, 而不是一個jQuery 對象
    $("#btn5").click(function(){
        var leng = $(":checkbox[name='newsletter':checked]").each(function(){
            alert(this.value);
        });
    });

8. 選取子元素需要在選擇器前添加空格.  div.one 同 .one .
        $(".one :nth-child(2)").css("backgroud" ,"#ffbbaa");

9. 選擇的是一個數組, 當該數組中有多個元素時, 通過 .val() 方法就只能獲取第一個被選中第一個被選中的值了.

10. jQuery 對象可以進行隱式迭代:
        $("p").click(function(){...})
    為選取的所有的 p 節點都添加了 click 響應函數.
    jQuery 對象本身就是一個 DOM 對象的數組.
            
11. 在響應函數中, this 是一個 DOM 對象, 若想使用jQuery 對象的方法, 需要把其包裝為 jQuery 對象:
    使用 $() 把 this 包起來.
            
12. text() 方法是一個讀寫的方法:
    不加任何參數, 讀取文本值；
    加參數, 為屬性節點添加文本值(文本節點).
    和 text() 方法類似的:attr() ,val().

13. 使用 jQuery 操作文本節點, 屬性節點 及查找元素節點.
    1). 操作文本節點:通過 jQuery 對象的 text() 方法
        alert($("#bj").text());
        $("#bj").text("TEST");
        
    2). 操作屬性節點:通過 jQuery 對象的 atter() 方法.
        注:直接操作 value 屬性值可以使用共便捷的 val() 方法.
        alert($(":text[name='username']").attr("value"));
        $(":text[name='username']").attr("value","TEST");

14. 創建節點:
        使用 $(html) 方式即可, 元素節點, 文本節點, 屬性節點可以一網打盡返回對應節點的 jQuery 對象 :
            $("<li id='TEST'>測試</li>")
            
15. 添加節點:
        1). appendTo() 和 append():主語和賓語的位置不同:
                ("<li id='TEST'>測試</li>").appendTo($("#city"));
                $("#city").append("<li id='TEST'>測試</li>");
                
        2). prependTo() 和 prepend():主語和賓語位置不同:
                $("<li id='TEST'>測試</li>").prependTo($("#city"));
                $("#city").prepend("<li id='TEST'>測試</li>");

16. 同 JS 的響應函數一樣, jQuery 對象的響應函數若返回 false 可以取消指定元素的默認行為,比如 submit , a 等.
        
17. val() 方法,相當于 attr("value"),獲取表單元素的 value 屬性值

18. $.trim(str) 可以去除 str 的前后空格.

19. jQuery 對象的 remove() 方法:
        將把jQuery 對象對應的DOM節點直接刪除
            $("#bj").remove();

20. 清空 game 節點:
        jQuery 對象的 empty() 方法: 清空jQuery對象對應的 DOM 對象的所有的子節點.
            $("#game").empty();

21. jQuery 調用jQuery 提供的方法的返回值如果是一個對象的話那么這個對象一定是一個 jQuery 對象

22. find() 方法:查找子節點,返回值為子節點對應的 jQuery 對象.

23. jQuery clone 方法:復制節點.
    1). clone 節點時需要注意克隆后的節點的 id 屬性.若原節點有 id 屬性, 則克隆后,會在一個文檔中出現兩個相同 id 的節點的情況.
            
    2). clone(true):在克隆節點的同時,克隆節點包含的事件.
            
24. jQuery replaceWith (replaceAll) 方法:替換節點.
        1). repalceWith ,replaceAll 一對方法完成相同功能,只是主賓位置不同.
        2). 以上的兩個方法還有移動的功能.
        3). 節點互換需要先克隆節點.
        4). var $rl = $("rl").replaceWith($bj2);  返回的是被替換的節點 rl .

25.
    1). 創建一個<li>測試</li> 節點,替換 #city 的最后一個 li 子節點.
            $("<li>測試</li>").repalceAll($("#citi li:last"));
    2). 創建一個<li>測試</li> 節點,替換 #city 的第二個 li 子節點.
            $("#city li:eq(1)").replaceWith($("<li>測試</li>"));
    3). 互換以下兩個節點: #rl 和 #bj .(互換節點有移動的功能).
            var $bj2 = $("#bj").clone(true);
            var $rl = $("rl").replaceWith($bj2);
            $("#bj").replaceWith($rl);

26. 使用 jQuery wrap ,wrapAll ,wrapInner:
        1). 包裝 li 本身.
            #("#game li").wrap("<font color='red'></font>");
        2). 包裝所有 li .
            $("#city li").wrapAll("<font color='red'></font>");
        3). 包裝 li 里邊的文字.
            $("#language li").wrapInner("<font color='red'></font>");

27. val 不能直接獲取 checkbox 被選擇的值.若直接獲取, 只能得到第一個被選擇的值.
    因為 $(":checkbox[name='c']:checked") 得到的是一個數組, 而使用val()方法只能獲取數組元素的第一個值, 若希望打印被選擇的所有值, 需使用 each 遍歷

28. jQuery 樣式相關的方法.
        1). hasClass():某元素是否有指定的樣式.
                alert($("div").hasClass("SubCategoryBox"));//true
        2). 移除樣式.
                $("div").removeClass("SubCategoryBox");
        3). 添加樣式.
                $("div").addClass("SubCategoryBox");
        4). 切換樣式:存在則去除；沒有則添加.
                $(".showmore").click(function(){
                    $("div:first").toggleClass("SubCategoryBox");
                    return false;
                });
        5). 獲取和設置元素透明度: opacity 屬性.
                alert($("div:first").css("opacity"));
                $("div:first").css("opacity".0.5);
        6). width() & height() .
                alert($("div:first").width());
                alert($("div:first").height());
                $("div:first").width(400);
                $("div:first").height(80);
        7). 獲取元素在當前視窗中的相對位移:offset() .
            其返回對象包含了兩個屬性: top ,left .該方法只對可見元素有效.
                alert($("div:first").offset().top);
                alert($("div:first").offset().left);

29. onclick 事件的另一種寫法: bind: 為某 jQuery 對象綁定事件.
        $(".head").click(function(){...});
        $(".head").bind("click" ,function(){...})

30. 事件冒泡:什么是事件的冒泡.
        $("body").click(function(){
            alert("1");
        });
        
        $("#content").click(function(){
            alert("2");
        });
        
        $("span").click(function(){
            alert("3");
            //如何解決事件冒泡:通過在響應函數的結尾返回 false ,可以阻止冒泡.
            return false;
        });

31. toggle() 可以切換元素是否可見.
    slideToggle():通過高度變化來切換匹配元素的可見性.
    fadeToggle():通過透明度變化來切換匹配元素的可見性.
    fadeTo():把不透明度以漸進的方式調整為透明的值.

32. var $category = $("li:gt(5):lt(7)");
    此時的lt 是在 li:gt(5) 基礎上運行的.

33. 總結:
    [1]. jQuery 是 JavaScript 的一個函數庫,非常方便,非常主流
    [2]. 利用 jQuery 開發的步驟:
        1). 導入 jQuery 庫
        2). 在 $(function(){}) 中編輯代碼
    [3]. jQuery 對象 vs DOM 對象
        1). 兩者不能使用對方的屬性和方法
        2). jQuery 對象是一個 DOM 數組對象, 所以可以使用下標的方式轉為DOM對象.
            var $btn = $("button");
            var btn = $btn[0];
        3). jQuery 對象是使用 $() 包裝 DOM 對象后產生的對象。
            $("select :selected").each(function(){
                alert($(this).value);
            })
    [4]. jQuery 的選擇器。
        1). 選取被選中的 select 的 option 需要使用選取子節點的方式
            $("select[name='test'] :selected").each(funtion(){...})
        2). jQuery 選擇器可以綜合使用
        3). 如果選擇器搞不定,可以調用方法實現
    [5]. jQuery 對象的幾個方法:
        1). val():獲取或設置表單元素的 value 屬性值
            設置值
                $(":text:enable").val("TEST");
            獲取值
                $(":text:enable".val())
        2).attr(): 和val()方法類似
            attr(name.val):為 name 屬性賦值為 val
            attr(name):獲取 name 屬性值
        3).each():對 jQuery 對象進行遍歷,其參數為 function, 函數內部的 this 是正在遍歷的 DOM 對象
            $("select :selected").each(function(){
                alert(this.val);
            })
        4).text():和 val() 方法類似
            text():獲取元素節點的文本子節點的值
            text(str):設置元素節點的文本子節點的值

    [6].使用jQuery進行DOM操作:
        1).新建（元素、屬性、文本）節點:直接使用$()包裝即可,返回值是一個jQuery對象。
            var $TEST = $("<li id='TEST'>測試</li>");
        2).節點插入到文檔中:
            ① append ,appendTo:把節點 A 插入為節點 B 的最后一個子節點

                $("<li id='TEST'>測試</li>").appendTo($("#city"));
                $("#city").append("<li id='TEST'>測試</li>");

            ② prepend ,prepenfTo

                $("<li id='TEST'>測試</li>").prependTo($("#city"));
                $("#city").prepend("<li id='TEST'>測試</li>");

            ③ before ,insertBefore

                $("<li id='DDD'>屌屌的</li>").insertBefore($("#bj"));
                $("#bj").before("<li id='DDD'>屌屌的</li>");

            ④ after ,insertAfter

                $("<li id='DDD'>屌屌的</li>").insertAfter($("#bj"));
                $("#bj").after("<li id='DDD'>屌屌的</li>");

        3).刪除節點:

            $("#bj").remove();

        4).清空節點:

            $("#game").empty();

        5).克隆節點:

            $("#bj").clone(true);

        6).替換節點:

            $("<li>測試</li>").repalceAll($("#citi li:last"));
        
            $("#city li:eq(1)").replaceWith($("<li>測試</li>"));

        7).wrap ,wrapAll ,wrapInner:了解

        8).val() ,html() ,text() ,attr() ,width() ,height() 等兼具有讀寫功能的方法.

            //讀取某個節點的html內容
            alert($("#city").html());
            
            //設置某個節點的html內容
            $("#city").html("<li id='DDD'>屌屌的</li>")

    [7].技術點之外:

        1). jQuery 對象可以進行隱式迭代: $("p").click(function(){...})為選取的所有的 p
        節點都添加了 click 響應函數. jQuery 對象本身就是一個DOM對象的數組.
        
        2). 在jQuery 中顯示迭代:使用 each() 方法:
            $(":checkbox[name='c']:checked").each(function(){
                alert(this.value);
            });

            可以在顯示迭代的響應函數的參數中通過index屬性獲取到正在遍歷的對象的索引.

        3).在響應函數中, this 是一個 DOM對象,若想使用jQuery對象的方法,需要把其包裝為
        jQuery對象:使用 $() 把 this 包起來.
            
        4). defaultValue :DOM 對象的屬性,可以獲取表單元素的默認值.

        5).通過 val() 為 radio 賦值:即便是為一組 radio 賦值,val參數中也應該使用數組,
        使用一個值不起作用

        6).val 不能直接獲取 checkbox 被選擇的值.若直接獲取,只能得到第一個被選擇的值.因
        為 $(":checkbox[name='c']:checked")得到的是一個數組,而使用val()方法只能獲取數組元素的第一個值,若希望打印被選擇的所有值,需使用 each 遍歷.
        而 radio 被選擇的只有一個,所以可以直接使用 val() 方法獲取被選擇的值.

        7).1. 同 JS 的響應函數一樣, jQuery 對象的響應函數若返回 false 可以取消指定元素
        的默認行為,比如 submit , a 等.
        
        8). $.trim(str) 可以去除 str 的前后空格.

        9).jQuery 對象的方法的連綴:調用一個方法的返回值還是調用的對象,于是可以在調用方法的后面依
        然調用先前那個對象的其他方法.

        10).find()方法:查找子節點,返回值為子節點對應的jQuery對象.

            var $trNode = $(aNode).parent().parent();
            //獲取 $tr 的第一個 td 節點的文本節點的文本值.
            var textContent = $trNode.find("tr:first").text();