JavaScript Basic For 6 Weeks（6/6)

Slide 1

Slide 1 text

JavaScript Basic Week 6 Rails Girls Weekly 2015-10-20 Win Wu

Slide 2

Slide 2 text

.eq( ) 取得第幾個匹配元素的物件 http://api.jquery.com/eq/ $(‘li’).eq(2); 從 li 元素中，找到第三個

類似的還有 lt(), gt() ….

Slide 3

Slide 3 text

:even 選取偶數的元素。常⽤用在列表, 或是 table 的 tr 上。同樣的，也有 :odd 可以⽤用。

Slide 4

Slide 4 text

.css() 改變元素的 css。⼀一個參數，代表要取得某元素的某個 css 屬性。 (getter) 兩個參數，代表要設定該元素的某種 css 屬性。(setter) $(‘body').css('background-color'); // “rgba(0, 0, 0, 0)” 取得 body 的背景 $(‘body’).css(‘background-color', ‘red’); // 將 body 的背景設定為紅⾊色

Slide 5

Slide 5 text

.css() 同時你也可以同時為某個元素設定好幾個 css 屬性。 $('body').css( { 'background-color': 'red', 'font-size': '18px' } );

Slide 6

Slide 6 text

.addClass() 為某個元素增加 css class name。 $(‘body’).addClass(‘isMobile’); .removeClass() 為某個元素移除 css class name。 $(‘body’).removeClass(‘isMobile’);

Slide 7

Slide 7 text

jQuery.noConﬂict() 與其他 JavaScript Library 名稱衝突解決⽅方案。像是 prototypejs 也是⽤用 $ 代表⾃自⼰己，假如你想要同時使⽤用兩者就會造成 $ 名稱使⽤用上的衝突。 noConﬂict 可以讓你修改 jQuery 的別名。 var $jq = jQuery.noConflict(); $jq('body').css('background', 'blue');

Slide 8

Slide 8 text

.remove() 刪除⼀一個元素。 $(‘#somethis’).remove(); .hide() 跟 .remove() 都可以把元素變不⾒見。但是只有眼睛看到的結果是⼀一樣的， hide() 是把元素藏起來，實際上還存在 DOM 裡。 remove 會把整個元素從 DOM 裡刪掉。

Slide 9

Slide 9 text

jQuery Ajax jQuery 的 ajax 有很多種⽅方式: $.get(), $.post(), $.ajax(), $.getJSON…. AJAX 是與 server 交換數據的⽅方式，可以不⽤用重新載⼊入網⾴頁的情況下，更新網⾴頁的內容。

Slide 10

Slide 10 text

鏈結少寫⼀一點，多做⼀一點 http://jsbin.com/qapezufocu/edit?js,output

Slide 11

Slide 11 text

jQuery Plugin 套件

Slide 12

Slide 12 text

套件? When ? 官⽅方提供的 method 少了你需要的功能。 When ? ⼀一樣的功能⾃自⼰己寫⽐比較花時間，所以透過適當的套件，可以達到⼀一樣的效果，還可以⽐比較節省時間。 Good ? 快速，直覺，⽅方便。 but? 不是所有的 plugin 都能提供 100% 客製化的功能，很多情況還是需要怎麼改寫套件的 css，或是知道怎麼使⽤用套件的事件監聽等等。

Slide 13

Slide 13 text

注意事項要使⽤用 jQuery 的 plugin，⼀一定要先載⼊入 jQuery，再載⼊入 jQuery plugin 的 JavaScript。否則會先因為讀不到 jQuery ⽽而先出錯。看⽂文件，讀範例程式碼。剛開始套⽤用套件時，盡量將 selector 跟範例的⼀一樣，等套⽤用成功之後，再來慢慢優化成⾃自⼰己要的樣⼦子。若相同的功能有好幾種 Plugin，以專案需求跟優缺點來決定使⽤用哪種。有些 plugin 除了 js 檔案之外，也要載⼊入官⽅方提供的 css 檔案。

Slide 14

Slide 14 text

http://t4t5.github.io/sweetalert/ SweetAlert

Slide 15

Slide 15 text

http://www.jacklmoore.com/colorbox/ ColorBox 類似關鍵字 colorbox, fancybox, popup, modal http://cornel.bopp-art.com/lightcase

Slide 16

Slide 16 text

Form Validator https://github.com/posabsolute/jQuery-Validation-Engine Demo: http://www.position-relative.net/creation/formValidator/demos/demoRegExp.html 表單驗證是蠻常需要的套件 jQuery.validationEngine 也是⼀一種表單驗證的套件。

Slide 17

Slide 17 text

Fullpage.js 以 section 單元性的⽅方式填滿整⾴頁畫⾯面的滾動換⾴頁效果。 http://alvarotrigo.com/fullPage/

Slide 18

Slide 18 text

superscrollorama 滾動視差 (學習曲線⾼高!) http://johnpolacek.github.io/superscrollorama/

Slide 19

Slide 19 text

Masonry 瀑布流效果 http://masonry.desandro.com/ isotope http://isotope.metaﬁzzy.co/layout-modes/masonry.html

Slide 20

Slide 20 text

Slideshow google: jquery slide plugin http://www.slidesjs.com/ http://bxslider.com/ http://responsiveslides.com/