jquery對(duì)象和DOM對(duì)象的相互轉(zhuǎn)換詳解

更新時(shí)間：2016年10月18日 09:21:48 作者：Ziksang

這篇文章主要介紹了jquery對(duì)象和DOM對(duì)象的相互轉(zhuǎn)換詳解的相關(guān)資料,需要的朋友可以參考下

jquery對(duì)象和DOM對(duì)象的相互轉(zhuǎn)換

在討論jquery對(duì)象和DOM對(duì)象的相互轉(zhuǎn)換之前，先約定好定義變量的風(fēng)格如果獲取的是jquery對(duì)象，那么在變量前面加上$,例如

var $varible = jquery對(duì)象；

如果獲取的是DOM對(duì)象，則定義如下：

var varible = DOM對(duì)象；

1.jquery對(duì)象轉(zhuǎn)成DOM對(duì)象：

jquery對(duì)象不能使用DOM中的方法，但如果對(duì)jquery對(duì)象所提供的方法不熟悉，或者沒(méi)有jquery想封裝的方法，不得不使用DOM對(duì)象，即【index】和get[index].

(1)jquery對(duì)象是一個(gè)數(shù)組對(duì)象，可以通過(guò)【index】的方法得到相應(yīng)的DOM對(duì)象。

jquery的代碼如下

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
  var $cr = $("p");  //jquery對(duì)象
  var cr = $cr[1];  //dom對(duì)象
  var ct = $cr.get(0)  //第二種轉(zhuǎn)換為DOM對(duì)象的方式
  cr.innerHTML = "you"  //檢測(cè)是否轉(zhuǎn)換成功，可以用DOM方法 輸出結(jié)果為第二個(gè)my改成了you
  ct.innerHTML = 'fuck'  //輸出結(jié)果第一個(gè)my改成了fuck
</script>
</body>

(2).DOM對(duì)象轉(zhuǎn)換為jquery對(duì)象：

對(duì)于一個(gè)DOM對(duì)象,只需要用$()把DOM對(duì)象給包裝起來(lái)，就可以獲得一個(gè)jquery對(duì)象了，方式為$(DOM對(duì)象)。

jquery代碼如下：

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
  var cr = document.getElementsByTagName("p") //DOM對(duì)象
  var $cr = $(cr);   //jquery對(duì)象
  $cr.eq(0).("fuck"); //檢測(cè)是否轉(zhuǎn)換成功，可以用jquery方法 輸出結(jié)果為第二個(gè)my改成了fuck
  $cr.eq(1).html("you"); //輸出結(jié)果為my改成you
</script>
</body>

轉(zhuǎn)換后，可以任意使用jquery方法。

通過(guò)以上方法，可以任意的相互轉(zhuǎn)換jquery對(duì)象和DOM對(duì)象。

最后再次強(qiáng)調(diào),DOM對(duì)象才能使用DOM方法，jquery對(duì)象不能使用DOM中的方法，但jquery對(duì)象提供了一套更加完善的工具用于操作DOM。

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)的點(diǎn)擊圖片居中放大縮小功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的點(diǎn)擊圖片居中放大縮小功能,涉及jQuery基于事件響應(yīng)針對(duì)頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-01-01
jQuery圖片查看插件Magnify開(kāi)發(fā)詳解
本篇文章主要給大家講述了jQuery圖片查看插件Magnify開(kāi)發(fā)的詳細(xì)分析，需要的朋友參考學(xué)習(xí)下吧。
2017-12-12
jquery實(shí)現(xiàn)div陰影效果示例代碼
div陰影效果在以前都是采用圖片來(lái)實(shí)現(xiàn)的，而在本文大家將學(xué)會(huì)使用jquery來(lái)實(shí)現(xiàn)，感興趣的朋友可以參考下
2013-09-09
基于JQuery和DWR實(shí)現(xiàn)異步數(shù)據(jù)傳遞
這篇文章主要介紹了基于JQuery和DWR實(shí)現(xiàn)異步數(shù)據(jù)傳遞,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-10-10
詳談Ajax請(qǐng)求中的async:false/true的作用(ajax 在外部調(diào)用問(wèn)題)
下面小編就為大家?guī)?lái)一篇詳談Ajax請(qǐng)求中的async:false/true的作用(ajax返回值在外部調(diào)用問(wèn)題)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-02-02
jQuery.holdReady()使用方法
jQuery.holdReady()方法允許jQuery的完成事件被該函數(shù)鎖定，下面為大家介紹下其具體的使用
2014-05-05
使用js+jquery實(shí)現(xiàn)無(wú)限極聯(lián)動(dòng)
本篇文章是對(duì)可擴(kuò)展的無(wú)限極聯(lián)動(dòng)下拉選項(xiàng)的實(shí)例進(jìn)行了分析介紹，需要的朋友參考下
2013-05-05
jQuery中ajax的相關(guān)知識(shí)點(diǎn)匯總
這篇文章主要給大家介紹了關(guān)于jQuery中ajax相關(guān)知識(shí)點(diǎn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
基于Jquery的溫度計(jì)動(dòng)畫效果
將代碼一一拷貝到頁(yè)面相應(yīng)的位置，然后記得調(diào)用jquery框架，展示條件有限，所以效果跟設(shè)計(jì)圖有出入，但實(shí)現(xiàn)原理是一樣的，歡迎大家多多交流！
2010-06-06
jQuery實(shí)現(xiàn)為動(dòng)態(tài)添加的元素綁定事件實(shí)例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)為動(dòng)態(tài)添加的元素綁定事件,結(jié)合實(shí)例形式分析了jQuery常見(jiàn)的事件綁定相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2018-09-09