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. ご清聴ありがとうございました