読者です 読者をやめる 読者になる 読者になる

jQueryの記述方法(超超基本)

jQueryはビューで様々な動きをつけることができるのでいいんですよー。
ほら、こうやって文字をフェイドアウトさせたり、フェイドインさせたりできていいでしょ?」

うおおーーかっこいい!!ただ、それって難しいんじゃないんですか?

「そんなことないですよー。」

またまた〜、そんなこと言っちゃって...

...本当にそんなに難しくなかった。
書き方はjsに似ているけどわかりやすい!!
早速だが、下に記す。

$('セレクタ').メソッド(引数);

これが基本だ。
例えばhtmlで

<div class = "fade">こんにちは</div>

と記述したとしよう。
今回fadeクラスの中身をフェイド・アウトさせたいのでメソッドはfadeOutと記述する。
1秒でfadeクラスの中身を消したいので引数で指定してあげる。するとこのように記述する。↓

$('.fade').fadeOut(1000);

簡単だ!!
次はユーザーがクリックとかをした時にビューが反応する方法を記す。

$('セレクタ').イベント名(function(){  
   //イベント発生時に実行したい処理  
});

例えばクリック(イベント)した時に文字を消したい時...

<div id = "hide-string">文字を隠す</div>  
<p id = "string">文字を隠すボタンをクリックすると消えちゃうよ</p>

上のようなhtmlにしたがってjQueryのコードをこのように記述する。

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

書きやすいでしょ??
最後に補足したいのはjQueryでclassを指定した場合はセレクタのクラス名の前に"."(ドット)をつける。
idを指定した場合は"#"(シャープ)をつけるという違いがあることに注意しよう!!

See you guys :)