jQuery ダウンロードと ファイルを読み込みむ方法
jQuery ダウンロード
jQueryをダウンロードするには公式サイトはhttps://jquery.com/こちらです。
ダウンロードするファイルがあるページはhttps://jquery.com/download/こちらです。
ページに飛ぶと何となくわかると思いますが英語が嫌いな人もいると思います。
真面目に読んでもいいのですが日本語に翻訳したらわかりやすいと思います。
Chromeは翻訳したいページで右クリックして日本語に翻訳を押せば日本語になります。
何が書かれてるかわかりやすくなりましたね。
圧縮された制作jQuery 3.2.1をダウンロードする
解凍された開発jQuery 3.2.1をダウンロードしてください。
上記の様に翻訳されているのでをどちらかをダウンロードしましょう。
ダウンロード以外にサイトから読み込む方法があります。
jQuery CDNファイルを読み込み
この方法をCDNといいます。
CDNは(コンテンルデリバリーネットワーク)の略です。
自分のサイトにアップロードすることなく直接読み込めます。
簡単にいうとwebコンテンツをインターネット経由で配信するネットワークのことです。
色々な会社がjQueryの配信してます。
それは今ダウンロードしたページの下にまとめられています。
MaxCDN https://www.maxcdn.com/
Google CDN https://developers.google.com/speed/libraries/#jquery
Microsoft CDN https://developers.google.com/speed/libraries/#jquery
CDNJS CDN https://cdnjs.com/libraries/jquery/
jsDelivr CDN https://www.jsdelivr.com/projects/jquery
以上のページに飛んでお好みのソースをコピペして下さい。
このURLを直接リンクしても意味ないのですよ。
一応Googleの一つ紹介しときます。
3.xスニペット：
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
バージョン3系のjqueryのCDNです。
上記のソースは直接リンクしたらいいです。
CDNを使用するにはheadタグの中の最後らへんに上記のファイルをコピペすればできます。
とりあえず動作確認がしたいと思うのでサンプルソースを用意しました。
ダウンロードしたバージョン
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“.red”).css(“color”,”red”);
});
</script>
<title>
</title>
</head>
<body>
<p class =”red”>red</p>
</body>
</html>
CDNを使用したサンプル
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“.red”).css(“color”,”red”);
});
</script>
<title>
</title>
</head>
<body>
<p class =”red”>red</p>
</body>
</html>
文字が赤色になっていたら動作してます。
動作しない人は以上のことを確認してください。
CDNのサンプルはちゃんとコピペしていたら動作はするはずです。
ダウンロードサンプルはダウンロードしたファイルをindexファイルと同じところに置きましょう。
入力された人は入力ミスがあるはずです。
scriptタグはちゃんとわけてますか?
一つにまとめると動きません。
<script src=”jquery-3.2.1.js”></script>
<script>
<script>
$(document).ready(function(){
$(“.red”).css(“color”,”red”);
});
</script>
カッコの入力ミスはありませんか?
クラス名を指定するときは.がいりますぬけてませんか？
文字が表示されていなければhtmlが間違ってます。
document).readyの記述をしないで書くと動作しません。
headタグに記述しているのでbodyタグの要素にアクセスしようと思っても
まだ読み込まれていないので要素のクラスを操作できないからです。
このサンプルはpタグのclassにアクセスして色を赤に変えてます。
