jQuery概述
當前，WEB開發幾乎所有的項目前端都依賴於jQuery框架。jQuery框架是一個開源的JavaScript，它對JavaScript進行了功能封裝，開發人員使用少量的代碼就能完成要編寫很多JS語句才能完成的功能。
jQuery的核心思想就是「寫得少，做的多」。jQuery提供的HTML選擇器，可以方便地選擇網頁文檔的任何HTML元素；jQuery允許把一系列的DOM操作像鏈條一樣連續寫出來；jQuery封裝的事件處理機制相對JS來說更易於操作；jQuery提供的Ajax技術可以簡化Ajax的調用。總之一句話，使用jQuery極大提高了開發者編寫網站代碼的效率。
下載jQuery
為了能夠使用jQuery，需要從jQuery官網下載最新的jQuery庫，在jQuery官網首頁，有下載最新jQuery版本的按鈕，單擊按鈕即可下載最新版本的jQuery庫。當前最新版本是jQuery 3.5.1。
jQuery官網提供了3個下載文件，開發者可以根據需求選擇下載：
production jQuery版是優化壓縮後的版本，具有較小的體積，主要在部署網站時使用。
development jQuery版是未壓縮版本，一般在開發網站時使用，用於調試代碼。
jQuery map文件能夠被用來在某些瀏覽器上調試壓縮後的jQuery文件，如Google Chrome。map文件可以增強調試的體驗，對於使用jQuery 的用戶來說，一般不需要下載該文件。
引入jQuery庫到網頁文檔
jQuery庫下載成功後，它是一個JS文件，當前下載的版本是jQuery3.5.1，下載的JS文件為：
jquery-3.5.1.min.js
在網頁文檔中要使用jQuery庫，可以將jQuery庫的JS文件放置到網站的一個公共目錄，網站的每個網頁文檔都可以引入JS文件。
引入方法是在網頁文檔<head>標籤內，添加下面的代碼即可。
<script src="script/jquery-3.5.1.min.js" type="text/javascript" ></script>
<script >是引入JS腳本文件的標籤。src屬性是腳本文件的路徑，可以是相對路徑，也可以是絕對路徑。本案例是相對路徑，jquery-3.5.1.min.js腳本文件放置在網頁文檔所在目錄下的script子目錄。Type屬性是腳本文件類型，一般是javascript類型。
使用jQuery庫
在jQuery腳本代碼中使用$符號代替jQuery，無論是頁面元素的選擇還是內置的功能方法，都是以一個美元符號「$」和一對圓括號開始，其實，「$()」方法是jQuery庫中最重要、最核心的方法jQuery()的簡寫，主要用來選擇頁面元素或執行功能方法，代碼如下：
//執行一個匿名方法$(function() {});//執行ID 元素選擇$('#box');//執行功能方法$('#box').css('color','red');
案例1：使用jQuery庫的網頁代碼
<html><head><title>JavaScript開發案例</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="script/jquery-3.5.1.min.js" type="text/javascript" ></script> <script type="text/javascript"> $(document).ready(function(e) { $("#id_btn").click(function(){ alert("使用jQuery庫"); }); });</script></head><body><h3>JavaScript開發案例</h3> <p><input type="button" id="id_btn" value="使用jQuery庫"/></p></body><html>
案例代碼引入jquery-3.5.1.min.js腳本文件，在<script>標籤內編寫jQuery代碼。
jQuery代碼$(document).ready()和Window對象的onload()方法相似，不同的是onload()方法是在頁面加載完成後調用，包括DOM元素和其它頁面元素（例如圖片文件），而$(document).ready()是在網頁文檔的DOM元素被加載完成後的情況下執行，因此document.ready()方法的執行速度比onload()的方法要快。
$("#id_btn")是jQuery選擇器，用於獲取id值為」id_btn」的DOM元素，然後綁定click事件。
從jQuery案例代碼可以看出，使用jQuery簡化了DOM元素的選取和事件的綁定操作。
jQuery選擇器
當使用JS對網頁元素賦值或取值時，需要先定位到該元素，即獲取該元素的DOM對象，在JS中一般使用getElementById()方法獲得元素的DOM對象。jQuery提供了更便捷的方式，可以快速批量或單選網頁元素，這個功能稱為選擇器。
jQuery選擇器允許通過標籤名、屬性名或內容批量或單選網頁元素，而且兼容各類瀏覽器，然後再通過jQuery提供的各類方法完成網頁元素屬性和行為的處理。
選擇器的基本語法如下：
$(「expression」)
expression是選擇器表達式，它完全支持CSS選擇器語法，但兩者的作用不同，CSS選擇器找到元素後主要是對樣式進行操作，而jQuery選擇器找到元素後是對元素的行為和屬性進行操作。
jQuery選擇器分為基本選擇器、基本選擇器、層次選擇器、過濾選擇器和表單選擇器。
基本選擇器
基本選擇器是開發者常用的選擇器，它主要是通過元素的id、名稱、樣式、匹配符等來定位和查找網頁內的元素，通過匹配符、樣式和名稱可以批量選擇元素，但id只能單選一個元素。
基本選擇器說明如下表所示：
注釋（1）
返回與id值匹配的元素。語法如下：
$("#id")其中id是待匹配元素的id值。案例代碼：$("#id_btn").click(function(){JS代碼;});
$("#id_btn")返回id值為id_btn的DOM對象，並為DOM對象添加click事件。
注釋（2）
返回與class樣式名稱相同的元素集合。語法如下：
$(".myclass").click(function(){JS代碼;});
$(".myclass")返回class樣式名稱為myclass的DOM對象集合，並為集合內的所有DOM對象添加click事件。
注釋（3）
返回標籤名稱與tag相同的元素集合。語法如下：
$("div").click(function(){JS代碼;});
$("div")返回標籤名稱為div的DOM對象集合，並為集合內的所有DOM對象添加click事件。
注釋（4）
jQuery允許一次選擇可以使用多個選擇器，每個選擇器用英文逗號分隔，匹配的元素要滿足所有列出的選擇器。語法如下：
$("#id,.myclass").click(function(){JS代碼;});
$("#id,.myclass")返回與id和myclass同時匹配的DOM對象集合，並為集合內的所有DOM對象添加click事件。