0%

jQuery 筆記 - 選擇器的選法與基本動畫效果語法

animation

jQuery 是直接控制網頁元素的效果,直關且強大,筆記一些基本會使用到的語法。當然更多可以參考官網

選擇器

使用 $ 字號當作選擇器,相當於原生語法的 document.getElementById() 以及 querySelector,一個錢字號就可以少打這麼多字母。

並且用小括號與引號包住要選擇的 classid網頁元素,結尾要用分號標示,才會是完整的語法,如 $(' ');

常見的選擇器使用方式有:

選擇 class

因為是選擇 Class ,所以前面要加 . ,如範例:

1
$(".ClassName").fadeIn();

選擇 id

選擇 id,前面要加 # 字號

1
$("#id").hide();

選擇元素

選擇網頁元素,不用加符號。

1
$("h1").show();

hide()

使元素隱藏,在 HTML 會產生 CSS display:none;,參數可放入秒數,ex. 1000 毫秒。

show()

可使原本預設 display:none; 的元素顯示,參數可放入秒數,ex. 1000 毫秒。

toggle()

可切換設定的 hide();show(); 的效果,參數可放入秒數,ex. 1000 毫秒。

slide() 滑動系列

slideUp()

使元素往上滑動,參數可放入秒數,ex. 1000 毫秒。

slideDown()

使元素往下滑動,參數可放入秒數,ex. 1000 毫秒。

slideToggle()

使元素切換滑動效果,點擊會自動向下/上滑動,參數可放入秒數,ex. 1000 毫秒。

fade() 淡化系列

fadeIn()

使元素有淡入效果,參數可放入秒數,ex. 1000 毫秒。

fadeOut()

使元素有淡出效果,參數可放入秒數,ex. 1000 毫秒。

fadeToggle()

使元素自動切換淡入與淡出效果,參數可放入秒數,ex. 1000 毫秒。

Class 常常搭配 active

addClass()

動態增加 class,參數放入 class 名稱。

removeClass()

動態移除 class,參數放入 class 名稱。

toggleClass()

動態增加與移除 class,參數放入 class 名稱。

範例