View
1.380
Download
3
Category
Preview:
DESCRIPTION
jQueryの基本。全3回の1回目。jQueryの公式ページをjQueryで色々変えてみながら、jQueryの基本操作を学んで行く。
Citation preview
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)属性をオブジェクトとして書ける
オブジェクトとは?
型の1つ。複数のキーと値を持ったデータの固まり
例)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を取得するとか● 右上のリンクに要素追加/削除するとか
これからの進め方
1回目:jQuery関数/セレクタ(今日)
2回目:要素の操作とイベント3回目:アニメーションとAjax
おしまい
Recommended