Usar jQuery en PHP

Olorunfemi Akinlua 15 febrero 2024
Usar jQuery en PHP

Podemos usar diferentes bibliotecas de JavaScript dentro de nuestra aplicación PHP, y jQuery es popular. Aunque la gente ahora usa más React o Vue, todavía hay más de 150,262,730 sitios web que usan jQuery.

Para algunas manipulaciones de DOM, jQuery proporciona funciones y características que facilitan el logro de nuestros objetivos, especialmente dentro de nuestra aplicación PHP.

Este artículo le mostrará cómo usar jQuery dentro de su código PHP.

Use <script> para usar jQuery en PHP

Como con cualquier archivo JavaScript, que es jQuery, necesitamos la etiqueta <script> para incluirlo. Puede colocar la etiqueta <script> dentro de su archivo HTML o PHP usando el atributo src para especificar la ubicación de la biblioteca jQuery.

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

El código anterior utiliza jQuery versión 3.6.0 CDN. Si tenemos la intención de usarlo localmente, podemos hacer uso del siguiente código (dependiendo de dónde coloquemos la biblioteca jQuery dentro de nuestro entorno, la ruta).

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

Donde colocamos el <script> importa; siempre debemos colocarlo hacia el final de nuestro archivo PHP o HTML (especialmente antes del final de la etiqueta del cuerpo).

Esto es para mejorar el rendimiento de la representación y evitar la carga lenta en el caso de una respuesta lenta de 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>

Además, puede guardar la ubicación de su archivo jQuery dentro de una variable de PHP y “hacer eco” de la ubicación donde lo necesita.

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

Juguemos con jQuery dentro de una base de código PHP y ocultemos un párrafo usando la biblioteca 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>

La salida del código en un navegador antes de hacer clic en el botón.

Archivo PHP renderizado antes de hacer clic en el botón

Después de hacer clic en el botón, el párrafo se oculta.

Después de hacer clic en el botón

Olorunfemi Akinlua avatar Olorunfemi Akinlua avatar

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.

LinkedIn