Las funciones de jquery o métodos de jquery nos sirven para realizar manipulación de los atributos de los elementos DOM (elementos HTML), animaciones, agregar eventos y muchas otras cosas; en este capítulo nos enfocaremos a las funciones que sirven para modificar los atributos de los elementos DOM.
Para poder utilizar las funciones, basta con utilizar los selectores (que vimos en el capitulo anterior), seguido de un punto y el nombre de la función, por ejemplo:
Código HTML
<input type="text" value="un valor" id="txtTexto" />
Código Jquery
var valorDeCajaDeTexto=$("#txtTexto").val();
alert(valorDeCajaDeTexto)
//Nos mostraría "un valor" en el alert
En el ejemplo anterior utilizamos la función de nombre val(), la cual nos regresa el valor que tiene un elemento DOM en su atributo value. Pero qué pasa cuando no deseamos obtener el atributo value, por ejemplo obtener la liga a la que apunta un elemento link (<a> anchor), para ello utilizamos la función de nombre prop(), la cual se puede utilizar de dos formas, tanto para obtener el valor, como para otorgar el valor, en el ejemplo siguiente vemos como obtener el valor:
Código HTML
<a id="liga" href="www.google.com">ir a una pagina</a>
Código Jquery
alert($("#liga").prop("href"))
//Nos muestra www.google.com en un alert
Y si deseamos utilizar la misma función pero para otorgar un valor es de la siguiente manera:
$("#liga").prop("href","www.hdeleon.net")
//cambia la liga del link a www.hdeleon.net
Ahora vamos a ver una función con la cual podemos obtener el contenido HTML de un elemento, es decir, el contenido que contiene dentro de él (claro que no aplica con elementos input o elementos imágenes (<img>) por el hecho que no tienen elementos HTML dentro), vamos a utilizar la función html(), igual que prop() esta función sirve para obtener y asignar un valor, solo que esta sirve para el contenido HTML, (tal como lo hace innerHTML de javascript); a continuación veamos un ejemplo:
Código HTML
<div id="contenido"> <ul> <li>un elemento</li> <li>un elemento</li> <li>un elemento</li> <li>un elemento</li> <li>un elemento</li> </ul> </div>
Código Jquery
obtenemosHTML=$("#contenido").html();
alert(obtenemosHTML)
//El alert muestra el contenido del div con el id "contenido"
Por último, gracias a los selectores de jquery, podemos realizar una función a varios elementos, supongamos que deseamos poner un value a todos los inputs de nuestra pagina, simplemente lo haríamos de la siguiente manera.
Código HTML
<input type="text" value="un valor" id="txtTexto" /> <input type="text" value="un valor" id="txtTexto2" /> <input type="text" value="un valor" id="txtTexto3" /> <input type="text" value="un valor" id="txtTexto4" />
Código Jquery
$("input").prop("value","valor a todos los input")
En este capítulo vimos algunas de las funciones de jquery para manipular los atributos de los elementos DOM; existen algunas otras funciones que pueden ver en la siguiente liga y sin duda después de leer este capítulo, no tendrán ninguna dificultad en entender su funcionamiento.