Download as PDF, PPTX
![Javascript / jQuery 比較
• [Javascript]
var element=document.getElementB
yId("test") ;
element.style.display = block ;
• [jQuery]
$( #test ).show();
• jQueryの方が短い！
→ HTMLの要素（DOM）に直接指示を
出せるから](https://image.slidesharecdn.com/wbkobejquery-120908022623-phpapp02/75/WordBench-Kobe-jQuery-10-2048.jpg)
More Related Content
Similar to WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
- 1.
- 2. 自己紹介 • 菱川拓郎 @HissyNC • コンクリートファイブジャパンという会社をやって ます。オープンソースCMSのサポートを提供する会 社です。 • オープンソースCMS大好き。最近は contao, ImpressPages CMS, ExpressionEngineに興味。 フロントエンドエンジニア、ウェブディレクター
- 3.
- 4. 今日の内容 • jQuery初心者に、jQueryとは何かを解 説 • よくわからないままコピペで使っている jQueryユーザーに、書き方で気をつける ポイントを伝授 • jQuery中級者におすすめのカルーセルラ イブラリの紹介
- 5. jQueryとは？ • 迅速なWeb開発のための、高速で簡単に HTMLドキュメントの解析、イベントハン ドリング、アニメーション、Ajaxインタラ クションを行うためのJavascriptライブラ リ。Javascriptの書き方を変えるためにデ ザインされた。（公式サイトより） • …？ • ……？？？？？？
- 6. 超訳・jQueryとは HTMLの要素に対する オプション設定
- 7. jQueryこう考えよう $(‘#test’).show(); HTMLの要素に指示を出す $(‘p’).attr(‘alt’,‘test’); HTMLの要素のオプション設定を変更する
- 8. Javascriptは難しい • Javascriptはプログラミング言語 • プログラミング言語は、何かにしてほしいこと を人間から指示を出す • Javascriptの場合は、ブラウザに指示を出す • ブラウザはいっぱいあって、同じことを言って も同じように聞いてくれない • いろんなブラウザへの調整で指示書がどんど ん長くなっていきます
- 9. そこでjQueryは考えた • ブラウザに指示を出すからややこしいん じゃね？ • HTML内の要素（DOM）に指示を出すよう に変えよう！ • そのためにブラウザの違いは先に調整して おこう！ • 長ったらしく書くのは大変だし重くなるか ら、できるだけ短く書けるようにしよう！
- 10. Javascript / jQuery比較 • [Javascript] var element=document.getElementB yId("test") ; element.style.display = block ; • [jQuery] $( #test ).show(); • jQueryの方が短い！ → HTMLの要素（DOM）に直接指示を 出せるから
- 11. DOM = Document Object Model • HTMLとJavascriptをつなぐ仕組み • HTMLをツリー状に解釈することで、 HTMLの中の特定の部分にJavascriptか らアクセスすることを可能にする • html └body └div#wrapper └p.text └"HTML" ←テキストがツリーの末端になる
- 12. 最低限必要なプログラミング の知識 • 上の行から下の行へ、1行ずつ処理されます。 • 行の変わり目は改行ではなく、セミコロン 「 ; 」です。 • 中括弧 { } でくくられた部分は、上から下への 流れとは独立した処理になります。 • jQueryを使うにはこれくらいでOK
- 13. 準備・１ • jQueryを読み込みましょう。読み込んだ位置 よりあとで使えるようになります。 <script src="jquery.js"></script> • Googleから読み込むのが流行りです。 理由：みんながGoogleから読みこめば、ブラ ウザのキャッシュに残るので、使いまわせる <script src="//ajax.googleapis.com/ajax/ libs/jquery/1.8.1/jquery.min.js"></ script>
- 14. 準備・１ • 注意事項： jQueryは1回読みこめばOK。 たまにサンプルのコピペで何回も読み込 んでいる人がいますが、動作不良の原因 です。
- 15. 準備・２ • DOMが読み込まれるのを待つ • <script> $(document).ready(function(){ // この中はDOMが読み込まれた後に実行される }); </script> • ※$(document).readyは$で代用可能
- 16. 準備・２ • 「$」というキーワードを使う Javascriptライブラリが他にもあるの で、WordPressではコンフリクト回避 のために「$」が無効になっています。 • 一番楽な回避策 <script> jQuery(document).ready(function($){ // この中は$が使える }); </script>
- 17. 準備完了 • jQueryを使う準備は、この２ステップ • それでは、jQueryで何ができるのかを見 て行きましょう。ポイントは、DOMを選 択して、指示を出すの２ステップ • ドキュメントはこちら。復習にどうぞ http://api.jquery.com/
- 18. Selectors • まずDOMを選択。CSSと同じ感覚で HTMLの要素を選択できる • $( #id ) $( .class ) $( p ) • $( .class1, .class2, .class3 ) • 選択したら、指示を出すだけ
- 19. Selectors Filter • 条件付きで絞り込める • $( ul li:first ) // 最初の要素 • $( ul:first-child ) // 最初の子要素↑同じ • $( ul li:odd ) // 奇数要素 • $( ul li:not(.current_page_item)) // 除外
- 20. Attributes • 要素の属性を変更できる • $( p ).addClass( hoge ); // classを追加 • $( img ).attr( alt ); // 属性を取得 • $( img ).attr( alt , great photo ); // 属性を変更
- 21. CSS • CSSを直接変更できる • $( p ).css( color , red ); // p { color: red; } • $( p ).css({ 'background-color' : '#ddd', 'font-weight' : 'bold', 'color' : 'rgb(0,40,244)' }); // 一括指定
- 22. Traversing • 日本語で探索？とでも言いましょうか… • $('li.current_menu_item') .children() .css('background-color', 'red'); • ul + li.current_menu_item + a ←これだけに反映 + li +a
- 23. メソッドチェイン • 先ほどのページのサンプル。 • $('li.current_menu_item') .children() .css('background-color', 'red'); • 一度DOMを選択すれば、あとは何度で も指示を出すことができます。
- 24. Traversing • １行でいろいろできちゃう • $('ul.menu').css('color','red') .children() .filter('.current_menu_item') .css('font-weight','bold') .parent() .find('span') .css('color','green');
- 25.
- 26. Manipulation • DOMの操作 • $('div').append('<p>Test</p>'); // divの中（末尾）に追加 • $('div').prepend('<p>Test</p>'); // divの中（先頭）に追加
- 27. Events • // 要素をクリックしたときに処理を行う $("#target").click(function() { $( p ).css( color , red ); }); • $("#target").hover(function() { // マウスが乗ったとき $( p ).css( background-color , red ); },function(){ // マウスが外れたとき $( p ).css( background-color , inherit ); });
- 28. Effects • エフェクトが一番おなじみかも • $("#target").click(function() { $( p ).fadeIn(); // フェードイン }); • $("#target").click(function() { $('p').animate({ 'opacity':'0.25', 'margin-left':'+=500 // +500px }, 500); }); • animateは色が使えないので注意
- 29. jQueryは短く書くのが流儀 • Javascirptが書ける人はこうしがち var p = $('p'); if ( p.className == 'test' ) { p.addClass('add'); } • jQuery流ならエレガント！ $( p.test ).addClass( add ); • TraversingのAPIはぜひ活用しましょう。if文 は書かない
- 30. 他にもまだまだあります。 • jQueryでできることはたくさんありま す。 • 全部覚えるのは大変だし、結局大変なの で、jQueryプラグインを使いましょう。
- 31.
- 32.
- 33.
- 34. carouFredSelはここがすごい • どんなHTML要素でもカルーセルにでき る。1つのアイテムでも、複数のアイテム でもOK。 • 水平でも垂直でもOK。 • 最後まで行ったらとまるか、繰り返しか も自由 • レスポンシブ対応！
- 35. 柔軟なオプション • 設定項目が豊富。あらゆるデザインに対応 http://caroufredsel.frebsite.nl/ configuration.php • 地味に嬉しいイベント充実。カルーセルの切 り替わりのタイミングで別の処理を挟み込ん だり、一時停止したり、思うがまま http://caroufredsel.frebsite.nl/custom- events.php
- 36. 設定ロボット君が親切 http://caroufredsel.frebsite.nl/configuration-robot.php • 質問に答えていくだけでjQueryを書いて くれるロボット君！ • サンプルのコピペからはオサラバです
- 37.
- 38. 実例 http://coolcarousels.frebsite.nl/c/27/ http://monreve-japan.com/
- 39. WordPressと相性がいい • どんなHTMLの構造でもほぼ対応できる • HTMLがある程度決まってくるCMSの場 合でも安心！