Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Scc2014 :jQueryの仕組みを完璧に理解する
Similar to Scc2014 :jQueryの仕組みを完璧に理解する (20)
More from Jun Futakawa
More from Jun Futakawa (6)
Scc2014 :jQueryの仕組みを完璧に理解する
- 2. ! • FaceBook:: Jun Futakawaで検索 • twitter:: J2kawa • ActionScript, PHP, MySQL,JS etc. • 音極道の中の人 • 勤務遍歴：富士通 クリプトンフューチャメディア インフィニットループ etc. • 株式会社アトラクト 代表取締役 自己紹介
- 3. アジェンダ • jQueryの概要と利用状況 • なぜjQueryが選ばれているのか • jQueryオブジェクトって何？ • セレクタエンジン『Sizzle』(シズル)を理解する • jQueryメソッドについて !
- 5. jQueryの概要 ・米国のプログラマ John Lessig が開発したJavaScriptライブラリ。 ・2006年8月Version 1.0 リリース。最新Ver.は1.11.1 / 2.1.1。 ・MITライセンスのオープンソースライブラリ。 ・主にDOM操作において豊富で優れた機能を提供する。 ・派生プロジェクトとして、 jQuery UI (ユーザインタフェース系拡張フレームワーク) jQuery Mobile (モバイルに最適化したUIフレームワーク) QUnit (JavaScriptにおける単体テスト自動化フレームワーク) がある。
- 9. jQueryの特長(2) メソッドチェーンによる容易な連続操作 コード量を少なく、かつわかりやすく、かつ処理を高速化 できる メソッドチェーン [処理の連鎖をdot[ . ]で繋げていく] $( div ).text( Thank you! ).addClass( note )…..
- 11. jQueryオブジェクトって何？
- 12. …の前に、DOMって何？ Document Object Model の略。 HTML文書やXML文書をアプリケーションから利用するためのAPI。 プログラマ以外の方が、上の様な説明を理解するのは大変困 難だと思います。このセミナーにおいては、とりあえず以下 の様に大雑把に理解してください。 ! [DOM / DOMツリー] jQueryを使おうとしている対象のWEBページ全体。 [DOM要素] そのWEBページ内の、任意のHTMLタグで囲まれた部分。
- 13. 専門用語に気をとらわれ過ぎない 「最初から、 WEBページ , HTMLタグ って呼んだ方がわかりやすいの に。なんで DOMとかDOM要素とか言っちゃうわけ？だからプログラミ ングの解説って嫌い。」 と思ったそこのあなた。 わかります。 でも、こういう風に理解してください。 人も、場所や状況によって、いろいろな呼び方をされます。 病院では「患者さん」、お店では「お客様」、スポーツ大会では「選手」 などなど。 DOM や DOM要素 という言葉を使うことによって、「今 プログラミングという観点から見ているよ」という事を明確 に伝える意図を含んでいます。判ってしまえばどうってことはな いので、言葉が判りづらいからといって、必要以上に「難し過ぎる」 と思わないでください。
- 14. jQuery関数とは jQueryライブラリは、jQuery() という名前のグローバル関 数を１つだけ定義します。この関数は、何度も何度も使うこ とになるので、ショートカットとして $ というグローバル シンボルも定義しています。 グローバルな名前空間にjQueryが定義するのは、この２つの シンボルだけです。 (O Reillyジャパン 『JavaScript』<第６版>より) jQuery() もしくは $() 関数 jQueryの中心となる問い合わせ関数。この関数から返される値 は、０個以上のDOM要素群を表すオブジェクトで、このオブ ジェクトをjQueryオブジェクト と呼ぶ。
- 16. jQueryの原理 「少ないコードで多くのことを行う」のがjQueryの原理である。こ の原理はさらに３つの概念に分解することができる。 ! ・(CSSセレクタを通して)要素を検索し、 (jQueryメソッドを通じて)それらを使って何かを行う。 ・要素セットで複数のjQueryメソッドを連鎖させる。 ・jQueryラッパーを使って暗黙的にやりとりする。 (O Reillyジャパン 『jQueryクックブック』より) (CSSセレクタを通して)要素を検索 という機能を担っているのが 『Sizzle』(シズル)と呼ばれるセレクタエンジン
- 17. Sizzleの概要 ・DOM要素を、CSSセレクタの記法を用いて選択する為の JavaScriptライブラリ。 ・jQueryのVersion 1.3 から、jQuery 内に統合された。 ・開発には、jQuery開発者のJohn Lessigが統合以前から参 加。 ・単にCSSセレクタ記法を用いることができるだけでなく、 独自実装による優れたオプション指定ができる。
- 18. DOM要素の選択記法(1) CSSセレクタ記法をそのまま用いる Sample. jQuery(‘#logo_image’) or $(‘#logo_image’) jQuery(‘.clearfix a’) or $(‘.clearfix a’) jQuery(‘div’) or $(‘div’)
- 19. DOM要素の選択記法(2) 要素の順番に基づいて選択する Sample. jQuery(‘li:first’) or $(‘li:first’) jQuery(‘li:eq(0)’) or $(‘li:eq(0)’) jQuery(‘tr:even’) or $(‘tr:even’) :first 最初の要素 :last 最後の要素 :even 偶数番目の要素 :odd 奇数番目の要素 :eq(n) インデックス(n)の要素 :lt(n) インデックスが(n)より 小さいすべての要素 :gt(n) インデックスが(n)より 大きいすべての要素
- 20. DOM要素の選択記法(3) 属性に基づいて選択する Sample. jQuery(‘a[href=http://google.com]’) or $(‘a[href=http://google.com]’) jQuery(‘a[title][href]’) or $(‘a[title][href]’) [attr] 指定された属性を持つ要素 [attr=val] 指定された属性に特定の値が 設定されている要素 [attr!=val] 指定された属性に特定の値以外が 設定されている要素
- 21. DOM要素の選択記法(4) 可視性に基づいて選択する Sample. jQuery(‘div:hidden’) or $(‘div:hidden’) :hidden 非表示状態の要素 :visible 表示状態の要素
- 22. DOM要素の選択記法(5) フォーム要素の種類に基づいて選択する Sample. jQuery(‘:text’) or $(‘:text’) :text input type=text :password input type=password :radio input type=radio :checkbox input type=checkbox .etc…
- 23. jQueryメソッドについて
- 24. jQueryの原理(再掲) 「少ないコードで多くのことを行う」のがjQueryの原理である。こ の原理はさらに３つの概念に分解することができる。 ! ・(CSSセレクタを通して)要素を検索し、 (jQueryメソッドを通じて)それらを使って何かを行う。 ・要素セットで複数のjQueryメソッドを連鎖させる。 ・jQueryラッパーを使って暗黙的にやりとりする。 (O Reillyジャパン 『jQueryクックブック』より) それら(検索したDOM要素)を使って何かを行う という機能を担っているの jQueryメソッド。
- 25. jQueryメソッドの概要 ・jQueryメソッドとは、jQueryオブジェクトに定義され、dot(.)指定で 呼び出せるメソッド（処理） ・jQueryメソッドは、戻り値に必ずjQueryオブジェクトが設定される ため、呼び出しを連鎖させることができる。 ・以下のカテゴリ群がある。 1. Core 核となる基本機能 2. Selectors DOM要素選択（補助） 3. Attributes DOM要素の属性 4. Traversing DOM要素の走査 5. Manipulation DOM要素の操作 6. CSS css、styleの処理 7. Events イベント関連の処理 8. Effects 視覚効果・演出 9. Ajax Ajax関連 10.Deferred Deferredオブジェクト関連処理 11.Data Data関連処理 12.Callbacks コールバック関数の管理 13.Utilities ユーテリティ
- 26. jQueryメソッドによる処理の実例 Sample $(‘div’).css(‘border’,‘1px solid red’); ■CSSを書き換える Sample $(‘div#main’).fadeOut(0.5); ■フェイドアウト効果を施す Sample $(‘div’).remove(‘a’); ■DOMから要素を削除する 上記はほんの一例で、他にもさまざまなことができます。 jQueryリファレンスを見て、その「できること」の幅広さを確認してください。 公式サイトリファレンス(英語): http://api.jquery.com Qrefy(日本語リファレンスサイト): http://s3pw.com/qrefy/
- 27. readyメソッドについて(1) みなさんが、実際のWEBサイトで必ずといっていいほど最初に 目にするjQuery構文は $(function(){ …… <書式A> というものではないでしょうか。よく見ますね。この構文。 しかし、ここまでの説明だけだと、この構文理解できません。 この構文は、多くの記述が省略されているので、すべてを 省略せずに書いてみましょう。 jQuery(document).ready(function(){ … <書式B> この様になります。一番左は何度も繰り返しお伝えしているので もうお分かりだと思いますが、エイリアスとして’$’を使うことが できます。さらに、このjQuery関数のパラメータを省略すると デフォルトは document になります（文字列でないので注意！）