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)