JS jQueryの基本構文

2020-03-26

WEBサイトを制作するにあたって、JavaScriptの活用は欠かせません。
その中でも広く使用されているのは、jQueryライブラリです。

まず、jQueryを使用するにあたって、下記サイトよりjQueryのファイルをダウンロード、または、CDNへリンクして使用するという方法です。

CDN（コンテンツデリバリネットワーク）へのリンク

こちらもJqueryのダウンロードサイトと同じサイト（下の方）にリンクがありますので、そちらを参考にしてください。

下記には、Googleが配信しているものを使用する場合のリンクを記述しています。これを<head>内または、<body>タグの下の方に記述してください。
クライアントの仕様によって、記述先は変更した方が良いですが、個人的には、<body>タグの下部に記述しています。<head>内に記述すると、HTMLを読み込む際、jsファイルの読み込みが完了するまでHTMLやCSSなどの読み込みをブロックしてしまいます。
jsファイルは<body>下部で読み込むようにすれば、HTMLやCSSなどの読み込みが終わっているため、Javascriptによる影響も少なくなるからです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

また、‘http:’、‘https:’のプロトコル記述は省略しても構いません。プロトコルを省略すると、アクセス元のプロトコルが自動的に適用され、セキュリティの警告が出ないなどのメリットがあり、Googleも推奨しています。ただ、ローカルではリンク切れとなり、jQueryが動作しなくなるので、注意してください。

Scriptの記述

jQueryファイルの読み込みができたら、次にスクリプトを記述する準備をしていきます。
スクリプトは、jQueryを読み込んだ後に、記述をしないと動作できません。また、記述の仕方は、下記のように、いくつか方法があり、基本どれでも大丈夫ですが、他のライブラリと併用している場合は競合してしまい、エラーになってしまう事があるので、ご注意ください。

<script>
jQuery(document).ready(function () {
   //  ここにスクリプトを記述
});
</script>

jQuery(document).ready(function () {

// ここにスクリプトを記述

});

</script>

または、

<script>
$(document).ready(function(){
   //  ここにスクリプトを記述
});
</script>

$(document).ready(function(){

// ここにスクリプトを記述

});

</script>

または、

<script> 
jQuery(function(){
   //  ここにスクリプトを記述
});
</script>

jQuery(function(){

// ここにスクリプトを記述

});

</script>

または、

<script>
$(function() {
   //  ここにスクリプトを記述
});
</script>

$(function() {

// ここにスクリプトを記述

});

</script>

そして、この<script>タグ内に記述した内容は、$(function() {});の部分をそのまま、別ファイルにコピーして記述し、読み込むようにすることもできます。

<script src="jsファイルへのリンク"></script>

1	<script src="jsファイルへのリンク"></script>

これで、jQueryの準備は完了です。