jQuery

jQuery:記述の考察(clickイベント)

jQuery:記述の考察(clickイベント)

 $(function() {
   $('#hide-text').click(function() {
     $('#text').slideUp();
   });
 });

大枠$(function(){};内がjQueryの処理になる。

この$(function(){};はHTMLの読み込みが終了してから、
jQueryの処理を開始するように指示しており、
$(document).ready(function(){});を省略した書き方である。

※readyがHTMLを読み込んでから、jQueryを開始するように指示している。
 jQueryはHTMLを操作するものなので、HTMLを読み込んでから
 jQueryを開始する、この処理が絶対に必要となる。

今回はhide-textと名前の付けられたボタンをクリックすることで
text部分が隠れる処理を行うため、まずは、hide-textをクリックするとという
条件部分を作る。

作り方がメソッドと似ていて、
$('セレクタ名').イベント名という記述の仕方になる。
仮にこれがメソッドの場合だったとすると、$('#hide-text').click();
という感じになり、メソッドの後ろにある();の、()内に引数を指定することで
アニメーションの速度などが指定できる。

イベントの場合は、この();の引数の部分に関数を指定し、
自分で行いたい処理を記述するような形になる。

関数を指定するので、function(){}がclickの引数()内に入るような形になり、
ややこしいが、まとめると、

clickのすぐ後ろからスタートする()はclickの引数部分
その引数部分にfunction(){}の関数が入っており、
functionの後ろにある()はfunctionの引数、{}内はfunctionの処理部分。

今回の場合は$('#text').slideUp();という、text部分を隠す処理が入っている。

これは、slideUpというメソッドを使った処理で、
slideUpの後ろにある()は、slideUpの引数になる。

つまり、ここに引数を指定すれば、アニメーションの速度を調節できる。

引数の中に関数の引数があったり、その関数の処理内に、メソッドの引数があったり、
()ばかりで本当にややこしいが、記述の作りとしては、こんな感じになっていて、
動きとしては、clickのイベントが起きると、function内の処理、
slide.Upのメソッドが行われるという感じになっている。

コメントを残す

メールアドレスが公開されることはありません。