jQuery學習教程

jQuery API文檔

https://www.runoob.com/manual/jquery/

安裝jQuery

1、 jQuery庫下載地址：https://jquery.com/download/
2、從 CDN 中載入 jQuery

引用jquery

<head>
  <script  src = “路徑（相對路徑、絕對路徑或者cdn線上路徑）”></script>
</head>

查看jQuery版本信息

F12 調用瀏覽器的Console窗口中使用 $.fn.jquery 命令查看 jQuery使用版本；

jQuery語法

基礎語法： $(selector).action()
選擇符(selector) “查詢”和“查找”HTML元素
jQuery的action()執行對元素的操作

jQuery入口函數

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

可以簡寫爲：

$(function(){
     //jQuery代碼。。。
});

jQuery入口函數是在 html所有標籤（DOM）都加載之後，就回去執行。

javaScript 入口函數

window.onload = function(){
   //執行代碼
};

javaScript 的window.onlaod事件是等到所有內容，包括外部圖片之類的文件加載完後，纔會執行。

jQuery選擇器

jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。jQuery 中所有選擇器都以美元符號開頭：$()。

元素選擇器

jQuery 元素選擇器基於元素名選取元素。在頁面中選取所有

元素: $(“p”)；

#id 選擇器

jQuery #id選擇器通過HTML元素的 id 屬性選取指定的元素。頁面中元素的 id 應該是唯一的，所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。
通過 id 選取元素語法：$("#test")

.class 選擇器

jQuery 類選擇器可以通過指定的 class 查找元素。$(".test")

jQuery事件

事件定義：頁面對不同訪問者的響應叫做事件。事件處理程序指的是當HTML中發生某些事件時所調用的方法。

常用的jQuery事件方法

$(document).ready()

$(document).ready() 方法允許我們在文檔完全加載完後執行函數。可以簡寫爲$ (function(){});

$(document).click()

click() 方法是當按鈕點擊事件被觸發時會調用一個函數。該函數在用戶點擊 HTML 元素時執行。$(“p”).click(function(){});

$(document).dblclick()

當雙擊元素時，會發生 dblclick 事件。

$(document).mouseenter()

當鼠標指針穿過元素時，會發生 mouseenter 事件。

$(document).mouseleave()

當鼠標指針離開元素時，會發生 mouseleave 事件。

$(document).mousedown()

當鼠標指針移動到元素上方，並按下鼠標按鍵時，會發生 mousedown 事件。

$(document).mouseup()

當在元素上鬆開鼠標按鈕時，會發生 mouseup 事件。

$(document).hover()

hover()方法用於模擬光標懸停事件。
當鼠標移動到元素上時，會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時，會觸發指定的第二個函數(mouseleave)。

$(document).focus()

當元素獲得焦點時，發生 focus 事件。
當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。

$(document).blur()

當元素失去焦點時，發生 blur 事件。

jQuery效果

隱藏/顯示

隱藏：

