jQuery學習----------DOM操作

DOM操作之創建元素：

   DOM：

      var ele = document.createElement("element")

      例子：document.createElement("div")

   jQuery:

      var $ele = $("element")    //返回的是一個jQuery對象

      例子：$("<div></div>")

DOM操作之輸入文本：

   DOM：

      var txt = document.createTextNode("String")

      例子：document.createTextNode("test")

   jQuery：

      可以直接添加文字到標簽中

      例子：var $div = $("<div>test</div>")

DOM操作之設置屬性：

   DOM：

      ele.setAttribute("AttName","AttValue")

   jQuery：

      可以直接添加屬性到標簽中

      例子:var $div = $("<div align='center'></div>")

 示例：

//DOM
window.onload = function(){
	  	var txt = document.createTextNode("test");
	  	var div = document.createElement("div");
	  	div.appendChild(txt);
	  	div.setAttribute("align","center");
	  	document.body.appendChild(div);
	  }
	  
//jQuery
var $div = $("<div align='center'>test</div>")
$("body").append($div)

DOM操作之插入內容：

   內部插入：

       DOM：

          appendChild()   //在指定節點的內部末尾插入

          insertBefore()  //在指定節點的內部最前插入

       jQuery：

          append()     //把參數指定的內容插入到指定節點中，返回jQuery對象

          appendto()   //將匹配的元素出插入到目標元素之后

               示例：$("div").append($("h3"))

                     $("h3").appendto($("div"))

          prepend()    //將參數指定的內容插入到指定節點中，返回jQuery對象

          prependto() 

               示例：$("div").prepend($("h3"))

                     $("h3").prependto($("div"))

   外部插入：

       jQuery：

         after()        //在每個匹配的元素之后插入內容

         before()       //在每個匹配的元素之前插入內容

           例子：$("div").after("<b>test1</b>") 將在每個div元素后面插入test1文本

         insertAfter()  //把所有匹配的元素插入到另一個指定的元素集合的后面

         insertBefore() //把所有匹配的元素插入到另一個指定的元素集合的前面

           例子：$("<b>test<b>").insertAfter("p")  將test文本插入到p元素后

DOM操作之刪除元素：

   DOM：

      removeChild()

   jQuery：

     remove()  //刪除所有匹配的元素 remove([selector),selector用來過濾元素

               例子：$("p").remove(); //刪除所有p元素

                     $("div").remove(".red");  //刪除所有含有類red的div元素

     empty()   //刪除元素包含的內容，不刪除元素本身，該方法沒有參數

               例子：$("p").empty()   //刪除p元素包含的內容

     detach()  //將匹配的元素從DOM中分離出來

               例子： $("p").detach(".red");

     注意：remove和detach的區別：

          detach()是將元素分離出去，會保留綁定在改元素上的事件、附加的數等；

           當重新把該元素加入DOM中，所綁定的事件仍然有效

           remove()是刪除元素，不會保留該元素上的事件等信息

DOM操作之克隆內容：

   DOM：

      cloneNode()方法：

            nodeObject.cloneNode(false|true)

            //false表示不復制節點的屬性和子節點，true表示要復制

   jQuery：

      clone()方法：

           clone([withDataAndEvent])

           clone([withDataAndEvent],[deepWithDataAndEvent])

           例子：$("p").clone(true)  //克隆p元素，并保留事件

DOM操作之替換內容：

   DOM：

      replaceChild()方法：

           nodeObject.replaceChild(new_node,old_node)

   jQuery：

      replaceWith()方法：

           例子：$("p").replaceWith("<h2>test<h2>");

      replaceAll()方法：

           例子：$("<h2>test<h2>").replaceAll("p");

DOM操作之包裹內容：

   jQuery：

      wrap()方法：wrap(element|function)

           例子：$("div").wrap("<li></li>") 用li元素包含每一個div元素

      wrapInner()方法：

           例子：$("div").wrapInner("<li></li>") 給div添加內包含的元素li

      wrapAll()方法：

           例子：$("h2").wrapAll("<li></li>")

      unwrap()方法： 將匹配元素的父級元素刪除

           例子：$("p").unwrap()

DOM操作之屬性操作

設置屬性：

    DOM：

       setAttribute()方法：node.setAttribute(name,value)

            例子：div.setAttribute("align","center")

   jQuery：

       prop()方法：

            prop(name,value)

               例子：$("div.green").prop({"align","value"})

            prop(map)：參數map指：{屬性，值}

               例子：$("div.green").prop({"id":"divid","align":"value"})

            prop(name,function(index,oldvalue))

       attr()方法：

            attr(name,value)

            attr(map)

            attr(name,function(index,oldvalue))

       上面兩種方法的差別：prop()添加checked這一類屬性較好。

