introduction to
jQuery
Ryuma Tsukano
jsCafe7
目次
● 概要
● 今日のお題
● ready
● jQuery関数
● jQueryオブジェクト
● セレクタ
● 要素の作成
● 要素の追加/削除
● これからの進め方
今日の方向性
● jQueryの基本
● 関連するjs基礎知識も概説/振り返り
● なるべく手を動かす
○ chromeのコンソールか
○ FirefoxのFirebugの準備を。
○ jQuery公式ページで試します
jQuery
● javascriptのライブラリ
● 基本的な処理を簡易化
○ DOM操作
○ イベント
○ アニメーション
○ Ajax
● クロスブラウザ対応
○ ブラウザ毎の違いをそこまで意識しなくて良い
最近2が出た
IE8以下が正式に対応しなくなった
● 世の中的にも
○ XPサポートもうすぐ終了
○ vista自動upgradeでie9
jQueryの呼び出し
■CDN
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
GoogleやMSにも有り
■ダウンロード
<script src="./j...
jQueryの呼び出し
$(document).ready(function(){
// ここにjQuery書く
});
上記のソースの中で、以下の順番で解説。
①$()
②document
③ready(function)
①$()
● $ は jQuery() の別名
○ = グローバル関数
● グローバル:どこからでも使える
○ page内のオブジェクトの一番上の親となる
windowオブジェクトに紐づいてる
● 関数:処理の固まりfunction(){ .....
中身を見てみよう
これが正体
②document
html自体が入ってる
DOMオブジェクト(tree上要素の固まり)
荻さんの資料より
無断拝借
手を動かす
①$(element) = jQuery(element)
DOMオブジェクトを
jQueryオブジェクトに変換
○ ※公式pageで$を調べる時はjQueryで調べる
● jQueryオブジェクト
○ jQuery関数によって返されるオブジェ...
③ready(fn)
jQueryのメソッド
DOMロード後操作可能時、関数を実行
(コールバック関数)
● コールバック
○ 電話番号伝えて折り返し相手からかけなおして
もらう事(=callback)
○ あるイベント後に、任意の処理を実行
この処理の意味
①$(②document).③ready(④function(){
// ここにjQuery書く
});
①jQueryで取得した
②HTML全体のDOMが
③ロードされた時に、
④コールバック関数を実行
何故必要?
ブラウザは上からDOMを構築
● 例)HTML内
○ 上:jQueryの処理
○ 下:操作したいhtmlの要素
■ =>DOMが存在しない状態で、要素を取るとエラーに
なる
■ =>そこでコールバック指定しておく
■ (準備出来たら...
jQueryの呼び出しの短縮系
$(document).ready(function(){
//ここに書く
}
■上記と同じ意味(短縮系)
$(function(){
//ここに書く
});
jQuery関数
色々指定可能。
1. jQuery(element)
a. 先程使った(①+②)。DOMから要素を取得。
2. jQuery(callback)
a. 今話した$(document).ready(③)の代わり。
3. jQue...
jQueryのセレクター
$(expression)
● expression : css + original
● html上の任意の要素をjQueryオブジェクトと
して取得できる。
例)
<div id = "main">jscafe</...
試してみよう
$('#menu-top')
セレクタの種類
いっぱいある。
http://api.jquery.com/category/selectors/
今日は代表的な物
● 基本
● 関係
● 順番
基本的なexpression
● id : #
○ ex) $('#main')
● class : .
○ ex) $('.top-logo')
● tag : タグ名
○ ex) $('div')
● 属性 : [属性='値']
○ ex)...
関係を表すexpression
● 子(直下のタグ) : >
○ ex) $('ul > li')
● 子孫 : 空白
○ ex) $('div span')
● 隣接(次のタグ) : +
○ ex) $('header + h1')
● グル...
順番
● 最初/最後: :first / :last
○ ex) $('li:first') / $('li:last')
● 奇数/偶数: :even / :odd
○ ex) $('li:even') / $('li:odd')
● 要素特...
やってみよう
今までの組み合わせて
$('.menu > li:eq(3)')
とか
$("[title='jQuery']")
とかね
jQueryオブジェクト
基本的にマッチした複数の要素が入ってる
jQueryオブジェクト
≒配列
実際、配列ではない
配列について
jsの型の1つ
複数の値が入った固まり
値格納
x = ["yamada", "tanaka", "ito"]
値呼び出し
x[1]
=> "tanaka"
0
※0から
始まる
1 2
xという箱
jQueryオブジェクトと配列
jQueryオブジェクト≒配列
[index]で値を取得できる
● 0から始まるので、ご注意を
$(...).get(0)でも一緒
selectorで早く取得する方法
● idを指定した方が良い
○ jQueryの内部
■ id => getElementByIdで一発取得。
● ex) $(‘#main’)
■ 他 => getElementsByTagNameした後、j...
早く取得するために:cache
● 何度も呼び出す要素は変数に入れる
○ そうしないと、何度も同じ処理を繰り返す
$("#main").append('<h1>test</h1>')
$("#main").append('<div>abc</d...
早く取得するために:cache+find
要素.find(セレクタ)
○ 要素の下の要素を取得できる(要素絞れる)
$("#main").append('<h1>test</h1>')
$("#main").append('<div></div...
早く取得するために:メソッドチェー
ン
変数に入れる代わりにチェーン状に繋げる事も
出来る。
● 改行等書き方を工夫しないと読み辛いの
で注意
$("#main").append('<h1>test</h1>').append('<div></...
jQuery関数
色々指定可能。
1. jQuery(element)
a. 先程使った。DOMから要素を取得。
2. jQuery(callback)
a. $(document).readyの代わり。
3. jQuery(expressio...
要素を作成
ex)
$("<div id='test'>this is test</div>")
$(html)
html要素を作れる
違う書き方
ex)
var x = $("<div id='test'>this is test</div>")
var x = $("<div>",
{ id : "test",
text : "this is test"})
$(html,...
オブジェクトとは?
型の1つ。
複数のキーと値を持ったデータの固まり
例)
yamada = {};
yamada[age] = 28; //ブラケット記法
yamada.name = '山田'; //ドット記法
yamada = {age:2...
ちなみに
htmlに、小要素入れると階層作れる
ex)
var x = $("<div>",
{ html : $('<span>',
{ text : 'jscafe'}
)
}
)
=> <div><span>jscafe</span></...
要素の追加
対象要素.append(追加したい要素)
htmlに追加出来る
var x = $("<li>",
{ class : "menu-item",
html : $('<a>',
{ text : 'jscafe',
href : '...
ためしてみる
ちなみに、client側のhtml内だけの話で
特に公式Page自体をハックしてる
訳ではないので、ご安心を。
append(html)
appendの引数に直接html書いても良い
$('ul#menu-top').append(
"<li class='menu-item'>
<a href = 'http://www.facebook.com/gr...
複数マッチ時どうなる?
複数の要素内に追加される
要素の追加
● 要素内の先頭に追加 : prepend()
○ ex) $('ul').prepend('<li id='first'></li>')
● 要素内の最後に追加:append()
○ ex) $('ul').prepend('<l...
要素の削除
要素.remove()
例)さっきのjscafeを消す
$('li.menu-item:last').remove()
jQuery公式ページ
今日やった事で色々遊んでみて。
● menuの奇数に要素追加するとか
● downloadのurlを取得するとか
● 右上のリンクに要素追加/削除するとか
これからの進め方
1回目:jQuery関数/セレクタ(今日)
2回目:要素の操作とイベント
3回目:アニメーションとAjax
おしまい
Upcoming SlideShare
Loading in …5
×

公式page改ざんで学ぶjQuery入門 (jscafe7)

2,003 views

Published on

jQueryの基本。全3回の1回目。jQueryの公式ページをjQueryで色々変えてみながら、jQueryの基本操作を学んで行く。

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

No Downloads
Views
Total views
2,003
On SlideShare
0
From Embeds
0
Number of Embeds
492
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

公式page改ざんで学ぶjQuery入門 (jscafe7)

  1. 1. introduction to jQuery Ryuma Tsukano jsCafe7
  2. 2. 目次 ● 概要 ● 今日のお題 ● ready ● jQuery関数 ● jQueryオブジェクト ● セレクタ ● 要素の作成 ● 要素の追加/削除 ● これからの進め方
  3. 3. 今日の方向性 ● jQueryの基本 ● 関連するjs基礎知識も概説/振り返り ● なるべく手を動かす ○ chromeのコンソールか ○ FirefoxのFirebugの準備を。 ○ jQuery公式ページで試します
  4. 4. jQuery ● javascriptのライブラリ ● 基本的な処理を簡易化 ○ DOM操作 ○ イベント ○ アニメーション ○ Ajax ● クロスブラウザ対応 ○ ブラウザ毎の違いをそこまで意識しなくて良い
  5. 5. 最近2が出た IE8以下が正式に対応しなくなった ● 世の中的にも ○ XPサポートもうすぐ終了 ○ vista自動upgradeでie9
  6. 6. jQueryの呼び出し ■CDN <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> GoogleやMSにも有り ■ダウンロード <script src="./jquery-1.9.1-min.js"></script>
  7. 7. jQueryの呼び出し $(document).ready(function(){ // ここにjQuery書く }); 上記のソースの中で、以下の順番で解説。 ①$() ②document ③ready(function)
  8. 8. ①$() ● $ は jQuery() の別名 ○ = グローバル関数 ● グローバル:どこからでも使える ○ page内のオブジェクトの一番上の親となる windowオブジェクトに紐づいてる ● 関数:処理の固まりfunction(){ ... } ○ ファクトリ関数 ■ (コンストラクタではないのでnewしない)
  9. 9. 中身を見てみよう これが正体
  10. 10. ②document html自体が入ってる DOMオブジェクト(tree上要素の固まり) 荻さんの資料より 無断拝借
  11. 11. 手を動かす
  12. 12. ①$(element) = jQuery(element) DOMオブジェクトを jQueryオブジェクトに変換 ○ ※公式pageで$を調べる時はjQueryで調べる ● jQueryオブジェクト ○ jQuery関数によって返されるオブジェクト ○ ドキュメント要素+jQueryメソッド
  13. 13. ③ready(fn) jQueryのメソッド DOMロード後操作可能時、関数を実行 (コールバック関数) ● コールバック ○ 電話番号伝えて折り返し相手からかけなおして もらう事(=callback) ○ あるイベント後に、任意の処理を実行
  14. 14. この処理の意味 ①$(②document).③ready(④function(){ // ここにjQuery書く }); ①jQueryで取得した ②HTML全体のDOMが ③ロードされた時に、 ④コールバック関数を実行
  15. 15. 何故必要? ブラウザは上からDOMを構築 ● 例)HTML内 ○ 上:jQueryの処理 ○ 下:操作したいhtmlの要素 ■ =>DOMが存在しない状態で、要素を取るとエラーに なる ■ =>そこでコールバック指定しておく ■ (準備出来たら電話のかけ直しのイメージ)
  16. 16. jQueryの呼び出しの短縮系 $(document).ready(function(){ //ここに書く } ■上記と同じ意味(短縮系) $(function(){ //ここに書く });
  17. 17. jQuery関数 色々指定可能。 1. jQuery(element) a. 先程使った(①+②)。DOMから要素を取得。 2. jQuery(callback) a. 今話した$(document).ready(③)の代わり。 3. jQuery(expression) a. selectorを指定して要素を取得。 4. jQuery(html) a. htmlを作れる。
  18. 18. jQueryのセレクター $(expression) ● expression : css + original ● html上の任意の要素をjQueryオブジェクトと して取得できる。 例) <div id = "main">jscafe</div> $('#main') で、上記のタグを取得
  19. 19. 試してみよう $('#menu-top')
  20. 20. セレクタの種類 いっぱいある。 http://api.jquery.com/category/selectors/ 今日は代表的な物 ● 基本 ● 関係 ● 順番
  21. 21. 基本的なexpression ● id : # ○ ex) $('#main') ● class : . ○ ex) $('.top-logo') ● tag : タグ名 ○ ex) $('div') ● 属性 : [属性='値'] ○ ex) $("[title='jQuery']") ○ 属性!=値で否定 / 属性^=値で始まるもの / 属 性$=値で終わるもの / 属性*=値で含みもの
  22. 22. 関係を表すexpression ● 子(直下のタグ) : > ○ ex) $('ul > li') ● 子孫 : 空白 ○ ex) $('div span') ● 隣接(次のタグ) : + ○ ex) $('header + h1') ● グループ: , ○ ex) $('liked_button, comment_button')
  23. 23. 順番 ● 最初/最後: :first / :last ○ ex) $('li:first') / $('li:last') ● 奇数/偶数: :even / :odd ○ ex) $('li:even') / $('li:odd') ● 要素特定: :eq/:lt/:gt ○ equal(等しい) ○ less than(低い,未満) ○ greater than(高い,超過) ○ ex) $('li:eq(2)')
  24. 24. やってみよう 今までの組み合わせて $('.menu > li:eq(3)') とか $("[title='jQuery']") とかね
  25. 25. jQueryオブジェクト 基本的にマッチした複数の要素が入ってる jQueryオブジェクト ≒配列 実際、配列ではない
  26. 26. 配列について jsの型の1つ 複数の値が入った固まり 値格納 x = ["yamada", "tanaka", "ito"] 値呼び出し x[1] => "tanaka" 0 ※0から 始まる 1 2 xという箱
  27. 27. jQueryオブジェクトと配列 jQueryオブジェクト≒配列 [index]で値を取得できる ● 0から始まるので、ご注意を $(...).get(0)でも一緒
  28. 28. selectorで早く取得する方法 ● idを指定した方が良い ○ jQueryの内部 ■ id => getElementByIdで一発取得。 ● ex) $(‘#main’) ■ 他 => getElementsByTagNameした後、js側で全部 check。なので、idより時間かかる。 ● 止むを得ずid以外を使う時、タグを付けるとまだマシ(要素 が絞られるから)(場合によっては10倍早い) ● ex) $('div.main')
  29. 29. 早く取得するために:cache ● 何度も呼び出す要素は変数に入れる ○ そうしないと、何度も同じ処理を繰り返す $("#main").append('<h1>test</h1>') $("#main").append('<div>abc</div>') var main_tag = $("#main") main_tag.append('<h1>test</h1>') main_tag.append('<div>abc</div>')
  30. 30. 早く取得するために:cache+find 要素.find(セレクタ) ○ 要素の下の要素を取得できる(要素絞れる) $("#main").append('<h1>test</h1>') $("#main").append('<div></div>') $("#main > div").append("<a href='#'>test</a>") var main_tag = $("#main") main_tag.append('<h1>test</h1>') main_tag.append('<div></div>') main_tag.find('div').append("<a href='#'>test</a>")
  31. 31. 早く取得するために:メソッドチェー ン 変数に入れる代わりにチェーン状に繋げる事も 出来る。 ● 改行等書き方を工夫しないと読み辛いの で注意 $("#main").append('<h1>test</h1>').append('<div></div>'). find('div').append("<a href='#'>test</a>")
  32. 32. jQuery関数 色々指定可能。 1. jQuery(element) a. 先程使った。DOMから要素を取得。 2. jQuery(callback) a. $(document).readyの代わり。 3. jQuery(expression) a. selectorを指定して要素を取得。 4. jQuery(html) a. htmlを作れる。
  33. 33. 要素を作成 ex) $("<div id='test'>this is test</div>") $(html) html要素を作れる
  34. 34. 違う書き方 ex) var x = $("<div id='test'>this is test</div>") var x = $("<div>", { id : "test", text : "this is test"}) $(html, attributes) 属性をオブジェクトとして書ける
  35. 35. オブジェクトとは? 型の1つ。 複数のキーと値を持ったデータの固まり 例) yamada = {}; yamada[age] = 28; //ブラケット記法 yamada.name = '山田'; //ドット記法 yamada = {age:28, name:'山田'}
  36. 36. ちなみに htmlに、小要素入れると階層作れる ex) var x = $("<div>", { html : $('<span>', { text : 'jscafe'} ) } ) => <div><span>jscafe</span></div>
  37. 37. 要素の追加 対象要素.append(追加したい要素) htmlに追加出来る var x = $("<li>", { class : "menu-item", html : $('<a>', { text : 'jscafe', href : 'http://www.facebook.com/groups/565794633445499/' })}) $('ul#menu-top').append(x)
  38. 38. ためしてみる ちなみに、client側のhtml内だけの話で 特に公式Page自体をハックしてる 訳ではないので、ご安心を。
  39. 39. append(html) appendの引数に直接html書いても良い $('ul#menu-top').append( "<li class='menu-item'> <a href = 'http://www.facebook.com/groups/565794633445499/'> jscafe </a> </li>" )
  40. 40. 複数マッチ時どうなる? 複数の要素内に追加される
  41. 41. 要素の追加 ● 要素内の先頭に追加 : prepend() ○ ex) $('ul').prepend('<li id='first'></li>') ● 要素内の最後に追加:append() ○ ex) $('ul').prepend('<li id='second'></li>') ● 要素の前に追加:before() ○ ex) $('li#first').prepend('<li id='zero'></li>') ● 要素の後に追加:after() ○ ex) $('li#second').prepend('<li id='last'></li>')
  42. 42. 要素の削除 要素.remove() 例)さっきのjscafeを消す $('li.menu-item:last').remove()
  43. 43. jQuery公式ページ 今日やった事で色々遊んでみて。 ● menuの奇数に要素追加するとか ● downloadのurlを取得するとか ● 右上のリンクに要素追加/削除するとか
  44. 44. これからの進め方 1回目:jQuery関数/セレクタ(今日) 2回目:要素の操作とイベント 3回目:アニメーションとAjax
  45. 45. おしまい

×