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