introduction to jQuery #jscafe

最近2が出て正式にIE8対応しなくなった。
というか、IE8マジ滅びよ

①$()
②document
③ready(function)

どこからでも参照できる
ファクトリ関数であり、コンストラクタではないのでnewはしない

$(element) = jQuery(element)
DOM(tree上になった要素の塊)
DOMをjQueryオブジェクトに変換する

ready jQueryのメソッド
DOMロード後操作可能時、関数を実行（コールバック関数）かけなおしてきてね

ブラウザは上からDOMを構築する

jQuery処理
操作したいhtmlの要素

欲しいDOMが存在しない状態で要素を取るとエラーになってしまうので、コールバックを指定する必要がある

つまり、jQuery使いたければ $(document).readyとかいうおまじないを使おうよって話。

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

jQueryオブジェクトは配列に近い構造をしている。ただし配列とはちょっと違うけど。

早く取得するためにはidを指定したほうがよい id getElementByIdで一発取得 $('#hoge')とか
早く取得するためには変数を利用したほうがよい

var main_tag = $("#main");
main_tag.append('<h1>test</h1>');
main_tag.append('<div>abc</div>');

早く取得するためにはメソッドチェーンを利用してもよい
(ただし読みづらくなるから注意)

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

HTMLを作る事も出来る。属性をオブジェクトとして書ける
(ちなみに、階層を作ることも出来る)

var x = $("<div>",
				{ id : "test",
				  text : "this is test"});
var y = $("<div>",
  { html : $('<span>',
    { text : 'jscafe'}
   )
   }
 )

オブジェクトとは？

型の一つで、複数のキーと値を持ったデータの固まり

var x = $("<li>",
  { class : "menu-item",
    html : $('<a>',
    { text : 'jscafe',
  href : 'http://www.facebook.com/groups/565794633445499/' })});
$('ul#menu-top').append(x);