jQuery $ .slideToggle(); .fadeIn(time); #{01}
$()是jQuery函式的短名稱(short name)也被稱為保裹器(wrapper);
jQuery() -> $()
可以放入jQuery() 的三種東西
###########
HTML: 放入一個HTML字串可以動態增加一組DOM元素到瀏覽器頁面
CSS: 放入一個CSS選擇器,jQuery會將符合的元素回傳
Javascript Object:
###########
CSS | jQuery
|
-----------------------------------------------------------
h1{ |
text-align:left; | $("h1").hide(); //隱藏所有h1
} |
-----------------------------------------------------------
.my_class{ |
position:absolute; | $(".my_class").slideUp(); //屬於my_class 全部向上收捲
} |
-----------------------------------------------------------
#my_id{ |
color:#3300FF; | $("#my_id").fadeOut(); // 所有my_id淡出
} |
-----------------------------------------------------------
fade 特效
fadeIn ->淡入
$("img").fadeIn(time);
time 為淡入時間 單位毫秒 (ms)
slide 滑動
$("div").slideToggle();
滑動切換
目前是滑上就會變滑下
目前是滑下就會變滑上
$("div").slideUp();
修改height 性質直到變成0
$("div").slideDown();
修改height 性質從0變成CSS所設定的大小
jQuery() -> $()
可以放入jQuery() 的三種東西
###########
HTML: 放入一個HTML字串可以動態增加一組DOM元素到瀏覽器頁面
CSS: 放入一個CSS選擇器,jQuery會將符合的元素回傳
Javascript Object:
###########
CSS | jQuery
|
-----------------------------------------------------------
h1{ |
text-align:left; | $("h1").hide(); //隱藏所有h1
} |
-----------------------------------------------------------
.my_class{ |
position:absolute; | $(".my_class").slideUp(); //屬於my_class 全部向上收捲
} |
-----------------------------------------------------------
#my_id{ |
color:#3300FF; | $("#my_id").fadeOut(); // 所有my_id淡出
} |
-----------------------------------------------------------
fade 特效
fadeIn ->淡入
$("img").fadeIn(time);
time 為淡入時間 單位毫秒 (ms)
slide 滑動
$("div").slideToggle();
滑動切換
目前是滑上就會變滑下
目前是滑下就會變滑上
$("div").slideUp();
修改height 性質直到變成0
$("div").slideDown();
修改height 性質從0變成CSS所設定的大小
<script>
$(document).ready(function(){
$("#clickMe").click(function(){
$("img").fadeIn(1000);
$("#picframe").slideToggle("slow");
});
});
</script>
留言
張貼留言