2018.06.30

【jQuery】よく使うメソッドまとめ

目次

jQueryのメソッドは数多くありますが、今回は初心者向けに、理解しやすく、よく使われるものにしぼって解説していきます。

メソッドの書き方

メソッドは「何をどうするか」の「どうするか」の部分に当たります。書き方は、セレクタの後にドット(.)を付けてメソッド名を書き、最後にセミコロン(;)で文を閉じます。

例)  $("p").hide();

メソッド一覧

要素の表示・非表示

メソッド名 効果
hide() 要素を非表示にする
show() 要素を表示する
fadeOut() 要素が徐々に透明になって消えていく
fadeIn() 要素が透明な状態から徐々に表示される
slideUp() 下から昇っていくように要素が消えていく
slideDown() 上から降りてくるように要素が表示される

hide()とshow()は表示・非表示がパッと切り替わり、そのほかは滑らかに切り替わるという違いがありますが、上のすべてのメソッドはCSSのdisplayプロパティの値を変更しているだけだということを理解しておきましょう。

また、()の中に入れる値を引数(ひきすう)といいますが、引数に数値を入れると、切り替わる速度を調整できます。
例えば(1000)とすると、1000ミリ秒、つまり1秒で表示・非表示が切り替わることになります。

HTML・CSSの変更

メソッド名 効果
css() CSSのプロパティの値を追加・変更する
text() HTMLのタグの中の文字列を変更する
html() HTMLのタグの中のHTMLを変更する

cssメソッドは、上のように、()の中の引数をコンマで区切って2つ指定すると、CSSのプロパティの値を変更することができます。1つ目の値がプロパティ名にあたり、2つ目の値はプロパティの値と対応しています。

また、引数に指定したプロパティの指定がなければ、そのプロパティは新しく追加されることになります。


textメソッドは、引数に値を入れると、タグの中の文字列がそのまま引数の値に置き換わります。上の例では、「こんにちは」が「こんばんは」に置き換わることになります。


htmlメソッドは、タグの中の文字列が引数の値に置き換わる点ではtextメソッドと同じですが、htmlメソッドの引数には、HTMLのタグそのものも入れることができます。

注意すべき点としては、ダブルクオーテーションの中にダブルクオーテーションを入れてしまうとうまく機能しないので、外側に(”)を使うのであれば内側は(’)、外側が(’)なら内側は(”)といった感じで、シングルとダブルを使い分けるようにしましょう。

また、これらの3つのメソッドでは、値を追加・変更するだけでなく、取得することもできます。css()では、引数にプロパティ名を一つだけ指定することで、プロパティの値を取得できます。text()やhtml()では、引数を指定しない(カッコの中を空欄にする)ことでタグの中の文字列やHTMLを取得することができます。

classの追加・削除

メソッド名 効果
addClass() classを追加する
removeClass() classを削除する

これらのメソッドでは、()の中にクラス名を書けば、そのクラスを追加・削除してくれます。

ただし、CSSやjQueryのセレクタとは違って、クラス名の前にドット(.)を付けないことに注意が必要です。

まとめ

ここまで紹介したメソッドは単体で使うことは少なく、後に紹介するclickイベントなどのイベントと組み合わせて使うことが多いので、ぜひ以下の記事も参考にしてみてください。

【jQuery】clickイベント・hoverイベントの使い方

home

scroll