こんにちは！フリーランスの桃太郎です。
jQueryでは複雑な処理を実現するための便利な仕組みとして様々なメソッド(関数)が用意されています。
そのようなメソッドを必要な場面で取捨選択しながら使いこなすことができれば、初心者から一歩進んだプログラマーとなることでしょう。
この記事では
・メソッドとは？
・メソッドの呼び出し方
という基礎的な内容から、
・ jQueryでよく使われるメソッド一覧
など実践で活用する際の参考となる内容についても解説していきます。
jQueryのメソッドについて正しく理解し、必要な場面で使いこなすことができるように、わかりやすく解説します！
この記事の目次
メソッドとは？
プログラミングにおいて、オブジェクトに対してある操作を行い、その操作の結果で得られるものをまた別の処理で利用することが多々あります。
そのようオブジェクトに対する操作を行うものがメソッドです。
操作にあたる内容としては、例えば、ある文字列を別の文字列に置換する操作であったり、配列の要素を順番に処理する操作であったりと様々です。
メソッドの呼び出し方
では、具体的にメソッドはどのように使用するのかを見ていくことにしましょう。
[基本構文]jQueryオブジェクト.メソッド() jQueryオブジェクト.メソッド(第一引数,第二引数,…)[実例]
$(‘p’).text(‘contents’)
$.each(array,function(){...})
実例のtextやeachなどがメソッドにあたり、そのメソッドのあとはカッコ()を付与します。
そのカッコの中身は引数を必要とするメソッドであれば、引数を記述し、必要がないメソッドはカッコだけを書きます。
jQueryオブジェクトにドットを付けた後にメソッド名を記述することで、メソッドを呼び出すことができます。
メソッドチェーンとは？
メソッドを学習していくと、メソッドチェーンという言葉を耳にしたことがある方もいるかもしれません。
メソッドチェーンとは何か？
まずは以下の基本構文を見てください。
[基本構文]jQueryオブジェクト.メソッド().メソッド()・・・
メソッドがカンマを介して鎖のように繋がっている様子からメソッドチェーンと呼ばれています。
このメソッドチェーンはどのような働きをするかと言いますと、jQueryオブジェクトに一番近い左のメソッドの操作がおこなれた後に、次のメソッドの操作が続けて行われます。
ただし、１点注意があります。
メソッドチェーンとして繋げることができるメソッドには条件があり、それはjQueryオブジエクトを戻り値として返すメソッドである事という条件です。
具体的な例で見てみましょう。
[HTML]<div>アラート表示</div>[jQuery]
$('div').css("background-color","yellow").text('システムメンテナンス中です。').fadeOut(10000)
実行結果
//システムメンテナンス中です。と黄色背景で表示された後、10秒後にフェードアウトする。
jQueryのサンプルにある通り、cssメソッド + textメソッド + fadeOutメソッドがメソッドチェーンとして一続きになっています。
メソッドチェーンを利用するメリットは、１行づつメソッドの処理を個別に書くよりも処理速度が早くなること、そして、jQueryオブジェクトの変数を用意する手間が省けるということです。
メソッドチェーンを利用せずに先ほどのサンプルの処理を実現する場合は以下の通りとなります。
[メソッドチェーンを利用しない例]var $div = $('div').css("background-color","yellow")
$div.text('システムメンテナンス中です。')
$div.fadeOut(10000)
varでjQueryオブジェクトの変数を用意する必要があり、かつ１行づつメソッド処理を呼び出すことでメソッドチェーンよりも処理速度は遅くなる傾向にあります。
