こんにちは。夏休みを持て余しています。 soraです。

この度は同人界隈向けに、なんとなくこんな風に作ってるよーというのを発信すべく、定期的にブログで紹介してみようかということになりました。の第9回です。

今日は前回に引き続き、実際にjQueryでコンテンツを操作する話をしようと思います。

前回の放送＆記事では、JavaScriptを書き始めるところまでと、本の簡単な例を紹介しました。今回は、jQueryという有名な JavaScriptのライブラリを使って、Webページ内のコンテンツやページ内での動作をさせる例をいくつか紹介します。
jQueryを使うまでについては前回の記事をご覧ください。とはいっても放送の時と比べると、力尽きて内容は少なくなっていると思いますが…。

ページ内のコンテンツを捕まえる

「このボタンを押した時、文字の色を変更する」のような動作をさせたい場合、まずは「このボタン」がページ内のどのボタンなのか、文字はどこの文字なのかをプログラムで取得する必要があります。jQueryを使ってページ内のコンテンツを取得するには、例えば次のようなHTMLがあったとすると、次のように書きます。

<!DOCTYPE html>
<html>
    <head>...</head>
    <body>
        <h1>見出し</h1>
        <div class="content content-1" id="main-content">
            <h2 class="label label-1"></h2>
            <p class="text text-1">
                テキストテキストテキスト
            </p>
            <button type="button" name="button" id="button">button</button>
        </div>
        <div class="content content-2">
            <h2 class="label label-2"></h2>
            <p class="text text-2">
                テキストテキストテキスト
            </p>
            <button type="button" name="button">button</button>
        </div>
        <div class="content content-3">
            <h2 class="label label-3"></h2>
            <p class="text text-3">
                テキストテキストテキスト
            </p>
            <button type="button" name="button">button</button>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" charset="utf-8"></script>
    </body>
</html>

var $button = $("#button");

これで変数 $button に11行目の <button type="button" name="button" id="button">button</button> のオブジェクトが格納されます。簡単ですね！

セレクタ

上の例で使った、 $("#button") の #button の部分をセレクタといい、取得したいタグの情報を条件で指定します。この例では、 「button」というid属性を持ったタグを取得する という意味です。他にも例を紹介します。

あるidをもったタグを取得したい

上の例で載せた、id属性によって取得する例です。注意点としては、idはページ内で重複してはいけないというルールから、id属性で取得する場合は、仮にページ内に複数同じidをもつタグがあったとしても、最初に見つかった一つしか取得できません。idはページ内で一意であるべきなので、この場合は重複したidを重複しないように解決してあげましょう。

var $button = $("#button");

あるクラスをもったタグを取得したい

class属性をつかってタグを特定することもできます。idのときは # でしたが、classは . を使って取得します。cssと同じですね！

var $text = (".text-1");

また、classはページ内で重複する場合もあるので、条件にヒットする候補が複数ある場合は、それを配列で取得することができます。

var $texts = $(".text");

もっと複雑な条件で取得したい

他にもname属性やタグの種類でも絞り込みたいことがあるかもしれません。そういったときには、 [] を使って次のように書くことができます。

var $button = $('button[name="button"]');

これは buttonというname属性をもったbuttonタグを取得する という意味です。nameに限らず他の属性値でも扱えるので、複雑な条件が必要になった時は使ってみるといいかもしません。（条件が複雑になってきたときは、DOMが必要以上に複雑になっていないか少し振り返ってみてください。）

ある要素がクリックされたときの動作を決める

前節で扱ったセレクタを使って要素を取得したあと、その要素がどうなったときに次の動作をしてほしいのか、ということを決める必要があります。ここでは、「ボタンがクリックされたとき」に何か動作させてみます。このようにイベントを取得するには、 $.on メソッドを使用します。

var $button = $("button");

$button.on('click', function() {
    console.log('クリックされた！')
});

このように、イベントの種類 click と、そのときに実行する内容を function で与えることができます。

ページのCSSを変更する

では実際にページ内のレイアウトを変更してみます！ボタンが押されたら、テキストの色を赤にする、ということをやってみます。

var $button = $("#button");
var $text   = $(".text");

$button.on('click', function(){
    $text.css('color', 'red');
});

見慣れない css というメソッドが出てきましたが、これは名前の通り、対象のcssプロパティを変更するメソッドです。ここではm $text は textというclass属性をもつ要素 なので、 「buttonというidをもつボタン」をクリックしたとき、「textというclassをもつ要素」のCSSプロパティ「color」を「red」に変更する という処理になります。

実行して、一番上のボタンをクリックしてみます。
画像のように色が変われば成功です！

f:id:moshisora:20160809121352p:plain

他にも

jQueryにはさまざまなメソッドが用意されています。

要素をアニメーションさせる
特定の位置までスクロールする
表示/非表示を切り替える
などなど…

ので、興味のある方は挑戦してみてください！

まとめ

jQueryのセレクタを使ってページ内の要素を条件で取得できる。
取得した要素のイベントを取得して動作させたり、要素を編集できる。

blockun dialy

同人ゲーム制作サークル「SaNa」のメンバーが書くゆるーいブログです。

簡単なWebページをつくってみる #5

関連ブログ

目次