JQueryの基本（関数・メソッド）

JQueryの基本（関数・メソッド）について

1. 関数


関数の定義にはいくつかの方法がありますが、ここではもっとも利用頻度の高いfunction文による定義方法を確認してみましょう。

書式は次のようになります。

関数の書き方：

function 関数名
　処理の内容 ;
　return 戻り値 ;
}

最初にfunctionキーワードを記述し、関数であることを宣言します。それに続けて関数名を設定します。

関数名は処理の内容を表した分かり易い名前をつけましょう。

続く「()」の中に、パラメータを設定します。複数のパラメータを設定する場合は「,」で区切って記述します。パラメータがない場合でも「()」の記述が必須です。

最後の「{}」の中に、実際に行う処理の内容を記述します。

処理の結果を返す場合は、return文を使って戻り値を記述します。

戻り値がない場合は、return文の記述は省略可能です。実際の使い方を示したものが以下の匿名関数です。

2. 匿名関数

関数名を省略した関数が匿名関数（無名関数）です。

匿名関数は他の場所から直接呼び出すことはできません。

functionを利用した関数定義：

function moveWindow(left,top){
 window.moveTo(left,top);
}

moveWindow(300,0);

デスクトップ上の引数で指定した位置にWebブラウザを移動する関数です。

関数定義の際に設定した関数名「moveWindow」で機能を呼び出すことができます。

匿名関数の利用：

$(“a”).click(function(){
  window.alert(“クリックされました。”);
　return false;
});

クリックイベントが発生した場合に実行させたい処理を匿名関数で記述しています。

jQueryでは、このようにイベント発生時に実行させたい処理を匿名関数で記述することがよくあります。

構文：匿名関数

function(パラメータ){
 処理の内容 ;
 return 戻り値 ;
}

匿名関数を即座に実行：

(function( ②パラメータ ){ 
 処理の内容 ;
 return 戻り値 ;
})( ①パラメータの値 );

[ ②パラメータ ]で

[ ①パラメータの値 ]を受け取る

※①のパラメータはない場合もある


「fuctionn」に「()」をつけて匿名関数の内容を評価し、最後の「()」で処理の内容を実行します。

記述は複雑になっていますが、prototype.jsなどの他のライブラリを併用したり、複数の開発者がそれぞれでjavaScript制作を行っていることが原因でスクリプトが正しく動作しない場合の対処などに有効な手段です。

関数の中で宣言する変数や関数は、有効範囲がその関数の中に制限されるため（これをローカルスコープといいます）、ほかのスクリプトを併用する場合は、無用な 混乱を避けるためこのような記述をしておくとよいでしょう。

匿名関数を即座に実行する

(function($){　// ②①でパラメータとして渡されたjQueryオブジェクトを変数”$”で受け取る。
 var messege = “readyメソッドは、DOMの準備が整ったときに発生するイベントをハンドルします。”;

 $(docution).ready(function(){
  aleat(massage);
 });
})(Query); //①jQueryオブジェクトをパラメータと設定

匿名関数の中で宣言した変数「message」は、ローカルスコープとなるので匿名関数の中だけが有効範囲となり、匿名関数の外からは参照できません。

スクリプトのほかの箇所で「message」の変数名を使っていても影響を与えずに済みます。

3. メソッド


$()で要素を取得すると、スタイルを変更したり、文字列を挿入したりと、さまざまな操作が行えます。

これらの操作を行うための命令を「メソッド」といいます。


メソッドは、jQueryの$()で指定した要素に対して行える操作です。jQueryには標準のjavaScriptにはない便利なメソッドが多数用意されています。

たとえば、CSSの構文をそのまま利用してスタイルを設定するCSSメソッドや、フェードイン処理を行うfadeInメソッドなどです。

3-1. メソッドの使い方

メソッドを使う際の基本的な構文は次のようになります。

構文：メソッド

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

セレクターで選択した要素に対して、メソッド名で指定した処理を行います。

セレクターで選択する要素が複数になってもすべて同じ処理が行われます。

次の例では、フォームに設置された複数のテキストボックスをまとめて使用不能にしています。

attrメソッドは要素の造作します。値を取得したり別の値へ変更するような処理を行うメソッドです。

例文：メソッド

$(“input[type=text}”).attr({“disabled”:true});

複数の要素を一括で処理できるのは非常に便利な機能ですが、eachメソッドを利用して個別に処理を行う事もできます。

下記の例では、偶数番目のテキストボックスを使用不能にします。

取得した要素をeachメソッドで個別に処理する手法はよくつかわれるので覚えておきましょう。

例文：eachメソッド

$(“inpu[type=text]”).each(function(index){
 if(index % 2){ // 「%」は左辺を右辺で割った際に余りがあるかどうかを判定します
 $(this).attr(“disabled”:true)};
 }
});

「index」は、セレクターで選択した要素数です。

0から始まります。

3-2. メソッドチェーン

jQueryでは複数のメソッドを「.」でつないで記述することができます。

メソッドチェーンによって開発効率やパフォーマンスがよくなりますが、記述が長くなると読みにくくなるので、記述ルールをあらかじめ決めておくことが大切です。

次の例では「.」の前で改行し、タブでインデントする」というルールに基づいて記述しています。

記述する順序はあまり気にする必要はありませんが、処理の流れに沿った順序で記述しておくとよいでしょう。

例文:メソッドチェーンを使用しない場合の記述

var $input = $(“input{type=text]”);
$input.attr({“disabled”:true});
$input.css(“background-color”:”#efefef”});

例文:メソッドチェーンでの記述

$(“input[type=text]”)
 .attr({“disable”:true})
 .css({“background-color”:”#efefef”});

メソッドチェーンで記述することでスクリプトがシンプルになり、処理内容もわかりやすくなります。

ここではテキストボックスを使用不能にしたあとで、使用できないことを明示するためにグレー表示にする処理を行っています。

人気のタグ一覧

関連記事

カテゴリー