Help us understand the problem. What is going on with this article?

jqueryとは何か?

jqueryについて

jQueryとは、JavaScriptのライブラリ(便利な機能を使いやすくしたもの)の一種。JavaScriptの書き方などを簡単にすることが出来る、JavaScriptで作成されたライブラリ。

できること

  • アニメーションをつける。
  • 時間によってページの色を変更する。
  • ユーザーの動作によってCSSを変更してレイアウトを変える。

作れるようになるといいもの
●ハンバーガーメニュー 
●アコーディオン
●スライダー
●スムーススクロール
●ドロップダウン
●ドロワーメニュー

使い方

主に2つのやり方がある。

①jQueryのサイトを開いて、ダウンロードして使う
HTMLファイルにダウンロードしたjQueryファイルを紐づける。
typeはなくてもいい。違いがない。

<head>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>

②jQueryをダウンロードせずに、他のサーバーにあるものを使用する
GoogleやMicrosoft、jQuery本家などのサーバーが配信しているjQueryを使う。
CDN(コンテンツデリバリネットワーク)アクセス元から近いサーバーと通信をとって高速化をはかるものです。

google

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

jquery

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

記述場所

・読み込み方法---head内
・記述方法---</body>の直前  ←なぜ?

・Webページの表示速度を早くする
javascriptを読み込んでいる間は、HTMLファイルの読み込みが止まってしまう為、
HTMLファイルをほぼ全部読み込んで表示された後javascriptを読み込む方が表示速度が早くなります。

・並列ダウンロードの妨げになってしまう
これは1.の「表示速度を早くする為」の1つを掘り下げた感じになるかもしれませんが、ブラウザ側では表示速度を上げるために、サーバーから画像等をダウンロードする際には1個1個ダウンロードするわけでなく、一度に何個かダウンロードしています。その何個か同時にダウンロードするということが出来なくなってしまう為、結果表示速度も遅くなってしまいます。

読み込み位置で実行速度にあまり差はない。


外部ファイル

<head>
<script type="text/javascript" src="〇〇〇.js"></script>
</head>
alert("Hello World!") これを最初に記述する。

CDNとダウンロードについて

jquery メリット デメリット
CDN ・自分のサーバーにアップロードする必要がない
・他のサイトでキャッシュされている可能性がある
・CDNサーバーに不具合があると読み込めない
ダウンロード オフラインでも動作させることができる 最新バージョンに変更したいときに毎回アップロードしなければならない

タイプの違い

タイプ 説明
.js ソースが見やすく整形されているタイプです。通常は使用しません。
.min.js ファイルサイズを小さくすることを目的にソースから改行やスペース等が取り除かれているタイプです。通常これを使用します。
.slim.js 3.x系のみ存在するタイプです。AnimationやAjax等の機能を省いた軽量タイプです。ソースは整形済みです。
.slim.min.js .slimタイプのソース未整形タイプです。slimタイプを使う場合はmin付きのこちらを使用します。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした