ユーザー ブラウザで jQuery のバージョンを確認する

  1. typeof 演算子を使用して jQuery のバージョンを取得する
  2. window オブジェクトを使用して jQuery のバージョンを取得する
ユーザー ブラウザで jQuery のバージョンを確認する

この記事では、Web ページで jQuery バージョンを取得する 2つの方法を説明します。 最初のメソッドは Web ページが jQuery をロードしているかどうかをチェックし、2 番目のメソッドは jQuery が window オブジェクトに存在するかどうかをチェックします。

typeof 演算子を使用して jQuery のバージョンを取得する

Web ページが jQuery ライブラリをロードすると、jQuery キーワードまたはドル記号 ($) によって利用可能になります。 これにより、typeof 演算子を使用して $ または jQuery が存在するかどうかを確認できます。

チェックがtrueを返した場合、jQuery は Web ブラウザーに存在するため、バージョン番号を出力できます。

それが、次のコードで実行したことです。 以下は、Web ブラウザーでの出力です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>01-get-jQuery-version</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
    <script>
        // Check if jQuery exists using the typeof
        // operator. The code in the if block will
        // run ONLY if jQuery exists in the user's
        // web browser
        if (typeof jQuery !== undefined) {
            // Show the jQuery version number in the
            // alert dialog box.
            alert("The current jQuery version is: " + jQuery.fn.jquery);
        }
    </script>
</body>
</html>

出力:

typeof 演算子 - Firefox 104.0.2 の jQuery バージョン

window オブジェクトを使用して jQuery のバージョンを取得する

Web ブラウザーが jQuery ライブラリーをロードした場合、そのエイリアスが window オブジェクトで使用可能になります。 この知識があれば、window オブジェクトで jQuery をチェックして、バージョン番号を取得できます。

前の例とは異なり、jQuery().jquery を使用してバージョンを取得します。 これはオブジェクトを作成するので、それを望まない場合は、最初の例を使用してください。

以下では、バージョンを出力する前に window オブジェクトに jQuery が含まれているかどうかを確認します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>02-get-jQuery-version</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <style>
         body {
            background-color: #1a1a1a;
         }
     </style>
</head>
<body>
    <script>
        // Check if jQuery exists in the window
        // object.
        if (window.jQuery) {
            // Show the jQuery version number in the
            // alert dialog box.
            alert("The current jQuery version is: " + jQuery().jquery);
        }
    </script>
</body>
</html>

出力:

window オブジェクト - Firefox 104.0.2 の jQuery バージョン

チュートリアルを楽しんでいますか? <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe
著者: Habdul Hazeez
Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn