今日は、自分が学んだことをシェアする意識のもと、jqueryの実装について、お伝えします。

想定読者
・HTML、CSSが少しでもかける人。
・jqueryはどんなことができるのかをまだわかってない人。

では、説明します。

jqueryって一体なんなのか？

シンプルに答えるならば、ブラウザ側で画面上に動きをつけるスクリプト言語のライブラリ。

と行ってもいまいちピンと来ないと思うので、まずはどんな動きをするのかをみてみて。

Demo

上記のデモは、クリックしたらボタンが押したままになり、他のボタンをクリックすると、押されたボタンが切り替わる、

と言う処理をしています。

検証ツールでみてみることに。

ボタンを押したら、どう言う風にHTMLが変わっているか、以下の画像で示します。
１.下の画像から

2.以下のように変わるんです。

hasclass()を使用する場合

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
    //$(セレクタ).命令〜
    $(".select_care").on("click", function(){
        if(!$(".select_care").hasClass("on")){
            $(this).css("background-image", "url('img/reserve/select_on.png')");
            $("p", this).css("color", "#000");
            $(this).addClass("on");
        }
        else if($(".select_care").hasClass("on")){
            $(".select_care").css("background-image", "url('img/reserve/select_off.png')");
            $("p", ".select_care").css("color", "white");
            $(".select_care").removeClass("on");
            $(this).css("background-image", "url('img/reserve/select_on.png')");
            $("p", this).css("color", "#000");
            $(this).addClass("on");
        }
    });
});
 </script>

「$(“.select_care”).on(“click”, function(){」の箇所で、「.select_care」をクリックした場合に、どのような処理をするのか？をプログラムします。

「$(“.select_care”).hasClass(“on”)」は「.select_care」がタグ内に含まれていclassに「on」の文字列が含まれていることを示しています。

そして「！」がつくことにより、否定の意味になるので、「if(!$(“.select_care”).hasClass(“on”)){」は「.select_care」classに「on」の文字列が入っていない場合と言う意味になります。

$(this).css(“background-image”, “url(‘img/reserve/select_on.png’)”);
$(“p”, this).css(“color”, “#000”);
$(this).addClass(“on”);

上記の３つについては、クリックした「.select_care」classが含まれている箇所のCSSを書き換えています

「else if($(“.select_care”).hasClass(“on”)){」以下に関しては、一度箱を全て元の状態に戻してから他のボタンを選択する処理をしています。

図に表すと以下の通り。

これで、ボタンを押して、別のボタンを押すごとに切り替わっているように見えるはずです。

まとめ

jquery案外やってみると面白い。

サーバー側の処理を書いている人だったら、若干フロントエンドの処理の気持ち悪さがわかるかもしれません。