$(document).hide(
速度("slow"、"fast" 或毫秒),
function(){ //回調函數：隱藏/顯示之後執行的sql }
);

顯示

$(document).show(
速度("slow"、"fast" 或毫秒),
function(){ //回調函數：隱藏/顯示之後執行的sql }
);

顯示/隱藏

$(document).toggle(
速度("slow"、"fast" 或毫秒),
function(){ //回調函數：隱藏/顯示之後執行的sql }
);

淡入淡出

fadeIn() 用於淡入已隱藏的元素

語法: $(selector).fadeIn(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。.
可選的 callback 參數是 fading 完成後所執行的函數名稱。

fadeOut() 用於淡出可見元素

語法: $(selector).fadeOut(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。.
可選的 callback 參數是 fading 完成後所執行的函數名稱。

fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。

如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。
如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。

語法:$(selector).fadeToggle(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
可選的 callback 參數是 fading 完成後所執行的函數名稱。

fadeTo() 方法允許漸變爲給定的不透明度（值介於 0 與 1 之間）。

語法: $(selector).fadeTo(speed,opacity,callback);
必需的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。

fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置爲給定的不透明度（值介於 0 與 1 之間）。

可選的 callback 參數是該函數完成後所執行的函數名稱。

注意：
一、注意大小寫，fadeIn() fadeOut() fadeToggle() fadeTo() 大小寫不能變。
二、fadeTo() 沒有默認參數，必須加上 slow/fast/Time

滑動

slideDown() 方法用於向下滑動元素。

語法:$(selector).slideDown(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
可選的 callback 參數是滑動完成後所執行的函數名稱。

slideUp() 方法用於向上滑動元素。

語法:$(selector).slideUp(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
可選的 callback 參數是滑動完成後所執行的函數名稱。

slideToggle()方法可以在slideDown()與slideUp()方法之間進行切換。

如果元素向下滑動，則 slideToggle() 可向上滑動它們。
如果元素向上滑動，則 slideToggle() 可向下滑動它們。

$(selector).slideToggle(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
可選的 callback 參數是滑動完成後所執行的函數名稱。

動畫

animate() 方法允許創建自定義的動畫

語法：$(selector).animate({params},speed,callback);

必需的 params 參數定義形成動畫的 CSS 屬性。
可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
可選的 callback 參數是動畫完成後所執行的函數名稱。
注意：
1、 animate() 幾乎可以操作所有css 屬性
2、必須使用Camel標記書寫所有的屬性名。如：paddingLeft而不是padding-left
3、色彩動畫需要下載顏色動畫插件，下載地址：https://plugins.jquery.com/color/
4、使用相對值（該值相對於元素的當前值），需要在值的前面加上 += 或 -=：

$("button").click(function(){
   $("div").animate({ height:'+=150px',  });
});

5、使用預定義的值，把屬性的動畫值設置爲“show”,“hide”,“toggle”
6、使用隊列功能

停止動畫

stop() 方法用於停止動畫或效果，在它們完成之前。
stop() 方法適用於所有 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。

語法:$(selector).stop(stopAll,goToEnd);

可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行。
可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。

因此，默認地，stop() 會清除在被選元素上指定的當前動畫。

鏈（Chaining）

可以把動作/方法鏈接在一起。
Chaining 允許我們在一條語句中運行多個 jQuery 方法（在相同的元素上）。

jQuery HTML

獲取/設置內容

text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容（包括 HTML 標記）
val() - 設置或返回表單字段的值。

獲取/設置屬性

attr() 方法用於獲取屬性值。

注意：text()、html()、val() 以及 attr()，同樣擁有回調函數。回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函數新值返回您希望使用的字符串。

添加新元素

append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素之後插入內容
before() - 在被選元素之前插入內容

刪除元素

remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素

操作CSS

addClass() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行添加/刪除類的切換操作

CSS()

返回 CSS 屬性
如需返回指定的 CSS 屬性的值，請使用如下語法：css(“propertyname”);
設置 CSS 屬性
css(“propertyname”,“value”);
設置多個 CSS 屬性
css({“propertyname”:“value”,“propertyname”:“value”,…});

jQuery尺寸

jQuery遍歷

祖先

parent()方法返回被選元素的直接父元素。
parents()方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 ()。
parentsUntil()方法返回介於兩個給定元素之間的所有祖先元素。返回介於與

元素之間的所有祖先元素：$(“span”).parentsUntil(“div”);

後代

children()方法返回被選元素的所有直接子元素。
find()方法返回被選元素的後代元素，一路向下直到最後一個後代。
同胞（水平遍歷）
siblings()方法返回被選元素的所有同胞元素。

next()方法返回被選元素的下一個同胞元素。該方法只返回一個元素。

nextAll()方法返回被選元素的所有跟隨的同胞元素。

nextUntil()方法返回介於兩個給定參數之間的所有跟隨的同胞元素。
返回介於

與

元素之間的所有同胞元素： $(“h2”).nextUntil(“h6”);

prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿着同胞之前元素遍歷，而不是之後元素遍歷）。

過濾

first() 方法返回被選元素的首個元素。
last() 方法返回被選元素的最後一個元素。
eq() 方法返回被選元素中帶有指定索引號的元素。
索引號從 0 開始，因此首個元素的索引號是 0 而不是 1。下面的例子選取第二個

元素（索引號 1）： $(“p”).eq(1);
filter()
方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
$(“p”).filter(".url");
not() 方法返回不匹配標準的所有元素。
提示：not() 方法與 filter() 相反。

AJAX

Ajax是與服務器交換數據的技術，它在不重載全部頁面的情況下，實現了對部分網頁的更新。
Ajax = 異步 javaScript 和 XML

$.ajax({
   async :(默認: true) 默認設置下，所有請求均爲異步請求。如果需要發送同步請求，請將此選項設置爲 false。注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成纔可以執行,
   type: “post” //規定請求的類型（GET 或 POST）
   url:” 規定發送請求的 URL。默認是當前頁面”,
   data: ” 規定要發送到服務器的數據(實例：{“action”:”get”,”id”,2})”
   dataType:”json”, //預期的服務器響應的數據類型。
   beforeSend:function(){ // 發送請求前運行的函數。},
   success(result,status,xhr),	//當請求成功時運行的函數,
   error(xhr,status,error), //如果請求失敗要運行的函數,
   complete(xhr,status) //請求完成時運行的函數（在請求成功或失敗之後均調用，即在 success 和 error 函數之後）
});

load()

load()方法從服務器加載數據，並把返回的數據放入被選元素中。

語法:$(selector).load(URL,data,callback);
必需的 URL 參數規定您希望加載的 URL。
可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。
可選的 callback 參數是 load() 方法完成後所執行的函數名稱。回調函數可以設置不同的參數：
responseTxt - 包含調用成功時的結果內容
statusTXT - 包含調用的狀態
xhr - 包含 XMLHttpRequest 對象
下面的例子會在 load() 方法完成後顯示一個提示框。如果 load() 方法已成功，則顯示"外部內容加載成功！"，而如果失敗，則顯示錯誤消息：

 $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部內容加載成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });

擴展：
$(document).load();

當web頁面以及其附帶的資源文件，如CSS，Scripts，圖片等，加載完畢後執行此方法。
常用於檢測頁面（及其附帶資源）是否加載完畢。

$(document).ready();
當頁面DOM對象加載完畢，web瀏覽器能夠運行JS時，此方法即被觸發。如果你想盡快執行JS，可以使用此方法。[在html的頭部的script標籤中的，不處於ready()中的JS代碼將早於ready()執行]

$(document).unload();
此事件在停止瀏覽頁面的時候觸發，此操作可能存在於刷新操作/F5，單擊上一頁按鈕，進入其他頁面或關閉整個tab或窗口。

總而言之，他們的調用順序是 ready() >> load() >> unload() 。

get()

$.get() 方法通過 HTTP GET 請求從服務器上請求數據。

語法：$.get(URL,callback);

必需的 URL 參數規定您希望請求的 URL。
可選的 callback 參數是請求成功後所執行的函數名。

post()

$.post() 方法通過 HTTP POST 請求向服務器提交數據。

語法:
$.post(URL,data,callback);

必需的 URL 參數規定您希望請求的 URL。
可選的 data 參數規定連同請求發送的數據。
可選的 callback 參數是請求成功後所執行的函數名。

noConflict()

noConflict() 方法會釋放對 $ 標識符的控制，這樣其他腳本就可以使用它了。

您也可以創建自己的簡寫。noConflict() 可返回對 jQuery 的引用，您可以把它存入變量，以供稍後使用。

實例

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});

JSONP 教程

jsonp 在一個jsonp請求中重寫回調函數的名字。這個值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分，比如{jsonp:‘onJsonPLoad’}會導致將"onJsonPLoad=?"傳給服務器。

參考文獻：
https://blog.csdn.net/hansexploration/article/details/80314948

https://www.cnblogs.com/chiangchou/p/jsonp.html

備註：此文章內容來源菜鳥教程，如有問題，請評論指教！