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

1. introduction to
jQuery
Ryuma Tsukano
jsCafe7

2. 目次
● 概要
● 今日のお題
● ready
● jQuery関数
● jQueryオブジェクト
● セレクタ
● 要素の作成
● 要素の追加/削除
● これからの進め方

3. 今日の方向性
● jQueryの基本
● 関連するjs基礎知識も概説／振り返り
● なるべく手を動かす
○ chromeのコンソールか
○ FirefoxのFirebugの準備を。
○ jQuery公式ページで試します

4. jQuery
● javascriptのライブラリ
● 基本的な処理を簡易化
○ DOM操作
○ イベント
○ アニメーション
○ Ajax
● クロスブラウザ対応
○ ブラウザ毎の違いをそこまで意識しなくて良い

5. 最近2が出た
IE8以下が正式に対応しなくなった
● 世の中的にも
○ XPサポートもうすぐ終了
○ vista自動upgradeでie9

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. jQueryの呼び出し
$(document).ready(function(){
// ここにjQuery書く
});
上記のソースの中で、以下の順番で解説。
①$()
②document
③ready(function)

8. ①$()
● $ は jQuery() の別名
○ = グローバル関数
● グローバル：どこからでも使える
○ page内のオブジェクトの一番上の親となる
windowオブジェクトに紐づいてる
● 関数：処理の固まりfunction(){ ... }
○ ファクトリ関数
■ (コンストラクタではないのでnewしない)

9. 中身を見てみよう
これが正体

10. ②document
html自体が入ってる
DOMオブジェクト(tree上要素の固まり)
荻さんの資料より
無断拝借

11. 手を動かす

12. ①$(element) = jQuery(element)
DOMオブジェクトを
jQueryオブジェクトに変換
○ ※公式pageで$を調べる時はjQueryで調べる
● jQueryオブジェクト
○ jQuery関数によって返されるオブジェクト
○ ドキュメント要素+jQueryメソッド

13. ③ready(fn)
jQueryのメソッド
DOMロード後操作可能時、関数を実行
（コールバック関数）
● コールバック
○ 電話番号伝えて折り返し相手からかけなおして
もらう事(=callback)
○ あるイベント後に、任意の処理を実行

14. この処理の意味
①$(②document).③ready(④function(){
// ここにjQuery書く
});
①jQueryで取得した
②HTML全体のDOMが
③ロードされた時に、
④コールバック関数を実行

15. 何故必要？
ブラウザは上からDOMを構築
● 例）HTML内
○ 上：jQueryの処理
○ 下：操作したいhtmlの要素
■ =>DOMが存在しない状態で、要素を取るとエラーに
なる
■ =>そこでコールバック指定しておく
■ (準備出来たら電話のかけ直しのイメージ)

16. jQueryの呼び出しの短縮系
$(document).ready(function(){
//ここに書く
}
■上記と同じ意味(短縮系)
$(function(){
//ここに書く
});

17. jQuery関数
色々指定可能。
1. jQuery(element)
a. 先程使った(①+②)。DOMから要素を取得。
2. jQuery(callback)
a. 今話した$(document).ready(③)の代わり。
3. jQuery(expression)
a. selectorを指定して要素を取得。
4. jQuery(html)
a. htmlを作れる。

18. jQueryのセレクター
$(expression)
● expression : css + original
● html上の任意の要素をjQueryオブジェクトと
して取得できる。
例）
<div id = "main">jscafe</div>
$('#main')
で、上記のタグを取得

19. 試してみよう
$('#menu-top')

20. セレクタの種類
いっぱいある。
http://api.jquery.com/category/selectors/
今日は代表的な物
● 基本
● 関係
● 順番

21. 基本的なexpression
● id : #
○ ex) $('#main')
● class : .
○ ex) $('.top-logo')
● tag : タグ名
○ ex) $('div')
● 属性 : [属性='値']
○ ex) $("[title='jQuery']")
○ 属性!=値で否定 / 属性^=値で始まるもの / 属
性$=値で終わるもの / 属性*=値で含みもの

22. 関係を表すexpression
● 子(直下のタグ) : >
○ ex) $('ul > li')
● 子孫 : 空白
○ ex) $('div span')
● 隣接(次のタグ) : +
○ ex) $('header + h1')
● グループ: ,
○ ex) $('liked_button, comment_button')

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. やってみよう
今までの組み合わせて
$('.menu > li:eq(3)')
とか
$("[title='jQuery']")
とかね

25. jQueryオブジェクト
基本的にマッチした複数の要素が入ってる
jQueryオブジェクト
≒配列
実際、配列ではない

26. 配列について
jsの型の1つ
複数の値が入った固まり
値格納
x = ["yamada", "tanaka", "ito"]
値呼び出し
x[1]
=> "tanaka"
0
※0から
始まる
1 2
xという箱

27. jQueryオブジェクトと配列
jQueryオブジェクト≒配列
[index]で値を取得できる
● 0から始まるので、ご注意を
$(...).get(0)でも一緒

28. selectorで早く取得する方法
● idを指定した方が良い
○ jQueryの内部
■ id => getElementByIdで一発取得。
● ex) $(‘#main’)
■ 他 => getElementsByTagNameした後、js側で全部
check。なので、idより時間かかる。
● 止むを得ずid以外を使う時、タグを付けるとまだマシ(要素
が絞られるから)(場合によっては10倍早い)
● ex) $('div.main')

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. 早く取得するために: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. 早く取得するために:メソッドチェー
ン
変数に入れる代わりにチェーン状に繋げる事も
出来る。
● 改行等書き方を工夫しないと読み辛いの
で注意
$("#main").append('<h1>test</h1>').append('<div></div>').
find('div').append("<a href='#'>test</a>")

32. jQuery関数
色々指定可能。
1. jQuery(element)
a. 先程使った。DOMから要素を取得。
2. jQuery(callback)
a. $(document).readyの代わり。
3. jQuery(expression)
a. selectorを指定して要素を取得。
4. jQuery(html)
a. htmlを作れる。

33. 要素を作成
ex)
$("<div id='test'>this is test</div>")
$(html)
html要素を作れる

34. 違う書き方
ex)
var x = $("<div id='test'>this is test</div>")
var x = $("<div>",
{ id : "test",
text : "this is test"})
$(html, attributes)
属性をオブジェクトとして書ける

35. オブジェクトとは?
型の１つ。
複数のキーと値を持ったデータの固まり
例)
yamada = {};
yamada[age] = 28; //ブラケット記法
yamada.name = '山田'; //ドット記法
yamada = {age:28, name:'山田'}

36. ちなみに
htmlに、小要素入れると階層作れる
ex)
var x = $("<div>",
{ html : $('<span>',
{ text : 'jscafe'}
)
}
)
=> <div><span>jscafe</span></div>

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. ためしてみる
ちなみに、client側のhtml内だけの話で
特に公式Page自体をハックしてる
訳ではないので、ご安心を。

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. 複数マッチ時どうなる？
複数の要素内に追加される

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. 要素の削除
要素.remove()
例）さっきのjscafeを消す
$('li.menu-item:last').remove()

43. jQuery公式ページ
今日やった事で色々遊んでみて。
● menuの奇数に要素追加するとか
● downloadのurlを取得するとか
● 右上のリンクに要素追加/削除するとか

44. これからの進め方
１回目：jQuery関数/セレクタ(今日)
２回目：要素の操作とイベント
３回目：アニメーションとAjax

45. おしまい