訪問屬性：

    DOM：

       getAttribute()方法：node.getAttribute(name)

    jQuery：

       prop()方法：prop(name)

       attr()方法：attr(name)

       區別：attr()方法只用來返回默認的屬性值，或者初始值

            如：$("input").attr("checked") //當復選框的狀態改變時，返回的值不會變

       注：

          上述方法只會獲取第一個匹配的元素

          可以通過each()方法訪問所有匹配元素的屬性：

             如：$("div").each(function(){

        console.log($(this).prop("class"))

         })

刪除屬性：

    DOM：

       removeAttribute()方法：node.removeAttribute

    jQuery：

       removeProp()方法：

           例子：$("div.green").removeProp("id")

       removeAttr()方法：

   例子：$("div.green").removeAttr("id")

DOM操作之類操作：

添加樣式：

    jQuery：

       addClass()方法：增加類樣式

       removeClass()方法：刪除類樣式

       toggleClass()方法：切換類樣式

          語法：toggleClass(className)

                toggleClass(className,switch)

                         (switch：用來判斷樣式添加還是移除的boolean值）

                toggleClass(function(index,class),[switch])

判斷樣式

    DOM：

        hasAttribute()方法：判斷是否擁有某個屬性，可以用來判斷是否擁有某個類

    jQuery：

        hasClass()方法

DOM操作之讀寫文本值：

讀寫HTML：

    DOM：

       innerHTML()方法

    jQuery：

       html()方法

讀寫文本：

    DOM：

       innerText()方法

    jQuery：

       text()方法

讀寫值：（這里的值是指表單元素中的value屬性的值）

    DOM：

       通過屬性value獲取

    jQuery：

       val()方法

DOM操作之樣式表操作：

讀寫CSS樣式：

   DOM：

      借助style屬性可以訪問行內樣式的值，

          但是他沒有辦法訪問外部css樣式表（文檔內部樣式表和文檔外部樣式表）！！

      借助document對象的styleSheets對象訪問外部樣式表！！

      獲取樣式表：document.styleSheets[0]//獲取第一個樣式表

      獲取樣式表中的樣式：（考慮兼容性） 

           非IE瀏覽器：document.styleSheets[0].c***ules[0]

                            //獲取樣式表中的第一個樣式的

           IE瀏覽器：  document.styleSheets[0].rules[0]

      寫入樣式：（考慮兼容性）

       非IE瀏覽器：document.styleSheets[0].insertRule("rule",index)

                       insertRule("rule",index)：

                           rule：是一個完整的css樣式字符串

                           index：必須設置，當值為0時，將樣式插入到樣式表末尾

       IE瀏覽器：document.styleSheets[0].addRule("selector","style",index)

                           index：可以不設置，默認為-1，表示樣式表的末尾

      document.styleSheets[0].length//獲取樣式表中的樣式數目

   jQuery:

      css()方法：讀取或設置css樣式

          例子： $("div").css("font-size","40px")

                 $("div").css({"font-size":"20px","color":"red"})

         $("div").css("font-size")

絕對定位：

    jQuery：

       offset()方法：獲取匹配元素在當前視口的相對偏移

          語法：offset()：返回一個對象包含top和left兩個屬性

                offset(coordinates)：coordinates是一個對象，包含top和left屬性

                offset(function(index,coords))：

                                   function函數返回一個包含top和left屬性的對象

                                   index：元素的索引位置

                                   coords：元素的當前坐標

       例子：       

           var cood = new Object()
	   cood.top =120
	   cood.left = 120
	   $("div").offset(cood)
	   console.log($("div").offset())

相對定位：

    jQuery：

       position()方法：獲取匹配元素的相對偏移位置。

設置大小：

    jQuery：

       width()和height()方法：讀寫元素的大小

            語法：width()/height()

                  width(value)/height(value)

                  width(function(index,width))/height(function(index,width))

    例子：

         $("div.blue").width("150px").height("150px")

 var w = $("div.green").width();

 $("div.green").width(function(index,w){

  return w/2;

  })

       innerHeight()、innerWidth()：返回元素的總寬高（包括寬高、內邊距和邊框高度）

       outerHeight()、outerWidth()：返回元素的內容寬高（包括寬高和內邊距）

DOM操作之訪問文檔樹：

   DOM：

      使用ChildNode、parentNode、nextSibling、previousSibling、firstChild、lastChild屬性

   jQuery：

      children()：獲取當前元素的所有子元素；

      next()：獲取當前元素的下一個相鄰元素；

      prev()：獲取當前元素的上一個相鄰元素；

      parent()：獲取當前元素的父元素

      注意：這些方法返回的是jQuery對象。