Aspectos bsicos de jQuery

Selectores

UNIVERSIDAD POLITCNICA DE PUEBLA 20 de agosto de 2013 Autor: Maria Llerandi Ramos Moreno

Aspectos bsicos de jQuery

Selectores JQuery Selectores
jQuery selectores permite seleccionar y manipula elementos HTML. jQuery selectores son usados para encontrar elementos HTML basado en : atributos clases id tipo valores de atributos jQuery selectores inician con el smbolo de dlar y parntesis: $ ()

El selector elemento
Selecciona elementos basado en el nombre del elemento $(div)

Ejemplo: Cuando el usuario de clic en el botn todos los elementos div sern ocultados $(document).ready(function(){ $("button").click(function(){ $("div").hide(); //ocultar todos los elementos <div> de la pgina }); });

Selector #id
El selector #id de jQuery usa el atributo id de una etiqueta HTML para encontrar el elemento espcificado. Sintaxis
Aspectos bsicos de jQuery | 20/08/2013

$(#test)

Ejemplos: $(document).ready(function(){ $("button").click(function(){ $("#ventana").show(); ///muestra el elemento con id ventana }); });

Slector .class
El selector .class encuentra los elementos con la clase especificada. Sintaxis: Escribir el carcter punto (.) seguido del nombre de la clase $(.nombre)

Ejemplo $(document).ready(function(){ $("button").click(function(){ $(".nombre").hide(); }); });

Ms ejemplos de selectores
Sintaxis $("*") $(this) $("p.intro") $("p:first") $("ul li:first") $("ul li:first-child") $("[href]") $("a[target='_blank']") $("a[target!='_blank']") $(":button") $("tr:even") $("tr:odd") Descripcin Selecciona todos los elementos Selecciona el elemento actual Selecciona todos los elementos <p> con la clase="intro" Selecciona el elemento <p> Selecciona el primer elemento <li> del primer <ul> Selecciona el primer elemento <li> de cada <ul> Selecciona todos los elementos con el atributo href Selecciona todos los elementos <a> con un valor del atributo target igual a "_blank" Selecciona todos los elementos <a> con un valor del atributo target no igual a "_blank" Selecciona todos los elementos <button> y elementos <input> de tipo="button" Selecciona todos los elementos even <tr> Selecciona todos los elementos odd <tr> Aspectos bsicos de jQuery | 20/08/2013