{"id":2425,"date":"2012-03-25T13:35:40","date_gmt":"2012-03-25T13:35:40","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=2425"},"modified":"2019-04-26T10:48:04","modified_gmt":"2019-04-26T10:48:04","slug":"funciones-utiles-para-utilizar-en-jquery","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/","title":{"rendered":"Funciones \u00fatiles para utilizar en jQuery"},"content":{"rendered":"

En este art\u00edculo facilito una lista de las funciones m\u00e1s utilizadas o imprescindibles para hacer funcionar tus scripts con jQuery.<\/p>\n

addClass()<\/strong><\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.addClass<\/span>(<\/span>"nombreclase"<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n addClass()<\/em> lo que hacemos es a\u00f1adir una clase ya establecida en nuestro CSS<\/strong> al contenedor con id=\u00bbcontenido\u00bb. En este caso le estamos a\u00f1adiendo los estilos de la clase \u00abnombreclase\u00bb.<\/p>\n
after()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.after<\/span>(<\/span>"<p>hola!<\/p>"<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
El m\u00e9todo after()<\/em> a\u00f1ade contenido HTML<\/strong> delante de lo que haya dentro del contenedor con id=\u00bbcontenido\u00bb.<\/p>\n
ajax()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
var<\/span> dataString =<\/span> 'id='<\/span>+<\/span>data;<\/span>\n \n$.ajax<\/span>(<\/span>{<\/span>\n   type:<\/span> "POST"<\/span>,<\/span>\n   url:<\/span> "archivo.php"<\/span>,<\/span>\n   data:<\/span> dataString,<\/span>\n   success:<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n      \/\/...<\/span>\n   }<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con el m\u00e9todo ajax()<\/em> lo que conseguimos es realizar una llamada a un archivo PHP<\/strong> sin tener que recargar la p\u00e1gina para hacer una petici\u00f3n al servidor.<\/p>\n
append()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.append<\/span>(<\/span>"<p>hola!<\/p>"<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
El m\u00e9todo append()<\/em> a\u00f1ade contenido HTML<\/strong> al contenedor con id=\u00bbcontenido\u00bb.<\/p>\n
appendTo()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido2"<\/span>)<\/span>.appendTo<\/span>(<\/span>"#contenido1"<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
El m\u00e9todo appendTo()<\/em> copia o mueve el contenedor con id=\u00bbcotenedor2″ al contenedor con id=\u00bbcontenido1″.<\/p>\n
attr()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.attr<\/span>(<\/span>"data"<\/span>)<\/span>;<\/span>\n$(<\/span>"#contenido"<\/span>)<\/span>.attr<\/span>(<\/span>"title"<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
La funci\u00f3n attr()<\/em> retorna el valor del atributo que le pases como par\u00e1metro de un elemento o contenedor.<\/p>\n
before()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.before<\/span>(<\/span>"<p>hola!<\/p>"<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
El m\u00e9todo before()<\/em> a\u00f1ade contenido HTML<\/strong> detr\u00e1s de lo que haya dentro del contenedor con id=\u00bbcontenido\u00bb.<\/p>\n
blur()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"input"<\/span>)<\/span>.blur<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n     \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Al salirse de en un campo o input de un formulario se ejecutar\u00eda el c\u00f3digo de dentro de la funci\u00f3n.<\/p>\n
change()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"select#languages"<\/span>)<\/span>.change<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n     \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Al cambiar de opci\u00f3n en un selector de opciones se ejecutar\u00eda el c\u00f3digo de dentro de la funci\u00f3n.<\/p>\n
Con las versiones m\u00e1s recientes de jQuery<\/strong> es mejor hacerlo de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"select#languages"<\/span>)<\/span>.on<\/span>(<\/span>'change'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n     \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
click()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#button"<\/span>)<\/span>.click<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n\/\/tu c\u00f3digo aqu\u00ed });<\/span><\/pre><\/div><\/div>\n
Al hacer click en el evento o contenedor con id=\u00bbbutton\u00bb se ejecutar\u00eda el c\u00f3digo de dentro de la funci\u00f3n.<\/p>\n
Con las versiones m\u00e1s recientes de jQuery<\/strong> es mejor hacerlo de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#button"<\/span>)<\/span>.on<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n     \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
css()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.css<\/span>(<\/span>"background-color"<\/span>,<\/span> "yellow"<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n css()<\/em> podemos cambiar estilos al contenedor con id=\u00bbcontenido\u00bb. En el c\u00f3digo anterior estamos cambiando el color de fondo.<\/p>\n
dblclick()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#button"<\/span>)<\/span>.dblclick<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n \u00a0\u00a0\u00a0 \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Al hacer doble click en el evento o contenedor con id=\u00bbbutton\u00bb se ejecutar\u00eda el c\u00f3digo de dentro de la funci\u00f3n.<\/p>\n
Con las versiones m\u00e1s recientes de jQuery<\/strong> es mejor hacerlo de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#button"<\/span>)<\/span>.on<\/span>(<\/span>'dblclick'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n     \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
delay(time)<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.slideUp<\/span>(<\/span>300)<\/span>.delay<\/span>(<\/span>800)<\/span>.fadeIn<\/span>(<\/span>400)<\/span>;<\/span><\/pre><\/div><\/div>\n
Esta funci\u00f3n permite retrasar la ejecuci\u00f3n de las siguientes que est\u00e9n en la cola. Es \u00fatil para a\u00f1adir retrasos en una serie de animaciones. En el caso del c\u00f3digo anterior, primero hacemos slideUp()<\/em>, hacemos una espera y seguidamente hacemos fadeIn()<\/em>.<\/p>\n
each()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"li"<\/span>)<\/span>.each<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n   $(<\/span>this<\/span>)<\/span>.toggleClass<\/span>(<\/span>"nombreclase"<\/span>)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n each()<\/em> lo que hacemos es iterar una serie de elementos. En el c\u00f3digo anterior estamos iterando una lista a la que a cada elemento le estamos cambiando el estilo o CSS<\/strong> utliizando la funci\u00f3n toggleClass()<\/em>.<\/p>\n
empty()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.empty<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con empty()<\/em> lo que conseguimos es vaciar el contenido de un contenedor antes de volverlo a rellenar.<\/p>\n
fadeIn()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.fadeIn<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
El m\u00e9todo fadeIn()<\/em> hace que el elemento que lo recibe aparezca en la p\u00e1gina a trav\u00e9s del cambio de su opacidad, haciendo una transici\u00f3n suavizada que acaba con el valor de opacity 1. Este m\u00e9todo s\u00f3lo podemos observarlo si el elemento sobre el que lo invocamos era total o parcialmente transparente, porque si era opaco al hacer un fadeIn()<\/em> no se advertir\u00e1 ning\u00fan cambio de opacidad.<\/p>\n
fadeOut()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.fadeOut<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Este m\u00e9todo hace que el elemento que lo recibe desaparezca de la p\u00e1gina a trav\u00e9s del cambio de su opacidad, haciendo una transici\u00f3n suavizada que acaba con el valor de opacity<\/em> cero.<\/p>\n
fadeTo()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.fadeTo<\/span>(<\/span>"slow"<\/span>,<\/span> 0.33)<\/span>;<\/span><\/pre><\/div><\/div>\n
El m\u00e9todo fadeTo()<\/em> es bastante m\u00e1s vers\u00e1til ya que con este m\u00e9todo se le pueden pasar distintos valores de opacidad para la animaci\u00f3n.<\/p>\n
focus()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"input"<\/span>)<\/span>.focus<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n \u00a0\u00a0\u00a0 \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Al situarte en un campo o input de un formulario se ejecutar\u00eda el c\u00f3digo de dentro de la funci\u00f3n.<\/p>\n
Con las versiones m\u00e1s recientes de jQuery<\/strong> es mejor hacerlo de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"input"<\/span>)<\/span>.on<\/span>(<\/span>'focus'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n     \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
focusout()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"input"<\/span>)<\/span>.focusout<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n \u00a0\u00a0\u00a0 \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Al salirse de en un campo o input de un formulario se ejecutar\u00eda el c\u00f3digo de dentro de la funci\u00f3n.<\/p>\n
Con las versiones m\u00e1s recientes de jQuery<\/strong> es mejor hacerlo de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"input"<\/span>)<\/span>.on<\/span>(<\/span>'focusout'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n     \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
hasClass()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.hasClass<\/span>(<\/span>"nombreclase"<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n hasClass()<\/em> comprobamos si el contenedor con id=\u00bbcontenido\u00bb tiene la clase \u00abnombreclase\u00bb. Devuelve True si la tiene.<\/p>\n
height()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.height<\/span>(<\/span>"200px"<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n height()<\/em> modificamos el alto del contenedor con id=\u00bbcontenido\u00bb.<\/p>\n
hide()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.hide<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n hide()<\/em> lo que hacemos es ocultar el contenido del contenedor con id=\u00bbcontenido\u00bb.<\/p>\n
hover()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>'#element'<\/span>)<\/span>.hover<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n   \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n hover()<\/em> lo que hacemos es ejecutar un c\u00f3digo tras pasar el rat\u00f3n por encima del contenedor con id=\u00bbelement\u00bb.<\/p>\n
Con las versiones m\u00e1s recientes de jQuery<\/strong> es mejor hacerlo de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#element"<\/span>)<\/span>.on<\/span>(<\/span>'hover'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n     \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
html()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.html<\/span>(<\/span>"<p>hola!<\/p>"<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
El m\u00e9todo html()<\/em> reemplaza el contenido HTML<\/strong> que haya dentro del contenedor con id=\u00bbcontenido\u00bb por el que le pasas como par\u00e1metro.<\/p>\n
load()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.load<\/span>(<\/span>"archivo.php"<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Funci\u00f3n muy \u00fatil para cargar contenidos sin necesidad de recargar la p\u00e1gina. En el caso del ejemplo, lo que har\u00edamos es cargar el contenido HTML<\/strong> del \u00abarchivo.php\u00bb en el contenedor con id=\u00bbcontenido\u00bb.<\/p>\n
keyup()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"input"<\/span>)<\/span>.keyup<\/span>(<\/span>function<\/span> (<\/span>)<\/span> {<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0 var<\/span> value =<\/span> $(<\/span>this<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>;<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0 $(<\/span>"p"<\/span>)<\/span>.text<\/span>(<\/span>value)<\/span>;<\/span>\n\u00a0}<\/span>)<\/span>.keyup<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con keyup()<\/em> capturamos los eventos del teclado. En el ejemplo, lo que se escriba en el input se va escribiendo tambi\u00e9n en el p\u00e1rrafo que haya disponible en la p\u00e1gina.<\/p>\n
Con las versiones m\u00e1s recientes de jQuery<\/strong> es mejor hacerlo de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"input"<\/span>)<\/span>.on<\/span>(<\/span>'keyup'<\/span>,<\/span> function<\/span> (<\/span>)<\/span> {<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0 var<\/span> value =<\/span> $(<\/span>this<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>;<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0 $(<\/span>"p"<\/span>)<\/span>.text<\/span>(<\/span>value)<\/span>;<\/span>\n}<\/span>)<\/span>.keyup<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
mouseleave()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.mouseleave<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n \u00a0\u00a0\u00a0 \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
En este caso, al sacar el rat\u00f3n de encima del contenedor o elemento con id=\u00bbcontenido\u00bb ejecutar\u00edamos el c\u00f3digo de dentro de la funci\u00f3n.<\/p>\n
Con las versiones m\u00e1s recientes de jQuery<\/strong> es mejor hacerlo de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.on<\/span>(<\/span>'mouseleave'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n \u00a0\u00a0\u00a0 \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
mouseout()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.mouseout<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n \u00a0\u00a0\u00a0 \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Al sacar el rat\u00f3n de encima del contenedor o elemento con id=\u00bbcontenido\u00bb ejecutar\u00edamos el c\u00f3digo de dentro de la funci\u00f3n.<\/p>\n
Con las versiones m\u00e1s recientes de jQuery<\/strong> es mejor hacerlo de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.on<\/span>(<\/span>'mouseout'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n \u00a0\u00a0\u00a0 \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
mouseover()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.mouseover<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n \u00a0\u00a0\u00a0 \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Al pasar el rat\u00f3n por encima del contenedor o elemento con id=\u00bbcontenido\u00bb ejecutar\u00edamos el c\u00f3digo de dentro de la funci\u00f3n.<\/p>\n
Con las versiones m\u00e1s recientes de jQuery<\/strong> es mejor hacerlo de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.on<\/span>(<\/span>'mouseover'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n \u00a0\u00a0\u00a0 \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
nextAll()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.nextAll<\/span>(<\/span>)<\/span>.remove<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
El m\u00e9todo nextAll()<\/em> selecciona todos los contenedores siguientes al que tiene id=\u00bbcontenido\u00bb. En el caso del ejemplo, se eliminar\u00e1n todos los contenedores siguientes a \u00ab#contenido\u00bb.<\/p>\n
next()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.next<\/span>(<\/span>)<\/span>.remove<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
El m\u00e9todo next()<\/em> selecciona el contenedor siguiente al que tiene id=\u00bbcontenido\u00bb. En el caso del ejemplo, se eliminar\u00e1 el contenedor siguiente a \u00ab#contenido\u00bb.<\/p>\n
parent()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.parent<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
El m\u00e9todo parent()<\/em> retorna un objeto que contiene informaci\u00f3n del contenedor padre del contenedor con id=\u00bbcontenido\u00bb.<\/p>\n
position()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.position<\/span>(<\/span>)<\/span>.top<\/span>;<\/span><\/pre><\/div><\/div>\n
La funci\u00f3n position()<\/em> permite obtener la posici\u00f3n de un elemento en relaci\u00f3n a su \u201cpadre\u201d.<\/p>\n
ready()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span> \u00a0\u00a0\u00a0\n   \/\/tu c\u00f3digo aqu\u00ed<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Ready es un m\u00e9todo propio de jQuery<\/strong>, que revisa si el DOM<\/acronym> est\u00e1 listo para usarse. Es m\u00e1s \u00fatil que el window.onload<\/em>, pues este debe esperar a que todos los elementos de la pagina est\u00e9n cargados (como scripts e im\u00e1genes) para ejecutar. El \u00abready\u00bb, en cambio, espera solo a la estructura.<\/p>\n
removeClass()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.removeClass<\/span>(<\/span>"nombreclase"<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n removeClass()<\/em> lo que hacemos quitar una clase o estilo CSS<\/strong> al contenedor con id=\u00bbcontenido\u00bb. En el caso del ejemplo, le estamos quitando los estilos de la clase \u00abnombreclase\u00bb.<\/p>\n
slideDown()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.slideDown<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n slideDown()<\/em> lo que hacemos es mostrar hacia abajo el contenido del contenedor con id=\u00bbcontenido\u00bb que inicialmente o no podr\u00eda estar oculto.<\/p>\n
slideToggle()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.slideToggle<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n slideToggle()<\/em> lo que hacemos es mostrar y ocultar el contenido del contenedor con id=\u00bbcontenido\u00bb que inicialmente o no podr\u00eda estar oculto.<\/p>\n
slideUp()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.slideUp<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n slideUp()<\/em> lo que hacemos es mostrar hacia arriba el contenido del contenedor con id=\u00bbcontenido\u00bb que inicialmente o no podr\u00eda estar oculto.<\/p>\n
show()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.show<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n show()<\/em> lo que hacemos es mostrar el contenido del contenedor con id=\u00bbcontenido\u00bb que inicialmente o no podr\u00eda estar oculto.<\/p>\n
size()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"li"<\/span>)<\/span>.size<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
La funci\u00f3n size()<\/em> en este caso retorna el n\u00famero de elementos que hay en la lista.<\/p>\n
submit()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#formulario"<\/span>)<\/span>.submit<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0 if<\/span> (<\/span>$(<\/span>"#code"<\/span>)<\/span>.val<\/span>(<\/span>)<\/span> ==<\/span> "correct"<\/span>)<\/span> {<\/span>\u00a0 \u00a0\u00a0\u00a0 \u00a0\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$.ajax<\/span>(<\/span>{<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type:<\/span> "POST"<\/span>,<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 url:<\/span> "archivo.php"<\/span>,<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 data:<\/span> dataString,<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 success:<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\u00a0\u00a0 \u00a0\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(<\/span>"#message"<\/span>)<\/span>.empty<\/span>(<\/span>)<\/span>;<\/span>\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(<\/span>"#message"<\/span>)<\/span>.append<\/span>(<\/span>'<div>Hemos recibido su codigo correctamente<\/div>'<\/span>)<\/span>;<\/span>\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(<\/span>this<\/span>)<\/span>.remove<\/span>(<\/span>)<\/span>;<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/span>)<\/span>;<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/span>\n\u00a0\u00a0 \u00a0\u00a0 $(<\/span>"#message"<\/span>)<\/span>.empty<\/span>(<\/span>)<\/span>;<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0 $(<\/span>"#message"<\/span>)<\/span>.append<\/span>(<\/span>'<div>Codigo no valido!<\/div>'<\/span>)<\/span>;<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0 return<\/span> false<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
La funci\u00f3n submit()<\/em> se suele utilizar para obtener la informaci\u00f3n de los formularios. En el c\u00f3digo anterior vemos un ejemplo de lo que se podr\u00eda hacer. El formulario debe tener id=\u00bbformulario\u00bb y m\u00e9todo POST.<\/p>\n
remove()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.remove<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n remove()<\/em> lo que hacemos es quitar de la vista el contenido del contenedor con id=\u00bbcontenido\u00bb.<\/p>\n
removeAttr()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#image"<\/span>)<\/span>.removeAttr<\/span>(<\/span>"width"<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n removeAttr()<\/em> lo que hacemos es quitar un atributo del elemento con id=\u00bbimage\u00bb. En el caso del ejemplo estamos quitando el ancho.<\/p>\n
text()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.text<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n text()<\/em> conseguimos el contenido textual del elemento o contenedor con id=\u00bbcontenido\u00bb.<\/p>\n
toggle()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.toggle<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n toggle()<\/em> mostramos y ocultamos con efecto el contenedor con id=\u00bbcontenido\u00bb.<\/p>\n
toggleClass()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.toggleClass<\/span>(<\/span>"nombreclase"<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n toggleClass()<\/em> podemos a\u00f1adir y quitar la clase \u00abnombreclase\u00bb al contenedor con id=\u00bbcontenido\u00bb.<\/p>\n
val()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"input"<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>;<\/span>\n$(<\/span>'select.foo option:selected'<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>;<\/span>    \/\/ get the value from a dropdown select<\/span>\n$(<\/span>'select.foo'<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>;<\/span>                    \/\/ get the value from a dropdown select even easier<\/span>\n$(<\/span>'input:checkbox:checked'<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>;<\/span>        \/\/ get the value from a checked checkbox<\/span>\n$(<\/span>'input:radio[name=bar]:checked'<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>;<\/span> \/\/ get the value from a set of radio buttons<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n val()<\/em> obtenemos el valor de los inputs, selects, textareas de nuestros formularios.<\/p>\n
width()<\/strong><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>"#contenido"<\/span>)<\/span>.width<\/span>(<\/span>"200px"<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Con la funci\u00f3n width()<\/em> modificamos el ancho del contenedor con id=\u00bbcontenido\u00bb.<\/p>\n
Personalmente, en mis m\u00e1s de 10 a\u00f1os de experiencia en esta materia suelo utilizar a menudo todas las funciones que est\u00e1n en este lista. El caso es que jQuery<\/strong> dispone de muchas m\u00e1s.\u00a0Ver m\u00e1s funciones<\/a>.<\/p>\n
Si sabes de alguna funci\u00f3n que no est\u00e1 en esta lista y consideras que deber\u00eda estarlo, no dudes en enviar un comentario informando sobre ello. Lo a\u00f1adiremos encantados si lo consideramos oportuno.<\/p>\n","protected":false},"excerpt":{"rendered":"
Listado de funciones m\u00e1s utilizadas o imprescindibles para hacer funcionar tus scripts con jQuery.<\/p>\n","protected":false},"author":1,"featured_media":7294,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[128],"class_list":["post-2425","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-funciones"],"yoast_head":"\nFunciones \u00fatiles para utilizar en jQuery - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Listado de funciones m\u00e1s utilizadas o imprescindibles para hacer funcionar tus scripts con jQuery.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Funciones \u00fatiles para utilizar en jQuery - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Listado de funciones m\u00e1s utilizadas o imprescindibles para hacer funcionar tus scripts con jQuery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-25T13:35:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-26T10:48:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/funciones-utiles-para-utilizar-en-jquery.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/\",\"name\":\"Funciones \u00fatiles para utilizar en jQuery - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/funciones-utiles-para-utilizar-en-jquery.png\",\"datePublished\":\"2012-03-25T13:35:40+00:00\",\"dateModified\":\"2019-04-26T10:48:04+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Listado de funciones m\u00e1s utilizadas o imprescindibles para hacer funcionar tus scripts con jQuery.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/funciones-utiles-para-utilizar-en-jquery.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/funciones-utiles-para-utilizar-en-jquery.png\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Funciones \u00fatiles para utilizar en jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Funciones \u00fatiles para utilizar en jQuery - Jose Aguilar Blog","description":"Listado de funciones m\u00e1s utilizadas o imprescindibles para hacer funcionar tus scripts con jQuery.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Funciones \u00fatiles para utilizar en jQuery - Jose Aguilar Blog","og_description":"Listado de funciones m\u00e1s utilizadas o imprescindibles para hacer funcionar tus scripts con jQuery.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-03-25T13:35:40+00:00","article_modified_time":"2019-04-26T10:48:04+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/funciones-utiles-para-utilizar-en-jquery.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/","url":"https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/","name":"Funciones \u00fatiles para utilizar en jQuery - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/funciones-utiles-para-utilizar-en-jquery.png","datePublished":"2012-03-25T13:35:40+00:00","dateModified":"2019-04-26T10:48:04+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Listado de funciones m\u00e1s utilizadas o imprescindibles para hacer funcionar tus scripts con jQuery.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/funciones-utiles-para-utilizar-en-jquery.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/funciones-utiles-para-utilizar-en-jquery.png","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/funciones-utiles-para-utilizar-en-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Funciones \u00fatiles para utilizar en jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2425","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=2425"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2425\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7294"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=2425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=2425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=2425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}