jQuery

jQuery

jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリのこと。

参考元:Wikipedia- jQuery

jQueryでできる主なことは以下です。

  • スライドショーの作成
  • 画像の拡大などのエフェクト
  • 動きのあるメニュー機能の追加
  • 動きのあるSNSボタンの設置
  • レスポンシブデザイン
  • 動きのある画像の追加

HTML・CSSで作成した静的サイトにちょっとした動きのあるエフェクトなどを追加するためにjQueryを使用します。jQueryを使用することでサイトのデザイン性がより高くなります。

jQueryの使い方

jQueryは次のいずれかの方法でサイトに導入します。

  • jQueryのファイルをダウンロードし、ウェブサイトのデーターに組み込む
  • サーバー上にあるjQueryファイルをHTMLファイルに紐づけて使う

二つ目のサーバー上のjQueryを使用する方法は、ページの表示速度に影響を与えることがあるため、なるべくjQueryをダウンロードして使用しましょう。

jQueryのダウンロード

まずは下記リンク先のjQuery公式サイトからjQueryをダウンロードします。

https://jquery.com/download/

jQueryファイルには、拡張子に「min」が記載されているものと、「min」が記載されていないものがあります。これらの違いは、圧縮版であるかそうでないかです。

圧縮版(minがついているファイル)データの容量が少なく、処理速度が速い(おすすめ)
非圧縮版(minがついていないファイル)改行やコメントなどがファイルに記述されている(学習には向いているが、運用には向いていない)

サーバー上のjQueryの使用

jQueryの公式サーバーや、GoogleなどのサーバーにアップロードされているjQueryファイルをHTMLファイルに紐づけることでもjQueryを使うことができます。<head></head>で囲われている部分、もしくは<body>タグ内に以下のコードを記述しましょう。

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

jQueryの使い方

jQueryでスライドショーを作りたい場合、「jQuery スライドショー」で検索するように、用途に合わせてjQuery+使用用途でGoogle検索をしましょう。

まとめ

ウェブサイトの動的表現を行うためのjQueryについてまとめました。必要に応じてjQueryを導入し、機能的なウェブサイトを作成しましょう。