【文章根據(jù) 尚硅谷 教學(xué)材料 總結(jié)】

成都創(chuàng)新互聯(lián)作為成都網(wǎng)站建設(shè)公司，專注網(wǎng)站建設(shè)公司、網(wǎng)站設(shè)計，有關(guān)成都定制網(wǎng)站方案、改版、費用等問題，行業(yè)涉及成都陽臺護欄等多個領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認可。

發(fā)博備查。

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

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

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

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

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

7. jQuery 對象遍歷的方式是 each , 在 each 內(nèi)部的 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. 選擇的是一個數(shù)組, 當(dāng)該數(shù)組中有多個元素時, 通過 .val() 方法就只能獲取第一個被選中第一個被選中的值了.

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

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

14. 創(chuàng)建節(jié)點:
        使用 $(html) 方式即可, 元素節(jié)點, 文本節(jié)點, 屬性節(jié)點可以一網(wǎng)打盡返回對應(yīng)節(jié)點的 jQuery 對象 :
            $("<li id='TEST'>測試</li>")
            
15. 添加節(jié)點:
        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 的響應(yīng)函數(shù)一樣, jQuery 對象的響應(yīng)函數(shù)若返回 false 可以取消指定元素的默認行為,比如 submit , a 等.
        
17. val() 方法,相當(dāng)于 attr("value"),獲取表單元素的 value 屬性值

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

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

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

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

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

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

25.
    1). 創(chuàng)建一個<li>測試</li> 節(jié)點,替換 #city 的最后一個 li 子節(jié)點.
            $("<li>測試</li>").repalceAll($("#citi li:last"));
    2). 創(chuàng)建一個<li>測試</li> 節(jié)點,替換 #city 的第二個 li 子節(jié)點.
            $("#city li:eq(1)").replaceWith($("<li>測試</li>"));
    3). 互換以下兩個節(jié)點: #rl 和 #bj .(互換節(jié)點有移動的功能).
            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") 得到的是一個數(shù)組, 而使用val()方法只能獲取數(shù)組元素的第一個值, 若希望打印被選擇的所有值, 需使用 each 遍歷

28. jQuery 樣式相關(guān)的方法.
        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). 獲取和設(shè)置元素透明度: 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). 獲取元素在當(dāng)前視窗中的相對位移: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");
            //如何解決事件冒泡:通過在響應(yīng)函數(shù)的結(jié)尾返回 false ,可以阻止冒泡.
            return false;
        });

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

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

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

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

                $("<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).刪除節(jié)點:

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

        4).清空節(jié)點:

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

        5).克隆節(jié)點:

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

        6).替換節(jié)點:

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

        7).wrap ,wrapAll ,wrapInner:了解

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

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

    [7].技術(shù)點之外:

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

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

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

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

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

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

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

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

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

分享標(biāo)題：jQuery知識點總結(jié)
網(wǎng)頁路徑：http://www.chinadenli.net/article6/ggheog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、定制開發(fā)、網(wǎng)頁設(shè)計公司、網(wǎng)站維護、小程序開發(fā)、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)