如何使用jquery操作dom

jQuery DOM 元素方法

站在用戶的角度思考問題，與客戶深入溝通，找到潼南網(wǎng)站設計與潼南網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：做網(wǎng)站、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)絡空間、企業(yè)郵箱。業(yè)務覆蓋潼南地區(qū)。

.get() 獲得由選擇器指定的 DOM 元素。

.index() 返回指定元素相對于其他指定元素的 index 位置。

.size() 返回被 jQuery 選擇器匹配的元素的數(shù)量。

.toArray() 以數(shù)組的形式返回 jQuery 選擇器匹配的元素。

jquery中的DOM的理解

用我自己的理解和你說一遍，網(wǎng)頁說到底就是容器的嵌套，也就是DOM樹，html/html是最外層的容器，接著是head/head、body/body,在這兩個容器我們可以繼續(xù)加別的東西，形象一點就是大盒子里放小盒子，小盒子里面再放盒子，這是直觀的理解，抽象一點就是DOM樹，html/html是樹根，head/head、body/body,則是它的延伸、子集，可以看做樹干，接下來的又是head/head、body/body,的子集，可以看做枝葉，DOM樹加載就相當于從樹根到枝葉把這棵樹構(gòu)造出來，換到網(wǎng)頁就是整個網(wǎng)頁的顯示層面全部加載顯示，$(document).ready()函數(shù)做的事就是看這個樹那兒不好，修剪一下，換到網(wǎng)頁就是對最原始的顯示進行排版美化等一系列你想做的事。

直白的說就是這么回事，希望對你有幫助

DOM對象與jquery對象有什么不同

jQuery對象和DOM對象使用說明，需要的朋友可以參考下。

1.jQuery對象和DOM對象

第一次學習jQuery,經(jīng)常分辨不清哪些是jQuery對象，哪些是 DOM對象，因此需要重點了解jQuery對象和DOM對象以及它們之間的關系.

DOM對象，即是我們用傳統(tǒng)的方法(javascript)獲得的對象，jQuery對象即是用jQuery類庫的選擇器獲得的對象;

復制代碼 代碼如下:

var domObj = document.getElementById("id"); //DOM對象

var $obj = $("#id"); //jQuery對象;

jQuery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象，它是jQuery獨有的。如果一個對象是jQuery對象，那么就可以使用jQuery里的方法，例:

$("#foo").html(); //獲取id為foo的元素內(nèi)的html代碼，html()是jQuery特有的方法;

上面的那段代碼等同于:

document.getElementById("foo").innerHTML;

注意：在jQuery對象中無法使用DOM對象的任何方法。

例如$("#id").innerHTML 和$("#id").checked之類的寫法都是錯誤的，可以用$("#id").html()和$("#id").attr ("checked")之類的 jQuery方法來代替。同樣，DOM對象也不能使用jQuery方法。學習jQuery開始就應當樹立正確的觀念，分清jQuery對象和DOM對象之間的區(qū)別，之后學習 jQuery就會輕松很多的。

2.jQuery對象和DOM對象的互相轉(zhuǎn)換

在上面第一點說了，jquery對象和dom對象是不一樣的！比如jquery對象不能使用dom的方法，dom對象不能使用jquery方法，那假如我 jquery沒有封裝我要的方法，那能怎么辦呢？

這時我們可以將jquer對象轉(zhuǎn)換成dom對象

jquery對象轉(zhuǎn)換成 dom對象

jquery提供了兩種方法將一個jquery對象轉(zhuǎn)換成一個dom對象，即[index]和get(index)。可能有人會覺得奇怪，怎么是用下標呢，沒錯，jquery對象就是一個數(shù)組對象.

下面代碼將演示一個jquery對象轉(zhuǎn)換成dom對象，再使用dom對象的方法

復制代碼 代碼如下:

var $cr=$("#cr"); //jquery對象

var cr = $cr[0]; //dom對象 也可寫成 var cr=$cr.get(0);

alert(cr.checked); //檢測這個checkbox是否給選中

dom對象轉(zhuǎn)換成jquery對象

