jqueryの基本をまとめておく

jquery入門用のメモ．

jqueryの読み込み(前準備)

html内に次の文を書きます． 必須です．

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

jqueryをソース内で使用する

必須です．

$(function(){
  //jqueryをつかった処理をここに書く
});

htmlの要素を選択して処理をする(selector)

下のソースのselectorと書かれた部分を様々に変化させることで， html内の要素選択ができます．選択される要素はselectorに見合う要素全て． $()内はそれらの選択された要素の配列形式のオブジェクトになっています．(選択された要素が一つでも配列になっているので注意)．

$('selector')

• idで id='images'の要素を表示

  console.log($('#images'));

• classで class='images'の要素を表示

  console.log($('.images'));

• タグで <img>の要素を表示

  console.log($('img'));

• 属性で <input type='button'>の要素を表示

  console.log($('input[type="button"]'));

(補足：buttonなど特定の属性であれば，

  console.log($('input:button'));

でも同じ)

処理を書く

• 要素内のtextを表示

$('#id').text();

• 要素内のtextを変更

$('#id').text('text');

• 要素内のhtmlを表示

$('#id').html();

• 要素内のhtmlを変更

$('#id').html('<p>へんこうしました<p>');

• 要素内のvalueの値を表示

$('#id').val();

• 要素内のvalueの値を変更

$('#id').val(3);

(val()の引数は文字列型でなくてもいい．)

処理のまとめ

同じような形式で，表示したいときは$('selector').関数名() 変更は$('selector').関数名("変更した値")とすればいいです．

属性，スタイルの操作関数

関数	説明
attr(属性名)	指定した属性の値を取得する
attr(属性名, 属性値)	指定した属性の値を変更する
css(プロパティ名)	指定したCSSプロパティの値を取得する
css(プロパティ名,値)	指定したCSSプロパティの値を設定する

イベント

• クリックした時のイベント

$('selector').click(function(){
    // イベント時の処理
})

アニメーション

やはり，$('selector').関数の形． 簡単にアニメーションを実行することができます．

関数	説明
show(speed)	speedの時間をかけて要素を表示
hide(speed)	speedの時間をかけて要素を非表示