Tbpgr Blog

Employee Experience Engineer tbpgr（てぃーびー） のブログ

jQuery1.7.1導入手順

jQuery
  • 概要

jQueryの導入手順に関して説明します。
※2012/01/26時点でversion1.7.1

  • インストール手順
    • 下記URLのjQuery公式サイトを開く

http://jquery.com/

    • PRODUCTION (31KB, Minified and Gzipped)チェックを選択

※圧縮バージョン。jQueryのコードを可読性の高い形式で読みたい場合は
DEVELOPMENT (229KB, Uncompressed Code)をチェック。

    • 画面右側のDownLoad（jQuery）ボタンを押下
    • ファイルを任意の場所に保存
    • 導通確認

以下の内容でhtmlとjquery.jsをい同じ階層に保存して、
ブラウザで動作確認を行う。
Hideクリックでtest1,test2が縮小しながら非表示に。
Showクリックでtest1,test2が拡大しながら表示になれば確認成功です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">

$(document).ready(
	function() {
		$("button").click(function () {
			$("p").hide("slow");
		});
		$("div").click(function () {
			$("p").show("slow");
		});
	}
);
</script>
</head>
<body>
	<div id="divShow" style="background:gray;width:100px;">Show</div>
	<button id="btnHide">Hide</button>
	<p style="background:red;">test1</p>
	<p style="background:blue;">test2</p>
</body>
</html>