20110714 j queryベーシック

実は簡単に始められるjQuery

株式会社　GENOVA

増子　良太

自己紹介
● 名前：増子良太　(ますこりょうた)
● 生年月日：1983年7月4日
● 所属：株式会社 GENOVA 技術開発部
● Twitter: @rmasco
● 好きなもの：バイク(CB400SF)、音楽、子供(今年生まれ
ました)

● 近況：MovableTypeをベースのCMS「GENOVACMS」の
企画・開発・保守を担当。
主にPerl、JavaScriptなどで開発。
今年は自分の世界を広げることが目標。

今回の内容
● jQueryってなに？

● jQueryの基礎

● jQuery実践

● jQueryプラグイン

jQueryってなに？
● オープンソースのJavaScriptライブラリー
● 主な特徴は、JavaScriptの記述を簡素化できること
●
たとえば・・・
– ある要素を非表示にしようとした場合

● 通常のJavaScriptで表記した場合

var dom = document.getElementById('id');
dom.style.display = 'none';
● jQueryで表記した場合

$('#id').hide();

jQueryを使用するメリット
● JavaScriptの記述を簡素化できる
– jQuery内に便利な機能が組み込まれているので、それを呼び出すだ
けで簡単に実現できる
●
クロスブラウザ実装がし易い
– 主要なブラウザ毎のJavaScriptの違いをjQueryが吸収してくれている
● プラグインという仕組みでjQuery自体を機能拡張できる
– ページロード時にプラグインを読みこめば、あとはそれを呼び出す
だけで、スライドショーなどが一行で実現できる

■キャッチフレーズ
write less, do more
↓
少ないコードで、より多くのことを実行

jQueryの基礎

●
基本的な流れ
● jQueryのロード(ソースの読み込み)
<script type=”text/javascript” src=”jquery.js” />
●
要素の選択
$('#id')
●
命令を記述
// #idを非表示にする
$('#id').hide();

これだけ！

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要素が付いている要素のみ選択

・・・その他ここでは紹介しきれないほどたくさんあります

jQuery基礎

● そもそも$()ってなに？

$ ('#id')
引数

関数(ファンクション)

●
こういうふうに記述することもできる

jQuery ('#id')
引数

関数(ファンクション)

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);
});

・・・その他ここでは紹介しきれないほどたくさんあります

jQuery実践
サンプル(http://www.rmasco.com/20110714/)

● JavaScript側からCSSを操作してみよう

● Tableに行を追加してみよう

●
要素にエフェクトをかけてみよう

● Ajaxを使ってみよう

● Ajaxを使ってみよう - 応用編

jQueryプラグイン
●
世の中には便利なプラグインが多数存在

コリスより抜粋
http://coliss.com/articles/build-
websites/operation/javascript/1229.ht
ml

ご清聴ありがとうございました

20110714 j queryベーシック

More Related Content

What's hot

Viewers also liked

Similar to 20110714 j queryベーシック

20110714 j queryベーシック