jQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript框架，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫(kù)(或JavaScript框架)。

jQuery設(shè)計(jì)的宗旨是“write Less，Do More”，即倡導(dǎo)寫(xiě)更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡(jiǎn)便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作、事件處理、動(dòng)畫(huà)設(shè)計(jì)和Ajax交互。

jQuery的核心特性可以總結(jié)為：具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口;具有高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展;擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

開(kāi)篇基礎(chǔ)

jQuery 是一款跨主流瀏覽器的JavaScript 庫(kù)，封裝了JavaScript 相關(guān)方法調(diào)用，簡(jiǎn)化JavaScript 對(duì)HTML DOM 操作

官網(wǎng)地址： https://jquery.com/

官網(wǎng)首頁(yè)jQuery 介紹：

原文翻譯：

jQuery?是一個(gè)快速，小巧，功能豐富的JavaScript 庫(kù)。 它通過(guò)易于使用的API?在大量瀏覽器中運(yùn)行，使得HTML?文檔遍歷和操作，事件處理，動(dòng)畫(huà)和Ajax 變得更加簡(jiǎn)單。 通過(guò)多功能性和可擴(kuò)展性的結(jié)合，jQuery?改變了數(shù)百萬(wàn)人編寫(xiě)JavaScript?的方式。

為什么[why]使用 jQuery

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

其他優(yōu)點(diǎn)：

（1）?寫(xiě)少代碼,做多事情【write?less?do?more】

（2）?免費(fèi)，開(kāi)源且輕量級(jí)的js?庫(kù)，容量很小

（3）?兼容市面上主流瀏覽器，例如 IE，F(xiàn)irefox，Chrome

（4）?能夠處理HTML/JSP/XML、CSS、DOM、事件、實(shí)現(xiàn)動(dòng)畫(huà)效果， 也能提供異步AJAX?功能

（5）?文檔手冊(cè)很全，很詳細(xì)

（6）?成熟的插件可供選擇，多種js?組件，例如日歷組件（點(diǎn)擊按鈕顯示下來(lái)日期）

（7）?出錯(cuò)后，有一定的提示信息

（8）?不用再在html?里面通過(guò)<script>標(biāo)簽插入一大堆 js?來(lái)調(diào)用命令了

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

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

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

（3）?通過(guò)標(biāo)簽名：document.getElementsByTagName()

上面代碼可以看出JavaScript 方法名太長(zhǎng)了，大小寫(xiě)的組合太多了，編寫(xiě)代碼效率，容易出錯(cuò)。jQuery?分別使用$(“#id”)?, $(“.class?名”)?, $(“標(biāo)簽名)?封裝了上面的?js?方法。

DOM?對(duì)象

文檔對(duì)象模型（Document Object Model，簡(jiǎn)稱 DOM），是 W3C 組織推薦的處理可擴(kuò)展標(biāo)志語(yǔ)言的標(biāo)準(zhǔn)編程接口。

通過(guò) DOM 對(duì) HTML 頁(yè)面的解析，可以將頁(yè)面元素解析為元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)，這些解析出的節(jié)點(diǎn)對(duì)象，即 DOM 對(duì)象。DOM 對(duì)象可以使用 JavaScript 中的方法。

獲取jQuery

?官網(wǎng)下載地址：https://jquery.com/download/

jQuery 的不同版本中，2.xx 不再支持 IE6/7/8 瀏覽器?，F(xiàn)階段IE6/7/8 已經(jīng)是淘汰的，非主流?？梢圆挥每紤]兼容問(wèn)題。

對(duì)于每一個(gè)同一版本號(hào)的 jQuery，其庫(kù)又分為兩個(gè)。一個(gè)是未壓縮版，可查看源碼，開(kāi)發(fā)時(shí)使用；一個(gè)是壓縮版，將注釋、空格均做了刪除，將變量字符數(shù)減少，產(chǎn)品上線時(shí)使用。

牛刀小試

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

單獨(dú)學(xué)習(xí)jQuery 庫(kù)使用，可以輕量的開(kāi)發(fā)工具，例如EditPlus ,HBuilder,HbuilderX

編寫(xiě)項(xiàng)目可以使用集成開(kāi)發(fā)工具，例如在IDEA， Eclipse ,MyEclipse ,WebStorm 等

第一個(gè)例子完成：瀏覽器完全裝載html 頁(yè)面 DOM 后,顯示一個(gè)提示信息框

實(shí)現(xiàn)步驟：

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

2.?在項(xiàng)目中再創(chuàng)建一個(gè)目錄

右鍵項(xiàng)目名稱—新建—目錄，常用名稱為 js

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

4.?使用 jQuery，首先要將 jQuery?庫(kù)引入。使用如下語(yǔ)句：

<script type="text/javascript"?src="js/jquery-3.4.1.js"></script>

5.?$(document)，將 DOM?對(duì)象 document?轉(zhuǎn)換為jQuery?對(duì)象。

$(document).ready()函數(shù)是當(dāng) DOM 對(duì)象加載完畢后，馬上執(zhí)行的函數(shù)。

$(document).ready()與$()、jQuery()、window.jQuery()是等價(jià)的，所以

$(document).ready()可以寫(xiě)成 $(function() { alert(“Hello jQuery”) } );

6.?完整代碼

DOM?對(duì)象和jQuery?對(duì)象

DOM 對(duì)象是用JavaScript 語(yǔ)法創(chuàng)建的對(duì)象，也看做是 js 對(duì)象。

