jQuery對象與DOM對象轉換

來源:互聯網
上載者:User

標籤:.com   html   targe   hello   mooc   轉換   快捷   合集   開發人員   

原文連結 http://www.cnblogs.com/ouyangping/p/6439939.htmljQuery對象與DOM對象是不一樣的

通過一個簡單的例子,簡單區分下jQuery對象與DOM對象:

<p id=”imooc”></p>

我們要擷取頁面上這個id為imooc的div元素,然後給這個文本節點增加一段文字:“hello,world”,並且讓文字顏色變成紅色。

通過標準JavaScript處理:

var p = document.getElementById(‘imooc‘);p.innerHTML = ‘hello,world!‘;p.style.color = ‘red‘;

通過原生DOM模型提供的document.getElementById(“imooc”) 方法擷取的DOM元素就是DOM對象,通過DOM方法將自己的innerHTML與style屬性處理文本與顏色。

jQuery的處理:

var $p = $(‘#imooc‘);$p.html(‘hello,world‘).css(‘color‘,‘red‘);
 

通過$(‘#imooc‘)方法會得到一個$p的jQuery對象,$p是一個類數組的對象這個對象裡面其實是包含了DOM對象的資訊的然後封裝了很多操作方法,調用自己的方法html與css處理,得到的效果與標準的JavaScript處理結果是一致的。

 1.jQuery對象轉化成DOM對象

    jQuery庫本質上還是JavaScript代碼,它只是對JavaScript語言進行封裝處理,為了是提供更好更方便快捷的DOM處理與開發常見中經常使用的功能。我們可以用jQuery的同時也能混合JavaScript原生代碼一起使用。通過jQuery產生的對象是一個做了封裝處理的對象,如果要用jQuery對象自己的方法,就需要滿足這個對象是通過jQuery產生的。 在很多情境中,我們需要jQuery與DOM能夠相互的轉換,它們都是操作的DOM元素,jQuery是一個類數組對象,DOM對象就是一個單獨的DOM元素。

如何把jQuery對象轉成DOM對象?

利用數組下標的方式讀取到jQuery中的DOM對象

HTML代碼

<div>元素一</div><div>元素二</div><div>元素三</div>

 

JavaScript代碼

var $div = $(‘div‘) //jQuery對象var div = $div[0] //轉化成DOM對象div.style.color = ‘red‘ //操作dom對象的屬性

用jQuery找到所有的div元素(3個),因為jQuery 對象也是一個數組結構,可以通過數組下標索引找到第一個div元素,通過返回的div對象然後調用它style屬性然修改第一個div元素的顏色。這裡需要注意的一點是,數組的索引是從0開始的,也就是第一個元素下標是0

通過jQuery內建的get()方法

jQuery對象自身提供一個.get() 方法允許我們直接存取jQuery對象中相關的DOM節點,get方法中提供一個元素的索引:

var $div = $(‘div‘) //jQuery對象var div = $div.get(0) //通過get方法,轉化成DOM對象div.style.color = ‘red‘ //操作dom對象的屬性

其實我們翻開源碼,看看就知道了,get方法就是利用的第一種方式處理的,只是封裝成一個get讓開發人員更直接方便的使用。

2.DOM對象轉化成jQuery對象

相比較jQuery轉化成DOM,開發中更多的情況是把一個dom對象加工成jQuery對象。$(參數)是一個多功能的方法,通過傳遞不同的參數而產生不同的作用。

如果傳遞給$(DOM)函數的參數是一個DOM對象,jQuery方法會把這個DOM對象給封裝成一個新的jQuery對象

通過$(dom)方法將普通的dom對象加工成jQuery對象之後,我們就可以調用jQuery的方法了

HTML代碼

<div>元素一</div><div>元素二</div><div>元素三</div>

 

JavaScript代碼

var div = document.getElementsByTagName(‘div‘); //dom對象var $div = $(div); //jQuery對象var $first = $div.first(); //找到第一個div元素$first.css(‘color‘, ‘red‘); //給第一個元素設定顏色

通過getElementsByTagName擷取到所有div節點的元素,結果是一個dom合集對象,不過這個對象是一個數組合集(3個div元素)。通過$(div)方法轉化成jQuery對象,通過調用jQuery對象中的first與css方法尋找第一個元素並且改變其顏色。

jQuery對象與DOM對象轉換

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.