“正確的態度既然是一種品質，它就不能靠一時興起的衝動，更不能急於求成。它應滲透在我們生活的每一點一滴當中，成爲我們日常生活的一部分。”
你好，我是夢陽辰！下面讓我們一起走進jQuery的世界吧！
01.jQuery概述
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
jQuery的核心特性可以總結爲：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器。
jQuery 是一個 JavaScript 庫。
jQuery 極大地簡化了 JavaScript 編程。
1.jQuery是JavaScript的封裝版。
2.jQuery簡化了JavaScript對對象定位以及對DOM對象屬性操作開發步驟。
3.JavaScrpt存在的弊端
JavaScript，定位DOM對象命令，過於冗長。
JavaScript,定位方式過於單一。
JavaScript,定位DOM對象屬性操作，過於繁瑣。
jQuery 庫 - 特性
jQuery 是一個 JavaScript 函數庫。
4.jQuery 庫包含以下特性：
HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函數
JavaScript 特效和動畫
HTML DOM 遍歷和修改
AJAX
Utilities
5.jQuery學習重點：
1.熟練背誦jQuery【選擇器和過濾器】語法
2.熟練掌握【jQuery對象】提供的【功能函數】。
jQuery的學習方式
1.理論
2.分段提供jquery聯繫內容。
02.jQuery的使用
1.下載jQuery工具文件，並導入工程中。
有兩個版本的 jQuery 可供下載：
Production version - 用於實際的網站中，已被精簡和壓縮。
Development version - 用於測試和開發（未壓縮，是可讀的代碼）
以上兩個版本都可以從jQuery官網下載。
2.將jQuery加載到瀏覽器上。
jQuery 庫是一個 JavaScript 文件，您可以使用 HTML 的 <script> 標籤引用它：
//引用：
<head>
<script src="jquery-3.5.1.min.js"></script>
</head>
將下載的文件放在網頁的同一目錄下，就可以使用jQuery。
3.jQuery對象與DOM對象的區別
1.DOM對象：
在瀏覽器加載網頁時，有瀏覽器負責創建的。
一個html標籤對應一個DOM對象。
可以通過管理對象，來對關聯html標籤中屬性進行操作。
2.jQuery對象
jQuery對象是【jquery函數$()】負責創建的。
jquery對象就是一個數組。
jquery對象中存放的本次定位【dom對象】
可以通過jquery對象中【功能函數】，來快速的對定位【dom對象】進行操作管理。
jquery對象與DOM對象轉換
1.如果將jquery對象轉換成DOM對象。
取出即可
for(var i=0;i<$obj.length;i++){
var domObj=$obj[i];
}
2.如何將DOM對象轉換爲jquery對象
var $obj=$(domObj)
jquery對象與DOM對象之間屬性和函數彼此不能調用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一個jquery框架實現</title>
<script type="text/javascript" src="js/jQuery-3.5.1.js"></script>
<script type="text/javascript">
function selectAll() {
//1.獲取第一個checkbox的選中狀態
var flag=$("#selectAllFirst").prop("checked");
//2.爲所有的數據行checkbox的選中狀態設置
//$(".ah").prop("checked",flag);
var $obj=$(".ah");
$obj.prop("checked",flag);
}
</script>
</head>
<body>
<input type="checkbox" onclick="selectAll()" id="selectAllFirst"/>全選<br/>
<input type="checkbox" class="ah" />籃球<br/>
<input type="checkbox" class="ah"/>足球<br/>
<input type="checkbox" class="ah" />羽毛球<br/>
<input type="checkbox" class="ah"/>排球<br/>
</body>
</html>
03.jquery選擇器語法
什麼是選擇器語法
對DOM對象進行定位的條件，比如根據ID定位，根據標籤類型名
jquery中只有三種選擇器
1.基本選擇器
定位條件：可以根據ID編號，根據標籤類型名，根據標籤採用的樣式選擇器
使用：
$("#id編號")//代替document.getElementById("id")
根據ID編號定爲對應的DOM對象。讓DOM對象保存到一個數組中並返回。返回這個數組就是【jquery】對象。
$(".樣式選擇器的名稱")//代替document.getElementByClassName("樣式選擇器名")
將使用了指定的樣式選擇器的dom對象保存到同一個數組中，並返回。返回這個數組就是【jquery對象】
$("標籤類型名")//代替document.getElementsByTagName()
將所有指定的標籤類型關聯的dom對象保存到同一個數組中並返回，返回的這個數組就是【jquery對象】。
選擇所有元素
$("*")
定位瀏覽器中所有的DOM對象保存到同一個數組中並返回。返回的這個數組就是【jquery對象】。
$("條件1,"條件2")
只要DOM對象滿足其中的一種條件，就會被定位到數組中相當於mysql or where sal.=3000 or job =“manger”
css函數：
jquery對象中的功能函數。
負責將jquery對象中所有的DOM對象的樣式屬性進行統一賦值。
2.層級選擇器
1.定位條件：可以根據標籤之間父子關係或兄弟定位
2.標籤之間的關係：
父子關係：就是包含關係
如：
<tr>
<td>
<input type="checkbox"/>
<td>
<tr>
td是tr的 【直接子標籤】
input 是TD的 【直接子標籤】
input是tr的【簡介子標籤】
兄弟關係：兩個標籤擁有相同的父標籤，並且彼此之間沒有包含關係。
<body>
<div>1</div> //大哥
<div>2</div> //二哥
<p>段落標籤</p> //三弟
</body>
使用：
//1
$("定位父標籤的條件>定位子標籤條件")
//定位當前父標籤下，所有滿足條件的【直接子標籤】
//2
$("定位父標籤的條件 定位子標籤條件")
定位當前父標籤下，所有滿足條件的【直接子標籤】和【間接子標籤】
//3
$("定位當前標籤條件~定位兄弟標籤條件"):
定位當前標籤【後面】，所有滿足條件的兄弟標籤
//4
$("定位當前標籤條件+定位兄弟標籤條件"):
定位當前標籤【後面與之緊鄰的】，並且滿足條件的所有兄弟標籤。
//5
$("定位當前標籤條件").siblings("定位兄弟標籤條件")
定位當前標籤【前面與後面】所有滿足條件的兄弟標籤
如：
3.INPUT標籤選擇器
INPUT標籤組成：
<input type="text">
<input type="password">
<input type="radio">//單選框
<input type="file">
<input type="button">
<input type="submit">
<input type="reset">
INPUT標籤的作用：
作爲瀏覽器向網站發送請求時攜帶參數。
使用：
通過type屬性區分。
$(":type屬性名字")
//如:
$(":button") //定位頁面中所有的button關聯的DOM
$(":table") //無法定位頁面中任何內容
val()函數：
作用:讀取jquery對象中第一個DOM對象的value屬性內容。
each（）函數
作用：封裝了for循環。
遍歷jquery對象中的DOM對象。
每次讀取一個【下標值】和對應的【DOM對象】。
交給處理函數。（處理函數必須有兩個參數）。
04.jQuery的過濾器
過濾器的作用：
對已經定位到jquery對象中的DOM對象，進行二次過濾篩選的。
過濾器語法介紹：
過濾器不能獨立使用，必須聲明在選擇起的後面。
可以將多個過濾器放到同一個jquery函數中，進行層層過濾。
六種過濾器：
三種常見的過濾器：
1.基本過濾器
【過濾器條件】：根據已經定位的DOM對象在jquery對象中存儲的位置進行二次過濾篩選的。
$("選擇器:first")//留下滿足條件的第一個DOM對象
$("選擇器:last")//留下滿足條件的最後一個DOM對象
$("選擇器：eq(下標值)")//留下滿足條件的指定位置的DOM對象。
$("選擇器：lt(下標值)")//留下滿足條件的指定位置之前的所有DOM
$("選擇器：gt(下標值)")//留下滿足條件的指定位置之後的所有的DOM
//例如：
$(":button:first")
$("div:eq(2)")//定位頁面中的第三個div
$(":checkbox:lt(2)")
2.基本屬性過濾器
【過濾條件】
根據表簽在聲明時是否爲指定屬性進行手動賦值
根據標籤的屬性內容與【指定內容】關係進行過濾。
【例子】
<div>1</div>
<div name="two">2</div>
<div name="three">3</div>
問題1：哪個div中沒有name屬性
所有的div標籤都有name屬性。
問題2：哪個div的name屬性的值是""
第一個div手動爲name屬性賦值，因此name屬性值是默認值，就是""
使用：
//1
$("選擇器[屬性名]")//留下滿足條件的並且在聲明時爲指定屬性進行手動賦值的DOM對象
//如：
$("div[name]")
<div name="two">2</div>
<div name="three">3</div>
//2
$("選擇器[屬性名='值']")//留下滿足定位條件的並且指定屬性內容【等於】指定的DOM
//如：
$("div[name='two']")
<div name="two">2</div>
$("div[name='']")
<div>1</div>
$("div[name!=four']")
<div>1</div>
<div name="two">2</div>
<div name="three">3</div>
//3
$("選擇器[屬性名^='值']")//留下滿足定位條件的並且指定屬性內容以【指定內容開頭】所有的DOM
//如
$("div[name^='t']")
<div name="two">2</div>
<div name="three">3</div>
//4
$("選擇器[屬性名$='值']")/留下滿足定位條件的並且指定屬性內容以【指定內容結尾】所有的DOM
//如
$("div[name$='o']")
<div name="two">2</div>
//5
$("選擇器[屬性名*='值']")/留下滿足定位條件的並且指定屬性內容以【包含指定內容】所有的DOM
//如
$("div[name*='o']")
<div name="two">2</div>
將多個過濾器放到同一個jquery函數中，進行層層過濾
$("選擇器[屬性名1][屬性名2*='值'][屬性名3^='值']")
3.工作狀態屬性過濾器
html標籤屬性分類
基本屬性：絕大多數標籤都擁有的屬性【id,name,title,rowspan】
樣式屬性：背景，字體，邊框
value屬性：只存在於【表單域標籤中（input,select,textarea)】
工作狀態屬性：只存在表單域標籤【checked,disabled,selected】
監聽事件屬性：onclick,onchange…
【使用】
//1
$("選擇器：enable")//留下滿足條件的並且處於【可用狀態】的DOM
//如：
$(":button:enabled")//定位所有處於可用的button
//2
$("選擇器":disabled")//留下滿足條件的並且處於【不可用狀態】的DOM
//如：
$(":button:disabled")//定位所有處於不可用的button
//3
$("選擇器：checked)//留下滿足條件的並且處於【選中狀態的】DOM
//如
$(":checkbox:checked:first")//頁面中第一個被選中的checkbox
//4
$("選擇器：selected")//留下滿足條件的並且處於【選中狀態的】DOM
//如：
$("select>option:selected")//下拉列表中被選中的option
05.jQuery對象功能函數
1.show()
負責讓jquery對象中包含的所有DOM對象關聯的標籤在瀏覽器上顯示。style=“dispalay:block”
2.hide()
負責讓jquery對象包含的所有DOM對象關聯的標籤在瀏覽器上隱藏。style=“dispaly:none”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: green;
font-size: 30px;
color: red;
}
</style>
<script type="text/javascript" src="js/jQuery-3.5.1.js"></script>
<script>function fun() {
$("div").hide(3000);
}
</script>
<script>function fun1() {
$("div").show(3000);//3000爲3秒
}
</script>
</head>
<body>
<div>
我是MengYangChen!
</div>
<input type="button" value="隱藏DIV" onclick="fun()"/>
<input type="button" value="顯示DIV" onclick="fun1()"/>
</body>
</html>
3.remove（）函數
將當前標籤及其子標籤一併刪除。
4.empty()函數
empty:將當前標籤子標籤進行清除處理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jQuery-3.5.1.js"></script>
<script>
function fun1() {
$("#one").remove();
}
function fun2() {
$("#two").empty();
}
</script>
</head>
<body>
大臣一：<select id="one">
<option value="">大兒子</option>
<option value="">二兒子</option>
</select>
大臣二：<select id="two">
<option value="">大兒子</option>
<option value="">二兒子</option>
</select><br/>
</body>
<input type="button" value="大臣1滿門抄斬" onclick="fun1()"/>
<input type="button" value="大臣2斷子絕孫" onclick="fun2()"/>
</html>
5.append()&appendTo()
1.共同點：都是操作標籤中innerHTML，爲當前標籤添加子標籤。
2.append():父標籤.append(子標籤）；父親給自己找了一個兒子。
3.appendTo():子標籤.appendTo(父標籤)；兒子各自找了一個爹。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#father{
width: 200px;
height: 200px;
background-color: green;
font-size: 30px;
color: red;
margin-bottom: 10px;
}
#son{
width: 100px;
height: 80px;
background-color: blue;
font-size: 30px;
color: red;
margin-bottom: 10px;
}
.two{
width: 200px;
height: 200px;
background-color: pink;
font-size: 30px;
color: red;
}
</style>
<script type="text/javascript" src="js/jQuery-3.5.1.js"></script>
<script>function fun() {
$("#father").append($("#son"));
}
</script>
<script>function fun1() {
$("#son").appendTo($("#father"));
}
</script>
</head>
<body>
<div id="father">
我是爸爸！
</div>
<div class="two">
<div id="son">
我是兒子!
</div>
</div>
<input type="button" value="爸爸找兒子" onclick="fun()"/>
<input type="button" value="兒子找爸爸" onclick="fun1()"/>
</body>
</html>
6.屬性操作函數
1.val函數。
$obj.val():讀取jquery對象中第一個DOM對象【value屬性值】
$obj.val(值）：爲jquery對象中所有DOM對象的【value屬性】進行統一賦值。
2.prop函數：
工作狀態屬性：checked,disabled,selected
1.$obj.prop(“checked”,true):爲jquery對象中所有DOM對象的checked屬性值賦值爲true。
2.$obj.prop(“checked”):讀取jquery對象中的第一個DOM對象的【checked屬性值】。
3.attr函數：
基本屬性： id name title rowspan
1.$obj.attr(“name”,“ck”）：爲jquery對象中所有的DOM對象的【name屬性】統一賦值爲【ck】
2.$obj.attr(“title”):讀取jquery對象中第一個DOM對象的【title屬性】的值。
4.text函數：
操作屬性innerText,雙目標籤的文本顯示內容。
$obj.text(“123”):爲jquery對象中所有的DOM對象的innerText屬性賦值爲“123".
$obj.text()//讀取jquery對象中所有DOM對象的innerTest屬性內容，拼接成一個字符串返回。
7.jquery監聽事件綁定方式
JavaScript中事件的綁定方式：
1.嵌入式綁定：
<input type="button" onclick="fun()">
缺點：一次只能爲一個標籤綁定監聽事件。
2.基於DOM對象的綁定方式
var array=document.getElementsByName("ck");
for(var i=0;i<arry.length;i++){
var domObj=array[i];
domObj.onclick=fun1;
}
缺點：需要開發人員自行遍歷數組，來綁定監聽事件。
jquery中事件綁定方式：
1.$obj.jquery監聽事件函數（處理函數）
$(":button").click(fun1);u
爲頁面中所有的button綁定onclick以及對應的處理函數fun1.
[jquery監聽事件函數]:
html監聽事件名稱 jquery監聽事件函數
onclick $obj.click(fun1)
onchange $obj.change(fun1)
onmouseover $obj.mouseover(fun1)
******jquery監聽事件函數名字就是【jquery監聽事件函數】去掉【on】
2.$obj.bind(“jquery監聽事件函數名”，處理函數）
以這種方式綁定的監聽事件，可以解除的。
$obj.unbind(“jquery監聽事件函數名”):
將指定監聽事件從DOM對象身上移除。
$obj.unbind()：
將所有的監聽事件從DOM對象身上移除。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jQuery-3.5.1.js"></script>
<script>
function fun1() {
$(":button:lt(3)").bind("click",delFun);
}
function fun2() {
$(":button:lt(2)").unbind("click");
}
function delFun() {
alert($(this).val());
}
</script>
</head>
<body>
<input type="button" value="我是大哥">
<input type="button" value="我是二哥">
<input type="button" value="我是三哥">
<br>
<input type="button" value="爲前三個button綁定onclick" onclick="fun1()">
<input type="button" value="爲前兩個button綁定onclick" onclick="fun2()">
</body>
</html>
綜合示例：表格特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script TYPE="text/javascript" src="js/jquery-3.5.1.js"></script>
<SCRIPT>
window.onload=main;
function main() {
$(":checkbox:first").click(fun1);
$(":checkbox:gt(0)").click(fun2);
$("table tr:gt(0)").mouseover(fun3);
$("table tr:gt(0)").mouseout(fun4);
}
//全選與全不選
function fun1() {
//1.獲得標題行checkebox的選中狀態值
var flag=$(":checkbox:first").prop("checked");
//2.爲數據行checkebox設置選中狀態值
$(":checkbox:gt(0)").prop("checked",flag);
}
function fun2() {
//1.獲取數據行checkbox個數
var n= $(":checkbox:gt(0)").length;
//2.獲取數據行被選中的checkbox個數
var checkedNum=$(":checkbox:gt(0):checked").length;
//3.判斷標題行checkbox的選中狀態
if(n==checkedNum){
$(":checkbox:first").prop("checked",true);
}else{
$(":checkbox:first").prop("checked",false)
}
fun5();
}
//將鼠標懸停的【數據行】設置爲【紅色】
function fun3() {
//this:鼠標懸停的標籤DOM對象
$(this).css("background-color","red");
}
//將鼠標離開的【數據行】設置爲【白色】
function fun4() {
//this:鼠標離開的標籤DOM對象
$(this).css("background-color","white");
}
//根據被選中的checkbox個數決定刪除按鈕是否可用
function fun5() {
var checkedNum=$(":checkbox:gt(0):checked").length;
if(checkedNum>0){
$(":button").prop("disabled",false);
}else{
$(":button").prop("disabled",true);
}
}
</SCRIPT>
</head>
<body>
<table border="2">
<tr>
<td>職員姓名</td>
<td>職員職位</td>
<td>職員工資</td>
<td>
<input type="checkbox">全選與全不選
<input type="button" value="刪除" disabled>
</td>
</tr>
<tr>
<td>mike</td>
<td>初級工程師</td>
<td>14000</td>
<td>
<input type="checkbox">
</td>
</tr>
<tr>
<td>xinkong</td>
<td>中級工程師</td>
<td>24000</td>
<td>
<input type="checkbox">
</td>
</tr>
<tr>
<td>MengYangChen</td>
<td>高級工程師</td>
<td>224000</td>
<td>
<input type="checkbox">
</td>
</tr>
</table>
</body>
</html>
相信自己；越活越堅強，我沒有靠山，自己就是山，我沒有天下，自己打天下，活着就該逢山開路，遇水架橋，生活！你給我壓力，我還你奇蹟！
關注公衆號【輕鬆玩編程】回覆關鍵字“電子書”，“計算機資源”，“Java從入門到進階”，”JavaScript教程“，“算法”，“Python學習資源”，“人工智能”等即可獲取學習資源。
