面試題：document.getElementById(‘idName’)與 $('#idName')的區別

document.getElementById(‘idName’)與 $('#idName')的區別

問

<div id=xxx></div>
-----------------------------
var div = document.getElementById('xxx');
var $div = $('#xxx');
複製代碼

請說出div與$div的聯繫和區別？

答

首先，div是一個DOM對象，$div則是一個jQuery對象，而jQuery的本質就是一個JavaScript函數。能夠使用typeof jQuery或是typeof $查看返回值，返回值爲'function'。 其實，jQuery就是將一些經常使用的(反人類的)DOM API進行封裝，方便咱們調用，因此jQuery對象其實就是經過jQuery包裝DOM對象後產生的對象 。 咱們能夠使用$div[0]或者是$div.get(0)將jQuery轉換爲DOM對象；固然也能夠將DOM對象轉換爲jQuery對象：$(div)。相比於DOM API,jQuery提供的屬性與方法更加人性化，如向元素添加,刪除class。DOM API提供的方法爲：

div.classList.add();
div.classList.remove();
複製代碼

而jQuery則是這樣：

$div.addClass();
$div.removeClass();
複製代碼

而且jQuery支持鏈式操做如：

$div.removeClass('green').addClass('red')
複製代碼

jQuery不單單有對DOM操做的支持，並且還有動畫，AJAX等模塊，且兼容性也很好。可是瞭解了jQuery的本質後，咱們知道jQuery能作的事情，JS也能作，可是JS能作的事情，jQuery則不必定能作。