こんにちは。
前回はjavascriptを利用して、id,classで変更したいspanの中身を取得したり、
変更を行いました。
今回はjavascriptのライブラリの一つである、jQueryを利用します。
まずはライブラリについてお話します〜
javascriptとjQueryの関係、そしてライブラリとは？。
jQueryはjavascriptのライブラリの一つです。簡単に説明すると、
よく利用する機能や便利な機能をひとまとめにしたものがライブラリです。
よく使う機能なのに、毎回長々と自分でコードを書くのは、面倒だから、
あらかじめ用意しとこう。っていうのがライブラリの目的です。
ライブラリを利用することで簡単にプログラムが書けるようになったり
複雑な処理を簡単に利用することができます。
例えると、javascriptをパワーアップさせることができる
追加アプリみたいなものです。
ゲームの追加ダウンロードコンテンツで機能が増えたり
するようなイメージです。
実は、前回のようにjavascriptで直接「document.getElement~」
等と記載すると信じられないことですが、chrome, IE、Safarなど
ブラウザによって同じ書き方でも処理の結果が異なる場合があるのです。
しかし、jQueryを利用すると、jQuery内でこの違いを吸収してくれるので、
プログラマはブラウザ間の挙動の違いに頭を悩ませることが無くなります。
もちろん利点ばかりではありません。
jQueryは使用前に読み込む必要があります。
そして、ブラウザ間の違いを吸収するため色々な処理をしています。
そのため、パフォーマンスが低下しがちになります。
ただ、jQueryは多くのところで利用されており、現状スタンダードなものですので、
基本的な記述方法を理解しておきましょう。
jQueryをサクッとセットアップしようっ
まず、jQueryを利用する場合はjQueryを読み込む必要があります。
今回はCDNと呼ばれるオンライン上にあるファイルを参照します。
下記URLに移動してください。
n
今回はjQuery3.xのものを利用します。uncompressedのリンクを
クリックして表示された『<scri〜』をコピーしてHTMLに貼り付けます。
貼り付けができたら前回と同様にspanを書いて動きを確かめて行きましょう。
以下が前回のjavascriptでHTMLを書き換えた時と同じサンプルです。
|
1 2 3 |
<span id="span1" class="span_class">1</span><br> <span id="span2" class="span_class">2</span><br> <span id="span3" class="span_class">3</span><br> |
実際にjQueryを使ってみる
これをjQueryで取り出してみます。
まずは一番上のspanの『1』を取り出してみます。
|
1 2 3 4 |
$('#span1').text(); //javascriptで書くと //document.getElementById('span1').innerText; |
このようになります。
短っ！そして書き方が覚えやすいっ。
|
1 2 3 4 5 |
$('#id名').text(); //$()の中に内容を所得したい要素を書きます。 //今回は 「idがspan1のもの」なので 『#span1』と書きます。 // #は『id』を意味します。idがspanのもの！ということです。 |
実際に試してみよう。
chromeのコンソールに書いてくださいね！
取得できたら、2番目、3番目の値を取得してみてください。
値は取得できましたか？ では、次は内容を書き換えてみます。
書き換えは次の通りです。
|
1 2 3 4 |
$('#span1').text('変更'); //javascriptで書くと //document.getElementById('span1').innerText = '変更'; |
だいぶ短くなりますね。
変更の方法は単純に、括弧の中に書き換えたい文字を入力するだけです。
|
1 2 3 4 5 |
$('#id名').text('表示したい文字'); //$()の中に内容を所得したい要素を書きます。 //今回は 「idがspan1のもの」なので 『#span1』と書きます。 // #は『id』を意味します。idがspanのものの内容を「表示したい文字」に変更ということです。 |
では引き続き、spanの2つめ、3つめの内容もjQueryを利用して
書き換えてみましょう。
jQueryでidを利用して値を取得する方法や、内容の変更方法は理解できましたね。
続いてjQueryでclassを指定する方法を学んでいきます。
jQueryでclassを取得する
では、spanの1番目の内容をjQueryでclassを指定して取得してみます。
|
1 2 3 4 5 |
$('.span_class').eq(0).text(); //javascriptで書くと //document.getElementsByClassName('span_class')[0].innerText; //jQueryでは『$('.span_class').text()[0];』と書くこともできます。 |
だいぶ短いですね。
詳しく説明は次です。
|
1 2 3 4 5 6 |
$('.span_class').eq(0).text(); //$()の中に内容を取得したい要素を書きます。 //今回は 「classがspan_classのもの」なので 『.span_class』と書きます。 //spanの前の.は『class』を意味します。classがspan_classのもの！ということです。 //classは複数指定ができるのでその0番目ということで.ep(0)が入ります。 |
これも実際の動きをidの時に利用したサンプルを用いて試してみてください。
２番目と3番目のspanをjQueryでclassを指定して取得してください。
続いてjQueryでClassを指定した場合の値の変更方法です。
もう想像は付いているかもしれませんが。
|
1 2 3 4 5 |
$('.span_class').eq(0).text('変更'); //javascriptで書くと //document.getElementsByClassName('span_class')[0].innerText = '変更'; //jQueryでは『$($('.span_class')[0]).text('変更')』とも書くこともできます。 |
idの時と同様にtext()の括弧の中に文字を入れることで
指定した要素の内容を変更することができるのです。
これもサンプルで2番目と3番目の要素を変更しましょう。
慣れです慣れれば簡単です！
サンプル1
jQueryのDOM操作について、まとめ
- jQueryでidを指定して要素を操作する際は$()の中に#id名を入れる『$(‘#id名’)』
- jQueryでclassを指定して要素を操作する際は$()の中に.クラス名を入れる『$(‘.class’)』
今回はjQueryを使って要素の取得、変更を行なってきました。
要素を選択する際に$()の括弧の中に記述する内容を「セレクタ」と呼びます。
CSSのときにも『セレクタ』を利用しましたが
それと同じものです。CSSでも#や.をセレクタとして利用することができます。
また、今回はidやclassを直接指定していましたが、これ以外にも奇数の要素や、
隣の要素、親要素など、色々なセレクタで要素を指定することができます。
色々調べてみてください。
このページのタイトルをjQueryで書き換えてみよう。
※chromeのコンソールからjQueryのプログラムを打ち込んで変更してください。
タイトル変更できたら下のテキストボックスにjQueryで名前を入れてください。
テキストボックスに名前を入れる場合は下記で入れられますので。
jQueryは読み込んでくださいね！
|
1 |
$(テキストボックスのセレクタ).val('入れる文字'); |
