yo
我們在上一章提到了 JQuery ,並且用他來簡化程式碼(嘿對沒錯就是修改標題那個)這一章我們
要來使用 JQuery 來讓元素動起來。
在讓元素動起來之前,我們要先讓元素出場阿,不然要怎麼讓元素動起來??讓空氣動起來嗎???
拉回正題,我們除了用 DOM 創建元素,也可以用 jQuery 創建元素的喔!若想使用 jQuery 的話
,需要調用 jQuery 對象的 append 方法,參數是包含 HTML 的一個字符串。append 方法把這個
字符串轉換成 DOM 元素,並且把這個新元素添加到最初的元素末尾。那要怎麼寫呢?看我操作:
$('body').append('<p>附加項目</p>');
※後面分號可加不加
這樣你就擁有了一個附加標題了!選擇器字符串不一定是 ID。 程式碼$('body')
選擇了body
元素
。同樣也可以使用程式碼$('p')
選中所有的 P 元素。
輸出如下:
我們也可以使用append
來添加新的小標題,例如:
for (var i = 0; i < 1; i++) {
var 嗚嗚 = prompt('給副標題取標題吧!');
$('body').append('<pig>' + 嗚嗚 + '</pig>');
}
輸出如下:
是不是很神奇?
我們經常會看到一些網站,他上面有的字會動,或是淡出淡入等...太多了。
那這樣的效果要怎樣做呢?只須簡單的一句程式碼:
$('h1').fadeOut(3000);
是的只須一句程式碼,就可以讓主標題實現淡出淡入的夢想,肯定有人問:「我要的是有動作不是淡出淡入」等等我還沒表演完呢,急啥?看我表演:
$('h1').slideUp(3000).fadeOut(3000);
這句程式碼就可以向上擦除文字,同時也能達到淡出的效果,很 cool 齁?
透過這一章的講解相信大家對 jQuery 多了更多了解,也可以使用它來玩簡易動畫!下一章我們會深入 HTML,請敬請期待!!