![jQueryの基礎
●
要素の選択（セレクタ）
● CSSと同じ記述で要素の選択ができる
$('#id') idで要素を選択
$('.class') classで要素選択
$('div') タグ名称で要素選択
$('.class1 .class2') class1内のclass2を選択
●
他にもこんな記述をすることができる
$('li:first'), $('li:last') liの先頭または末尾の要素のみ選択
$('li:even'), $('li:odd') liの偶数または奇数の要素のみ選択
$('li[class]') liタグのclass要素が付いている要素のみ選択
・・・その他ここでは紹介しきれないほどたくさんあります](https://image.slidesharecdn.com/20110714jquery-110714223744-phpapp02/85/20110714-j-query-11-320.jpg)
20110714 j queryベーシック
- 1. 実は簡単に始められるjQuery 株式会社 GENOVA 増子 良太
- 2. 自己紹介
- 3. 自己紹介 ● 名前：増子 良太 (ますこ りょうた) ● 生年月日：1983年7月4日 ● 所属：株式会社 GENOVA 技術開発部 ● Twitter: @rmasco ● 好きなもの：バイク(CB400SF)、音楽、子供(今年生まれ ました) ● 近況：MovableTypeをベースのCMS「GENOVACMS」の 企画・開発・保守を担当。 主にPerl、JavaScriptなどで開発。 今年は自分の世界を広げることが目標。
- 4. 今日の内容
- 5. 今回の内容 ● jQueryってなに？ ● jQueryの基礎 ● jQuery実践 ● jQueryプラグイン
- 6. jQueryってなに？
- 7. jQueryってなに？ ● オープンソースのJavaScriptライブラリー ● 主な特徴は、JavaScriptの記述を簡素化できること ● たとえば・・・ – ある要素を非表示にしようとした場合 ● 通常のJavaScriptで表記した場合 var dom = document.getElementById('id'); dom.style.display = 'none'; ● jQueryで表記した場合 $('#id').hide();
- 8. jQueryを使用するメリット ● JavaScriptの記述を簡素化できる – jQuery内に便利な機能が組み込まれているので、それを呼び出すだ けで簡単に実現できる ● クロスブラウザ実装がし易い – 主要なブラウザ毎のJavaScriptの違いをjQueryが吸収してくれている ● プラグインという仕組みでjQuery自体を機能拡張できる – ページロード時にプラグインを読みこめば、あとはそれを呼び出す だけで、スライドショーなどが一行で実現できる ■キャッチフレーズ write less, do more ↓ 少ないコードで、より多くのことを実行
- 9. jQueryの基礎
- 10. jQueryの基礎 ● 基本的な流れ ● jQueryのロード(ソースの読み込み) <script type=”text/javascript” src=”jquery.js” /> ● 要素の選択 $('#id') ● 命令を記述 // #idを非表示にする $('#id').hide(); これだけ！
- 11. jQueryの基礎 ● 要素の選択（セレクタ） ● CSSと同じ記述で要素の選択ができる $('#id') idで要素を選択 $('.class') classで要素選択 $('div') タグ名称で要素選択 $('.class1 .class2') class1内のclass2を選択 ● 他にもこんな記述をすることができる $('li:first'), $('li:last') liの先頭または末尾の要素のみ選択 $('li:even'), $('li:odd') liの偶数または奇数の要素のみ選択 $('li[class]') liタグのclass要素が付いている要素のみ選択 ・・・その他ここでは紹介しきれないほどたくさんあります
- 12. jQuery基礎 ● そもそも$()ってなに？ $ ('#id') 引数 関数(ファンクション) ● こういうふうに記述することもできる jQuery ('#id') 引数 関数(ファンクション)
- 13. jQueryの基礎 ● 基本的なメソッド(機能) css(name,value) 要素にstyleを指定 例) $('#id'”).css(“background-color”,”#c0c0c0”); append(element) 要素を追加 例) $(“#id”).append(“div”) remove() 要素を削除 例) $(“#id”).remove() click(function) クリックしたときのイベントを指定 例) $(“#id”).click(function(){ alert('test'); }); hide() 要素を非表示にする 例) $(“#id”).hide(): get(url,data,function); HTTP通信(get)にてページを読み込む 例) $.get('http://test.com/test.php', function(data){ alert(data); }); ・・・その他ここでは紹介しきれないほどたくさんあります
- 14. jQuery実践
- 15. jQuery実践 サンプル(http://www.rmasco.com/20110714/) ● JavaScript側からCSSを操作してみよう ● Tableに行を追加してみよう ● 要素にエフェクトをかけてみよう ● Ajaxを使ってみよう ● Ajaxを使ってみよう - 応用編
- 16. jQueryプラグイン
- 17. jQueryプラグイン ● 世の中には便利なプラグインが多数存在 コリスより抜粋 http://coliss.com/articles/build- websites/operation/javascript/1229.ht ml
- 18. ご清聴ありがとうございました