一、JQuery介紹 二、JQuery的優勢 三、jQuery庫包含功能 HTML元素選取 HTML元素操作 CSS操作 HTML事件函數 JavaScript特效和動畫 HTMLDOM遍歷和修改 AJAX Utilites 四、jQuery版本支持 1.x:相容IE768，使用最為廣泛的，官方只做 ...
一、JQuery介紹
1、jQuery是一個輕量級的、相容多瀏覽器的JavaScript庫。 2、JQuery使用戶能夠更方便處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，能極大地簡化JavaScript編程。
二、JQuery的優勢
1、一款輕量級的JS框架。jQuery核心js文件才幾十kb，不會影響頁面載入速度。 2、豐富的DOM選擇器,jQuery的選擇器用起來很方便，比如要找到某個DOM對象的相鄰元素，JS可能要寫好幾行代碼，而jQuery一行代碼就搞定了，再比如要講一個表格的隔行變色，jQuery也是一行代碼搞定。 3.鏈式表達式。jQuery的鏈式操作可以把多個操作寫在一行代碼里，更加簡潔。 4、事件、樣式、動畫支持。jQuery還建華了js操作css的代碼，並且代碼的可讀性也比js要強。 5、Ajax操作支持。jQuery簡化了AJax操作，後端只需要返回一個JSON格式的字元串就能完成與前端的通信。 6、跨瀏覽器相容。jQuery基本相容了現在主流的瀏覽器，不用再為瀏覽器的相容性問題而傷透腦筋。 7、插件擴展開發。jQuery有著豐富的第三方插件，例如：樹形菜單、日誌控制項、圖片切換插件、彈出視窗等等基本前端頁面上的組件都有對應插件，並且用jQuery插件做出來的效果很炫，並且可以根據自己需要去改寫和封裝插件，簡單實用。
三、jQuery庫包含功能
- HTML元素選取
- HTML元素操作
- CSS操作
- HTML事件函數
- JavaScript特效和動畫
- HTMLDOM遍歷和修改
- AJAX
- Utilites
四、jQuery版本支持
- 1.x:相容IE768，使用最為廣泛的，官方只做BUG維護，功能不再新增。因此一般項目來說，使用1.x版本就可以了，最終版本：1.12.4(2016年5月20日)
- 2.x:不相容IE678，很少有人使用，官方只做BUG維護，功能不再新增。如果不考慮相容低版本的瀏覽器使用2.x，最終版本：2.2.4(2016年5月20日)
- 3.x:不相容IE678，只支持最新的瀏覽器。需要註意的是很多老的jQuery插件不支持3.x版。目前該版本是官方主要更新維護的版本。
五、JQuery對象
JQuery對象就是通過JQuery包裝DOM對象產生的對象。jQuery對象是jQuery獨有的。如果一個對象是jQuery對象，那麼它就可以使用jQuery里的方法：例如$("#i1").html()。
$("#i1").html()的意思是：獲取id值為i1的元素的html代碼。其中html()是jQuery里的方法。
相關於：document.getElementById("i1").innerHTML;
雖然JQuery對象是包裝DOM對象後產生的，但是JQuery對象無法使用DOM對象的任何方法，同理DOM對象也沒有不能使用JQuery里的方法。
六、jQuery基礎語法
jQuery語法
通過jQuery,您可以選取（查詢，query）HTML元素，並對它們執行“操作”(actions)。
JQuery語法
jQuery語法是通過選取HTML元素，並對選取的元素執行某些操作。
基礎語法：$(selector).action()
- 沒有符號定義jQuery
- 選擇符(selector)“查詢”和“查找”HTML元素
- jQuery的action()執行對元素的操作
示例：
$(this).hide()-隱藏當前元素 $("p").hide()-隱藏所有段落 $("p.test").hide()-隱藏所有class = "test"的段落 $("#test").hide()-隱藏所有id="test"的元素
七、jQuery選擇器
參考文檔：https://www.w3cschool.cn/jquery/xs75ofnl.html
jQuery選擇器
jQuery選擇器允許您對HTML元素組或單個進行操作。 jQuery選擇器基於元素的id、類、類型、屬性、屬性值等"查找"(或選擇)HTML元素。它基於以及存在的CSS選擇器，它還有一些自定義的選擇器。 jQuery中所有選擇器都以美元符號開頭：$()。
id選擇器
jQuery #id選擇器通過HTML元素的id屬性的id屬性選取指定的元素。
頁面中的元素的id應該是唯一的，所以您要在頁面中選取唯一的元素需要通過#id選擇器。
通過id選取元素語法如下：
$("#id")
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id選擇器</title> <script src="jquery-3.3.1.min.js"></script> </head> <body> <h2>這是一個標題</h2> <p>這是一個段落</p> <p id="test">這是另一個段落</p> </body> </html>HTML示例代碼
執行結果：
標簽選擇器
jQuery標簽選擇器基於標簽名選取元素。
在頁面中選取所有的<p>標簽
$("p")
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標簽選擇器</title> <script src="jquery-3.3.1.min.js"></script> </head> <body> <h2>這是一個標題</h2> <p>標簽選擇器，這是一個段落</p> <p>標簽選擇器，這是另一個段落</p> </body> </html>HTML示例代碼
執行結果
class類選擇器
jQuery類選擇器可以通過指定的class查找元素。
語法如下：
$(".test")
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>class類選擇器</title> <script src="jquery-3.3.1.min.js"></script> </head> <body> <h1 class="test">這是一個標題</h1> <p class="test">這是一個段落</p> <p>這是另外一個段落。</p> </body> </html>HTML示例代碼
運行結果：
CSS選擇器
jQuery CSS選擇器可用於改變HTML元素的CSS屬性。
示例一：把所有的p標簽的背景顏色改為紅色
$("p").css("background-color","red");
示例二：選取所有元素(標簽)
$("*")
示例三：選取當前HTML元素
$("this")
示例四：選取第一個<p>元素
$("p:first")
示例五：選取class為intro的<p>元素
$("p.intro")
示例六：選取第一個<ul>元素的第一個<li>元素
$("ul li:first")
示例七：選取每個<ul>元素的第一個<li>元素
$("ul li:first-child")
示例八：選取帶有href屬性的元素
$("[href]")
示例九：選取所有target屬性值等於"_blank"的<a>元素
$("a[target='_blank']")
示例十：選取所有target屬性值不等於"_blank"的<a>元素
$("a[target!='_blank']")
示例十一：選取所有type="button"的<input>元素和<button>元素
$(":button")
示例十二：選取偶數位置的<tr>元素
$("tr:even")
示例十三：選取奇數位置的<tr>元素
$("trod")
<div class="c1"> <a href=""></a> <p class="c2"></p> <p class="c3"></p> <div class="c4"></div> <p class="c5"></p> </div> <div class="c6"> <a href=""></a> <a href=""></a> </div> #查找滿足條件的第一個 $('div>p:first'); #找出div標簽子集中的第一個p標簽, #jQuery.fn.init [p.c2, prevObject: jQuery.fn.init(1)] #查找滿足條件的最後一個 $('div>p:last'); #找出div標簽子集中最後一個p標簽 #jQuery.fn.init [p.c5, prevObject: jQuery.fn.init(1)] #查找索引號為指定數字的元素 $('div>p:eq(2)'); #找出div標簽子集中的第三個p標簽 #jQuery.fn.init [p.c5, prevObject: jQuery.fn.init(1)] #匹配所有索引值為偶數的元素，從 0 開始計數 $('div>p:even'); #找出div標簽子集中的索引為偶數的p標簽，取出class=c2,class=c5的p標簽。 #jQuery.fn.init(2) [p.c2, p.c5, prevObject: jQuery.fn.init(1)] #匹配所有索引值為奇數的元素，從 0 開始計數 $('div>p:odd'); #找出div標簽子集中的索引為奇數的p標簽，取出class=c3的p標簽。 #jQuery.fn.init [p.c3, prevObject: jQuery.fn.init(1)] #匹配所有大於給定索引值的元素 $('div>p:gt(1)'); #jQuery.fn.init [p.c5, prevObject: jQuery.fn.init(1)] #匹配所有小於給定索引值的元素 $('div>p:lt(1)'); #jQuery.fn.init [p.c2, prevObject: jQuery.fn.init(1)] #選取後代中包含一個或多個指定標簽的標簽 $('div:has(a)'); #jQuery.fn.init(2) [div.c1, div.c6, prevObject: jQuery.fn.init(1)]更多示例一
#找出所有滿足not條件的標簽 <label>籃球 <input type="checkbox" checked name="hobby" id="i1"> </label> <label >足球 <input type="checkbox" name="hobby" id="i2"> </label> $('label>input:not(:checked)'); #選出沒有checked屬性的input標簽 #w.fn.init [input#i2, prevObject: w.fn.init(1)] #示例代碼 <p class="c1"></p> <p class="c1"></p> <p id="d1"></p> <ul> <li id="d2"></li> <li id="d3"> <a href=""></a> </li> </ul> #找到所有後代中不含a標簽的li標簽 $("li:not(:has(a))") #Query.fn.init [li#d2, prevObject: jQuery.fn.init(1)] #找到不含class=c1的p標簽 $('p:not(.c1)'); #jQuery.fn.init [p#d1, prevObject: jQuery.fn.init(1)]更多示例二
交集選擇器，選擇兩個條件同時成立的標簽
$("div.c1") #選擇class=c1的div標簽
並集選擇器，選擇滿足以下條件中任意一個的所有標簽
$("#d,.c1,p") #選擇id=d的標簽，具有class=c1的標簽，標簽是p的標簽。
層級選擇器
#後代選擇器 $("a b"); #處於a標簽級別下的所有b標簽，用空格分開。 #子類選擇器 $("a.b"); #處於a標簽級別下一級別的所有b標簽。 #毗鄰單一弟弟選擇器 $("a+b"); #與a標簽同一級別的緊挨著a標簽的b標簽。 #毗鄰多個弟弟選擇器 $("a~b"); #與a標簽同一級別的位於a標簽之後的所有b標簽。
屬性選擇器
#示例代碼 <p class="c1"></p> <p class="c1"></p> <p id="d1"></p> #選取帶有該屬性的指定標簽 $('p[class]'); #jQuery.fn.init(2) [p.c1, p.c1, prevObject: jQuery.fn.init(1)] #選取該屬性值等於指定值的標簽 $('p[id="d1"]'); #Query.fn.init [p#d1, prevObject: jQuery.fn.init(1)] ##選取該屬性值不等於指定值的標簽 $('p[class!="c1"]'); #jQuery.fn.init(2) [p#d1, p.c2, prevObject: jQuery.fn.init(1)]
