初心者向け：jQueryメソッドの基本的な書き方・メソッドチェーン

初心者向けに、jQueryメソッドの書き方とメソッドチェーンの指定方法を記載していきます。

jQueryメソッドの種類については、種類が沢山あることは理解できたけど「実際にどんなふうな書き方？」や、「同じ要素に対して複数のメソッドを指定するには？」「メソッドチェーン？」などの疑問を抱える初心者に向けて、解説していこうと思います。

jQueryメソッドの書き方自体も、簡単なものから複雑なものまで、色々とありますが、まずは基本的な書き方及びメソッドチェーンなどが理解できれば、後は、プログラミングの練習数をこなしていけば、徐々にスキルアップしていくものと思います。

という事で、それでは今回はッ、

・jQueryメソッドで要素のスタイルを操作
・要素のスタイルを操作：css()メソッド
・要素の幅を操作：width()メソッド
・複数のメソッドをつなげるメソッドチェーン
・要素のクラスを付ける：addClass()メソッド
・要素のクラスを削除する：removeClass()メソッド

上記について記載していこうと思います…。

jQueryメソッドで要素のスタイルを操作

それでは、セレクタの記事サンプルでも使用してきた「CSS系」のメソッドから記載していきます。
セレクタの記事サンプルでは、下記のようにテキストを赤くする命令を記述していました。

サンプルscript<script>
$(function(){
$(“.caution”).css(“color”,”red”);
});

上記はcss()メソッドを使い「color」を「red」にするという記述です。ただ色を赤にするだけであれば、わざわざjQueryを使わなくとも、初めからスタイルシートで記述すれば？と思う人もいる事と思います。

しかしながら、イベント系メソッドと組み合わせれば、「ユーザーが何らかの操作をしたときに、要素のスタイルを変更する」といったことが可能になります。

メソッドの記述方法について

メソッドの記述方法を記載してみます。
メソッドはセレクタの後に記述して、「.」ピリオドでつなぐように記述します。そして必ずメソッド名()のように、カッコを付けます。

そして1行が終ったら、「;」セミコロンを付けます。()の中にはパラメータ（具体的な値、と考えればOK！）というものを指定する場合もあります。また、指定しない場合もあります。

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

CSS系メソッドは、おもに要素のスタイルを変更するためのメソッドです。代表的なものをさらに具体的に記載していきます。

要素のスタイルを操作：css()メソッド

css()メソッドは、名前の通りcssでスタイルを操作するためのメソッドです。それでは下記にサンプルを記載してみます。

サンプルHTML<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#third”).css(“color”,”red”);
});
</script>
</head>
<body>
・・省略・・
<ul>
<li>HTML</li>
<li>CSS</li>
<li id=”third”>jQuery</li>
</ul>
・・省略・・
</body>

HTML
CSS
jQuery

css()メソッドによって、指定した要素のテキスト色が赤になりました。もちろんcolorやbackground-colorだけではなく、CSSの様々なプロパティを指定することが可能です。例えば、サンプルHTMLに下記のようなプロパティと値を指定することも可能です。

サンプル$(“#third”).css(“font-weight”,”bold”);
$(“#third”).css(“font-size”,”150%”);

要素の幅を操作：width()メソッド

width()メソッドは、要素の幅を操作するメソッドです。似ているものに、高さを操作するheight()メソッドもあります。

サンプルHTML2<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#third”).css(“color”,”red”);
$(“#third”).width(200);
});
</script>
</head>
<body>
・・省略・・
<ul>
<li>HTML</li>
<li>CSS</li>
<li id=”third”>jQuery</li>
</ul>
・・省略・・
</body>

HTML
CSS
jQuery

width()メソッドによって、thirdというidが付いたli要素の幅が200pxになりました。width(200)のように、()内に数値のみ記述すると、pxでの指定になりますが、width(“20em”)というように、ダブルクォーテーション（またはシングルクォーテーション）で囲み、単位を明示的に指定することも可能です。

複数のメソッドをつなげるメソッドチェーン

上記事記載したサンプルHTML2のコードを見てみると、1つの要素に対して、css()メソッドと、width()メソッドの2つが使われています。

サンプルHTML2<script>
$(function(){
$(“#third”).css(“color”,”red”);
$(“#third”).width（200);
});
</script>

上記では、$(“#third”)のセレクタを指定する部分が無駄になります。例えば同じセレクタでも、$(“#third”)という記述があれば、その度にjQueryはHTML内を検索し、指定された要素を取得しようとします。つまり上記のような書き方だと、同じ「#third」という要素を2回検索してしまいます。これは非常に問題で、その分処理スピードが落ちてしまうことになります。

このような場合、メソッドは「.」ピリオドでつないで記述することが可能です。

サンプルHTML2<script>
$(function(){
$(“#third”).css(“color”,”red”).width（200);
});
</script>

$(“セレクタ”).メソッド().メソッド().メソッド();

上記のように鎖（くさり）のようにつなげていくので、「メソッドチェーン」といいます。このように記述すれば、jQueryが要素を取得しに行く作業は1回で済むので、動作の高速化に繋がります。1つの要素に対して複数のメソッドを使用する場合は、メソッドチェーンを使うことをオススメします。

要素のクラスを付ける：addClass()メソッド

続いて、クラスを追加したり、削除したりするメソッドについて記載していきます。

addClass()メソッドは、指定した要素にクラス属性をつけるメソッドです。パラメータには、付けたいクラス名を指定します。例えば下記のようにaddClass(“fiest”)と記述すれば、「fiest」というクラスを付けることができます。

サンプルHTML3<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<style>
.first { color:red; }
</style>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“li:first-child”).addClass(“first”);
});
</script>
</head>
<body>
・・省略・・
<ul>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ul>
・・省略・・
</body>

HTML
CSS
jQuery

上記では、サンプルコード内にCSSの記述があります。「first」というクラスには、テクスト色を赤にするしタイルが記述されています。そしてaddClass()メソッドを使って、1番初めのli要素に「first」というクラスを付けています。なのでサンプルでは、1番目のli要素のテキスト色が赤になっています。

要素のクラスを削除する：removeClass()メソッド

removeClass()メソッドは上記のaddClass()メソッドとはまったく逆で、クラスを削除してしまうメソッドです。パラメータには、削除したいクラス名を記述します。

サンプルHTML4<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<style>
.last { color:red; }
</style>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“li:last-child”).removeClass(“last”);
});
</script>
</head>
<body>
・・省略・・
<ul>
<li>HTML</li>
<li>CSS</li>
<li class=”last”>jQuery</li>
</ul>
・・省略・・
</body>