jQuery學習筆記（一）

2、從 cdn 中載入 jquery

script>
head>

script>
head>

又拍雲 cdn

src="">
script>
head>

jquery 語法：1、選取 html 元素；2、對選取的元素執行某些操作。

基礎語法：
$(selector).action()

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

為了防止文件在完全載入（就緒）之前執行 jquery **，避免在文件沒有完全載入之前就執行函式引發的操作失敗。將所有 jquery 函式位於乙個 document ready 函式中：

$(document).ready(function());
簡潔寫法：
$(function());

關於選擇器：

1、 2、jquery #id 選擇器通過 html 元素的 id 屬性選取指定的元素

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

$(
"#test")

3、jquery 類選擇器可以通過指定的 class 查詢元素

$(
".test")

關於jquery事件

$(selector).toggle(speed,callback);

對於可選的 callback 引數，有以下兩點說明：

1.$(selector)選中的元素的個數為n個，則callback函式會執行n次；

2.callback函式名後加括號，會立刻執行函式體，而不是等到顯示/隱藏完成後才執行；

3.callback既可以是函式名，也可以是匿名函式；

jquery 擁有四種 fade 方法

淡入已隱藏的元素

$(selector).fadein(speed,callback);
可選的 speed 引數規定效果的時長。它可以取："slow"、"fast" 或毫秒
可選的 callback 引數是 fading 完成後所執行的函式名稱

$(selector).fadeout(speed,callback);
可選的 speed 引數規定效果的時長。它可以取："slow"、"fast" 或毫秒
可選的 callback 引數是 fading 完成後所執行的函式名稱

fadetoggle() 方法可以在 fadein() 與 fadeout() 方法之間進行切換

$(selector).fadetoggle(speed,callback);
可選的 speed 引數規定效果的時長。它可以取："slow"、"fast" 或毫秒
可選的 callback 引數是 fading 完成後所執行的函式名稱

允許漸變為給定的不透明度（值介於 0 與 1 之間）

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

用於向下滑動元素

$(selector).slidedown(speed,callback);
可選的 speed 引數規定效果的時長。可以取："slow"、"fast" 或毫秒。
可選的 callback 引數是滑動完成後所執行的函式名稱。

用於向上滑動元素

$(selector).slideup(speed,callback);
可選的 speed 引數規定效果的時長。可以取："slow"、"fast" 或毫秒。
可選的 callback 引數是滑動完成後所執行的函式名稱。

在 slidedown() 與 slideup() 方法之間進行切換

$(selector).slidetoggle(speed,callback);
可選的 speed 引數規定效果的時長。可以取："slow"、"fast" 或毫秒。
可選的 callback 引數是滑動完成後所執行的函式名稱。

jquery animate() 方法用於建立自定義動畫

$(selector).animate(,speed,callback); 必需的 params 引數定義形成動畫的 css 屬性。可選的 speed 引數規定效果的時長。可以取："slow"、"fast" 或毫秒。可選的 callback 引數是動畫完成後所執行的函式名稱。

預設情況下，所有 html 元素都有乙個靜態位置，且無法移動。

如需對位置進行操作，要記得首先把元素的 css position 屬性設定為 relative、fixed 或 absolute

生成動畫的過程中可同時使用多個屬性

jquery animate() - 使用佇列功能

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

$("button").click(function
(),"slow");
div.animate(,"slow");
div.animate(,"slow");
div.animate(,"slow");
});

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

$(selector).stop(stopall,gotoend); stopall 引數規定是否應該清除動畫佇列。預設是 false，即僅停止活動的動畫，允許任何排入佇列的動畫向後執行 gotoend 引數規定是否立即完成當前動畫。預設是 false 預設地stop() 會清除在被選元素上指定的當前動畫

$(
"div").stop();//停止當前啟用的動畫，但之後我們能再動畫佇列中再次啟用
$("div").stop(true);//停止當前動畫，並清除動畫佇列，所以元素的所有動畫都會停止
$("div").stop(true,true);//完成動作,快速完成動作，並停止它

注：callback 函式在當前動畫 100% 完成之後執行通過 jquery，可以把動作/方法鏈結在一起。

chaining 允許我們在一條語句中執行多個 jquery 方法（在相同的元素上），瀏覽器就不必多次查詢相同的元素。

如需鏈結乙個動作，您只需簡單地把該動作追加到之前的動作上

$("#p1").css("color","red").slideup(2000).slidedown(2000);

jQuery學習筆記（一）

JQuery學習筆記（一）

jQuery學習筆記（一）

jQuery學習筆記（一）

相關推薦