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（コンテンツデリバリネットワーク）アクセス元から近いサーバーと通信をとって高速化をはかるものです。
<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個ダウンロードするわけでなく、一度に何個かダウンロードしています。その何個か同時にダウンロードするということが出来なくなってしまう為、結果表示速度も遅くなってしまいます。
読み込み位置で実行速度にあまり差はない。
scriptタグの記述場所は別にどこでも構わないが、bodyタグの終端に記述する理由は以下のような理由がある。
●javascriptファイルを読み込んでいる間は、HTMLファイルを読み込まないため、ページのレンダリングを行わせてからjavascriptファイルを読み込むことで表示速度を早くする。
●CSSはheadタグ中に、javascriptはbodyタグの下にまとめて記述することでわかりやすくなる。
ただし、HTMLが解析される前に実行されるべきjavascriptファイルなどはheadタグ内に記述するべきだと思います。
headタグ内にscriptタグを置いたときには、javascriptファイルが最初に読み込まれるので、そのjavascriptファイルのサイズが巨大だった場合、ページの表示に時間がかかることになります。
外部ファイル
<head>
<script type="text/javascript" src="〇〇〇.js"></script>
</head>
alert("Hello World!") これを最初に記述する。
CDNとダウンロードについて
<head>
<script type="text/javascript" src="〇〇〇.js"></script>
</head>
alert("Hello World!") これを最初に記述する。
| jquery | メリット | デメリット |
|---|---|---|
| CDN | ・自分のサーバーにアップロードする必要がない ・他のサイトでキャッシュされている可能性がある |
・CDNサーバーに不具合があると読み込めない |
| ダウンロード | オフラインでも動作させることができる | 最新バージョンに変更したいときに毎回アップロードしなければならない |
タイプの違い
| タイプ | 説明 |
|---|---|
| .js | ソースが見やすく整形されているタイプです。通常は使用しません。 |
| .min.js | ファイルサイズを小さくすることを目的にソースから改行やスペース等が取り除かれているタイプです。通常これを使用します。 |
| .slim.js | 3.x系のみ存在するタイプです。AnimationやAjax等の機能を省いた軽量タイプです。ソースは整形済みです。 |
| .slim.min.js | .slimタイプのソース未整形タイプです。slimタイプを使う場合はmin付きのこちらを使用します。 |
Author And Source
この問題について(jqueryとは何か？), 我々は、より多くの情報をここで見つけました https://qiita.com/masaki1117/items/e0b648a1900d3739c0b8著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .