Selector de elementos jQuery

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS, o más precisamente, el Modelo de objetos del documento (DOM) y JavaScript. Al elaborar los términos, simplifica el recorrido y la manipulación de documentos HTML, el manejo de eventos del navegador, las animaciones DOM, las interacciones Ajax y el desarrollo de JavaScript entre navegadores.

El selector de elementos jQuery se utiliza para seleccionar y modificar elementos HTML en función del nombre del elemento. 

Sintaxis:

$("element_name") 

Ejemplo 1: este ejemplo selecciona el elemento «h2» y le agrega un borde. 

HTML

<!DOCTYPE html>
<html>
<head>
  <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("h2").css("border",
        "5px solid green");
    });
  </script>
</head>
<body>
  <h2>GeeksForGeeks</h2>
</body>
</html>

Producción: 

 

Ejemplo 2: este ejemplo cambia el color del texto del elemento «h2» al hacer clic en el botón. 

HTML

<!DOCTYPE html>
<html>
<head>
  <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        $("h2").css("color",
          "green");
      });
    });
  </script>
</head>
<body>
  <h2>GeeksForGeeks</h2>
  <button>Change text color</button>
</body>
</html>

Producción:

 

 

Navegadores compatibles:

  • Google Chrome 90.0+
  • Internet Explorer 9.0
  • Firefox 3.6
  • Safari 4.0
  • Ópera 10.5

Publicación traducida automáticamente

Artículo escrito por aman neekhara y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *