一橋生なつおのブログ

一橋生起業家なつおのブログ

なつおの生活や考え方について書いています。

jQuery 基本

・基本形

$(function(){
処理
});

セレクタでDOM要素を指定してメソッドで処理する
・> 直下の子要素
・空白 それ以外の要素
・+ 隣接する要素
・, 複数指定

・フィルタ( :eq, :gt, :lt, :even, :odd, :contains, :first, :last)
セレクタを細かく指定する

・メソッドによるDOM要素の指定(セレクタ直後)
parent(), chilidren(), next(), prev(), siblings()

・属性を細かく指定する
=, !=, *=, ^=(先頭), $=(末尾)

・addClass, removeClass クラスの追加削除

・attr HTML属性の値を取得変更

・カスタムデータ属性 JSでの操作が容易になる、dataで取得変更

・text ただテキストを取得変更

・html html要素ごと取得変更

・val value属性の値を取得変更

・empty 要素を空にする

・remove セレクタごと削除する

・before, after 要素の前後 ※next, prevは前後の要素

・prepend, append 末尾、先頭

エフェクト
・hide/show, fadeIn/fadeOut, toggle
第一引数に時間、第二引数にコールバック関数入れられる

$('#box').fadeIn(800, function(){
  alert('done');
});

イベント
・click, mouseover, mouseout, focus, blur, change

$('#box').click(function(){
  $(this).css('background', 'red');
});

・on

on('event', 'selecta', function)

<b>Ajax</b>
・load, $.get, $.post
・非同期なので順序に気を付ける、コールバック関数を利用する
・ページをリダイレクトすることなく情報を書き換えることができる、PHPなどに値を渡すことでサーバー側のスクリプトも書き換えられる