jQueryの使い方

はじめに

jQueryはJavaScriptを容易に記述するよう設計されたJavaScriptライブラリである。2019年時点では、多くのサイトに採用されている。2016年にversion3.0.0が公開され、2018年にversion3.3.0が公開された。このページのサンプルコードではversion3.3.1を利用している。

ロード方法

通常の同一ドメインのJavaScriptと同じようにするなら、jqueryファイルをアップロードし、読み込めばよい。ファイルは「jquery ダウンロード」などで検索すれば見つかるだろう。jquery-3.3.0.min.jsのような「min」が付いているのは、軽量なファイルで空白とコメントが削除されるなどしている。

以下のように、通常のJavaScriptのように読み込むことができる。

CDN（コンテンツデリバリネットワーク）からのロードも可能である。以下のようにする。

このページではこの方法でロードする。

GoogleでもCDNとして公開されており、そちらを使用する場合は以下のようになる。

ブラウザから改ざんを検出可能にして、CDNを利用するには以下のようにする。

ひな形として、以下のコードを使用し、</html>を除く<body>タグ以降を記述していく。文字コードはUTF-8である。

<!doctype html>

<html>

<head>

<title>jquery usage</title>

</head>

<body>

</body>

</html>

セレクタの基本

JavaScriptではIDにアクセスするにはdocument.getElementById("idname")を使用する。jQueryではそれにアクセスするためのショートカットが用意されており、$("#idname")でアクセスする。タグ名の場合は#を外し、クラス名の場合は#の代わりに . を使用する。サンプルコードを示す。

<body>

<br>

<br>

</div>

</body>

$("body").css("background-color", "orange");

$(".clsMain").css("background-color", "yellow");

$("#idText").css("background-color", "black");

$("#idText").css("color", "white");

</script>

.cssはスタイルを変更する。実行すると以下のようなページが表示される。

要素の移動

親要素がある子要素の移動方法にはoffsetを使用する。topは上、leftは左を表している。offsetに引数を指定した場合は設定することができる。jQueryでは ( ) に値を入れると設定されるようになっていることが多い。

<body>

</div>

</body>

var timerId = null;

var sign = 1;

var pos = 0;

var baseLeft = $("#idText").offset().left;

var baseTop = $("#idText").offset().top;

battleTimerId = setTimeout("TimerFunc()", 100);

function TimerFunc()

{

pos = pos + sign * 20;

if (pos > 200) sign = -1;

else if (pos <= 0) sign = 1;

$("#idText").offset({left: baseLeft, top: baseTop + pos});

setTimeout("TimerFunc()", 300);

}

</script>

実行すると上下に移動する●が表示される。

offsetと似たものとしてpositionがある。これは親要素からの相対位置を取得することが可能である。ただし、positionは値の設定ができないので注意してほしい。

※このような実装は<div class="clsMain">内に<div id="idBack" style="margin: 0px auto;">を配置し、var offset = $("#idBack").offset();として取得するなどすると、ボーダーの内側で位置を計算されるため利便性が良さそうである。idBackは背景として扱う。また、はみだし部分を非表示にしたい場合は、親要素（clsMain）に「overflow: hidden;」を設定する。

テキスト欄とラジオボタン

ラジオボタンではnameを同じにすることによってグループ化できるが、これはセレクタとして$('input[name=radioname]')のようにして取得できる。チェックされている要素を取得するには$('input[name=radioname]:checked')とする。prop('checked', true)でチェックすることができる。

チェックボックスの値はval()で取得できる。これはvalueの値を取得するということであり、テキスト欄でも同じく取得できる。offset同様、引数に値を指定すれば、設定することができる。

text()要素の内容をテキストとして取得/設定できる。以下、サンプルと実行例である。

<body>

<input type="radio" name="colorSelect" value="赤" checked>赤

<input type="radio" name="colorSelect" value="青">青

住んでいる都道府県は？：<input type="text" name="prefecture" value="" size="14" maxlength="14"><br>

</div>

</form>

</body>

function WriteResult()

{

var color = $('input[name=colorSelect]:checked').val();

var prefecture = $('input[name=prefecture]').val();

$("#idResult").text("好きな色は" + color + "です。" + prefecture + "に住んでいます。");

}

function Clear()

{

$('input[value=赤]').prop('checked', true);

$('input[name=prefecture]').val("");

$("#idResult").text("");

}

</script>

ラジオボタンは青を選択し、テキスト欄に「山形県」と入力し、[結果書き込み]ボタンをクリックしたところである。結果に選択項目と入力項目が表示される。[クリア]をクリックすると、最初の状態に戻る。

text()とhtml()の違い

text()は内容を文字列としてして取得・設定する。一方、html()は内容をタグとして解釈し取得・設定する。

<body>

テキスト

<br>

HTML

<br>

HTMLをテキストとして取得

</body>

var s = "<span style='font-weight:bold'>text</span>";

$('#idResultAsText').text(s);

$('#idResultAsHtml').html(s);

$('#idResultAsTextFromHtml').html( $('#idResultAsHtml').text() );

</script>

"<span style='font-weight:bold'>text</span>"をどのように出力するかがポイントである。上のdiv要素はテキストとしてそのまま表示している。２番目のdivはHTMLと解釈されるため、フォントは太字になっている。３番目はHTMLで解釈されたなかで、テキスト部分をHTMLとして表示している。この場合は解釈するところがないので、装飾を外したうえで、そのまま表示されている。

属性

attrメソッドは属性を取得・変更する。「$("#idAvatar").attr("src", "avatar2.png");」のようにすれば画像(src)を変更できる。attr() の第１引数は属性名である。第２引数はその内容である。

removeAttr()では属性を削除する。「$("#idText").removeAttr("class");」とすればclassを削除する。

prop()はattr()と似ているが、チェックボックスのchecked、ラジオボタンのselectedに使用される。チェックされていればtrue、チェックされていなければfalseを返す。readonly、hiddenにもprop()を使用できる。

自作属性

HTMLタグには何かしらの理由から自分で何か属性を付け加えたいことがある。実質的には、変数のように扱うことができる。その値へのアクセス方法を見てみよう。

<body>

何か入力してください：<input type="text" name="nameInput" value="" prevalue="" size="14" maxlength="14"><br>

</div>

</form>

</body>

function Decide()

{

var input = $('input[name=nameInput]').val();

$('input[name=nameInput]').attr("prevalue", input);

$("#idResult").text("「" + input + "」と入力しました。");

}

function Undo()

{

$('input[name=nameInput]').val( $('input[name=nameInput]').attr("prevalue") );

}

</script>

テキスト欄には prevalue という自作属性が設定されている。[決定する]ボタンをクリックすると、テキスト欄のテキストをそのまま格納される。[戻す]ボタンをクリックすると、最後に[決定する]をクリックしたときのテキストがテキスト欄に復元される。

テキスト欄に「こんにちは」と入力し、[決定する]ボタンをクリックした状態である。ここで、テキスト欄を変更し、[戻す]をクリックすると、テキスト欄は「こんにちは」に戻る。

属性で指定するセレクタ

セレクタはID、クラス、HTML要素以外に属性で指定する方法がある。「$("[src='img1.png']").attr("src", "img2.png");」とすれば全てのimg1.png画像がimg2.pngに変更される。

要素の追加

appendメソッドは要素の最後に要素を追加する。「$("#idMain").("<span>hello</span>");」とすればIDがidMainのタグの最後に"<span>hello</span>"が追加される。

Google Sites

Report abuse