• このエントリーをはてなブックマークに追加

jQueryとは

jQueryというものは、今までJavaScriptを使って一から振る舞いをコーディングしていたものを少しばかり簡単に記述できるようになるJavaScriptで出来たプラグイン。またそれを利用した動きや、よく使用するエフェクトを実現させるためのプラグイン(ややこしいがこれもプラグインという)

jQueryの読み込む手順

まずはjQueryのコアファイルを読み込む。

  1. コアファイルをjQueryの記述より手前に記述して、読み込めるようにする。多くは<head>内に記述
  2. コアファイルの読み込みの後に、jQueryの文法で操作したいHTMLやCSSの記述をコーディングする
  3. チェックする

動かない原因

動かない原因はイロイロ。

  1. コアファイル、jquery.jsとかを読み込んでいない
  2. HTMLが準備されていない・CSSが準備されていないのにjQuery(JavaScript)が動いてしまってエラーになっている
    1. document readyを使って、HTMLが読み込まれて使用できるタイミング(操作できるようになったタイミング)で、そのコードが動くように記述する。
  3. ファイルの指定した場所が間違っている、つづりとか
  4. スライダーや、その他プラグインを使用する時はプラグインのJavaScript外にもCSSが必要な場合がある
  5. コアファイルと記述したjQueryのバージョンが合っていない
  6. 他のプラグインやjQuery(JavaScript)がコンフリクト(衝突)してエラーが起きて動いていない
  7. 指定しているHTMLのタグまたはクラス・IDなどの場所が違う、クラスやIDが存在していない

など。

jQueryのコアファイル

<script src="js/jquery.js"></script>

上記通りjquery.jsというようにJavaScriptの外部ファイルを読み込む。jquery-3.4.1.jsのようにしてもいい。ファイル名はダウンロードしたままでも良い。

たとえば、index.htmlファイルがあって、その場所の隣に、jsフォルダが有り、その中にjQueryのコアファイルを設置した場合は、

<script src="js/jquery-3.4.1.js"></script>

となる。
ファイルの設置する場所の説明が分かりづらかったと思うので、こちらにリストで表示すると。こんな感じのケースですよ、ということを補足しておきます。

ファイルの設置する場所の説明が分かりづらかったと思うので、こちらにリストで表示すると。こんな感じのケースですよ、ということを補足しておきます。

  • js
    • jquery.js(jquery-3.4.1.js)
  • index.html