HOWTO · jQuery

Selector de ID de jQuery

Este tutorial demuestra cómo usar el selector de ID en jQuery.

Hay tres tipos de selectores en jQuery; ID, Clase y Elemento. Este tutorial demuestra cómo usar el selector ID en jQuery.

Selector de ID de jQuery

El selector ID seleccionará un solo elemento con el atributo id dado. La sintaxis es simple $(#ID), donde ID es el ID del elemento.

Si el ID contiene caracteres especiales como puntos o dos puntos, debemos escapar esos caracteres usando barras invertidas. El selector ID devuelve la matriz llena de elementos encontrados.

Por ejemplo:

  1. #DemoID seleccionará un solo elemento con la ID dada.
  2. Div#DemoID seleccionará un div con la ID dada.

Veamos un ejemplo de uso del selector ID en jQuery.

<!DOCTYPE HTML>
<html>
    <head>
        <title>jQuery ID Selector</title>
        <script type = "text/javascript" src = "https://code.jquery.com/jquery-1.10.2.js"> </script>

        <script type = "text/javascript" language = "javascript">
            $(document).ready(function() {
                $("#DemoDiv1").css("background-color", "lightblue");
            });
        </script>
    </head>

    <body>
        <div id = "DemoDiv1">
            <p>This is the First Div.</p>
        </div>

        <div id = "DemoDiv2">
            <p>This is the Second Div.</p>
        </div>

        <div class = "DEMO1" id = "DemoDiv3">
            <p>This is the Third Div.</p>
        </div>
		<div class = "DEMO2" id = "DemoDiv1">
            <p>This is the Fourth Div.</p>
        </div>
    </body>
</html>

El código anterior seleccionará el elemento con una identificación única y cambiará su color de fondo; como este código tiene dos elementos con el mismo ID, solo seleccionará el primero porque el ID siempre es único. Ver salida:

Selector de ID de jQuery