jQuery 對象 與 原生 DOM 對象 相互轉換

區別

jQuery 選擇器得到的 jQuery對象 和 原生JS 中的document.getElementById() document.querySelector取得的 DOM對象 是兩種不同類型，兩者是不等價的。
jQuery 無法使用 原生DOM對象的方法，原生DOM對象 也不能使用 jQuery 里的方法。亂使用會報錯。

<p>我是對象</p> 

原生DOM：document.querySelector('p').innerText
jQuery： $('p').text()

 

所以他們是不等同的，但他們最終取出的 DOM 是一致的。

 

示例

JSBin
output

 

原生 DOM 判斷一個元素是否存在可以用document.querySelector查看它是否為null
因為 jQuery 是類數組對象。jQuery 則可以通過.length查看他的長度是否為0來判斷這個元素是否存在

相互轉化

參照上面 JSBin 的 output 可以做 demo 演示

• 原生DOM對象 轉 jQuery對象

var p1 = document.querySelector('#p1') var $p1 = $(p1) 

 

• jQuery對象 轉 原生DOM對象

var $p = $('p') var p1 = $p[0] var p2 = $p.get(1)