使用jQuery操作 DOM

標籤：區別   document   文本   擷取   hasclass   設定   使用   str   語言   

DOM操作分為三類：

        1、DOM Core：任何一種支援DOM的程式設計語言都可以使用它，如getElementById()

        2、HTML-DOM：用於處理HTML文檔，如document.forms

        3、CSS-DOM：用於操作CSS，如element.style.color="green"

jQuery對JavaScript中的DOM操作進行了封裝

jQuery中的DOM操作：

        樣式操作、 內容及Value值操作、 節點操作、 節點屬性操作 、節點遍曆、 CSS-DOM操作

樣式操作：

       一： 1、設定和擷取樣式值

              使用css()為指定的元素設定樣式值或擷取樣式值

                    css(name,value) ;設定單個屬性

                    css({name:value, name:value,name:value…}) ;同時設定多個屬性

                    css(name)擷取屬性值

                    例子：$(this).css("border","5px solid #f5f5f5"); 或 $(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});

        2、追加樣式

              $(selector).addClass(class); 或 $(selector).addClass(class1 class2 … classN);

             說明：參數class為樣式名稱，也可以同時增加多個樣式，只需要用空格隔開。

       3、移除樣式

             $(selector).removeClass("class") ; 或 $(selector).removeClass("class1 class2 … classN ") ;

             說明：class，可選，規定要移除的class的名稱，如果需要移除若干類，使用空格來分隔類名。

                     如果不設定該參數，則會移除所有類。

       4、樣式切換

            toggleClass() : 類比了addClass()與removeClass()實現樣式切換的過程

   二：判斷是否含指定的樣式

           hasClass( )方法來判斷是否包含指定的樣式

               例子：$("h2").mouseover(function() { if(!$("p").hasClass("content ")){ $("p").addClass("content "); } });

HTML代碼操作

       html()可以對HTML代碼進行操作，類似於JS中的innerHTML

             文法：$("div.left").html();擷取元素中的html代碼

                     $("div.left").html("<div class=‘content‘>…</div>");設定元素中的html代碼

標籤內容操作

        text()可以擷取或設定元素的常值內容

             文法：$("div.left").text();擷取元素中的常值內容

                     $("div.left").text("<div class=‘content‘>…</div>");設定元素中的常值內容

屬性值操作

        val()可以擷取或設定元素的value屬性值

              文法：$(this).val();擷取元素的value屬性值

                       $(this).val(value);設定元素的value屬性值

增加個小的知識點，html（）方法和text（）方法的區別

    

 

使用jQuery操作 DOM