PHP で jQuery を使用する

Olorunfemi Akinlua 2024年2月15日

PHP PHP jQuery

PHP アプリケーション内でさまざまな JavaScript ライブラリを使用できますが、jQuery が一般的です。 React や Vue を使用する人が増えていますが、jQuery を使用している Web サイトは 150,262,730 以上あります。

一部の DOM 操作では、jQuery は、特に PHP アプリケーション内で目標を達成するのを容易にする関数と機能を提供します。

この記事では、PHP コード内で jQuery を使用する方法について説明します。

`<script>` を使用して PHP で jQuery を使用する

jQuery である他の JavaScript ファイルと同様に、それを含めるには <script> タグが必要です。 src 属性を使用して HTML または PHP ファイル内に <script> タグを配置して、jQuery ライブラリの場所を指定できます。

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

上記のコードは、jQuery バージョン 3.6.0 CDN を利用しています。ローカルで使用する場合は、以下のコードを使用できます (環境内で jQuery ライブラリを配置する場所、パスによって異なります)。

<script src="jquery-3.6.0.min.js"></script>

<script> を配置する場所は重要です。常に PHP または HTML ファイルの最後に配置する必要があります (特に body タグの最後の前)。

これは、レンダリングのパフォーマンスを向上させ、JavaScript の応答が遅い場合に読み込みが遅くなるのを防ぐためです。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <?php

    echo "Hello, PHP Admin";

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

</html>

また、jQuery ファイルの場所を PHP 変数内に保存し、必要な場所に echo することもできます。

<script src="<?php echo $jQuery; ?>"></script>

PHP コードベース内で jQuery を操作して、jQuery ライブラリを使用して段落を非表示にしてみましょう。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <?php
    $user = "Jinku";
    echo "<h1>Hello " . $user . ", PHP Admin</h1>";
    ?>
    <h2>This is a heading</h2>

    <p>This is a paragraph.</p>
    <p id="test">This is another paragraph.</p>

    <button>Click me</button>

    <?php

    $jQuery = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js";

    ?>
    <script src="<?php echo $jQuery; ?>"></script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("#test").hide();
            });
        });
    </script>
</body>

</html>

ボタンをクリックする前のブラウザーでのコードの出力。

ボタンをクリックすると、段落が非表示になります。

著者： Olorunfemi Akinlua

Olorunfemi is a lover of technology and computers. In addition, I write technology and coding content for developers and hobbyists. When not working, I learn to design, among other things.

<script> を使用して PHP で jQuery を使用する

`<script>` を使用して PHP で jQuery を使用する