對于一個dom對象，只需要用$()把dom對象包裝起來，就可以獲得一個jquery對象了，方法為$(dom對象);

復制代碼 代碼如下:

var cr=document.getElementById("cr"); //dom對象

var $cr = $(cr); //轉(zhuǎn)換成jquery對象

轉(zhuǎn)換后可以任意使用jquery中的方法了.

通過以上的方法，可以任意的相互轉(zhuǎn)換jquery對象和dom對象.

最后再次強調(diào)，dom對象才能使用dom中的方法，jquery對象不可以使用dom中的方法，但 jquery對象提供了一套更加完善的工具用于操作dom,關于jquery的dom操作將在后面的文章進行詳細講解.

ps: 平時用到的jquery對象都是通過$()函數(shù)制造出來的，$()函數(shù)就是一個jquery對象的制造工廠.

建議:如果獲取的對象是 jquery對象，那么在變量前面加上$,這樣方便容易識別出哪些是jquery對象,例如:

var $variable = jquery對象;

如果獲取的是dom對象，則定義如下:

var variable = dom對象

如何在jquery中操作DOM

一、選取DOM元素

jQuery的核心是通過各種選擇器，選中DOM元素，可以用querySelectorAll方法模擬這個功能。

var $ = document.querySelectorAll.bind(document);

這里需要注意的是，querySelectorAll方法返回的是NodeList對象，它很像數(shù)組（有數(shù)字索引和length屬性），但不是數(shù)組，不能使用pop、push等數(shù)組特有方法。

二、DOM操作

DOM本身就具有很豐富的操作方法，可以取代jQuery提供的操作方法。

尾部追加DOM元素。

// jQuery寫法

$(parent).append($(child));

// DOM寫法

parent.appendChild(child)

頭部插入DOM元素。

// jQuery寫法

$(parent).prepend($(child));

// DOM寫法

parent.insertBefore(child, parent.childNodes[0])

刪除DOM元素。

// jQuery寫法

$(child).remove()

// DOM寫法

child.parentNode.removeChild(child)

JQuery對象和DOM對象的區(qū)別

一直以來對于通過jQuery方式獲取的對象使不能直接使用JavaScript的一些方法的，開始的時候不理解，現(xiàn)在此案知道，原來jQuery

獲得的對象并不和我們平時使用getElementById獲得的對象是一樣的對象。所以一些新手就很迷惑，為什么${”#Element”}不能直接

innerHTML，這就是原因所在，解決方式請看下文。

jQuery對象與dom對象的轉(zhuǎn)換

只有jquery對象才能使用jquery定義的方法。注意dom對象和jquery對象是有區(qū)別的，調(diào)用方法時要注意操作的是dom對象還是jquery對象。

普通的dom對象一般可以通過$()轉(zhuǎn)換成jquery對象。

如：

$(document.getElementById("msg"))

則為jquery對象，可以使用jquery的方法。

由于jquery對象本身是一個集合。所以如果jquery對象要轉(zhuǎn)換為dom對象則必須取出其中的某一項，一般可通過索引取出。

如：

$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]

這些都是dom對象，可以使用dom中的方法，但不能再使用Jquery的方法。

以下幾種寫法都是正確的：

$("#msg").html();

$("#msg")[0].innerHTML;

$("#msg").eq(0)[0].innerHTML;

$("#msg").get(0).innerHTML;

jQuery查找對象是按照標準的dom層級關系來查找的

如table中無論你是否有tbody，在查找子對象的時候都要按照table--tbody--tr的層級關系來查找

關于this

input name="testThis" type="text" onchange="textThis(this)" /

function textThis(obj)

{

//在引用自己用的this是dom對象

alert($(obj).val());

}

該this為dom對象

innerHTML和outerHTML

innerHTML設置或獲取對象起始和結(jié)束標簽內(nèi)的HTML

outerHTML設置或獲取對象及其內(nèi)容的HTML形式

新聞名稱：關于domjquery的信息
網(wǎng)站URL：http://chinadenli.net/article16/dsgspgg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信小程序、Google、品牌網(wǎng)站設計、動態(tài)網(wǎng)站、營銷型網(wǎng)站建設、商城網(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)