jQuery 簡単なメソッドの書き方使い方

2014-08-13

jQueryのメソッドの書き方

jQueryでは$('div')のようにして取得した要素をオブジェクトとして格納しています。その値にたいして様々な処理を行うのがメソッド。

メソッドの書き方もとても簡単。セレクタの後ろに.で挟んでメソッド名を記述するだけ。

var get_text = $('#id-name').text();

メソッドの種類は非常にたくさんあるので、詳細は公式サイトのAPIドキュメントを参照して下さい。

複数のメソッドをつなげて記述することもできます。

$('#id-name').text('変更完了！').addClass('changed');

複数のメソッドをつなげた場合、どうしても見づらくなってしまう場合は改行も可。

$('#id-name')
  .text('変更完了！')
  .addClass('changed');

jQueryをページが読み込まれた後に動作させるため、通常は以下のような記述をしてその中身に処理を書いていきます。

$(document).ready(function(){

  // ここに処理

});

この書き方だと少し長くなって面倒なので以下のような書き方も可能。

$(function(){

  // ここに処理

});

こうすることでページが読み込まれた時点で処理を実行できます。

jQueryではCSSを書き換えるのも簡単に行えます。

$('#id-name').css('color' , '#333');

複数のセレクタを変更する場合は以下のように複数行で記述することができます。

$('#id-name').css({
  'color': '#333',
  'font-size': '14px',
  'font-wight': 'bold'
});