1. 概述
前端技術得更新換代實在太快，JQuery可能已經不再適合着重學習，不過JQuery得思想已經融入了很多前端框架技術之中，比如這個美元符號
，總是可以在一些地方看到，作為最開始使用得JS庫，就學習下JQuery中得使用。
2. 詳論
2.1. 加載腳本
在HTML頁面中引入原生的JS腳本一般都會這樣開頭：
window.onload=function(){
Func1();
Func2();
Func3();
.....
}
使用window.onload()的原因是因為一般都會希望直到網頁加載完畢后，再立刻執行JS腳本的操作，否則會造成在執行JS腳本的時候， HTML文檔沒有渲染完成，DOM樹是不完整，獲取DOM中元素未定義的錯誤。
與window.onload()相對應的，包含JQuery或者采用相似技術的框架會這樣加載js腳本：
$(document).ready(function(){
Func1();
Func2();
Func3();
.....
});
$(document)表示的就是選擇整個文檔對象，.ready()就是DOM加載完成時的相應事件。這個寫法進一步簡化，就是如下的加載方案：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>樣例</title>
<script src="./3rdParty/jquery-3.5.1.js">
</script>
<script>
$(function () {
console.log(jQuery.fn.jquery);
});
</script>
</head>
<body>
<p>這是一個段落。</p>
</body>
</html>
當然，window.onload與jQuery ready()兩種加載方式還是有區別的：
2.2. 選擇器
可以認為JQuery的美元符號就是一種選擇器，基於已經存在的 CSS 選擇器（當然不局限於），能夠選取網頁中的各種元素。CSS有三種常用的選擇器：元素選擇器、ID選擇器和類選擇器；JQuery也有對應的選擇器。
2.2.1. 元素選擇器
下面例子展示通過實現選取標簽元素，實現了一個效果：每次點擊按鈕，就會修改P元素的顏色屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>樣例</title>
<script src="./3rdParty/jquery-3.5.1.js">
</script>
<script>
$(function () {
var active = false;
$("button").click(function () {
if(active){
$("p").css("color","#ff0000");
}else{
$("p")[0].style.color = "#00ff00";
}
active = !active;
})
});
</script>
<style type="text/css">
p {
color:#ff0000;
}
</style>
</head>
<body>
<p>這是一個段落。</p>
<button>點我</button>
</body>
</html>
通過$選擇器，可以實現獲取html中的標簽元素，從而進一步實現修改對應的CSS屬性。
2.2.2. ID選擇器
給上面那個例子加上另外一個P標簽的段落，id屬性設置為test，那么可以像設置css選擇器一樣設置$()的參數：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>樣例</title>
<script src="./3rdParty/jquery-3.5.1.js">
</script>
<script>
$(function () {
var active = false;
$("button").click(function () {
if(active){
$("#test").css("color","#ff0000");
}else{
$("p#test")[0].style.color = "#00ff00";
}
active = !active;
})
});
</script>
<style type="text/css">
p {
color:#ff0000;
}
#test {
color:#0000ff;
}
</style>
</head>
<body>
<p>這是一個段落。</p>
<p id="test">這是另外一個段落</p>
<button>點我</button>
</body>
</html>
顯示結果與之前的例子類似，同樣是P標簽元素，只有id值為test的元素改變顏色的功能生效了。
2.2.3. 類選擇器
類選擇器仍然與css一樣，通過.符號+類名作為$()的參數，選擇所有有相同class的元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>樣例</title>
<script src="./3rdParty/jquery-3.5.1.js">
</script>
<script>
$(function () {
var active = false;
$("button").click(function () {
if(active){
$(".test1").css("color","#ffff00");
}else{
$("p.test1")[0].style.color = "#00ff00";
$("h2.test1")[0].style.color = "#00ff00";
}
active = !active;
})
});
</script>
<style type="text/css">
p {
color:#ff0000;
}
#test {
color:#0000ff;
}
.test1{
color: #ffff00;
}
</style>
</head>
<body>
<h2 class="test1">這是一個標題</h2>
<p class="test1">這是一個段落。</p>
<p id="test">這是另外一個段落</p>
<button>點我</button>
</body>
</html>
需要注意這時選取到元素可能元素標簽可能不同。
2.3. 引入方法
在JQuery中，$還有個作用是引入各種JQuery已經封裝好的方法，例如：
......