jQuery概述

j-JavaScript+Query就是查詢js的庫，把js中的DOM操作做了封裝，實現快速查詢使用其中的功能。
優化了DOM操作、事件處理、動畫設計和Ajax互動
學習jQuery的本質：學習呼叫函式方法

優點：輕量級、相容、鏈式程式設計、隱式迭代、對事件、樣式、動畫支援，大大簡化了DOM操作，支援外掛擴充套件開發

jQuery基本使用

1.入口函式等待DOM載入完畢再去執行JS程式碼

$(document).ready(function () {
    ...
})

$(function(){
    ...
})

jQuery的頂級物件$，可以使用$將元素包裝成jQuery物件

2.jQuery物件和DOM物件
原生js獲取的物件就是DOM物件
var ... = document.getelementbyid('...');
jQuery獲取的元素就是jQuery物件
$('div')
jQuery物件的本質就是利用$對DOM物件包裝後產生的物件（偽陣列形式儲存）

3.jQuery物件和DOM物件的相互轉換
DOM物件轉換成jQuery物件
$(DOM物件)
jQuery物件轉換成DOM物件
$('div')[index] index是索引號
$('div').get(index)

4.jQuery樣式操作
引數只寫屬性名，則是返回屬性值
$(this).css("color")
引數是屬性名，屬性值，逗號分開，是設定一組樣式，必須加引號，值如果是數字可以不用跟單位和引號
$(this).css("color","red")
引數可以是物件形式，方便設定多組樣式。屬性名和屬性值用冒號隔開,屬性可不加引號
$(this).css({"color":"white","font-size":"20px"})

新增類 $("div").addClass("current")；
移除類 $("div").removeClass("current")
切換類 $("div").toggleClass("current")

5.類操作和className區別
原生JS中className會覆蓋元素裡面原先的類名
jQuery裡面類操作只是對指定類進行操作，不影響原先的類名

jQuery效果

顯示隱藏 show([speed,easing,fn]) hide() toggle()
滑動 slideDown() slideUp() slideToggle()
淡入淡出 fadeIn() fadeOut() fadeToggle() fadeTo()
自定義動畫 animate()
事件切換 hover(function(){滑鼠經過},function(){滑鼠離開}) 如果只有一個函式，經過和離開都會觸發函式

jQuery常用API

jQuery的基本選擇器
**$("選擇器") ** 裡面的選擇器直接就是CSS的選擇器，加上引號即可

jQuery的隱式迭代
遍歷內部DOM元素(偽陣列形式儲存)的過程就叫做隱式迭代
簡單理解：給匹配到的所有元素進行迴圈遍歷，執行相應的方法，不用我們再去迴圈