どうもこんにちは、

今日はjQueryについて、

僕が学んだ基礎知識を共有していきたいと思います。

まずはじめに

簡単な公式を知らないと、

始まらないので公式から覚えましょう。

＄（’HTML要素').メソッド（引数）;

です。

短っ！

と思った方もいると思いますが、

こっから色々と付け足していくのです。

もちろんコレで終わりなわけはありません。

簡単解説

HTML要素

というのは例えば、、

index.html

<h1 >こんにちは<h1>

のところで言うh1です

あと、最後の　　;（セミコロン）　　　は忘れずにつけましょう。

コレが基本の構文ですね。

ではこの公式を使って、jQueryで何ができるのかを話していきます。

アニメーションを付けられる

はじめ見た時コレはすごいと思いました！

ほんの二行jQueryの記述を加えるだけでこんな変化を生み出せるのか、、

と感動して、子供のようにしばらく画面を見つめていました。

書き方は、、

＄（’HTML要素').fadeOut（アニメーションが起こるスピード指定）;

です。

こうすることで、指定した場所のhtml要素が消えます！

＄（’HTML要素').fadeIn（アニメーションが起こるスピード指定）;

にすると現れます

簡単解説

スピード指定する際に、1000で一秒だということを知っておいてください

fadeOut 　　のところは　　slideUp　　でも大丈夫です。

指定先の色を勝手に変えられるだと、、、

コレも非常に簡単に作れます

こちらが公式です。

＄（’HTML要素').css（'プロパティ(colorとか)' ,  '値（blueとか)'）;

コレで指定したHTML要素の色が変えられます。

楽しいですね。

clickイベントを使って、
「あ〜、コレよく見るわ〜。」
という動きを作れる

簡単なアニメーションの次は

少し記述量を上げてクリックイベントを使った、

「あー、コレよく見るやつだわ。」

というものを作ってみましょう

公式はこんな感じです。

＄（’HTML要素').イベント名（function(){
イベント内容
}）;

今回のイベント名には「click」を使っていきたいと思います。

＄（’HTML要素１').click（function(){
＄（’HTML要素２').slideUp
}）;

こうすることで、

HTML要素１を　ｃｌｉｃｋ　すると

HTML要素２が消えます。

素晴らしいですね。。

jQueryすげー、、、

以上で簡単な説明は終わりです

またお会いしましょう。