[jQuery]はじめました?その１?

概要

今手がけているプロジェクトのリリースが２月２７日まで延び、少し余裕がでたので前からやりたかったjQueryを触ってみました。とりあえず今日のおさらいをしておきたいと思います。

今日やったのは…

はてブのように、お気に入りに対してタグ付けできる機能があって、予め表示されているタグリストをクリックするとテキストエリアにタグを入力してくれる機能を作ってみました。

初めに

僕はjavascript超初心者、ド素人でございますゆえ書いたことが間違ったり、効率の悪いやり方をしていたりすると思います。なにかお気付きの点がありましたら→のチャットやコメントでご指摘いただければと思います。

jQueryに関してしばらくは皆様の参考になるような記事は書けないと思いますが、日々成長の記録を残せるようにしたいと思っておりますので、温かい目で見守っていただき、必要であれば厳しくご指導いただければと思います。

jQueryの基本

jQueryでDOMを操作するのはとても簡単です。
例えば、

<div id="hoge">HOGE</div>

div#hogeを選択する場合、javascriptでは、

document.getElementById("hoge")

と書きますが、jQueryなら

$("#hoge")

これだけ。こんなに簡単に書けちゃいます。jQueryを使うと、DOM要素の選択・操作などがすごく簡単にできるようになるんですね！

DOMの指定はIDだけでなく、特定のタグや特定のクラス、タグ+クラスなど柔軟な指定が可能で、複数の要素を一括で選択したり変更したりすることができます。

// <strong>要素を隠す
$("strong").hide();
// クラスにtitleが指定されている要素を隠す
$(".titlle").hide();
// クラスにtitleが指定されている<p>要素を隠す
$("p.title")

直感的でわかりやすいですよね。
それじゃ本題に進みます。

はてブのタグ付けみたいな機能を作る

まずはフォームから。フォームタグ省略します。

<script type="text/javascript"><!--
    function selectTag(tag) {
        var $tagText = $("#tagBox").val();
        // indexOfで選択されているタグを検索
        if (tagText.indexOf(tag) >= 0) {
            // タグがすでに入力されている場合は該当タグをテキストボックスから削除
            $("#tagBox").val(tagText.replace(tag + ",", ""));
        } else {
            // 無ければ追加
            $("#tagBox").val(tagText + tag + ",");
        }
    }
// --></script>

??省略??

<!-- タグを入力するテキストボックス -->
<input id="tagBox" type="text" />
<!-- タグ一覧 -->
<a onclick="selectTag('タグ1');" href="#">タグ1</a>
<a onclick="selectTag('タグ2');" href="#">タグ2</a>
<a onclick="selectTag('タグ3');" href="#">タグ3</a>

タグ一覧の（タグ1~3）をクリックするとテキストボックス#tagBoxにタグが追加されたり、削除されたりするはずです。
さらに、タグの追加・削除時にaタグのクラスを書き換える処理を入れれば、そのタグがアクティブかどうかを色でわかるようにしたりできますね。

初めてのjQuery、なんとか思い通りのことができました。また色々チャレンジしたいと思いますので、お付き合いのほどお願いいたしますm_ _m