Your SlideShare is downloading. ×
0
20110714 j queryベーシック
20110714 j queryベーシック
20110714 j queryベーシック
20110714 j queryベーシック
20110714 j queryベーシック
20110714 j queryベーシック
20110714 j queryベーシック
20110714 j queryベーシック
20110714 j queryベーシック
20110714 j queryベーシック
20110714 j queryベーシック
20110714 j queryベーシック
20110714 j queryベーシック
20110714 j queryベーシック
20110714 j queryベーシック
20110714 j queryベーシック
20110714 j queryベーシック
20110714 j queryベーシック
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

20110714 j queryベーシック

1,035

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,035
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×