Part9 jQuery應用

jQuery應用：

1. Slide() 滑動效果：

slideUp滑動關閉、slideDown滑動展開、slideToggle判斷需滑動展開或關閉

參考code: https://codepen.io/kevin-chang-the-sasster/pen/xxZXXVJ

2. Fade() 淡入、淡出效果：

fadeIn淡入、fadeOut淡出、fadeToggle判斷需淡入或淡出

參考code: https://codepen.io/kevin-chang-the-sasster/pen/eYJGGGM

3. toggleClass() 、搭配 CSS3 Transition：

使用toggleClass，於css中動態加入或移除class，操控所需的CSS動態效果

參考code: https://codepen.io/kevin-chang-the-sasster/pen/eYJGbdp

4. jQuery 鏈式寫法：

可搭配不同的動畫效果，可於第一個效果後接者寫第二個效果

$('.box').slideUp(1000).slideDown(1000);

上述效果為1秒內slideUp滑動關閉後再於1秒內slideDown滑動展開

參考code: https://codepen.io/kevin-chang-the-sasster/pen/JjGrxgq

4. preventDefault() 取消默認行為：

若使用 a標籤，可使用 event.preventDefault();

取消 a標籤的默認行為，也就是超連結行為，一般來說此常用於使用 a標籤來製作選單按鈕

參考code: https://codepen.io/kevin-chang-the-sasster/pen/jOWaOBx

5. css() 動態載入CSS Style設定：

可使用 css() ，動態修改CSS Style的設定值

參考code: https://codepen.io/kevin-chang-the-sasster/pen/ZEQxNxG

6. slide() 延伸練習-設計下拉式收闔選單：

使用 slideToggle() 設計下拉是收闔選單

參考code: https://codepen.io/kevin-chang-the-sasster/pen/bGEaGrR

7. delay() 延遲動畫效果的好用語法：

可使用jQuery鏈式寫法，於效果前加上delay(2000)，2000代表2000毫秒，也就是2秒，製造延遲動畫效果

$('.box3').delay(2000).fadeToggle();

參考code: https://codepen.io/kevin-chang-the-sasster/pen/XWXVXRJ

8. css() 延伸練習 - 即時放大縮小字型好簡單：

使用css() ，動態修改CSS Style的設定值，也就是動態修改文字大小

達到類似於新聞網站中，針對文章有分為：大、中、小三種字型大小可選擇的效果

參考code: https://codepen.io/kevin-chang-the-sasster/pen/pogpaEj

9. fixed 固定網頁內容(廣告)：

針對Html標籤，於CSS Style中，使用 position: fixed ，將其固定在網頁版面中固定位置

一般用於顯示廣告，並搭配 fadeOut() 效果，將該廣告做關閉的效果

參考code: https://codepen.io/kevin-chang-the-sasster/pen/abdEqXG

10. 使用 stop() 讓你的動畫效果更滑順：

一般動畫效果要等待效果全部執行完成後，才可執行另一個效果

使用 stop() 直接於第一個動畫效果執行中，直接執行另一個動畫效果

參考code: https://codepen.io/kevin-chang-the-sasster/pen/xxZYaKN

11. 設定offcanvas左右選單切換：

設計左右選單切換效果，搭配 transform: translateX()，先將左選單左移置網頁畫面外

而後點選某個按鈕，再次配 transform: translateX()，先將左選單右移置網頁畫面內

參考code: https://codepen.io/kevin-chang-the-sasster/pen/WNrMgrd

參考code: https://codepen.io/kevin-chang-the-sasster/pen/jOWZvBK

12. 製作卡牌翻轉效果：

使用 transform-style: preserve-3d 的3D效果

搭配transform: rotateY(180deg) 及 backface-visibility: hidden 效果

backface-visibility: hidden 表示隱藏被旋轉div元素的背面，這樣旋轉之後，第一張卡片是背面朝螢幕方向，看不到

第二張卡片旋轉之後則是正面朝像螢幕，即形成了旋轉的效果。

參考code: https://codepen.io/kevin-chang-the-sasster/pen/RwrQeqq

