jQuery 就是一個 JS 庫，它並不是一門獨立的語言。jQuery 存在的原因是純 JS 操作 DOM 並不方便。

我們可以使用 <script> 標籤向網頁中引入 jQuery。在伺服器上儲存 js 程式碼並通過制定路徑引入網頁（使用託管的 CDN-內容分發網路上的特定版本 jQuery）。CDN 一般比伺服器快很多，也能利用瀏覽器的快取特性，在產品中使用 jQuery 的精簡版本（min），該版本檔案體積非常小，載入速度更快。

$ 是一個函式，接受傳入引數，返回一個物件，甚至是帶有一些方法的物件，和其它 JS 物件一樣。

選擇器

按標籤選擇

let listElements;
listElement = $('li');

關於選擇器的文件

按類選擇

let articles;
articles = $('.article-item');

按 ID 選擇

let nav;
nav = $('#nav');

重新訪問樹結構(遍歷方法)

jQuery 為我們提供了在 DOM 樹裡遍歷的方法。

如果選擇了 ID 為 Cameron 的節點，我能通過呼叫 .parent() 方法選擇我的直接父元素。該方法能向 DOM 樹上遍歷一層，所以現在我就選擇了 ID 為 MarkSuzanne 的元素。

我們可以通過 .parents() 來選擇我的父元素、祖父元素以及更上層的祖先元素。向 .parent() 方法傳入其他選擇器來篩選一些特定的父元素。比如我只想要我的祖父元素 JerryJudy，我們可以通過 .parent('#JerryJudy') 來選擇它。

值得注意的是，.parent() 方法只遍歷了 DOM 樹的上一層，如果想要向上不只一層，那麼就要用 .parents() 能讓我們呼叫 DOM 樹中所有的父元素。

同樣的，我們也能使用 .children() 方法向下遍歷 DOM 樹並選擇我們的子元素。該方法建立了一個 jQuery 集合，這個集合包括所有的直接子元素。也就是說該方法只遍歷了一層。

但如果想要查詢子元素的子元素，假使存在的話，我們使用 .find() 方法來找到它們。該方法向下遍歷不只一層 DOM 樹。與 parent 和 parents 類似。

最後是 sblings() 方法，該方法返回當前元素的所有兄弟元素。

let articleList, h1, kids, parents;

articleList = $('.article-list');
h1 = articleList.sublings('h1');
kids = articleList.find('*');
parents = articleList.parents('div');

關於遍歷方法的文件