【JavaScript】jQueryの書き方を分かりやすく解説！JavaScriptとjQueryのコードを比較！

2024年3月8日

この記事では、jQueryのコードの書き方が分からない！という方に向けて丁寧に解説していきます！なるべく分かりやすい解説を心掛けるので是非最後まで見ていってください！

jQueryの準備

まずjQueryを使えるようにするため、下記のコードをHTMLに貼り付けてください。

リンクのないところでダブルクリックすると全選択されます！

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

貼り付ける場所は、bodyの最後になります！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- ↓↓↓ jqueryのコードをbodyの最後に貼り付ける ↓↓↓ -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</body>
</html>

これでjQueryが使えるようになりました！

次にjQueryのコードを書いていくためにオリジナルのJsファイルを作成します！

※この時、最初に貼り付けたjQueryのコードより下にJsファイルを呼び出すようにしてください！

<body>
  <!-- ↓↓↓ jqueryのコードをbodyの最後に貼り付ける ↓↓↓ -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <!-- ↓↓↓ jqueryのコードより下にオリジナルjsファイルを呼び出す ↓↓↓ -->
  <script src="main.js"></script>
</body>

なぜjQueryのコードより下に記述するのか？

それは、コードを読み込む時に上から順番に読まれていくからです！
もしjQueryを使えるようにするコードより前にオリジナルjsファイルがあったらどうでしょうか？
jQueryの記述法が使えないのにオリジナルjsファイルでjQueryの記述でコーディングしているためエラーが発生します。

jQueryの基本形

次に作成したオリジナルjsファイルにコーディングしていきます！

jQueryのコードを書くときは必ず以下のコードを記載する必要があります。

上と下のコードは同じ内容なのでお好きな方を使ってください！

$(document).ready(function() {
  // ここにコードを書く
});

$(function() {
  // ここにコードを書く
});

要素の取得

要素の取得方法について、JavaScriptとjQueryの書き方を比較していきます。

JavaScriptの場合

const element = document.querySelector(".element");

jQueryの場合

const element = $(".element");

JavaScriptとjQueryを比較すると、jQueryの方が短くスッキリコードが書けます！

今回は、クラス『element』を変数『element』に代入する内容になっています。
これでクラス『element』の要素を取得することができました。

イベントの処理

イベントの処理について、JavaScriptとjQueryの書き方を比較していきます。

今回はクリックイベントを例で解説していきます。

JavaScriptの場合

const button = document.querySelector(".button");
button.addEventListener("click", function() {
    // ここに処理を記述
});

jQueryの場合

$(".button").click(function() {
    // ここに処理を記述
});

上記のコードは、クラス『button』をクリックした時に指定した処理を実行するコードになります。

内容は同じですが、jQueryの方がとてもスッキリしています！

処理の内容

処理の内容について、JavaScriptとjQueryの書き方を比較していきます。

今回は、クラスを追加する時を想定して解説します。

JavaScriptの場合

const element = document.querySelector(".element");
element.classList.add("newClass");

jQueryの場合

$(".element").addClass("newClass");

上記のコードは、クラス『element』の要素にクラス『newClass』を追加する内容になっています。

まとめ

最後に今までの内容を使ってクリックイベントのコードをJavaScriptとjQueryで比較して解説します。

JavaScriptの場合

const button = document.querySelector(".button");
const element = document.querySelector(".element");
button.addEventListener("click", function() {
    element.classList.add("newClass");
});

jQueryの場合

$(function() {
    $(".button").click(function() {
        $(".element").addClass("newClass");
    });
});

上記のコードは、クラス『button』の要素をクリックした時にクラス『element』の要素にクラス『newClass』を追加する内容になっています。

JavaScriptとjQueryを比較すると、jQueryの方がコードがスッキリしていて分かりやすいです！

今回は、jQueryの書き方について説明していきました。
まだJavaScriptの勉強が不安な方はおすすめの本を掲載しましたので検討してみてください！

リンク

本番の環境で勉強したい方はおすすめのサーバーを紹介してます！
ConoHa WINGは当サイトでも使用しており、使い方の解説記事もありますので是非検討してみてください！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

【JavaScript】jQueryの書き方を分かりやすく解説！JavaScriptとjQueryのコードを比較！

jQueryの準備

jQueryの基本形

要素の取得

イベントの処理

処理の内容

まとめ

関連記事