![$('div').css('color', 'red');!!!!var divs = document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) {divs[i].style.color = 'red';}#01 Introduction](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fslide-140105234018-phpapp01%2f75%2fHello-jQuery-jQuery-17-2048.jpg&f=jpg&w=240)
Uploaded byHayato Mizuno
6,141 views
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
SaCSS Special4 Frontrend in Sapporo -（2013年12月7日開催）で使用したスライドです。 jQueryはCSSのセレクタが主体となるため、非プログラマーにとっても取っ付き易く、これからJavaScriptの習得を考えている方にとって良い足がかりとなるでしょう。本セッションでは、jQueryの概要を踏まえ今後どのようにスキルを伸ばせば良いのか。また、JavaScriptを書くにあたってどのような点について気を使うべきか、と言ったところにフォーカスを当ててお話しさせていただきます。
Recommended
More Related Content
Similar to Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
More from Hayato Mizuno
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
- 1.Hello jQuerySACSS SPECIAL4FRONTREND IN SAPPORO
- 2.
- 3.📣 #01 Introduction✎#02 The Basics📕 #03 Patterns
- 4.
- 5.
- 6.#01 Introductionphoto byvictoria white2010
- 7.
- 8.jQueryNone57%57.3%54.9%50.8%49.1%46.7%46%42.7%42.8%2012/01#01 Introduction39.2%2012/052012/092013/0137.4%2013/05Historical trendsin the usage of JavaScript libraries
- 14.
- 15.
- 16.
- 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
- 18.
- 19.
- 20.
- 21.
- 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 Introductionhttps://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 Introductionhttp://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 Introductionhttp://www.stevesouders.com/blog/2013/03/18/http-archive-jquery/
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.$ or $()$('div').css('color','red');#02 The Basics
- 34.
- 35.
- 36.セレクタ$('ul > li').css('color','red');#02 The Basics
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.APIのカテゴリー_ Ajax_ Attributes_CSS_ Callbacks_ Core_ Data_ Deferred_ Dimensions#02 The Basics_ Effects_ Events_ Forms_ Manipulation_ Selector_ Traversing_ Utilities
- 49.
- 50.jQuery 日本語リファレンス |js STUDIO
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.#a の widthに #b の width を適用$('#a').width($('#b').width());#02 The Basics
- 66.
- 67.
- 68.
- 69.$('div').css('color', 'red')#02 TheBasics$('div')
- 70.$('div').css('color', 'red').find('p')#02 TheBasics$('div')$('div')
- 71.$('div').css('color', 'red').find('p').addClass('hoge')#02 TheBasics$('div')$('div')$('div p')
- 72.$('div').css('color', 'red').find('p').addClass('hoge').width()#02 TheBasics$('div')$('div')$('div p')$('div p')
- 73.$('div').css('color', 'red').find('p').addClass('hoge').width().fadeOut()#02 TheBasics$('div')$('div')$('div p')$('div p')122
- 74.$('div').css('color', 'red').find('p').addClass('hoge').width().fadeOut()#02 TheBasics$('div')$('div')$('div p')$('div p')122エラー
- 75.// 空の関数$.noop();// jqXHRオブジェクト$.ajax('example.html');//コールバックリスト$.Callbacks();#02 The Basics
- 76.
- 77.
- 78.
- 79.
- 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.
- 82.
- 83.$('#a').on('click', function() {$('#modal').show();});$('#b').on('click',function() {$('#modal').show();});$('#c').on('click', function() {$('#modal').show();});#03 Patterns
- 84.
- 85.
- 86.
- 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 forPerformance & Compression
- 90.JavaScript Style GuidesAnd Beautifiers
- 91.jQuery Core StyleGuide
- 92.
- 93.Design Patterns InjQuery
- 94.
- 95.
- 96.
- 97.
- 98.
- 100.
- 101.Thank youSACSS SPECIAL4FRONTREND IN SAPPORO