jQueryの導入

jQueryのダウンロードとHTMLページへのインポート

まずはjQueryの公式サイトからライブラリをダウンロード

あとはHTML側でダウンロードしたライブラリをhead部かbody部のどこかでインポート。

jQueryを使う準備はこれだけで完了^^

<!DOCTYPE html>
<html>
<head>
<title>jQueryの導入</title>
<meta charset="utf-8">
<script src="js/jquery-3.4.1.min.js"></script> 
<script src="js/test01.js"></script> <!-- 外部ファイルのJavaScript -->
</head>
<body>
<input type="button" value="ボタン" id="idBtn01">
</body>
</html>

jQueryを使ったJavaScriptファイルのサンプル↓

/* 外部ファイルのJavaScript */
$(function(){
	$("#idBtn01").click(function(){
		alert('hoge');
	});
});

jQueryを使ったJavaScriptのインポートは、必ずjQueryのライブラリをインポートした後で読み込んた後に記述。つまらない事だけど、このインポート順番が逆でjQueryが動かずにハマった事がある^^;

ライブラリをダウンロードしないで、公式サイトのファイルを直接参照する時は以下のように記述してもOK。ただし、公式サイトのライブラリファイルが削除されたりパスが変更になったりするのが心配なのでダウンロードして使ってます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>