jQueryを使って何ができますか？

jQueryは、JavaScriptライブラリの一つで、HTMLのDOM操作、イベント処理、アニメーション、Ajaxなどをより簡潔なコードで実現することができます。 JavaScriptを使う上での煩雑な処理を簡単に行えるよう、開発者に広く利用されています。

jQueryでできること

jQueryを使えば、以下のような様々な操作を効率的に行うことができます。

機能	説明
DOM操作	要素の選択、追加、削除、属性の変更などが容易に行えます。
イベント処理	クリック、マウスオーバー、フォーム送信などのイベントに、JavaScriptの関数を簡単に割り当てることができます。
アニメーション	要素の表示状態、サイズ、位置などを滑らかに変化させるアニメーション効果を簡単に実装できます。
Ajax	ページをリロードせずに、サーバーとの非同期通信を行い、データの送受信を行うことができます。

DOM操作の例

例えば、id属性が"target"の要素の背景色を赤に変更する場合は、以下のように記述します。


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQueryの例</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#target").css("background-color", "red");
    });
  </script>
</head>
<body>
  <p id="target">このテキストの色が変わります</p>
</body>
</html>

イベント処理の例

ボタンがクリックされた時にアラートを表示する例です。


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQueryの例</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#myButton").click(function() {
        alert("ボタンがクリックされました！");
      });
    });
  </script>
</head>
<body>
  <button id="myButton">クリック</button>
</body>
</html>

参考資料

よくある質問

Q1: jQueryを使うにはどうすればよいですか？

A1: jQueryを使用するには、HTMLファイルにjQueryライブラリを読み込む必要があります。 CDNを利用するのが簡単です。<head>タグ内に以下のコードを追加します。


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

Q2: jQueryとJavaScriptの違いは？

A2: jQueryはJavaScriptのライブラリです。 JavaScriptで記述されたコードをより簡潔に、そして効率的に記述できるようにまとめられています。 jQueryを使うことで、クロスブラウザ対応なども容易になります。

Q3: jQueryは現在も使われていますか？

A3: 近年、JavaScriptの進化に伴い、jQueryの必要性は減りつつありますが、既存のプロジェクトや、シンプルな操作を効率的に行いたい場合など、現在でも広く利用されています。

その他の参考記事:jquery src 取得