?

1.?DOM?對(duì)象轉(zhuǎn)換jQuery?對(duì)象：

使用$(DOM 對(duì)象) 方式，可以 DOM 對(duì)象轉(zhuǎn)換為 jQuery 對(duì)象， 轉(zhuǎn)換為jQuery 對(duì)象才可以使用jQuery 中的提供的方法，操作DOM 對(duì)象。一般情況下，在命名 jQuery 對(duì)象時(shí)，為了與 DOM 對(duì)象進(jìn)行區(qū)分，習(xí)慣性的以$ 開(kāi)頭，這不是必須的。

例：新建html 頁(yè)面文件 domTojQuery.html?

1. 頁(yè)面加入按鈕 button

2.?轉(zhuǎn)換 DOM?對(duì)象

2. jQuery 對(duì)象轉(zhuǎn)為DOM 對(duì)象

jQuery 對(duì)象本身為數(shù)組對(duì)象，該數(shù)組中的第 0 個(gè)元素即為該 jQuery 對(duì)象對(duì)應(yīng) 的 DOM

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

例：新建html?文件 jQueryToDom.html?

1. 頁(yè)面添加 text?，button

2. jQuery 對(duì)象.get(0) 或 jQuery 對(duì)象[0] 均可完成 jQuery 對(duì)象轉(zhuǎn) DOM對(duì)象

選擇器

選擇器: 就是定位條件；通知jquery 函數(shù)定位滿足條件的DOM 對(duì)象

?

基本選擇器

根據(jù)ID，class 屬性，標(biāo)簽類型名定位HTML 元素，轉(zhuǎn)為jQuery 對(duì)象.

1.?id?選擇器

語(yǔ)法：$(“#id”)

2.?class?選擇器

語(yǔ)法：$(“.class 名稱”)

3.?標(biāo)簽選擇器

語(yǔ)法：$(“標(biāo)簽名”)

例：新建selector.html

1.?在頁(yè)面 head?部分加入 css

2. 加入 jQuery?引用

3.body?部分定義div

4.創(chuàng)建 js 函數(shù)

4.?所有選擇器

語(yǔ)法：$(“*”) 選取頁(yè)面中所有DOM 對(duì)象。

5.?組合選擇器

組合選擇器是多個(gè)被選對(duì)象間使用逗號(hào)分隔后形成的選擇器，可以組合 id， class，標(biāo)簽名等。

語(yǔ)法：$(“#id, .class, 標(biāo)簽名”)

例：

1.?上面的 selector.html?頁(yè)面中加入按鈕

2.?增加 js?函數(shù)

表單選擇器

表單相關(guān)元素選擇器是指文本框、單選框、復(fù)選框、下拉列表等元素的選擇方式。該方法無(wú)論是否存在表單<form>，均可做出相應(yīng)選擇。表單選擇器是為了能更加容易地操作表單，表單選擇器是根據(jù)元素類型來(lái)定義的

<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 標(biāo)簽語(yǔ)法： $(":type 屬性值")

例如：

$(":text")選取所有的單行文本框

$(":password")選取所有的密碼框

$(":radio")選取所有的單選框

$(":checkbox")選取所有的多選框

例：

新建form.html 頁(yè)面定義元素：

定義 js 函數(shù)：

過(guò)濾器

jQuery 對(duì)象中存儲(chǔ)的DOM 對(duì)象順序與頁(yè)面標(biāo)簽聲明位置關(guān)系

<div>1</div> dom1

<div>2</div> dom2

<div>3</div> dom3

$("div") == [dom1,dom2,dom3]

?過(guò)濾器就是過(guò)濾條件，對(duì)已經(jīng)定位到數(shù)組中DOM 對(duì)象進(jìn)行過(guò)濾篩選，過(guò)濾條件不能獨(dú)立出現(xiàn)在jquery 函數(shù)，如果使用只能出現(xiàn)在選擇器后方。

基本過(guò)濾器

1.?選擇第一個(gè)first, 保留數(shù)組中第一個(gè)DOM?對(duì)象

語(yǔ)法：$(“選擇器:first”)

2.?選擇最后個(gè)last, 保留數(shù)組中最后DOM?對(duì)象

語(yǔ)法：$("選擇器:last")

3.?選擇數(shù)組中指定對(duì)象

語(yǔ)法：$(“選擇器:eq(數(shù)組索引)”)

4.?選擇數(shù)組中小于指定索引的所有DOM?對(duì)象

語(yǔ)法：$(“選擇器:lt(數(shù)組索引)”)

5.?選擇數(shù)組中大于指定索引的所有DOM?對(duì)象

語(yǔ)法：$(“選擇器:gt(數(shù)組索引)”)

實(shí)例操作

1.定義樣式

2.?頁(yè)面加入div

3.?定義js?函數(shù)

表單對(duì)象屬性過(guò)濾器

1.?選擇可用的文本框

$(“:text:enabled”)

2.?選擇不可用的文本框

$(“:text:disabled”）

3.?復(fù)選框選中的元素

$(“:checkbox:checked”)

4.?選擇指定下拉列表的被選中元素

選擇器>option:selected

例：

創(chuàng)建filterForm.html 頁(yè)面：

js?函數(shù)

最后奉上視頻教程??，視頻觀看效果更佳！！走過(guò)路過(guò)別忘素質(zhì)三連哦~~