jQueryを使うには、jQueryの元となるライブラリを読み込む必要があります。
ライブラリは、基本的に１ファイルのみです。インターネット上にいろいろ転がっていますが、
最新はhttp://jquery.com/download/から取得してください。
※記述中の最新のバージョンは「3.2.1」でした。
jquery-3.2.1.js
がライブラリになります。
少し外れますが、たまに「jquery-3.2.1.min.js」と、「min」が付くファイルがあります。
jquery-3.2.1.jsとjquery-3.2.1.min.jsは全く同じ内容のコードが書かれたファイルで、改行があるかないかだけの違いです。
なぜ2つに分けたのか理由は知らないですが、改行が無いとネットワークの転送速度がいささか早くなるためと、改行が無いと読みづらくなるためセキュリティが向上するからだとも考えられます。
また、jquery-3.2.1.jsは「jQuery.js」と記述しても使用はできます。ただのライブラリなので、結果的にライブラリを読み込んでjQueryが動作すればOKです。
jQueryを使うには、jquery-x.x.x.jsやjquery-x.x.x.min.jsが必要
※注意
「x.x.x」はバージョンとマイナーバージョンとリビジョンを表しています。
数値が大きいほど最新ですが、リリース（インターネット上に公開されていること）されているライブラリは数値で管理されていると覚えておいてください。
ダウンロードしてきたjquery-3.2.1.jsを任意のフォルダに置きます。
c:\test\
jquery-3.2.1.js
test.html
test.htmlファイルの中身
<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.js" ></script>
</head>
<body>
<script>
jQuery(document).ready(function($){
var value= $("[name=test]").val();
alert(value);
});
</script>
<input type="text" name="test" value="XYZ" />
</body>
</html>
inputの値 XYZ を画面表示時に取得し、ダイアログボックスで表示しているだけのものです。
▼scriptでjquery-3.2.1.jsファイルの読込をしています。
<script type="text/javascript" src="jquery-3.2.1.js" ></script>
▼画面表示時の処理です。nameがtestというinputの値 XYZ を取得し、alertでダイアログボックスの表示をしています。
jQuery(document).ready(function($){
var value= $("[name=test]").val();
alert(value);
});
※「jQuery(document).ready(function($)」以外にもいろいろな書き方がありますが、ここでは長い名前を使ってます。
jQueryのライブラリは「script」を使って読み込むこと。
３．jQueryのライブラリのいろいろな呼出し方法
head内でライブラリを呼出すのがちょっとしたお約束なのですが、別にhead内で呼出す必要はありません。
大事なのは、jQueryのコードが実行される前に、jQueryのライブラリ（jquery-3.2.1.js）が呼び出されているかどうかが大切です。
jQueryもコードの上から下に処理を流して実行させる「インタープリター」だから、直前に必要なライブラリが無いとエラーになります。
▼head内での呼出し
<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.js" ></script>
</head>
<body>
<script>
jQuery(document).ready(function($){
var value= $("[name=test]").val();
alert(value);
});
</script>
…
▼head外での呼出し
<html>
<head>
</head>
<body>
<script type="text/javascript" src="jquery-3.2.1.js" ></script>
<script>
jQuery(document).ready(function($){
var value= $("[name=test]").val();
alert(value);
});
</script>
…
他にも、別のサイトから読込むことができます。
以下では、Googleが公開しているGoogle Hosted Librariesから読込みをしています。
信頼できるサイトから読込みを行うのは問題ないのですが、信頼できないセキュリティ上問題あるサイトもありますのでなるべく自分のホームページに近いところにライブラリを置いて使うほうが良いでしょう。
▼Google Hosted Librariesから、ライブラリを読込
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>
<script>
jQuery(document).ready(function($){
var value= $("[name=test]").val();
alert(value);
});
</script>
…
jQueryのコードを処理する前に、jQueryのライブラリを必ず読み込むこと
必ずしも、jQueryのライブラリはheda内で詠みこむ必要はない
別のサイトから読込みすることができる
