JavaScript Basic For 6 Weeks（6/6)

jquery 2

Transcript

1. JavaScript Basic Week 6 Rails Girls Weekly 2015-10-20 Win Wu
2. .eq( ) 取得第幾個匹配元素的物件 http://api.jquery.com/eq/ $(‘li’).eq(2); 從 li 元素中，找到第三個 <li> 類似的還有 lt(), gt() ….
3. :even 選取偶數的元素。 常⽤用在列表, 或是 table 的 tr 上。 同樣的，也有 :odd 可以⽤用。
4. .css() 改變元素的 css。 ⼀一個參數，代表要取得某元素的某個 css 屬性。 (getter) 兩個參數，代表要設定該元素的某種 css 屬性。(setter) $(‘body').css('background-color'); // “rgba(0, 0, 0, 0)” 取得 body 的背景 $(‘body’).css(‘background-color', ‘red’); // 將 body 的背景設定為紅⾊色
5. .css() 同時你也可以同時為某個元素設定好幾個 css 屬性。 $('body').css( { 'background-color': 'red', 'font-size': '18px' } );
6. .addClass() 為某個元素增加 css class name。 $(‘body’).addClass(‘isMobile’); .removeClass() 為某個元素移除 css class name。 $(‘body’).removeClass(‘isMobile’);
7. jQuery.noConflict() 與其他 JavaScript Library 名稱衝突解決⽅方案。 像是 prototypejs 也是⽤用 $ 代表⾃自⼰己， 假如你想要同時使⽤用兩者就會造成 $ 名稱使⽤用上的衝突。 noConflict 可以讓你修改 jQuery 的別名。 var $jq = jQuery.noConflict(); $jq('body').css('background', 'blue');
8. .remove() 刪除⼀一個元素。 $(‘#somethis’).remove(); .hide() 跟 .remove() 都可以把元素變不⾒見。 但是只有眼睛看到的結果是⼀一樣的， hide() 是把元素藏起來，實際上還存在 DOM 裡。 remove 會把整個元素從 DOM 裡刪掉。
9. jQuery Ajax jQuery 的 ajax 有很多種⽅方式: $.get(), $.post(), $.ajax(), $.getJSON…. AJAX 是與 server 交換數據的⽅方式，可以不⽤用重新 載⼊入網⾴頁的情況下，更新網⾴頁的內容。
10. 鏈結 少寫⼀一點，多做⼀一點 http://jsbin.com/qapezufocu/edit?js,output
11. jQuery Plugin 套件
12. 套件? When ? 官⽅方提供的 method 少了你需要的功能。 When ? ⼀一樣的功能⾃自⼰己寫⽐比較花時間，所以透過適 當的套件，可以達到⼀一樣的效果，還可以⽐比較節省時 間。 Good ? 快速，直覺，⽅方便。 but? 不是所有的 plugin 都能提供 100% 客製化的 功能，很多情況還是需要怎麼改寫套件的 css，或是 知道怎麼使⽤用套件的事件監聽等等。
13. 注意事項 要使⽤用 jQuery 的 plugin，⼀一定要先載⼊入 jQuery，再載⼊入 jQuery plugin 的 JavaScript。否則會先因為讀不到 jQuery ⽽而 先出錯。 看⽂文件，讀範例程式碼。 剛開始套⽤用套件時，盡量將 selector 跟範例的⼀一樣，等套⽤用成功 之後，再來慢慢優化成⾃自⼰己要的樣⼦子。 若相同的功能有好幾種 Plugin，以專案需求跟優缺點來決定使⽤用 哪種。 有些 plugin 除了 js 檔案之外，也要載⼊入官⽅方提供的 css 檔案。
14. http://t4t5.github.io/sweetalert/ SweetAlert
15. http://www.jacklmoore.com/colorbox/ ColorBox 類似關鍵字 colorbox, fancybox, popup, modal http://cornel.bopp-art.com/lightcase
16. Form Validator https://github.com/posabsolute/jQuery-Validation-Engine Demo: http://www.position-relative.net/creation/formValidator/demos/demoRegExp.html 表單驗證是蠻常需要的套件 jQuery.validationEngine 也是⼀一種表單驗證的套件。
17. Fullpage.js 以 section 單元性的⽅方式填滿整⾴頁畫⾯面的滾動換⾴頁效果。 http://alvarotrigo.com/fullPage/
18. superscrollorama 滾動視差 (學習曲線⾼高!) http://johnpolacek.github.io/superscrollorama/
19. Masonry 瀑布流效果 http://masonry.desandro.com/ isotope http://isotope.metafizzy.co/layout-modes/masonry.html
20. Slideshow google: jquery slide plugin http://www.slidesjs.com/ http://bxslider.com/ http://responsiveslides.com/
21. Learning Tip! 需要社群好朋友 :P 實際找⼀一個 project 來做 :P
22. 3Q!
23. contact me win⽼老⿏鼠urad.com.tw Win Wu