Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
•
31 likes•6,121 views
SaCSS Special4 Frontrend in Sapporo -（2013年12月7日開催）で使用したスライドです。 jQueryはCSSのセレクタが主体となるため、非プログラマーにとっても取っ付き易く、これからJavaScriptの習得を考えている方にとって良い足がかりとなるでしょう。 本セッションでは、jQueryの概要を踏まえ今後どのようにスキルを伸ばせば良いのか。 また、JavaScriptを書くにあたってどのような点について気を使うべきか、と言ったところにフォーカスを当ててお話しさせていただきます。
More Related Content
Similar to Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
Similar to Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント - (20)
More from Hayato Mizuno
Recently uploaded
Recently uploaded (16)
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
- 1. Hello jQuery SACSS SPECIAL4 FRONTREND IN SAPPORO
- 3. 📣 #01 Introduction ✎ #02 The Basics 📕 #03 Patterns
- 5. #01 Introduction photo by shoze
- 6. #01 Introduction photo by victoria white2010
- 8. jQuery None 57% 57.3% 54.9% 50.8% 49.1% 46.7% 46% 42.7% 42.8% 2012/01 #01 Introduction 39.2% 2012/05 2012/09 2013/01 37.4% 2013/05 Historical trends in the usage of JavaScript libraries
- 14. #01 Introduction
- 17. $('div').css('color', 'red'); ! ! ! ! var divs = document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { divs[i].style.color = 'red'; } #01 Introduction
- 23. <!doctype html> <html> <body> <p>jQuery</p> <script src="jquery.js"></script> <script> // Your code goes here. </script> </body> </html> #01 Introduction
- 24. <!doctype html> <html> <body> <p>jQuery</p> <script src="//ajax.googleapis.com/ajax/libs/ jquery/1.10.2/jquery.min.js"></script> <script> // Your code goes here. </script> </body> </html> #01 Introduction https://developers.google.com/speed/libraries/devguide?hl=ja&csw=1#jquery
- 25. CDNの良いところ _ 無ホスティング _ ドメインシャーディング _ クロスサイトキャッシング _ etc. #01 Introduction
- 26. Google CDNで人気のバージョン 1.4.2 (http) 1.7% 1.7.2 (http) 1.6% 1.7.1 (http) 1.6% 1.3.2 (http) 1.2% その他 4.7% 2013年3月 #01 Introduction http://www.stevesouders.com/blog/2013/03/18/http-archive-jquery/
- 27. Google CDNで人気のバージョン 1.4.2 (http) 1.7% 1.7.2 (http) 1.6% 1.7.1 (http) 1.6% 89.2% 1.3.2 (http) 1.2% その他 4.7% 2013年3月 #01 Introduction http://www.stevesouders.com/blog/2013/03/18/http-archive-jquery/
- 31. ✎ #02 The Basics
- 32. $('div').css('color', 'red'); #02 The Basics
- 33. $ or $() $('div').css('color', 'red'); #02 The Basics
- 34. セレクタ $('div').css('color', 'red'); #02 The Basics
- 35. セレクタ $('.a').css('color', 'red'); #02 The Basics
- 36. セレクタ $('ul > li').css('color', 'red'); #02 The Basics
- 47. $ = jQuery jQuery(':animated').fadeOut(); #02 The Basics
- 48. APIのカテゴリー _ Ajax _ Attributes _ CSS _ Callbacks _ Core _ Data _ Deferred _ Dimensions #02 The Basics _ Effects _ Events _ Forms _ Manipulation _ Selector _ Traversing _ Utilities
- 50. jQuery 日本語リファレンス | js STUDIO
- 52. メソッド $('div').css('color', 'red') #02 The Basics
- 65. #a の width に #b の width を適用 $('#a').width($('#b').width()); #02 The Basics
- 69. $('div') .css('color', 'red') #02 The Basics $('div')
- 70. $('div') .css('color', 'red') .find('p') #02 The Basics $('div') $('div')
- 71. $('div') .css('color', 'red') .find('p') .addClass('hoge') #02 The Basics $('div') $('div') $('div p')
- 72. $('div') .css('color', 'red') .find('p') .addClass('hoge') .width() #02 The Basics $('div') $('div') $('div p') $('div p')
- 73. $('div') .css('color', 'red') .find('p') .addClass('hoge') .width() .fadeOut() #02 The Basics $('div') $('div') $('div p') $('div p') 122
- 74. $('div') .css('color', 'red') .find('p') .addClass('hoge') .width() .fadeOut() #02 The Basics $('div') $('div') $('div p') $('div p') 122 エラー
- 75. // 空の関数 $.noop(); // jqXHRオブジェクト $.ajax('example.html'); // コールバックリスト $.Callbacks(); #02 The Basics
- 76. 📕 #03 Patterns
- 79. $('ul') .find('.a') .css('color', 'red') .end() .find('.b') .css('color', 'green') .text('Hello'); #03 Patterns
- 80. var $ul = $('ul'), $a = $ul.find('.a'), $b = $ul.find('.b'); ! $a.css('color', 'red'); $b.css('color', 'green').text('Hello'); #03 Patterns
- 81. DRY #03 Patterns
- 83. $('#a').on('click', function() { $('#modal').show(); }); $('#b').on('click', function() { $('#modal').show(); }); $('#c').on('click', function() { $('#modal').show(); }); #03 Patterns
- 87. $(function() { $('.button').on('click', function() { $('#modal').show(); }); }); #03 Patterns
- 88. var modal = { init: function() { $('.button').on('click', modal.show); }, show: function() { $('#modal').show(); } }; $(modal.init); #03 Patterns
- 89. jQuery Anti-Patterns for Performance & Compression
- 90. JavaScript Style Guides And Beautifiers
- 91. jQuery Core Style Guide
- 93. Design Patterns In jQuery
- 101. Thank you SACSS SPECIAL4 FRONTREND IN SAPPORO