jQuery

重要度:⭐⭐⭐⭐難度:⭐⭐⭐

jQuery 可說是非常經典的 JavaScript 框架，我們可以透過他進行簡單且快速的元素操作。

jQuery 使用$當作操作符號。

在 jQuery 中存取和操作多個 DOM 節點通常從用CSS選擇器字串呼叫$函式開始。這會返回一個參照 HTML頁面中所有匹配元素的 jQuery 物件。比如$("div.test")，會返回一個擁有class test的所有div元素的jQuery物件。可以通過呼叫返回的jQuery物件或節點本身的方法來操作這個節點集。

​ —維基百科

當你使用jQuery 函式建立一個 jQuery 物件，jQuery 物件也就是 DOM元素集合。

你有兩種方法來呼叫 jQuery 物件，一是使用 CSS，二是 HTML。

這便是jQuery返回的物件

上圖顯示了不少 jQuery 物件方法，記住是jQuery物件不是DOM物件。

物件的不同讓你沒辦法直接使用DOM的物件方法，不過jQuery有更簡短的方法可以取代。

jQuery

$('.container').html(); 

直接操作

document.getElementById("foo").innerHTML= "<h1>HELLO</h1>";

你不能做出以下操作。

$('#container').style.color = 'green';

你可以透過以下代碼取得 DOM 節點並修改。

$('#container').get(0).style.display = 'none';

由於DOM樹的改變會促使瀏覽器重新渲染(計算樣式、大小)造成效能問題，所以請避免頻繁操作DOM樹，有些JavaScript 框架(React 與 Vue)提供虛擬DOM，他建立虛擬 DOM樹進行修改時再與真 DOM 比對再進行渲染。