初心者向けjQuery入門

初心者向けjQuery入門講座です

未分類

jQuery ダウンロードとCDNファイルを読み込みむ方法とready

投稿日:2017年7月29日 更新日:

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にアクセスして色を赤に変えてます。

スポンサードリンク




スポンサードリンク




-未分類
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

jQuery slideUpとslideDownとslideToggle

jQuery slideUpとslideDownとslideToggle jQuery slideUp slideUpはスライドをアップします。 要素が上に上がっていき非表示になります。 サンプル $ …

no image

jQuery widthとheight要素の横と縦を設定する

jQuery widthとheight要素の横と縦を設定する jQuery width 要素のサイズの横幅を設定するにはwidthメソッドを使用します。 $(“セレクタ”).w …

no image

jQuery prevとnext前と後の要素取得する

jQuery prevとnext前と後の要素取得する jQuery prev前の要素取得する prevは英語の略語で previous(以前の) 等です。 prevは指定した要素の前の要素を取得します …

no image

jQuery attrとremoveAttr属性の取得と設定と削除

jQuery attrとremoveAttr属性の取得と設定と削除 attrはattributeの略ですね。 英語で属性という意味です。 jQuery attr属性の設定する サンプル $(&#822 …

no image

jQuery 隣接セレクタと子セレクタのチャイルドセレクタ

jQuery 隣接セレクタと子セレクタのチャイルドセレクタ jQuery 隣接セレクタ 隣接セレクタとは隣に接しているセレクタの二つ目の要素を指定します。 隣り合っているとなっていますが前後にあるセレ …