Webサイト制作におけるjQueryのメソッドの基本的な書き方

Webサイト制作のコーディングにおいて用いるjQueryのメソッドの基本的な書き方をまとめておく。

まずは記述の共通ルールを確認する。

以下、記述例。

$('セレクタ名').メソッド名(パラメータ);

ここで、基本的なメソッドの1つであるcssメソッドについて説明しておく。
cssメソッドは、名前の通り、cssを操作するためのメソッドで、下記のように記述する。

$('セレクタ名').css('プロパティ名','値');

これをより具体的に書くと、以下のようになる。

$('#sample').css('color','blue');

また、複数のメソッドをドットで繋いでまとめて指定する方法をメソッドチェーンと呼び、
下記のように記述する。

$('セレクタ名').メソッド1(パラメータ).メソッド2(パラメータ).…

以下、具体例。

$('#sample').css('color','blue').width(100).height(50);

更に、同一のメソッドに対して、複数のプロパティをまとめて指定することができる。
書き方のポイントは以下の通り。

$('セレクタ名').メソッド名({'プロパティ1':'値','プロパティ2':'値',…});

以下、具体例。

$('#sample').css({
　'color':'green',
　'background':'pink'
});

複数のプロパティを指定しつつ、メソッドチェーンで書くと、
以下のようになる。

$('#sample').css({
　'color':'green',
　'background':'pink'
}).width(100);