公式page改ざんで学ぶjQuery入門 (jscafe7)
•
1 gostou•2,394 visualizações
jQueryの基本。全３回の１回目。jQueryの公式ページをjQueryで色々変えてみながら、jQueryの基本操作を学んで行く。
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (18)
Semelhante a 公式page改ざんで学ぶjQuery入門 (jscafe7)
Semelhante a 公式page改ざんで学ぶjQuery入門 (jscafe7) (20)
Mais de Ryuma Tsukano
Último
Último (11)
公式page改ざんで学ぶjQuery入門 (jscafe7)
- 2. 目次 ● 概要 ● 今日のお題 ● ready ● jQuery関数 ● jQueryオブジェクト ● セレクタ ● 要素の作成 ● 要素の追加/削除 ● これからの進め方
- 3. 今日の方向性 ● jQueryの基本 ● 関連するjs基礎知識も概説／振り返り ● なるべく手を動かす ○ chromeのコンソールか ○ FirefoxのFirebugの準備を。 ○ jQuery公式ページで試します
- 4. jQuery ● javascriptのライブラリ ● 基本的な処理を簡易化 ○ DOM操作 ○ イベント ○ アニメーション ○ Ajax ● クロスブラウザ対応 ○ ブラウザ毎の違いをそこまで意識しなくて良い
- 5. 最近2が出た IE8以下が正式に対応しなくなった ● 世の中的にも ○ XPサポートもうすぐ終了 ○ vista自動upgradeでie9
- 8. ①$() ● $ は jQuery() の別名 ○ = グローバル関数 ● グローバル：どこからでも使える ○ page内のオブジェクトの一番上の親となる windowオブジェクトに紐づいてる ● 関数：処理の固まりfunction(){ ... } ○ ファクトリ関数 ■ (コンストラクタではないのでnewしない)
- 11. 手を動かす
- 12. ①$(element) = jQuery(element) DOMオブジェクトを jQueryオブジェクトに変換 ○ ※公式pageで$を調べる時はjQueryで調べる ● jQueryオブジェクト ○ jQuery関数によって返されるオブジェクト ○ ドキュメント要素+jQueryメソッド
- 13. ③ready(fn) jQueryのメソッド DOMロード後操作可能時、関数を実行 （コールバック関数） ● コールバック ○ 電話番号伝えて折り返し相手からかけなおして もらう事(=callback) ○ あるイベント後に、任意の処理を実行
- 15. 何故必要？ ブラウザは上からDOMを構築 ● 例）HTML内 ○ 上：jQueryの処理 ○ 下：操作したいhtmlの要素 ■ =>DOMが存在しない状態で、要素を取るとエラーに なる ■ =>そこでコールバック指定しておく ■ (準備出来たら電話のかけ直しのイメージ)
- 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') で、上記のタグを取得
- 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)')
- 26. 配列について jsの型の1つ 複数の値が入った固まり 値格納 x = ["yamada", "tanaka", "ito"] 値呼び出し x[1] => "tanaka" 0 ※0から 始まる 1 2 xという箱
- 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>")
- 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)
- 39. append(html) appendの引数に直接html書いても良い $('ul#menu-top').append( "<li class='menu-item'> <a href = 'http://www.facebook.com/groups/565794633445499/'> jscafe </a> </li>" )
- 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>')
- 43. jQuery公式ページ 今日やった事で色々遊んでみて。 ● menuの奇数に要素追加するとか ● downloadのurlを取得するとか ● 右上のリンクに要素追加/削除するとか
- 45. おしまい