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

Google
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より
先に実行されます。起動する順番については起動順を参照して下さい。

$(" ・・・ ")はｊQueryオブジェクトを返します。ｊQueryオブジェクトは色々な操作ができます。今回はhtmlメソッドを使用し、divタグの中にHTML文字列
を埋め込みました。・・・の部分は対象要素を選択しますが、この部分をセレクタと呼びます。

ｊQueryオブジェクトの操作

ｊQueryオブジェクトの操作では、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---テキスト入力

ページのトップへ戻る