jQuery是什麼？

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫(或JavaScript框架)。
jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能介面;具有高效靈活的css選擇器，並且可對CSS選擇器進行擴展;擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

搭配視頻效果更佳哦~~~

jQuery從入門到精通

https://www.ixigua.com/6846624275877593611

開篇基礎

jQuery 是一款跨主流瀏覽器的JavaScript 庫，封裝了JavaScript 相關方法調用，簡化JavaScript 對HTML DOM 操作

官網地址： https://jquery.com/

官網首頁jQuery 介紹：

原文翻譯：

jQuery 是一個快速，小巧，功能豐富的JavaScript 庫。它通過易於使用的API 在大量瀏覽器中運行，使得HTML 文檔遍歷和操作，事件處理，動畫和Ajax 變得更加簡單。通過多功能性和可擴展性的結合，jQuery 改變了數百萬人編寫JavaScript 的方式。

為什麼[why]使用 jQuery

非常重要的理由就是：它能夠兼容市面上主流的瀏覽器， IE 和FireFox， Google 瀏覽器處理 AJAX，創建非同步對象是不同的，而jQuery 能夠使用一種方式在不同的瀏覽器創建AJAX 非同步對象。

其他優點：

（1）寫少代碼,做多事情【write less do more】

（2）免費，開源且輕量級的js 庫，容量很小

（3）兼容市面上主流瀏覽器，例如 IE，Firefox，Chrome

（4）能夠處理HTML/JSP/XML、CSS、DOM、事件、實現動畫效果，也能提供非同步AJAX 功能

（5）文檔手冊很全，很詳細

（6）成熟的插件可供選擇，多種js 組件，例如日曆組件（點擊按鈕顯示下來日期）

（7）出錯後，有一定的提示信息

（8）不用再在html 裡面通過<script>標籤插入一大堆 js 來調用命令了

例如：使用JavaScript 定位DOM 對象常用的三種方式：

（1）通過ID 屬性：document.getElementById()

（2）通過 class 屬性：getElementsByClassName()

（3）通過標籤名：
document.getElementsByTagName()

上面代碼可以看出JavaScript 方法名太長了，大小寫的組合太多了，編寫代碼效率，容易出錯。jQuery 分別使用$(「#id」) , $(「.class 名」) , $(「標籤名) 封裝了上面的 js 方法。

DOM 對象

文檔對象模型（Document Object Model，簡稱 DOM），是 W3C 組織推薦的處理可擴展標誌語言的標準編程介面。

通過 DOM 對 HTML 頁面的解析，可以將頁面元素解析為元素節點、屬性節點和文本節點，這些解析出的節點對象，即 DOM 對象。DOM 對象可以使用 JavaScript 中的方法。

獲取jQuery

官網下載地址：
https://jquery.com/download/

jQuery 的不同版本中，2.xx 不再支持 IE6/7/8 瀏覽器。現階段IE6/7/8 已經是淘汰的，非主流。可以不用考慮兼容問題。

對於每一個同一版本號的 jQuery，其庫又分為兩個。一個是未壓縮版，可查看源碼，開發時使用；一個是壓縮版，將注釋、空格均做了刪除，將變數字元數減少，產品上線時使用。

牛刀小試

編寫jQuery 的工具很多，能編寫HTML 的工具都支持jQuery. 例如記事本，EditPlus, webStorm, Visual Studio Code , HBuilder , HBuilderX , IDEA.

單獨學習jQuery 庫使用，可以輕量的開發工具，例如EditPlus ,HBuilder,HbuilderX

編寫項目可以使用集成開發工具，例如在IDEA， Eclipse ,MyEclipse ,WebStorm 等

第一個例子完成：瀏覽器完全裝載html 頁面 DOM 後,顯示一個提示信息框

實現步驟：

1. 使用HBuilder 或HbuilderX, idea 都可以，以HbuilderX 為工具，創建一個項目（名稱：jquery-course），給項目選擇一個文件存放目錄。

2. 在項目中再創建一個目錄

右鍵項目名稱—新建—目錄，常用名稱為 js

3. 拷貝下載的jQuery.js 文件到目錄

4. 使用 jQuery，首先要將 jQuery 庫引入。使用如下語句：

<script type=”text/javascript” src=”js/jquery-3.4.1.js”></script>
5. $(document)，將 DOM 對象 document 轉換為jQuery 對象。
$(document).ready()函數是當 DOM 對象載入完畢後，馬上執行的函數。
$(document).ready()與$()、jQuery()、window.jQuery()是等價的，所以
$(document).ready()可以寫成 $(function() { alert(「Hello jQuery」) } );

6. 完整代碼

DOM 對象和jQuery 對象

DOM 對象是用JavaScript 語法創建的對象，也看做是 js 對象。

1. DOM 對象轉換jQuery 對象：

使用$(DOM 對象) 方式，可以 DOM 對象轉換為 jQuery 對象，轉換為jQuery 對象才可以使用jQuery 中的提供的方法，操作DOM 對象。一般情況下，在命名 jQuery 對象時，為了與 DOM 對象進行區分，習慣性的以$ 開頭，這不是必須的。

例：新建html 頁面文件 domTojQuery.html

1. 頁面加入按鈕 button

2. 轉換 DOM 對象

2. jQuery 對象轉為DOM 對象

jQuery 對象本身為數組對象，該數組中的第 0 個元素即為該 jQuery 對象對應的 DOM

對象。所以有兩種方式可以獲取到 DOM 對象：get(0) 方式與下標[0]

例：新建html 文件 jQueryToDom.html

1. 頁面添加 text ，button

2. jQuery 對象.get(0) 或 jQuery 對象[0] 均可完成 jQuery 對象轉 DOM對象

選擇器

選擇器: 就是定位條件；通知jquery 函數定位滿足條件的DOM 對象

基本選擇器

根據ID，class 屬性，標籤類型名定位HTML 元素，轉為jQuery 對象.

1. id 選擇器

語法：$(「#id」)

2. class 選擇器

語法：$(「.class 名稱」)

3. 標籤選擇器

語法：$(「標籤名」)

例：新建selector.html

1. 在頁面 head 部分加入 css

2. 加入 jQuery 引用

3.body 部分定義div

4.創建 js 函數

4. 所有選擇器

語法：$(「*」) 選取頁面中所有DOM 對象。

5. 組合選擇器

組合選擇器是多個被選對象間使用逗號分隔後形成的選擇器，可以組合 id， class，標籤名等。

語法：$(「#id, .class, 標籤名」)

例：

1. 上面的 selector.html 頁面中加入按鈕

2. 增加 js 函數

表單選擇器

表單相關元素選擇器是指文本框、單選框、複選框、下拉列表等元素的選擇方式。該方法無論是否存在表單<form>，均可做出相應選擇。表單選擇器是為了能更加容易地操作表單，表單選擇器是根據元素類型來定義的

<input type=”text”>
<input type=”password”>
<input type=”radio”>
<input type=”checkbox”>
<input type=”button”>
<input type=”file”>
<input type=”submit”>
<input type=”reset”>
$(“:tr”): 不能用，tr 不是input 標籤語法： $(“:type 屬性值”)

例如：