selectores de jQuery son una de las partes más importantes de la biblioteca jQuery.
Los selectores de jQuery
selectores de jQuery le permiten seleccionar y manipular elemento (s) de HTML.
selectores de jQuery se utilizan para "encontrar" (o seleccionar) elementos HTML basándose en su nombre, id, clases, tipos, atributos, valores de atributos y mucho más.It's based on the existing CSS Selectors , and in addition, it has some own custom selectors. Está basado en los existentes selectores CSS , y, además, tiene algunos selectores personalizados propios.
Todos los selectores de jQuery comienzan con el signo de dólar y paréntesis: $ ().
El selector de elemento
El selector de elementos jQuery selecciona elementos basados en el nombre del elemento.
Puede seleccionar todos los elementos <p> en una página como esta:
$("p")
Ejemplo
Cuando un usuario hace clic en un botón, todos los elementos <P> estarán ocultas:
Ejemplo
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Inténtalo tú mismo "El Selector de #id
El selector de jQuery #id utiliza el atributo id de una etiqueta HTML para encontrar el elemento específico.
Un identificador debe ser único dentro de una página, por lo que debe utilizar el selector #id cuando se quiere encontrar un solo elemento, único.
Para encontrar un elemento con un ID específico, escribe un carácter almohadilla, seguido por el id del elemento HTML:
$("#test")
Ejemplo
Cuando un usuario hace clic en un botón, el elemento con id = "prueba" se ocultará:
Ejemplo
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Inténtalo tú mismo "El Selector de .class
El selector de clase jQuery encuentra elementos con una clase específica.
Para encontrar elementos con una clase específica, escribe 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 = "prueba" se ocultarán:
Ejemplo
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Inténtalo tú mismo "Más ejemplos de jQuery selectores
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | Try it |
| $(this) | Selects the current HTML element | Try it |
| $("p.intro") | Selects all <p> elements with class="intro" | Try it |
| $("p:first") | Selects the first <p> element | Try it |
| $("ul li:first") | Selects the first <li> element of the first <ul> | Try it |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | Try it |
| $("[href]") | Selects all elements with an href attribute | Try it |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | Try it |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | Try it |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | Try it |
| $("tr:even") | Selects all even <tr> elements | Try it |
| $("tr:odd") | Selects all odd <tr> elements | Try it |
Utilice nuestro probador del selector de jQuery para demostrar los diferentes selectores.
Para una referencia completa de todos los selectores de jQuery, por favor vaya a nuestra jQuery selectores de referencia .
Funciones en un archivo separado
Si su sitio web contiene una gran cantidad de páginas, y desea que sus funciones de jQuery para ser fáciles de mantener, se puede poner sus funciones jQuery en un archivo .js aparte.
Cuando demostramos jQuery en este tutorial, las funciones se añaden directamente a la sección <head>.However, sometimes it is preferable to place them in a separate file, like this (use the src attribute to refer to the .js file): Sin embargo, a veces es preferible colocarlos en un archivo separado, como esto (utilizar el atributo src para hacer referencia al archivo .js):
Ejemplo
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 » Ejercicio 6»