jQuery Cheat—Sheet（jQuery學習筆記）

阿新 • • 發佈：2022-04-29

jQuery Cheat—Sheet（jQuery學習筆記）

Web前端學習筆記之——jQuery學習筆記

什麼是jQuery？

jQuery是一種JavaScript庫，實現了常見任務的自動化和複雜任務簡單化。 jQuery庫為Web指令碼程式設計提供了通用的抽象層，使之適合任何指令碼程式設計情景。 jQuery能滿足以下需求：

取得文件中的元素、修改頁面外觀、改變文件內容、響應使用者的互動操作、為頁面新增動態效果、不重新整理載入、簡化常見的JavaScript任務。

jQuery版本？

jQuery 2.0 不再支援IE 6/7/8 了，但是 jQuery 1.9 會繼續支援

jQuery可以下載使用，有兩個版本的 jQuery 可供下載

jquery-X.X.X.min.js Production version - 用於實際的網站中，已被精簡和壓縮。
jquery-X.X.X.js Development version - 用於測試和開發（未壓縮，是可讀的程式碼）

使用jQuery

可以通過多種方法在網頁中新增 jQuery。您可以使用以下方法：

從 jquery.com 下載 jQuery 庫
從 CDN 中載入 jQuery, 如從 Google 中載入 jQuery

本地jQuery

<head>
    <script src="jquery-1.10.2.min.js"></script>
    <!--Src 填寫本地下載的jquery路徑-->
 </head>

線上jQuery

<head>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <!--百度CDN提供的線上jquery庫-->
</head>

jQuery語法

通過 jQuery，可以選取（查詢，query） HTML 元素，並對它們執行”操作”（actions）。

jQuery 語法

jQuery 語法是通過選取 HTML 元素，並對選取的元素執行某些操作。基礎語法： $(selector).action()

美元符號定義 jQuery

選擇符（selector）”查詢”和”查詢” HTML 元素
jQuery 的 action() 執行對元素的操作

例項:

$(this).hide() - 隱藏當前元素
$("p").hide() - 隱藏所有 <p> 元素
$("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隱藏所有 id="test" 的元素

文件就緒事件

所有 jQuery 函式位於一個 document ready 函式中：

$(document).ready(function(){

   // 開始寫 jQuery 程式碼...

});

這是為了防止文件在完全載入（就緒）之前執行 jQuery 程式碼。 如果在文件沒有完全載入之前就執行函式，操作可能失敗。下面是兩個具體的例子：

試圖隱藏一個不存在的元素
獲得未完全載入的影象的大小

提示：簡潔寫法（與以上寫法效果相同）:

$(function(){

   // 開始寫 jQuery 程式碼...

});

以上兩種方式你可以選擇你喜歡的方式實現文件就緒後執行jQuery方法。

jQuery選擇元素

DOM-Document Object Model 文件物件模型以樹狀表示的文件模型

為了建立jQuery物件，就用使用$()函式。函式接受CSS選擇符作為引數，充當一個工廠，返回包含頁面中對應元素的jQuery物件。jQuery物件選擇符有三種：標籤名、ID、類可以單獨使用，也可以與其他選擇符組合使用

元素選擇器

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

$("p")

id選擇器

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

$("#test")

.class 選擇器

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

$(".test")

其他選擇器

混合選擇 eg：

$('#selected-plays > li')

子元素選擇符 > 查詢ID為selected-plays元素的子元素（>）中所有的列表項

jQuery 事件

什麼是事件？

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

jQuery 事件方法語法

在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法。

頁面中指定一個點選事件：

$("p").click();

下一步是定義什麼時間觸發事件。您可以通過一個事件函式實現：

$("p").click(function(){
  // 動作觸發後執行的程式碼!!
});

常用的 jQuery 事件方法

文件DOM載入完成

$(document).ready()

方法允許我們在文件完全載入完後執行函式。該事件方法在 jQuery 語法章節中已經提到過。

點選事件

當點選元素是，會發生 click 事件。在下面的例項中，當點選事件在某個 <p> 元素上觸發時，隱藏當前的<p>元素：

$("p").click(function(){
  $(this).hide();
});

雙擊事件

當雙擊元素時，會發生 dblclick 事件。在下面的例項中，當雙擊事件在某個 <p> 元素上觸發時，隱藏當前的<p>元素：

$("p").dblclick(function(){
  $(this).hide();
});

滑鼠穿過事件

當滑鼠指標穿過元素時，會發生 mouseenter 事件。在下面的例項中，當滑鼠穿過 <p1> 元素時，彈出“You entered p1!”警告框：

$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

滑鼠離開事件

當滑鼠指標離開元素時，會發生 mouseleave 事件。在下面的例項中，當滑鼠離開 <p1> 元素時，彈出“Bye! You now leave p1!”警告框：

$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});

