jQuery可能是Web開發中使用最廣泛的JavaScript庫。請繼續閱讀以瞭解如何使用這個強大的工具。

jQuery的核心是一個DOM操作和導航庫。記住DOM是我們的文檔對象模型 - 基本上是實際呈現的網頁。jQuery將許多JavaScript函數從多行，複雜的代碼片段簡化為單個函數。它為我們提供了JavaScript功能的API，這意味著任何瀏覽器都可以在不需要編譯代碼的情況下解釋它。我們不需要為jQuery啟動和運行做任何事情。我們像對待任何其他JavaScript腳本或文件一樣對待它。

jQuery庫可以通過網站文件系統中的本地文件或通過CDN或內容分發網絡提供。使用CDN意味著你不需要自己託管庫，但是你需要監視版本的支持。如果你不這樣做，你正在使用的版本可能會被棄用或不受支持，你會有一些快樂的時光！如果您下載回購協議，則必須自己進行管理和升級，但鏈接永遠不會“消失”。查看所有在下載 頁面上訪問jQuery的方法。

當你在下載頁面時，為什麼不抓取未壓縮的jQuery開發版？將它保存到您的網頁目錄。它可以與索引文件位於同一級別，也可以位於資源文件中。

jQuery是許多前端框架的基石之一，包括SAPUI5（基本上，如果您正在構建UI5應用程序，所有這些都是相關的）。

現在我已經喋喋不休了，讓我們看看它的實際情況。

打開你的網頁的index.htm文件，我們一直在努力（我知道它已經有一段時間了，所以我會給你一分鐘的時間來找到它）。確保你有jQuery下載，或者，如果你覺得這樣做很舒服，你可以使用CDN。

我們可以通過在標題中調用腳本標記來加載庫，就像我們在幾周前做過的js文件一樣。如果您下載了jQuery Development庫並將該文件保存在Web應用程序的頂級文件夾中，那麼腳本標記應該看起來像這樣。

如果您通過CDN訪問它，src將是一個URL。確保保存更改。

現在，我們可以使用jQuery庫！

讓我們看看jQuery為我們簡化了多少事情。打開你的script.js文件。

重命名你的 onPictureButtonClicked 函數 onOldPictureButtonClicked 或類似的東西。我們希望能夠重用函數名稱，但讓我們保留舊代碼以供參考。

現在創建一個新的 onPictureButtonClicked 功能。

function onPictureButtonClicked() {

｝

要訪問jQuery庫，我們可以使用 $ 。這是調用jQuery函數的捷徑。在功能內部，撥打電話切換圖像。你如何做到這一點：

$("#myImage").toggle()

保存您的更改並在瀏覽器中打開index.html文件。點擊該按鈕仍然可以做同樣的事情，但只需一行代碼！

這是如何工作的？

使用jQuery，我們可以getElementById 使用選擇器來縮短 調用時間。

我們可以使用選擇器來獲取標籤，類或ID。在我們的例子中，我們預先計劃 myImage，這是我們對我們的形象標識，同 #。 # 用於表示ID。我們想選擇ID為的任何東西 myImage。如果你想選擇基於CSS類（所以從 class=" " 屬性），使用 . （期）。要選擇標籤，請不要添加任何內容。

$("#id")

$(".css-class")

$("tag")

瞭解如何簡化訪問DOM？

我們總是希望我們的文本屬性反映該項目正在做什麼，因此請在編輯器中進入index.html文件。將按鈕的文本從加載圖片更新為切換圖片

。保存您的更改。

jQuery也使DOM遍歷更容易。我們來看看如何定位相關標籤。而相關的，我的意思是親戚。

讓我們在index.html文件中添加一個新按鈕。在h1標籤下，創建一個新按鈕。此按鈕將具有Border Div的子項的文本值。它會做的是在div標籤內的所有元素周圍包裹邊框！該按鈕將需要一個 onclick 回調函數。添加一個唯一的ID總是一個好主意。不記得如何添加按鈕？您可以使用下面的代碼。

<button>Border Div's Children/<button>

保存您的更改！

現在我們需要實際實現回調函數，讓我們回頭看看script.js文件。

為新按鈕的回調創建一個新的空函數。如果您需要幫助，請複製下面的代碼。

function onUpdateDivs(){

}

現在我們需要實際上與所有div的孩子接壤。當所有的孩子都是不同的類型，班級和ID時，我們如何做到這一點？

這就是jQuery如此有用的原因！它有預構建的方法來幫助我們遍歷DOM樹。jQuery有一個child方法，它將檢索位於該元素的開始和結束標記之間的所有標記。我們如何得到孩子？通過.children()從選擇器中調用 函數，我們可以定位所選項目的所有子項。看起來像這樣：

$("div").children()

現在我們有了div標籤的所有子標籤。我們如何為這些標籤添加邊框？jQuery也有方法為標籤添加屬性，如CSS類。由於我們的Bootstrap可用於我們的應用程序，因此我們可以使用Bootstrap邊框類添加邊框。要添加類，請將 .addClass 方法鏈接到 children() 方法。

$("div").children().addClass("border")

由於邊框CSS類將被添加到每個元素，因此它將包裝具有邊框的div標籤的所有子元素。

保存您的更改並在瀏覽器中打開index.html。你會看到一個新的按鈕！

點擊“Border Div's Children”按鈕。div內的所有元素現在都有邊框！

jQuery有更多的方法來訪問兄弟，下一個最接近的標籤，刪除類，動畫元素等等。我會推薦Codecademy的jQuery課程，如果你想有一個指導手，或者你總是可以探索jQuery文檔來學習更多。此外，如果您已將我的其他部分博客看作#APIFriday系列的一部分，則您已經看到 $。這是因為jQuery還為我們提供了AJAX，這使得調用API和外部資源變得更加簡單。

jQuery是你的web開發工具帶中的一個很好的資源！繼續探索它提供的所有優秀功能，並準備好了解更多信息！