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

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

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

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

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

var $varible = jquery對象；

如果獲取的是DOM對象，則定義如下：

var varible = DOM對象；

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

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

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

jquery的代碼如下

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

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

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

jquery代碼如下：

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

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