La parte mas importante de la libreria jquery son los selectores
Los selectores en jquery te ayudan a manipular los elementos html
Los elementos html atravez de sus id, clase, nombre, atributo, tipo valor del atributo, pueden ser encontrados por los selectores jquery
todos los selectores de jquery comienzan con el signo dolar $ y parentises $()
El selector de elementos
El selector de elementos jQuery selecciona elementos en función del nombre del elemento.
se puede selecionar todos los elementos parrafos de una pagina de esta forma
$("p")
nel seguiente ejemplo, Cuando un usuario hace clic en un botón, todos los elementos <p> estarán ocultos:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
...
El selector de #id
Jquery utiliza el selector id "#id" de una etiqueta html para encontrar el elemento especifico
dentro de una pagina el elemento id tiene que ser unica, asi que para encontrar ese elemento se usa #id
ejemplo de etiqueta id="test"
$("#test")
ejemplo
Cuando un usuario hace clic en un botón, el elemento con id="test" se ocultará:
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
selector .class
Jquery usa un punto y el nombre de la class, para encontrar elementos con una class
$(".test")
ejemplo
Cuando un usuario hace clic en un botón, los elementos con class="test" se ocultarán:
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Mas ejemplos de selectores Jquery
| Sintaxis | Descricion |
|---|---|
| $("*") | Selecciona todos los elementos |
| $(this) | Selecciona el elemento HTML actual |
| $("p.intro") | Selecciona todos los elementos <p> con class="intro" |
| $("p:first") | Selecciona el primer elemento <p> |
| $("ul li:first") | Selecciona el primer elemento <li> del primer <ul> |
| $("ul li:first-child") | Selecciona el primer elemento <li> de cada <ul> |
| $("[href]") | Selecciona todos los elementos con un atributo href |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" |
| $("a[target!='_blank']") | Selecciona todos los elementos <a> con un valor de atributo de destino NO igual a "_blank" |
| $(":button") | Selecciona todos los elementos <button> y los elementos <input> de type="button" |
| $("tr:even") | Selecciona todos los elementos pares <tr> |
| $("tr:odd") | Selecciona todos los elementos impares <tr> |
Las funciones jquery si son demasiadas se pueden poner en unfichero separado y llamarlas desde in link puesto en la cabecera
ejemplo de codigo
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias