iT邦幫忙

2022 iThome 鐵人賽

DAY 21
0
自我挑戰組

50後阿嬤教你寫程式!系列 第 21

Day 21 不只阿嬤會動!元素也會動!(下)

  • 分享至 

  • xImage
  •  

Day 21 不只阿嬤會動!元素也會動!(下)

yo
我們在上一章提到了 JQuery ,並且用他來簡化程式碼(嘿對沒錯就是修改標題那個)這一章我們
要來使用 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,請敬請期待!!


上一篇
Day 20 不只阿嬤會動!元素也會動!(上)
下一篇
Day 22 阿嬤帶你探索 HTML!(上)
系列文
50後阿嬤教你寫程式!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言