Selectores jQuery
Los selectores jQuery son una de las partes más importantes de la biblioteca jQuery.
Selectores jQuery
Los selectores de jQuery le permiten seleccionar y manipular elementos HTML.
Los selectores de jQuery se utilizan para "encontrar" (o seleccionar) elementos HTML en función de su nombre, identificación, clases, tipos, atributos, valores de atributos y mucho más. Se basa en los selectores de CSS existentes y, además, tiene algunos selectores personalizados propios.
Todos los selectores en jQuery comienzan con el signo de dólar y paréntesis: $().
El selector de elementos
El selector de elementos jQuery selecciona elementos en función del nombre del elemento.
Puede seleccionar todos los <p>elementos en una página como esta:
$("p")
Ejemplo
Cuando un usuario hace clic en un botón, todos los <p>elementos se ocultarán:
Ejemplo
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
El selector de #id
El selector jQuery usa el atributo id de una etiqueta HTML para encontrar el elemento específico.#id
Una identificación debe ser única dentro de una página, por lo que debe usar el selector #id cuando desee encontrar un elemento único y único.
Para encontrar un elemento con una identificación específica, escriba un carácter hash, seguido de la identificación del elemento HTML:
$("#test")
Ejemplo
Cuando un usuario hace clic en un botón, el elemento con id="test" se ocultará:
Ejemplo
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
El selector .class
El selector jQuery .classencuentra elementos con una clase específica.
Para encontrar elementos con una clase específica, escriba un carácter de punto, seguido del nombre de la clase:
$(".test")
Ejemplo
Cuando un usuario hace clic en un botón, los elementos con class="test" se ocultarán:
Ejemplo
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Más ejemplos de selectores de jQuery
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | |
| $(this) | Selects the current HTML element | |
| $("p.intro") | Selects all <p> elements with class="intro" | |
| $("p:first") | Selects the first <p> element | |
| $("ul li:first") | Selects the first <li> element of the first <ul> | |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | |
| $("[href]") | Selects all elements with an href attribute | |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | |
| $("tr:even") | Selects all even <tr> elements | |
| $("tr:odd") | Selects all odd <tr> elements |
Utilice nuestro JQuery Selector Tester para demostrar los diferentes selectores.
Para obtener una referencia completa de todos los selectores de jQuery, vaya a nuestra Referencia de selectores de jQuery .
Funciones en un archivo separado
Si su sitio web contiene muchas páginas y desea que sus funciones de jQuery sean fáciles de mantener, puede colocar sus funciones de jQuery en un archivo .js separado.
Cuando demostramos jQuery en este tutorial, las funciones se agregan directamente a la <head>
sección. Sin embargo, a veces es preferible colocarlos en un archivo separado, como este (use el atributo src para referirse al archivo .js):
Ejemplo
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>