コラムColumn

JQueryについて

はじめまして。このブログを書いているteaと申します。

早速ですが、JQueryをテーマにブログを書いていこうと思っています。
この仕事についてまだあまり日が経っていないので入門編として書きたいと思います。

1. javascriptとJQueryについて。
仕事場でよく耳にするのがこの二つなんですが、頭の中で混ざっているので整理します。

「javascript」は、WEB上のスクリプト言語のひとつで、
「JQuery」はjavascriptを使った部品のようなもの。

自分はネイティブな形のJSがまだごりごり書けないので、JQueryをメインで使っているということになります。

2.htmlへの組み込み方について
JQueryが動作しない・・となったことが何度かありました。
その際忘れていたのがscriptの読み込みでした。なので、この場でもう一度確認した
いと思います。

JQueryをhtml上で呼び出すときは、2種類の呼び出し方があります。

①.ひとつめはそのままhtml上に書くやり方と

   <script type="text/javascript">
     xxxxxx
   </script>
   

②.外部ファイルへの組み込む方法です。

  <script type="text/javascript" src="xx.js">
    xxxxxx
   </script>  
   

外部ファイルにJQueryを書くにはどうしたらいいのか・・ということになりますが、
外部ファイルにはタグなしで、そのままJQueryのソースを張り付けます。

直接記述する場合は、javascriptはどこに記述してもいいです。
ただ、上や下のわかりやすい場所に置いておいた方が何かあったとき対応しやすいです。

話は変わりますが、引き継ぎやメンテナンスをする際コメントをしておくとコードが見やすく
なるので、自分はよくコメントを使って残すことが多いです。
なのでJQuery用のコメントの仕方もここに書いておきます。二種類あります。

ひとつめは「//」でコメントするやり方。「//」はこの記号に続く後ろ一行が効果範囲です。
二つ目は「/**/」で残すやり方で、「/**/」は複数行の指定が可能です。

3.自分が使ったお手軽なJQueryの紹介
前述の項目を踏まえて、自分がよく使っているアコーディオンのJQueryをご紹介します。
○アコーディオン
・JS

   $(function(){
         $("#acc dt").on("click", function() {
            	$(this).next().slideToggle();
         });
    });
 

・css

   #acc > dt{
    display:block;
    width:200px;
    height:50px;
    text-align:center;
    cursor:pointer;
    }
    #acc > dd{
    background:#f2f2f2;
    width:200px;
    height:50px;
    text-align:center;
    display:none;
    }
 

・html

  <dl id="acc">
    <dt>ここをクリックすると・・・</dt>
    <dd>開きます。</dd>
    <dt>ここをクリックすると・・・</dt>
    <dd>開きます。</dd>
    </dl>
 

このJQueryには本当にお世話になっています。わかりやすくて使いやすいです。
参考サイト様ありがとうございます。
初心者の方は、この書き方を覚えておくといいと、他のJQにも生かせるので
覚えておいて損はないと思います。

4.最後に
いろいろとずらずらメモ書きのようになりましたが、ここで一度締めです。
web上に落ちているものは時々文字が間違っていたり、どこか抜けていたり
することがたまにあります。なので、もしまたJQueryについて書くことが
あれば、その時はそのまま使えて、面白そうなものをどんどん載せていけたら
いいなと思っています。

次回もまた、初級の目線でいろいろと紹介していきます。

参考にしたサイト様:
http://www.cyber-concierge.co.jp/pc_tama/js/js.html
http://liginc.co.jp/web/js/jquery/34048

執筆者:nagata

お問い合わせフォーム