jQuery學習----------DOM操作-創(chuàng)新互聯(lián)

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供崇川網(wǎng)站建設、崇川做網(wǎng)站、崇川網(wǎng)站設計、崇川網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、崇川企業(yè)網(wǎng)站模板建站服務，10年崇川做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

DOM操作之創(chuàng)建元素：

  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操作之插入內(nèi)容：

  內(nèi)部插入：

    DOM：

     appendChild() //在指定節(jié)點的內(nèi)部末尾插入

      insertBefore() //在指定節(jié)點的內(nèi)部最前插入

    jQuery：

     append()  //把參數(shù)指定的內(nèi)容插入到指定節(jié)點中，返回jQuery對象

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

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

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

      prepend() //將參數(shù)指定的內(nèi)容插入到指定節(jié)點中，返回jQuery對象

      prependto()

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

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

  外部插入：

    jQuery：

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

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

      例子：$("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()//刪除元素包含的內(nèi)容，不刪除元素本身，該方法沒有參數(shù)

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

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

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

   注意：remove和detach的區(qū)別：

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

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

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

DOM操作之克隆內(nèi)容：

  DOM：

   cloneNode()方法：

      nodeObject.cloneNode(false|true)

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

  jQuery：

   clone()方法：

      clone([withDataAndEvent])

      clone([withDataAndEvent],[deepWithDataAndEvent])

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

DOM操作之替換內(nèi)容：

  DOM：

    replaceChild()方法：

      nodeObject.replaceChild(new_node,old_node)

  jQuery：

    replaceWith()方法：

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

    replaceAll()方法：

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

DOM操作之包裹內(nèi)容：

  jQuery：

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

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

    wrapInner()方法：

      例子：$("div").wrapInner("<li></li>") 給div添加內(nèi)包含的元素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)：參數(shù)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)

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

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

    注：

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

     可以通過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屬性可以訪問行內(nèi)樣式的值，

     但是他沒有辦法訪問外部css樣式表（文檔內(nèi)部樣式表和文檔外部樣式表）?。?/p>

   借助document對象的styleSheets對象訪問外部樣式表?。?/p>

   獲取樣式表：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//獲取樣式表中的樣式數(shù)目

  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函數(shù)返回一個包含top和left屬性的對象

                  index：元素的索引位置

                  coords：元素的當前坐標

    例子：

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

相對定位：

  jQuery：

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

設置大?。?/strong>

  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()：返回元素的總寬高（包括寬高、內(nèi)邊距和邊框高度）

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

DOM操作之訪問文檔樹：

  DOM：

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

  jQuery：

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

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

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

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

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

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)站標題：jQuery學習----------DOM操作-創(chuàng)新互聯(lián)
本文來源：http://www.muchs.cn/article26/deoicg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、外貿(mào)建站、網(wǎng)站策劃、品牌網(wǎng)站建設、用戶體驗、企業(yè)網(wǎng)站制作

廣告

聲明：本網(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)