什麽是 jQuery ？

jQuery是一個JavaScript函數庫。

jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。

jQuery庫包含以下功能：

• HTML 元素選取
• HTML 元素操作
• CSS 操作
• HTML 事件函數
• JavaScript 特效和動畫
• HTML DOM 遍歷和修改
• AJAX
• Utilities

提示： 除此之外，Jquery還提供了大量的插件。

jQuery 語法

• 美元符號定義 jQuery
• 選擇符（selector）"查詢"和"查找" HTML 元素
• jQuery 的 action() 執行對元素的操作

1，使用jQuery必須先導入jQuery，x.x.x.js文件

元素選擇器

jQuery 元素選擇器基於元素名選取元素。

在頁面中選取所有 <p> 元素:

$("p")

實例

用戶點擊按鈕後，所有 <p> 元素都隱藏：

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

#id 選擇器

jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。

頁面中元素的 id 應該是唯一的，所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。

通過 id 選取元素語法如下：

$("#test")

實例

當用戶點擊按鈕後，有 id="test" 屬性的元素將被隱藏：

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

.class 選擇器

jQuery 類選擇器可以通過指定的 class 查找元素。

語法如下：

$(".test")

實例

用戶點擊按鈕後所有帶有 class="test" 屬性的元素都隱藏：

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

3,文檔就緒函數，防止在文檔未完全加載之前，運行jQuery代碼，

$(document).ready(function(){
         jQuery代碼
});

簡寫形式：

$(function(){ 

});

【文檔就緒函數和window.onload區別】
①window.onload必須等到網頁中所有內容執行完後，才會加載代碼。(包括圖片，視頻等資源)
文檔就緒函數，只需要在網頁DOM結構加載完畢之後，就可以執行代碼。
②window.onload只能寫一個，寫多個只會執行最後一個。
文檔就虛函數可以寫多個，並且不會被覆蓋。

4,原生JS對象與jQuery對象
①使用$("")選中的時jQuery對象，只能調用jQuery的函數，而不能使用元素JS的事件與函數

$("#p").click;√
$("#p").onclick = function(){} ×

解釋：$("#p")是jQuery對象。 .onclick是原生JS事件
同理:使用document.getElement獲取的是原生JS對象，也不能使用jQuery相關函數。
②原生JS對象轉為jQuery對象
可以使用$()包裹原生JS對象，即可轉為jQuery對象。

var p = document.getElementByTagName("p");

$(p).click(); √原生JS對象p已被轉為jQuery對象。
③jQuery對象轉為原生JS對象，使用.get(index)或[index]

$("#p").get(0).onclick = function(){} 
$("#p").[0].onclick = function(){}

5，jQuery解決多庫沖突
由於其他的庫也會使用$作為自身標識，導致其他JS庫與jQuery沖突；
要解決沖突，可以放棄使用$，直接使用jQuery對象。
【使用自執行函數傳入jQuery對象簡化寫法】

jQuery.noConflict();//調用這個函數，將$控制權讓渡給其他類庫，即jQuery不能再使用$
!function(j){
       函數之中就可以用字母j。代替jQuery對象
}(jQuery);

jQuery基礎應用