滑鼠移入並點選事件

當滑鼠指標移動到元素上方，並按下滑鼠按鍵時，會發生 mousedown 事件。在下面例項中，滑鼠移入<p1>元素，並點選時，彈出“Bye! You now leave p1!”警告框：

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});

滑鼠釋放事件

當在元素上鬆開滑鼠按鈕時，會發生 mouseup 事件。在下面例項中，滑鼠點選<p1>元素，釋放時，彈出“Mouse up over p1!”警告框：

$("#p1").mouseup(function(){
  alert("Mouse up over p1!");
});

滑鼠經過懸停事件

hover()方法用於模擬游標懸停事件。當滑鼠移動到元素上時，會觸發指定的第一個函式(mouseenter，); 當滑鼠移出這個元素時，會觸發指定的第二個函式(mouseleave)。下面例項中，滑鼠移入<p1>元素時，觸發mouseenter，彈出“Mouse up over p1!”警告框；滑鼠移出<p1>元素時，觸發mouseleave，彈出“Bye! You now leave p1!”警告框；

$("#p1").hover(function(){
  alert("You entered p1!");
  },
  function(){
  alert("Bye! You now leave p1!");
});

獲得焦點事件

當元素獲得焦點時，發生 focus 事件。當通過滑鼠點選選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。下面例項中，<input>元素獲得焦點，將其CSS樣式做出修改。

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

失去焦點事件

當元素失去焦點時，發生 blur 事件。下面例項中，<input>元素失去焦點，將其CSS樣式做出修改。

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

其他jQuery事件

#jQuery 效果

隱藏和顯示

jQuery hide() 和 show()

jQuery hide() 和 show() 通過 jQuery，您可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素：

//hide元素點選時隱藏<p>標籤
$("#hide").click(function(){
  $("p").hide();
});
//show元素點選時隱藏<p>標籤
$("#show").click(function(){
  $("p").show();
});

語法:

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可選的 speed 引數規定隱藏/顯示的速度，可以取以下值：”slow”、”fast” 或毫秒。可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。下面的例子演示了帶有 speed 引數的 hide() 方法：

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

jQuery toggle()

通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。顯示被隱藏的元素，並隱藏已顯示的元素：

//點選button隱藏p標籤，再次點選顯示
$("button").click(function(){
  $("p").toggle();
});

淡入和淡出

jQuery fadeIn()

jQuery fadeIn() 用於淡入已隱藏的元素。語法:$(selector).fadeIn(speed,callback);

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

下面的例子演示了帶有不同引數的 fadeIn() 方法：

$("button").click(function(){
  $("#div1").fadeIn();   //淡入已經隱藏的div1
  $("#div2").fadeIn("slow");   //慢速淡入已經隱藏的div2
  $("#div3").fadeIn(3000);     //3000ms後完全淡入隱藏的div3
});

jQuery fadeOut()

jQuery fadeOut() 方法用於淡出可見元素。語法:$(selector).fadeOut(speed,callback); 可選的 speed 引數規定效果的時長。它可以取以下值：”slow”、”fast” 或毫秒。可選的 callback 引數是 fading 完成後所執行的函式名稱。下面的例子演示了帶有不同引數的 fadeOut() 方法：

