jQuery對象和DOM對象

jQuery對象和DOM對象

一 、頂級對象

1. 瀏覽器中的頂級對象

   window

2. 頁面中的頂級對象

   document

3. jQuery中的頂級對象

   $ 或者 jQuery

   • 用法：$.方法();或者$.屬性
   • $可以用jQuery代替

二、區別

通過一個例子

<input type="button" value="按鈕" id="btn">

• 以上的按鈕如果通過DOM獲取就是DOM對象；

  var btnObj1 = document.getElementById('btn');
  

• 以上的按鈕如果通過$或者jQuery獲取就是jQuery對象；

  var btnObj2 = $('#btn');
  

注意：btnObj1和btnObj2不是一個對象。如下圖：在Chrome調試工具Developer Tools調試，判斷，返回爲false。即兩者不是一個對象

• 另外，爲了代碼更具可讀性。可以預先約定的一種命名格式，對於jQuery對象命名可以爲一下格式（非強制）：($btnObj2的$在這裏就是變量中的一個字母，跟_btnObj2一個道理。)

var $btnObj2 = $('#btn');

• 如下：

三、jQuery對象和DOM對象之間的轉換

jQuery對象和DOM對象不能使用對方的方法，如果要強行使用，則必須的轉換成對方的類型

1.jQuery對象轉換爲DOM對象

• 直接在後面加上[0]

btnObj2[0]

2.jQuery對象轉換爲DOM對象

• 用$包裹

  $(btnObj1)
  

  • 通過下圖可以看出: