jquery對象和DOM對象的相互轉換

時間 2019-12-10

標籤 jquery 對象 dom 相互轉換欄目 JQuery 简体版

原文原文鏈接

在討論jquery對象和DOM對象的相互轉換以前，先約定好定義變量的風格若是獲取的是jquery對象，那麼在變量前面加上$,例如html

var $varible = jquery對象；jquery

若是獲取的是DOM對象，則定義以下：數組

var varible = DOM對象；dom

1.jquery對象轉成DOM對象：工具

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

(1)jquery對象是一個數組對象，能夠經過【index】的方法獲得相應的DOM對象。code

jquery的代碼以下htm

 1 <body>
 2    <p>my</p>
 3    <p>my</p>
 4 <script src="jquery-2.1.4.min.js"></script>
 5 <script>
 6     var $cr = $("p");   //jquery對象
 7     var cr = $cr[1];    //dom對象
 8     var ct = $cr.get(0)   //第二種轉換爲DOM對象的方式
 9     cr.innerHTML = "you"    //檢測是否轉換成功，能夠用DOM方法 輸出結果爲第二個my改爲了you
10     ct.innerHTML = 'fuck'   //輸出結果第一個my改爲了fuck
11 </script>
12 </body>

(2).DOM對象轉換爲jquery對象：對象

對於一個DOM對象,只須要用$()把DOM對象給包裝起來，就能夠得到一個jquery對象了，方式爲$(DOM對象)。blog

jquery代碼以下：

 1 <body>
 2    <p>my</p>
 3    <p>my</p>
 4 <script src="jquery-2.1.4.min.js"></script>
 5 <script>
 6     var cr = document.getElementsByTagName("p")  //DOM對象
 7     var $cr = $(cr);     //jquery對象
 8     $cr.eq(0).("fuck");  //檢測是否轉換成功，能夠用jquery方法 輸出結果爲第二個my改爲了fuck
 9     $cr.eq(1).html("you"); //輸出結果爲my改爲you
10 </script>
11 </body>