jQeuryはもはや、CDNで読み込むのが一般的だとおもうけど、CDNはネットの環境があるのが前提なので、ネット環境がないときはjQueryの本体を使わないといけない。
逆に言えばjQuery本体を設置すればjQueryが使えるわけなので、今回はかなり初歩的かもしれないが、jQueryの本体を設置する方法を改めて書いておこうと思う。
スマホでjQeuryの本体をダウンロードする
ちょっと特殊なケースかもしれないけど、スマホでjQuery本体をダウンロードする手順を書いておこうと思う。
- https://jquery.com/download/にアクセスする
- 【Download the compressed, production jQuery 3.4.1】と書かれてあるリンクをクリックする。
- リンクをクリックするとソースコードが表示されるので、テキストエディター等にコピペする。
- テキストエディターでコピペしたソースコードを保存し、【jquery-3.4.1.min.js】などのファイル名にする。
とりあえずスマホからjQuery本体をダウンロードする方法を書いたが、結局のところダウンロードするというよりかは、リンクをタップしたら表示されるのはソースコードなので、それを一旦テキストエディターなどにコピペする必要がでてくるということ。
任意のファイル名で、拡張子を.jsにすれば、jQuery本体の出来上がりというわけだ。
jQuery本体をhtmlに設置する
jQuery本体は通常どこに設置すればいいのかというとhtmlのbodyの閉じタグの直前が一般的である。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"? <title>jQuery practice</title> </head> <body> <p id="hello">hello</hello> <script src="jquery-3.4.1.min.js"></script> </body> </html>
jQuery本体が効いているかどうかチェックする
jQueryが効いているかどうかチェックする方法はたぶんブラウザの機能でチェックする正式なやり方があると思うけど、原始的なやり方として clickとアラートを使って確認する方法があると思う。
以下のようなコードでいいかと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"?
<title>jQuery practice</title>
</head>
<body>
<p id="hello">hello</hello>
<script src="jquery-3.4.1.min.js"></script>
<script>
$('#hello').click(function(){
alert('hello')
});
</script>
</body>
</html>
これでクリックしてアラートがでれば、jQueryが効いていることになりますね。
jQueryはいろいろ壁に当たることが多いので、準備くらいはさくっとすませたいところですね。以上でこの記事は終わりです。
コメント