jQueryの基本
今回からjQueryをやります。jQueryは「The Write Less, Do More, JavaScript Library」とあるように出来るだけ記述を少なく、それでいてたくさんのことが出来るように設計された
JavaScriptのライブラリです。
jQueryを使うには
jQueryを使うにはライブラリをダウンロードしてきてWEBにサーバに置いて参照する方法と、ネット上のライブラリを直接参照する方法(CDN)があります。ライブラリをダウンロードする場合、公式ページでダウンロードできます。
ネット上のライブラリを直接参照する場合、以下の参照先があります。
jQuery
http://code.jquery.com/jquery-2.2.1.min.js
https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
Microsoft
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.1.min.js
jQuery使ってみる
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(function() {
$("#test").html("Hello World!!")
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
このページを表示すると divタグが <div id="test">Hello
World!!</div> のように変更され表示されます。 $が頭についている箇所がjQueryの関数になります。
$(function() { ・・・ });はページ読み込み後に実行される処理を定義できます。JavaScriptのonloadと同じようなものですが、onloadより
先に実行されます。起動する順番については起動順を参照して下さい。
$(" ・・・ ")はjQueryオブジェクトを返します。jQueryオブジェクトは色々な操作ができます。今回はhtmlメソッドを使用し、divタグの中にHTML文字列
を埋め込みました。・・・の部分は対象要素を選択しますが、この部分をセレクタと呼びます。
jQueryオブジェクトの操作
jQueryオブジェクトの操作では、attr、html、text、val、cssなどがあります。メソッド | 操作 |
---|---|
attr | 属性を参照、編集 |
removeAttr | 属性を削除 |
html | 要素内のHTML文字列を参照、編集 |
text | 要素内の文字列を参照、編集 |
val | フォーム要素(入力項目)の参照、編集 |
css | スタイルの参照、編集 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(function() {
$("#test1").attr("href", "http://thread.main.jp/javascript/jquery.html");
$("#test1").html("<strong>リンク</strong>");
$("#test1").css("color","red");
$("#test2").attr("type", "text");
$("#test2").val("テキスト入力");
alert($("#test1").text() + "---" + $("#test1").html());
alert($("#test2").attr("type") + "---" + $("#test2").val());
});
</script>
</head>
<body>
<a id="test1"></a>
<input id="test2" type="hidden" />
</body>
</html>
上記を実行すると以下のようはHTMLになります。
<a id="test1" href="http://thread.main.jp/javascript/jquery.html" style="color: red;"><strong>リンク</strong></a>
<input id="test2" type="text">
ダイアログでは以下の文字列が出力されます。
リンク---<strong>リンク</strong>
text---テキスト入力

ページのトップへ戻る