jquery對象和DOM對象的相互轉換詳解
jquery對象和DOM對象的相互轉換
在討論jquery對象和DOM對象的相互轉換之前,先約定好定義變量的風格如果獲取的是jquery對象,那么在變量前面加上$,例如
var $varible = jquery對象;
如果獲取的是DOM對象,則定義如下:
var varible = DOM對象;
1.jquery對象轉成DOM對象:
jquery對象不能使用DOM中的方法,但如果對jquery對象所提供的方法不熟悉,或者沒有jquery想封裝的方法,不得不使用DOM對象,即【index】和get[index].
(1)jquery對象是一個數(shù)組對象,可以通過【index】的方法得到相應的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) //第二種轉換為DOM對象的方式 cr.innerHTML = "you" //檢測是否轉換成功,可以用DOM方法 輸出結果為第二個my改成了you ct.innerHTML = 'fuck' //輸出結果第一個my改成了fuck </script> </body>
(2).DOM對象轉換為jquery對象:
對于一個DOM對象,只需要用$()把DOM對象給包裝起來,就可以獲得一個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"); //檢測是否轉換成功,可以用jquery方法 輸出結果為第二個my改成了fuck $cr.eq(1).html("you"); //輸出結果為my改成you </script> </body>
轉換后,可以任意使用jquery方法。
通過以上方法,可以任意的相互轉換jquery對象和DOM對象。
最后再次強調,DOM對象才能使用DOM方法,jquery對象不能使用DOM中的方法,但jquery對象提供了一套更加完善的工具用于操作DOM。
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
- 基于jQuery.Hz2Py.js插件實現(xiàn)的漢字轉拼音特效
- 通過jQuery打造支持漢字,拼音,英文快速定位查詢的超級select插件
- 基于jquery的使ListNav兼容中文首字拼音排序的實現(xiàn)代碼
- jquery中實現(xiàn)時間戳與日期相互轉換
- Jquery中增加參數(shù)與Json轉換代碼
- jquery 將當前時間轉換成yyyymmdd格式的實現(xiàn)方法
- jquery實現(xiàn)將獲取的顏色值轉換為十六進制形式的方法
- 淺析Js(Jquery)中,字符串與JSON格式互相轉換的示例(直接運行實例)
- jquery如何把參數(shù)列嚴格轉換成數(shù)組實現(xiàn)思路
- jquery對象和DOM對象的任意相互轉換
- jQuery實現(xiàn)QQ空間漢字轉拼音功能示例
相關文章
jquery中html、val與text三者屬性取值的聯(lián)系與區(qū)別介紹
本文為大家詳細介紹下jquery中,html、val與text三者屬性取值的聯(lián)系與區(qū)別,下面有個不錯的示例,感興趣的朋友不要錯過2013-12-12JS和JQUERY獲取頁面大小,滾動條位置,元素位置(示例代碼)
這篇文章主要是對JS和JQUERY獲取頁面大小,滾動條位置,元素位置的示例代碼進行了介紹。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12jQuery基于BootStrap樣式實現(xiàn)無限極地區(qū)聯(lián)動
這篇文章主要介紹了jQuery基于BootStrap樣式實現(xiàn)無限極地區(qū)聯(lián)動的相關資料,需要的朋友可以參考下2016-08-08