jQuery
是一個封裝好的特定的集合(方法和函數)。是一個庫，封裝了很多預先定義好的函數在裡面。
概念
- jQuery是一個快速，簡潔的js庫。
- j是js，query是查詢，把js中的DOM操作作了封裝，我們可以快速的查詢使用裡面的功能。
- jQuery封裝了js常用的功能代碼，優化了DOM操作，事件處理，動畫設計和ajax互動。
- 學習jQuery的本質就是學習調用這些函數。
- 使用jQuery可以提高開發者的開發效率。
優點
- 輕量級，不影響頁面的加載速度
- 基本相容了現在主流的浏覽器
- 連式程式設計，隐式疊代
- 對事件樣式、動畫支援，大大簡化了DOM操作
- 支援插件擴充開發
- 免費，開源
下載下傳
https://jquery.com 官網位址https://code.jquery.com 各個版本的下載下傳 使用jQuery時，等着DOM結構渲染完畢即可執行内部代碼，不必等到所有外部資源加載完畢，jQuery幫我們完成了封裝。相當于原生js中的DOMContentLoaded，不同于原生js中的load事件是等頁面文檔、内部的js檔案、CSS檔案，圖檔加載完畢才執行内部代碼。
$是jQuery的别稱，可以使用jQuery代替，$是jQuery的頂級對象，相當于原生js中的window，把元素利用$包裝成jQuery對象，就可以調用。
jQuery對象與DOM對象
- 用原生js擷取來的對象就是DOM對象
- jQuery擷取的元素就是jQuery對象
- jQuery對象的本質是：利用$對DOM對象包裝後産生的對象(維數組形式存儲)
jQuery選擇器
基礎選擇器$("選擇器");層級選擇器$("ul>li"); 子代選擇器(擷取兒子)$("ul li"); 後代選擇器(擷取ul下的所有li元素)篩選選擇器:first $("li:first"); 擷取第一個li元素$("li:last"); 擷取最後一個li元素 :eq(index) $("li:eq(2)"); 擷取索引号為2的li元素(從0開始)$("li:odd"); 擷取索引号為奇數的li元素$("li:even"); 擷取索引号為偶數的li元素 jQuery樣式操作
常用的有兩種
- css()，多用于樣式少時操作，多了不友善
- 設定類樣式方法
設定類樣式方法比較和樣式多時操作，可以彌補css()的不足，原生js中className會覆寫元素原先裡面的類名，jQuery裡面類操作隻是對指定類進行操作，不影響原先的類名。
常見的jQuery動畫效果
顯示隐藏：show()/hide()/toggle();劃入劃出：slideDown()slideUp()/slideToggle();淡入淡出：fadeIn()/fadeOut()/fadeToggle()/fadeTo();自定義動畫：animation(); 注意： 動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行，jQuery提供一個方法，可以停止動畫排隊
stop(); 每次使用動畫之前，先調用stop()，在調用動畫。
jQuery屬性操作
常用三種：prop()/attr()/data();文法操作1.擷取屬性操作prop("屬性");2.設定屬性文法prop("屬性"，"屬性值");元素自定義屬性值attr()1.擷取屬性文法attr("屬性");2.設定屬性文法attr("屬性","屬性值");資料緩存data()可以在指定的元素上存取資料，并不會修改DOM元素結構，一旦頁面重新整理，之前存放的資料都将被移除。1.附加資料文法data("name","value");2.擷取資料文法data("name");/常見文本屬性，常見三種：html()/text()/val();分别對應js中的innerHTML，innerText和value屬性，主要針對元素的内容還有表單的操作。1.普通元素内容html("内容")(識别标簽)2.普通元素文本内容text("文本内容")(不識别标簽)3.表單的值val("内容")