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

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

發(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 對(duì)象
    [1]. 由 jQuery 對(duì)象轉(zhuǎn)為 DOM 對(duì)象.
        1). 獲取一個(gè) jQuery 對(duì)象.
            var $btn = $("button");
        2). jQuery 對(duì)象是一個(gè)數(shù)組.
            alert($btn.length);
        3). 可以通過(guò)數(shù)組下標(biāo)轉(zhuǎn)為 DOM 對(duì)象.
            alert($btn[1].firstChild.nodeValue);
    [2]. 由 DOM 對(duì)象轉(zhuǎn)為 jQuery 對(duì)象.
        1). 選取一個(gè) DOM 對(duì)象.
            var btn = document.getElementById("btn");
        2). 把 DOM 對(duì)象轉(zhuǎn)為一個(gè) jQuery 對(duì)象:使用 $() 進(jìn)行包裝.
            alert($(btn).text());

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

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

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

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

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

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

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

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

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

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

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

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

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

28. jQuery 樣式相關(guān)的方法.
        1). hasClass():某元素是否有指定的樣式.
                alert($("div").hasClass("SubCategoryBox"));//true
        2). 移除樣式.
                $("div").removeClass("SubCategoryBox");
        3). 添加樣式.
                $("div").addClass("SubCategoryBox");
        4). 切換樣式:存在則去除；沒(méi)有則添加.
                $(".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)前視窗中的相對(duì)位移:offset() .
            其返回對(duì)象包含了兩個(gè)屬性: top ,left .該方法只對(duì)可見(jiàn)元素有效.
                alert($("div:first").offset().top);
                alert($("div:first").offset().left);

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

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

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

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

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

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

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

            ② prepend ,prepenfTo

                $("<li id='TEST'>測(cè)試</li>").prependTo($("#city"));
                $("#city").prepend("<li id='TEST'>測(cè)試</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é)點(diǎn):

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

        4).清空節(jié)點(diǎn):

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

        5).克隆節(jié)點(diǎn):

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

        6).替換節(jié)點(diǎn):

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

        7).wrap ,wrapAll ,wrapInner:了解

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

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

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

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

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

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

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

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

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

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

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

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

分享標(biāo)題：jQuery知識(shí)點(diǎn)總結(jié)
網(wǎng)頁(yè)路徑：http://aaarwkj.com/article6/ggheog.html

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

廣告

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