この記事では、Webサイトのコーディングを始めたばかりの初心者に向けてjQueryを解説しています。

この記事では、Webサイトのコーディングを始めたばかりの初心者に向けてjQueryを解説しています。

jQueryとは？

jQueryとは、Javascriptを簡単に書けるように中間に挟む翻訳機のようなものです。
javascriptで書こうと思うと20行になるような処理を3行で書けるようになる素敵なファイルです。

jQueryは何に使う？

TERAでは、jQueryはHTMLソースの動的変更に使うことが多いです。
「ボタンを押したときに特定のタグにクラスを追加する」などといった処理が可能です。
もう少し具体的に説明すると、よくあるアコーディオンメニューなどは「dtをクリックしたらddのCSSのなかのdisplayをnoneとblockを書き換える」といった処理で成り立っています。

jQueryの動かし方

まずはjQueryを読み込む

これはCSSなどと同じで、HTMLファイルから読み込んであげれば良いです。

<script src="/js/jquery.js"></script>

準備

jQueryを動かすには準備が必要です。
下記のコードを書く必要があります。HTMLファイル内に記述するときは<script>タグで囲ってやります。

<script>
$(function(){
   //ここに処理を書く
});
</script>

これは、HTMLの読み込みが終わったら実行してね❤という意味です。

トリガの指定（待機）

トリガというのはプログラム用語ですが、ピストルの引き金です。
「これが行われたら処理をしてください」という部分がトリガとなります。

$('dt.acodion').on('click',function(){
   //ここに処理を書く
 });

これがトリガです。acodionというクラスがついたdtをクリックされたら、という意味です。

実行部分

acodionというクラスのdtがクリックされた時の処理を書く必要があります。ようやくCSSを切り替えられます。

$(this).next('dd').css('display','block');

$(this)というのは自分のことです。ここではクリックされたdtを指します。
「クリックされたdtの次のddのcssをdisplay:blockにしてくださいね」と書いてあります。

まとめ

全部つなげるとこうなります。

<script src="/js/jquery.js"></script>
<script>
$(function(){
    $('dt.acodion').on('click',function(){
        $(this).next('dd').css('display','block');
    });
});
</script>
<dl>
<dt>ここをクリックすると開く</dt>
<dd>最初は隠れているけど開いて表示する部分</dd>
</dl>

ありがちなミス

Javascriptは順番も大事です。
下記のような場合は動かないこともあります。

<!--ダメな例：jQueryのファイルを読み込む前にjQueryの命令を実行しようとしている-->
<script>
$(function(){
    $('dt.acodion').on('click',function(){
        $(this).next('dd').css('display','block');
    });
});
</script>
<script src="/js/jquery.js"></script>