【jQuery-3】メソッドに対して引数ではなく関数を指定する

前回は .css メソッドの中に二つの引数を書いて、文字の色を変えるスクリプトを実際に書いてみました。

今回はメソッドに対して引数ではなく、関数を指定してみます。

関数？と聞くと少し難しい感じもしますが、今はそういうもんだと覚えてしまいましょう。

メソッドに対して引数ではなくて関数を指定する例

See the Pen .click by taichi (@taichi_na) on CodePen.

上の例では、まず .click というメソッドを使っています。

これは指定したセレクタをクリックしたら()内の処理を実行する、というメソッドです。

そして、本来引数が入る場所に以下のような記述があります。

 function(){ここに実行したい処理を記入}

今の段階では、実行したい処理をいくつかつなげたものが関数だと覚えておきましょう。

上の例では実行したい処理として

$("button").html("クリックしました");

が記述されていると思います。

これは前回に説明した .html メソッドを使って指定した要素の中身を書き換えるものです。

クリックしたら、button 内の言葉を「クリックしました」に変更します、という命令をしたことになります。簡単ですね！

【this】を使って効率よく記述する方法 

See the Pen this by taichi (@taichi_na) on CodePen.

先ほどの例を少し書き換えてみました。

親となっているセレクタの "button" を入れ子になっている部分では this という文字に置き換えています。このように省略して記すこともできます。

書き込みが楽になるので覚えておきましょう。

上の例では、表示される言葉を変える以外に、button 内の色も変えてみました。
以前に説明した .css メソッドですね。

この命令も .clickの中に書かれているので、クリックされたら命令を実行してくれます。
ということで、クリックしたら文字と背景が変わりました。