Una de las características principales a simple vista de JQuery es su forma elegante y fácil de manipular los elementos del DOM, en esta entrada veremos unos pequeños apuntes de como hacer uso de esos selectores que nos permitirán interactuar con los componentes de nuestras páginas y aplicaciones Web’s, veamos:
Básicamente debemos tener en cuenta que los selectores en JQuery se utilizan de la siguiente manera:
$(selector).acción()
Al momento de escribir el sigo $ estamos indicando a JQuery que llamaremos un selector, por selector entendemos todos aquellos nombres o etiquetas que están definidos en nuestro DOM, por ejemplo:
<p id=»parrafo»>Este es un párrafo</p>
Como podemos ver en el parrafo anterior tenemos un selector id y una etiqueta p mediante las cuales podemos acceder a este componente desde JQuery, veamos todos los tipos de selectores que podemos manejar:
$(this).hide()
Oculta el elemento actual, ejemplo:
<button onclick=»$(this).hide();»>Ocultar este botton</button>
$(«p»).hide()
Oculta todos los elementos de etiqueta p (Todos los parrafos), ejemplo:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid repellendus aut nam rerum mollitia blanditiis quos, quis cupiditate odio totam dignissimos laboriosam! Dolorem sunt a iusto quis natus dolores vitae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sit illum cumque velit blanditiis, distinctio! Fugiat aspernatur officia maiores dolor esse corporis unde delectus blanditiis ex voluptatibus, temporibus expedita totam!</p>
<button onclick=»$(‘p’).hide();»>Ocultar</button>
$(«.test»).hide()
Oculta todos los elementos con clase test, ejemplo:
<p class=»test»>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid repellendus aut nam rerum mollitia blanditiis quos, quis cupiditate odio totam dignissimos laboriosam! Dolorem sunt a iusto quis natus dolores vitae.</p>
<p class=»test»>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sit illum cumque velit blanditiis, distinctio! Fugiat aspernatur officia maiores dolor esse corporis unde delectus blanditiis ex voluptatibus, temporibus expedita totam!</p>
<button onclick=»$(‘.test’).hide();»>Ocultar</button>
$(«#test»).hide()
Oculta el elemento que tiene el id=»test», es uno de los métodos las utilizados para referenciar objetos.
Vamos crea una estructura de una página html, o si ya cuentas con una hecha realiza pruebas con estos selectores y verás lo fácil que es manipular objetos con JQuery, así mismo recuerda que para poder utilizar JQuery debes hacer el llamado de la librería, de lo contrario obtendrás error al ejecutar estos selectores, para ello pasa por el primer artículo donde está descrito como empezar.
Hasta pronto!.
Byspel