13. 使用 Animate.css - 載入第三方插件 - 增添網頁動畫豐富度：

使用 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">

載入 Animate.css ，即可使用 Animate 第三方插件動畫

注意: Animate改版前、後寫法變動

改版前：$('.text').addClass('animated bounce');

改版後：$('.text').addClass('animate__animated animate__bounce');

參考code: https://codepen.io/kevin-chang-the-sasster/pen/vYLdQbE

14. 使用 this() 教你如何操作本身元素：

使用 $(this).toggleClass('active') ，於自身元素中加入 active CSS效果

參考code: https://codepen.io/kevin-chang-the-sasster/pen/vYLRgoE

15. 使用 parent() 找到父階層元素：

使用 $(this).parent().toggleClass('active')，找到自身元素中的父層加入 active CSS效果

參考code: https://codepen.io/kevin-chang-the-sasster/pen/YzwaVwx

16. 使用 siblings() 找到同層元素：

使用 $(this).addClass('active').siblings().removeClass('active')，找到與自身同層的元素加入 active CSS效果

參考code: https://codepen.io/kevin-chang-the-sasster/pen/GRoxmaP

17. 使用 find () 輕鬆找到子元素內容：

使用 $(this).find('h3').toggleClass('active');，找到子元素加入 active CSS效果

參考code: https://codepen.io/kevin-chang-the-sasster/pen/ExPEXQL

18. this()、parent()、siblings() find () 綜合應用：

參考code: https://codepen.io/kevin-chang-the-sasster/pen/VweXJMV

19. this()、parent()、siblings() find () 綜合應用 - 設計 QA折疊選單：

參考code: https://codepen.io/kevin-chang-the-sasster/pen/wvMmrZL

20. this()、parent()、siblings() find () 綜合應用 - 設計二階層式折疊選單設計：

參考code: https://codepen.io/kevin-chang-the-sasster/pen/bGEvZyw

21. css() - 教你如何動態載入 CSS style 設定：

使用 $('.box').css('width','500px'); ，改變元素的寬度

亦可改變其他CSS設定值

參考code: https://codepen.io/kevin-chang-the-sasster/pen/ZEQxNxG

22. html()、text() 動態載入內容：

1. 動態載入html標籤
$('.box').html('<h1>哈哈你看不到我</h1>');
2. 動態載入文字
$('.box2 h2').text('哈哈你還是看不到我');
不能寫在同一個box中，因為html() 這個功能會清除掉 .box 裡面的所有內容，再插入相應的內容

參考code: https://codepen.io/kevin-chang-the-sasster/pen/JjGvowj

23. click()、on() 的差別：

1. 如果alert寫在動態載入.box1 h1的前面，因為.box h1是後來載入的，所以不會有alert效果，要改寫成使用.on來監聽
$('h1').click(function(event) {
alert('有效');
});
$('.box1').html('<h1>用jQuery動態產生的</h1>');

2. 使用.on來全程監聽，就算.box h1是後來載入的，一樣可以被監聽到，並帶入alert效果
$('.wrap').on('click', 'h1', function(event) {
event.preventDefault();
alert('有效');
});
$('.box1').html('<h1>用jQuery動態產生的</h1>');

參考code: https://codepen.io/kevin-chang-the-sasster/pen/pogVJyY

24. attr() - 動態增加 HTML 標籤屬性：

調整 HTML 屬性會使用 attr() ，調整細部 CSS 則會使用 css()

參考code: https://codepen.io/kevin-chang-the-sasster/pen/zYraYPz

25. remove() - 移除網頁標籤小工具：

會使用 remove() ，移除HTML標籤

參考code: https://codepen.io/kevin-chang-the-sasster/pen/GRoBrPw

26. 使用 FontAwesome 動態加入連結 icon：

載入Fontawesome 的 Icon 製作圖示

參考code: https://codepen.io/kevin-chang-the-sasster/pen/ExPpXaV

27. top 滑動效果：

使用 scrollTop的animate動畫，製作網頁滑動至最上端的效果