$("button").click(function(){
  $("#div1").fadeOut();   //淡出要隱藏的div1
  $("#div2").fadeOut("fast");   //快速淡出要隱藏的div2
  $("#div3").fadeOut(5000);     //5000ms後完全淡出要隱藏的div3
});

jQuery fadeToggle()

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

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

語法:$(selector).fadeToggle(speed,callback); 可選的 speed 引數規定效果的時長。它可以取以下值：”slow”、”fast” 或毫秒。可選的 callback 引數是 fading 完成後所執行的函式名稱。下面的例子演示了帶有不同引數的 fadeToggle() 方法：

$("button").click(function(){
  $("#div1").fadeToggle();    //若未隱藏，則淡出；若已隱藏，則淡入
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

jQuery fadeTo()

jQuery fadeTo() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）。語法:$(selector).fadeTo(speed,opacity,callback);

必需的 speed 引數規定效果的時長。它可以取以下值：”slow”、”fast” 或毫秒。
fadeTo() 方法中必需的opacity 引數將淡入淡出效果設定為給定的不透明度（值介於 0 與 1 之間）。
可選的 callback引數是該函式完成後所執行的函式名稱。

下面的例子演示了帶有不同引數的 fadeTo() 方法：

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);   //慢速褪色到15%的透明度
  $("#div2").fadeTo("fast",0.4);    //快速褪色到40%的透明度

滑動效果

jQuery slideDown()

jQuery slideDown() 方法用於向下滑動元素。語法:$(selector).slideDown(speed,callback);

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

下面的例子演示了 slideDown() 方法：

$("#flip").click(function(){
  $("#panel").slideDown();   //點選<flip>標籤之後，<panel>元素將會向下滑動顯示
});

jQuery slideUp()

jQuery slideUp() 方法用於向上滑動元素。語法:$(selector).slideUp(speed,callback);

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

下面的例子演示了 slideUp() 方法：

$("#flip").click(function(){
  $("#panel").slideUp();     //點選<flip>標籤之後，<panel>元素將會向上滑動隱藏
});
``` 

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

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

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

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

$(“#flip”).click(function(){
  $(“#panel”).slideToggle();  //若panel已經展開，則上滑隱藏；若已隱藏，則下滑展開
});

### 動畫 jQuery animate() 方法允許您建立自定義的動畫。 > **預設情況下，所有 HTML 元素都有一個靜態位置，且無法移動。如需對位置進行操作，要記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute！** 可以用 animate() 方法來操作所有 CSS 屬性嗎？ > 是的，幾乎可以！不過，需要記住一件重要的事情：當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。 #### jQuery animate() jQuery animate() 方法用於建立自定義動畫。語法：`$(selector).animate({params},speed,callback);` - 必需的 params 引數定義形成動畫的 CSS 屬性。 - 可選的 speed - 引數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。 - 可選的 callback 引數是動畫完成後所執行的函式名稱。下面的例子演示 animate() 方法的簡單應用。它把 <div> 元素往右邊移動了 250 畫素：

$(“button”).click(function(){
  $(“div”).animate({left:’250px’});   //將div向左移動250px
});

#### jQuery animate() - 操作多個屬性請注意，生成動畫的過程中可同時使用多個屬性：

$(“button”).click(function(){
  $(“div”).animate({   //寫在{}中，屬性直接用半形,隔開
    left:’250px’,      //左移動250px
    opacity:’0.5’,     //透明度改變為50%
    height:’150px’,    //高度改變為150px
    width:’150px’      //寬度改變為150px
  });
});

#### jQuery animate() - 使用相對值也可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -=：

$(“button”).click(function(){
  $(“div”).animate({
    left:’250px’,     //左移動250px
    height:’+=150px’, //高度增加150px
    width:’+=150px’   //寬度增加150px
  });
});

#### jQuery animate() - 使用預定義的值也可以把屬性的動畫值設定為 "show"、"hide" 或 "toggle"：

$(“button”).click(function(){
  $(“div”).animate({
    height:’toggle’   //點選button，給div的height一個隱藏動畫效果
  });
});

#### jQuery animate() - 使用佇列功能預設地，jQuery 提供針對動畫的佇列功能。這意味著如果您在彼此之後編寫多個 animate() 呼叫， jQuery 會建立包含這些方法呼叫的"內部"佇列。然後逐一執行這些 animate 呼叫。

$(“button”).click(function(){
  var div=$(“div”);   //定義一個div 表示$(“div”) 對該元素有多個操作是的簡便寫法
  div.animate({height:’300px’,opacity:’0.4’},”slow”); //首先執行，高度增加到300px，透明度40%
  div.animate({width:’300px’,opacity:’0.8’},”slow”);  //然後執行，寬度增加到300px，透明度80%
  div.animate({height:’100px’,opacity:’0.4’},”slow”); //繼續執行，高度減少到100px，透明度40%
  div.animate({width:’100px’,opacity:’0.8’},”slow”);  //最後執行，寬度減少到100px，透明度80%
  //以從上到下的順序執行動畫佇列
});

### 停止動畫 jQuery stop() 方法用於停止動畫或效果，在它們完成之前。 stop() 方法適用於所有 jQuery 效果函式，包括滑動、淡入淡出和自定義動畫。語法:`$(selector).stop(stopAll,goToEnd);` - 可選的 stopAll 引數規定是否應該清除動畫佇列。預設是false，即僅停止活動的動畫，允許任何排入佇列的動畫向後執行。 - 可選的goToEnd 引數規定是否立即完成當前動畫。預設是 false。因此，預設地，stop() 會清除在被選元素上指定的當前動畫。

$(document).ready(function(){
  $(“#start”).click(function(){
    $(“div”).animate({left:’100px’},5000);    //動畫效果：div左移100px，
    $(“div”).animate({fontSize:’3em’},5000);  //內部文字的字型大小變為3em
  });
  $(“#stop”).click(function(){
    //無引數的暫停，一次點選，暫停一個animate動畫，點選兩次暫停兩個動畫
    $(“div”).stop();
  });
  $(“#stop2”).click(function(){
    //stopAll引數為true，暫停所有animate動畫
    $(“div”).stop(true);
  });
  $(“#stop3”).click(function(){
    //stopAll引數為true，goToEnd引數為true，暫停所有animate動畫，並直接顯示結果
    $(“div”).stop(true,true);
  });
});

### jQuery Callback 回撥 **Callback 函式在當前動畫 100% 完成之後執行。** jQuery 動畫的問題 > 許多 jQuery 函式涉及動畫。這些函式也許會將 speed 或 duration 作為可選引數。例子：`$("p").hide("slow")` speed 或 duration 引數可以設定許多不同的值，比如 "slow","fast", "normal" 或毫秒。 **以下例項在隱藏效果完全實現後回撥函式:**

$(“button”).click(function(){
  $(“p”).hide(“slow”,function(){
    alert(“The paragraph is now hidden”);
  });
});

**沒有回撥函式（Callback）**

$(“button”).click(function(){
  $(“p”).hide(1000);
  alert(“The paragraph is now hidden”);   //警告框將在隱藏效果之前彈出
});

#jQuery - Chaining 通過 jQuery，可以把動作/方法連結在一起。 **Chaining 允許我們在一條語句中執行多個 jQuery 方法**（在相同的元素上） ### jQuery 方法連結有一種名為連結（chaining）的技術，允許我們在相同的元素上執行多條 jQuery 命令，一條接著另一條。提示：這樣的話，**瀏覽器就不必多次查詢相同的元素**。如需連結一個動作，您只需簡單地把該動作追加到之前的動作上。下面的例子把 css()、slideUp() 和 slideDown() 連結在一起。"p1" 元素首先會變為紅色，然後向上滑動，再然後向下滑動：

$(“#p1”).css(“color”,”red”).slideUp(2000).slideDown(2000);

如果需要，我們也可以新增多個方法呼叫。提示： > 當進行連結時，程式碼行會變得很差。不過，jQuery語法很寬鬆；可以按照希望的格式來寫，包含換行和縮排。如下書寫也可以很好地執行：

$(“#p1”).css(“color”,”red”)
  .slideUp(2000)
  .slideDown(2000);

jQuery 會拋掉多餘的空格，並當成一行長程式碼來執行上面的程式碼行。 #jQuery 獲取內容和屬性 jQuery 擁有可操作 HTML 元素和屬性的強大方法。 ### jQuery DOM 操作 jQuery 中非常重要的部分，就是操作 DOM 的能力。 jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。 > **DOM = Document Object Model（文件物件模型）** DOM 定義訪問 HTML 和 XML文件的標準： "W3C文件物件模型獨立於平臺和語言的介面，允許程式和指令碼動態訪問和更新文件的內容、結構以及樣式。" #### 獲得內容 - text()、html() 以及 val() 三個簡單實用的用於 DOM 操作的 jQuery 方法： - text() - 設定或返回所選元素的文字內容 - html() - 設定或返回所選元素的內容（包括 HTML 標記） - val() - 設定或返回表單欄位的值下面的例子演示如何通過 jQuery text() 和 html() 方法來獲得內容：

$(“#btn1”).click(function(){
  alert(“Text: “ + $(“#test”).text());   //警告框彈出test內的文字內容
});
$(“#btn2”).click(function(){
  alert(“HTML: “ + $(“#test”).html());  //警告框彈出test內的html程式碼
});

下面的例子演示如何通過 jQuery val() 方法獲得輸入欄位的值：

$(“#btn1”).click(function(){
  alert(“值為: “ + $(“#test”).val());   //警告框彈出test 標籤輸入的文字值
});

#### 獲取屬性 - attr() jQuery attr() 方法用於獲取屬性值。下面的例子演示如何獲得連結中 href 屬性的值：

$(“button”).click(function(){
  alert($(“#derwer”).attr(“href”));  //警告框彈出 derwer 標籤的 href 屬性
});

#jQuery 設定內容和屬性 ### 設定內容 - text()、html() 以及 val() 我們將使用前一章中的三個相同的方法來設定內容： - text() - 設定或返回所選元素的文字內容 - html() - 設定或返回所選元素的內容（包括 HTML 標記） - val() - 設定或返回表單欄位的值下面的例子演示如何通過 text()、html() 以及 val() 方法來設定內容：

$(“#btn1”).click(function(){
    $(“#test1”).text(“Hello world!”);   //設定text1的值為 “Hello world!”
});
$(“#btn2”).click(function(){
    $(“#test2”).html(“Hello world!“);   //設定text2的HTML程式碼為 “Hello world!“
});
$(“#btn3”).click(function(){
    $(“#test3”).val(“DERWER”);   //設定test的輸入框內容為 DERWER
});
```

jQuery Cheat—Sheet（jQuery學習筆記）

jQuery Cheat—Sheet（jQuery學習筆記）

什麼是jQuery？

jQuery版本？

使用jQuery

本地jQuery

線上jQuery

jQuery語法

jQuery 語法

例項:

文件就緒事件

jQuery選擇元素

元素選擇器

id選擇器

.class 選擇器

其他選擇器

混合選擇 eg：

jQuery 事件

jQuery 事件方法語法

常用的 jQuery 事件方法

文件DOM載入完成

點選事件

雙擊事件

滑鼠穿過事件

滑鼠離開事件

滑鼠移入並點選事件

滑鼠釋放事件

滑鼠經過懸停事件

獲得焦點事件

失去焦點事件

其他jQuery事件

隱藏和顯示

jQuery hide() 和 show()

jQuery toggle()

淡入和淡出

jQuery fadeIn()

jQuery fadeOut()

jQuery fadeToggle()

jQuery fadeTo()

滑動效果

jQuery slideDown()

jQuery slideUp()

相關推薦