introduction tojQueryRyuma 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="./jquery-1.9.1-min.js"></script>

jQueryの呼び出し

$(document).ready(function(){

// ここにjQuery書く

});

上記のソースの中で、以下の順番で解説。①$()②document③ready(function)

①$()

● $ は jQuery() の別名○ = グローバル関数

● グローバル：どこからでも使える○ page内のオブジェクトの一番上の親となる

windowオブジェクトに紐づいてる

● 関数：処理の固まりfunction(){ ... }○ ファクトリ関数

■ (コンストラクタではないのでnewしない)

中身を見てみよう

これが正体

②document

html自体が入ってるDOMオブジェクト(tree上要素の固まり)

荻さんの資料より無断拝借

手を動かす

①$(element) = jQuery(element)

DOMオブジェクトをjQueryオブジェクトに変換

○ ※公式pageで$を調べる時はjQueryで調べる

● 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. jQuery(expression)a. selectorを指定して要素を取得。

4. jQuery(html)a. htmlを作れる。

jQueryのセレクター

$(expression)● expression : css + original● html上の任意の要素をjQueryオブジェクトと

して取得できる。

例）<div id = "main">jscafe</div>

$('#main')で、上記のタグを取得

試してみよう

$('#menu-top')

セレクタの種類

いっぱいある。http://api.jquery.com/category/selectors/

今日は代表的な物● 基本● 関係● 順番

基本的なexpression

● id : #○ ex) $('#main')

● class : .○ ex) $('.top-logo')

● tag : タグ名○ ex) $('div')

● 属性 : [属性='値']○ ex) $("[title='jQuery']")○ 属性!=値で否定 / 属性^=値で始まるもの / 属

性$=値で終わるもの / 属性*=値で含みもの

関係を表すexpression

● 子(直下のタグ) : >○ ex) $('ul > li')

● 子孫 : 空白○ ex) $('div span')

● 隣接(次のタグ) : +○ ex) $('header + h1')

● グループ: ,○ ex) $('liked_button, comment_button')

順番

● 最初/最後： :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)')

やってみよう

今までの組み合わせて$('.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した後、js側で全部check。なので、idより時間かかる。● 止むを得ずid以外を使う時、タグを付けるとまだマシ(要素

が絞られるから)(場合によっては10倍早い)● ex) $('div.main')

早く取得するために：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>')

早く取得するために: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>")

早く取得するために:メソッドチェーン

変数に入れる代わりにチェーン状に繋げる事も出来る。

● 改行等書き方を工夫しないと読み辛いので注意

$("#main").append('<h1>test</h1>').append('<div></div>').find('div').append("<a href='#'>test</a>")

jQuery関数

色々指定可能。1. jQuery(element)

a. 先程使った。DOMから要素を取得。

2. jQuery(callback)a. $(document).readyの代わり。

3. jQuery(expression)a. selectorを指定して要素を取得。

4. jQuery(html)a. htmlを作れる。

要素を作成

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, attributes)属性をオブジェクトとして書ける

オブジェクトとは?

型の１つ。複数のキーと値を持ったデータの固まり

例)yamada = {};yamada[age] = 28; //ブラケット記法yamada.name = '山田'; //ドット記法

yamada = {age:28, name:'山田'}

ちなみに

htmlに、小要素入れると階層作れる

ex)var x = $("<div>",

{ html : $('<span>', { text : 'jscafe'} )

} )

=> <div><span>jscafe</span></div>

要素の追加

対象要素.append(追加したい要素)htmlに追加出来る

var x = $("<li>", { class : "menu-item", html : $('<a>',

{ text : 'jscafe', href : 'http://www.facebook.com/groups/565794633445499/' })})

$('ul#menu-top').append(x)

ためしてみる

ちなみに、client側のhtml内だけの話で特に公式Page自体をハックしてる訳ではないので、ご安心を。

append(html)

appendの引数に直接html書いても良い

$('ul#menu-top').append( "<li class='menu-item'> <a href = 'http://www.facebook.com/groups/565794633445499/'> jscafe </a> </li>")

複数マッチ時どうなる？

複数の要素内に追加される

要素の追加

● 要素内の先頭に追加 : 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>')

要素の削除

要素.remove()

例）さっきのjscafeを消す

$('li.menu-item:last').remove()

jQuery公式ページ

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

これからの進め方

１回目：jQuery関数/セレクタ(今日)

２回目：要素の操作とイベント３回目：アニメーションとAjax

おしまい