ウィンナスのプログラミング忘備録

アプリケーション制作をしている最中に発見したテクニックを忘備録としてまとめていきます。

【WEB】 Jqueryを使ってみた

今回はWebページの動きの要となるJqueryを使ってみました。

 

Jqueryとは?

JqueryとはJavaScriptのライブラリに当たります。

つまりは「JavaScriptをより使いやすくしたぜ!」的なやつですw

JqueryにはCSSを動的に変更させたり、アニメーションをさせたり...

まぁ使ってみたほうが早いです!

 

まずは、Jqueryを取得しましょう!

公式ホームページからJavaScriptファイルかURLを取得します。

めんどくせーよ!って方は下の要素をヘッダにコピペしてください。

※2016/3/29時点

次にJavaScriptファイルを作成します。

HTMLの内部に組込む場合は<script></script>で囲ってください。

外部に出す場合は以下のような要素をヘッダに記述してください。

#はファイルパスです。

 

では、Jquery独自の書き方をちょこっと説明します。

Jqueryを使う場合は、コードの先頭に"$"マークを付けます。

そのあとに処理を書いていきます。

例えばこんな感じ

パターン1はちょっとした処理に使います。

パターン2は変数やら計算やら発生したときに使います。

パターン3は2と同じですw

これは基本中の基本なので覚えましょう!

 

ここで簡単なプログラムを組んでみます。

例えばクリックしたときに背景全体を赤くしてみます。


ここをクリックしてください!


この処理をJqueryで表すとこんな感じ

一行目では id [ click_content ] がクリックされたら処理を実行という意味です。

idではなく、classにしたい場合は " # " を " . " に変えます。

二行目では id [ click_content ] に css [ background-color ] を [ red ] に変えるという意味です。これでCSSを動的に変更することが出来ます。

 

Jqueryではまだまだ様々なことが出来ます!

私自身もほんのちょっとしか知らないのでこれから忘備録として記録していきます!