【入門】jQueryの書き方 〜 よく使うメソッド 〜

  • 2020.02.09
  • 2022.05.04
  • jQuery
【入門】jQueryの書き方 〜 よく使うメソッド 〜

jQueryのよく使うメソッドの書き方について教えて欲しい!

こういった疑問に答えていきます。
本日の内容は以下です。

  • メソッドとは?
  • メソッド一覧

jQueryのメソッドは、色々存在します。
全て覚えることは難しいので、今回は初心者の方向けに、よく使うメソッドを6つ紹介していきます。

この記事を読めば、「jQueryのメソッドの書き方」について理解できるようになります。

では早速やっていきましょう。

メソッドとは?

そもそもメソッドとは何かと言うと、ある要素(セレクタ)に対して、どういった処理を行うかをメソッドと言います。

例えば「ボタンを押すとメニューを開く」といった処理の場合は、「ボタン」が要素(セレクタ)、「押すとメニューが開く」がメソッドになります。

詳しくjQueryの書き方について学びたい方はこちらをご覧ください。

メソッド一覧

jQueryのメソッドは、公式サイトにも記載されています。
ただし、たくさんのメソッドがあるのでこの記事では、初心者の方向けに、よく使うメソッドを6つ紹介します。

hide( )

hide( )は、要素(セレクタ)を非表示にするメソッドです。
書き方は下のように書きます。

$(function(){
  $("セレクタ").hide();
});

表示状態のものを非表示にするので、非表示状態のものには効きません。

また、hide( )の( )内に非表示の速度を指定することも可能です。
単位はミリ秒なので、注意です。

show( )

hide( )とは反対に、非表示状態のものを、表示させるメソッドです。
よくレスポンシブメニューを作るときに使用されます。
書き方は下のように書きます。

$(function(){
  $("セレクタ").show();
});

hide( )同様に、既に表示状態にある要素(セレクタ)には効果がありません。
なのであらかじめ、CSSで「display: none;」で非表示にして置く必要があります。
また、show( )の( )内に速度を指定することもできます。

fadeOut( )

fadeOut( )は、表示状態にある要素(セレクタ)を、ゆっくりと非表示にするアニメーションメソッドです。
書き方は下のように書きます。

$(function(){
  $("セレクタ").fadeOut();
});

こちらも、既に非表示になっている要素(セレクタ)に対しては効果がありません。
また( )内に速度を指定することもできます。

fadeIn( )

fadeIn( )は、fadeOut( )とは反対に、非表示状態の要素(セレクタ)をゆっくりと表示させるアニメーションメソッドです。
書き方は下のように書きます。

$(function(){
  $("セレクタ").fadeIn();
});

fadeIn( )は、非表示状態のものをゆっくりと表示させるので、あらかじめCSSで非表示に設定しておく必要があります。

また( )内に速度を指定することもできます。

slideUp( )

slideUp( )は、表示状態にある要素(セレクタ)を、下から上へと非表示にするアニメーションメソッドです。
書き方は下のように書きます。

$(function(){
  $("セレクタ").slideUp();
});

こちらも、既に非表示になっている要素(セレクタ)に対しては効果がありません。
また( )内に速度を指定することもできます。

slideDown( )

slideDown( )は、slideUp( )とは反対に、非表示状態にある要素(セレクタ)を、上から下へと表示させるアニメーションメソッドです。
書き方は下のように書きます。

$(function(){
  $("セレクタ").slideDown();
});

こちらも非表示状態のものを、上から下へと表示させるので、あらかじめCSSで非表示に設定しておく必要があります。

また( )内に速度を指定することもできます。

まとめ

今回紹介したメソッド以外にもたくさんあるので、公式サイトを確認しながら使ってみるといいでしょう。

では今回は以上になります。