Funciones útiles para utilizar en jQuery

Name: Funciones útiles para utilizar en jQuery
Brand: Jose Aguilar
SKU: joseaguilarblog-2425
Availability: InStock
Rating: 5 (33 reviews)

En este artículo facilito una lista de las funciones más utilizadas o imprescindibles para hacer funcionar tus scripts con jQuery.

addClass()

Source code

$("#contenido").addClass("nombreclase");

Con la función addClass() lo que hacemos es añadir una clase ya establecida en nuestro CSS al contenedor con id=»contenido». En este caso le estamos añadiendo los estilos de la clase «nombreclase».

after()

Source code

$("#contenido").after("<p>hola!</p>");

El método after() añade contenido HTML delante de lo que haya dentro del contenedor con id=»contenido».

ajax()

Source code

var dataString = 'id='+data;
 
$.ajax({
   type: "POST",
   url: "archivo.php",
   data: dataString,
   success: function() {
      //...
   }
});

Con el método ajax() lo que conseguimos es realizar una llamada a un archivo PHP sin tener que recargar la página para hacer una petición al servidor.

append()

Source code

$("#contenido").append("<p>hola!</p>");

El método append() añade contenido HTML al contenedor con id=»contenido».

appendTo()

Source code

$("#contenido2").appendTo("#contenido1");

El método appendTo() copia o mueve el contenedor con id=»cotenedor2″ al contenedor con id=»contenido1″.

attr()

Source code

$("#contenido").attr("data");
$("#contenido").attr("title");

La función attr() retorna el valor del atributo que le pases como parámetro de un elemento o contenedor.

before()

Source code

$("#contenido").before("<p>hola!</p>");

El método before() añade contenido HTML detrás de lo que haya dentro del contenedor con id=»contenido».

blur()

Source code

$("input").blur(function() {
     //tu código aquí
});

Al salirse de en un campo o input de un formulario se ejecutaría el código de dentro de la función.

change()

Source code

$("select#languages").change(function() {
     //tu código aquí
});

Al cambiar de opción en un selector de opciones se ejecutaría el código de dentro de la función.

Con las versiones más recientes de jQuery es mejor hacerlo de la siguiente forma:

Source code

$("select#languages").on('change', function() {
     //tu código aquí
});

click()

Source code

$("#button").click(function() {
//tu código aquí });

Al hacer click en el evento o contenedor con id=»button» se ejecutaría el código de dentro de la función.

Con las versiones más recientes de jQuery es mejor hacerlo de la siguiente forma:

Source code

$("#button").on('click', function() {
     //tu código aquí
});

css()

Source code

$("#contenido").css("background-color", "yellow");

Con la función css() podemos cambiar estilos al contenedor con id=»contenido». En el código anterior estamos cambiando el color de fondo.

dblclick()

Source code

$("#button").dblclick(function() {
     //tu código aquí
});

Al hacer doble click en el evento o contenedor con id=»button» se ejecutaría el código de dentro de la función.

Con las versiones más recientes de jQuery es mejor hacerlo de la siguiente forma:

Source code

$("#button").on('dblclick', function() {
     //tu código aquí
});

delay(time)

Source code

$("#contenido").slideUp(300).delay(800).fadeIn(400);

Esta función permite retrasar la ejecución de las siguientes que estén en la cola. Es útil para añadir retrasos en una serie de animaciones. En el caso del código anterior, primero hacemos slideUp(), hacemos una espera y seguidamente hacemos fadeIn().

each()

Source code

$("li").each(function(){
   $(this).toggleClass("nombreclase");
});

Con la función each() lo que hacemos es iterar una serie de elementos. En el código anterior estamos iterando una lista a la que a cada elemento le estamos cambiando el estilo o CSS utliizando la función toggleClass().

empty()

Source code

$("#contenido").empty();

Con empty() lo que conseguimos es vaciar el contenido de un contenedor antes de volverlo a rellenar.

fadeIn()

Source code

$("#contenido").fadeIn();

El método fadeIn() hace que el elemento que lo recibe aparezca en la página a través del cambio de su opacidad, haciendo una transición suavizada que acaba con el valor de opacity 1. Este método sólo podemos observarlo si el elemento sobre el que lo invocamos era total o parcialmente transparente, porque si era opaco al hacer un fadeIn() no se advertirá ningún cambio de opacidad.

fadeOut()

Source code

$("#contenido").fadeOut();

Este método hace que el elemento que lo recibe desaparezca de la página a través del cambio de su opacidad, haciendo una transición suavizada que acaba con el valor de opacity cero.

fadeTo()

Source code

$("#contenido").fadeTo("slow", 0.33);

El método fadeTo() es bastante más versátil ya que con este método se le pueden pasar distintos valores de opacidad para la animación.

focus()

Source code

$("input").focus(function() {
     //tu código aquí
});

Al situarte en un campo o input de un formulario se ejecutaría el código de dentro de la función.

Con las versiones más recientes de jQuery es mejor hacerlo de la siguiente forma:

Source code

$("input").on('focus', function() {
     //tu código aquí
});

focusout()

Source code

$("input").focusout(function() {
     //tu código aquí
});

Al salirse de en un campo o input de un formulario se ejecutaría el código de dentro de la función.

Con las versiones más recientes de jQuery es mejor hacerlo de la siguiente forma:

Source code

$("input").on('focusout', function() {
     //tu código aquí
});

hasClass()

Source code

$("#contenido").hasClass("nombreclase");

Con la función hasClass() comprobamos si el contenedor con id=»contenido» tiene la clase «nombreclase». Devuelve True si la tiene.

height()

Source code

$("#contenido").height("200px");

Con la función height() modificamos el alto del contenedor con id=»contenido».

hide()

Source code

$("#contenido").hide();

Con la función hide() lo que hacemos es ocultar el contenido del contenedor con id=»contenido».

hover()

Source code

$('#element').hover(function() {
   //tu código aquí
});

Con la función hover() lo que hacemos es ejecutar un código tras pasar el ratón por encima del contenedor con id=»element».

Con las versiones más recientes de jQuery es mejor hacerlo de la siguiente forma:

Source code

$("#element").on('hover', function() {
     //tu código aquí
});

html()

Source code

$("#contenido").html("<p>hola!</p>");

El método html() reemplaza el contenido HTML que haya dentro del contenedor con id=»contenido» por el que le pasas como parámetro.

load()

Source code

$("#contenido").load("archivo.php");

Función muy útil para cargar contenidos sin necesidad de recargar la página. En el caso del ejemplo, lo que haríamos es cargar el contenido HTML del «archivo.php» en el contenedor con id=»contenido».

keyup()

Source code

$("input").keyup(function () {
      var value = $(this).val();
      $("p").text(value);
 }).keyup();

Con keyup() capturamos los eventos del teclado. En el ejemplo, lo que se escriba en el input se va escribiendo también en el párrafo que haya disponible en la página.

Con las versiones más recientes de jQuery es mejor hacerlo de la siguiente forma:

Source code

$("input").on('keyup', function () {
      var value = $(this).val();
      $("p").text(value);
}).keyup();

mouseleave()

Source code

$("#contenido").mouseleave(function() {
     //tu código aquí
});

En este caso, al sacar el ratón de encima del contenedor o elemento con id=»contenido» ejecutaríamos el código de dentro de la función.

Con las versiones más recientes de jQuery es mejor hacerlo de la siguiente forma:

Source code

$("#contenido").on('mouseleave', function() {
     //tu código aquí
});

mouseout()

Source code

$("#contenido").mouseout(function() {
     //tu código aquí
});

Al sacar el ratón de encima del contenedor o elemento con id=»contenido» ejecutaríamos el código de dentro de la función.

Con las versiones más recientes de jQuery es mejor hacerlo de la siguiente forma:

Source code

$("#contenido").on('mouseout', function() {
     //tu código aquí
});

mouseover()

Source code

$("#contenido").mouseover(function() {
     //tu código aquí
});

Al pasar el ratón por encima del contenedor o elemento con id=»contenido» ejecutaríamos el código de dentro de la función.

Con las versiones más recientes de jQuery es mejor hacerlo de la siguiente forma:

Source code

$("#contenido").on('mouseover', function() {
     //tu código aquí
});

nextAll()

Source code

$("#contenido").nextAll().remove();

El método nextAll() selecciona todos los contenedores siguientes al que tiene id=»contenido». En el caso del ejemplo, se eliminarán todos los contenedores siguientes a «#contenido».

next()

Source code

$("#contenido").next().remove();

El método next() selecciona el contenedor siguiente al que tiene id=»contenido». En el caso del ejemplo, se eliminará el contenedor siguiente a «#contenido».

parent()

Source code

$("#contenido").parent();

El método parent() retorna un objeto que contiene información del contenedor padre del contenedor con id=»contenido».

position()

Source code

$("#contenido").position().top;

La función position() permite obtener la posición de un elemento en relación a su “padre”.

ready()

Source code

$(document).ready(function(){    
   //tu código aquí
});

Ready es un método propio de jQuery, que revisa si el DOM está listo para usarse. Es más útil que el window.onload, pues este debe esperar a que todos los elementos de la pagina estén cargados (como scripts e imágenes) para ejecutar. El «ready», en cambio, espera solo a la estructura.

removeClass()

Source code

$("#contenido").removeClass("nombreclase");

Con la función removeClass() lo que hacemos quitar una clase o estilo CSS al contenedor con id=»contenido». En el caso del ejemplo, le estamos quitando los estilos de la clase «nombreclase».

slideDown()

Source code

$("#contenido").slideDown();

Con la función slideDown() lo que hacemos es mostrar hacia abajo el contenido del contenedor con id=»contenido» que inicialmente o no podría estar oculto.

slideToggle()

Source code

$("#contenido").slideToggle();

Con la función slideToggle() lo que hacemos es mostrar y ocultar el contenido del contenedor con id=»contenido» que inicialmente o no podría estar oculto.

slideUp()

Source code

$("#contenido").slideUp();

Con la función slideUp() lo que hacemos es mostrar hacia arriba el contenido del contenedor con id=»contenido» que inicialmente o no podría estar oculto.

show()

Source code

$("#contenido").show();

Con la función show() lo que hacemos es mostrar el contenido del contenedor con id=»contenido» que inicialmente o no podría estar oculto.

size()

Source code

$("li").size();

La función size() en este caso retorna el número de elementos que hay en la lista.

submit()

Source code

$("#formulario").submit(function() {
      if ($("#code").val() == "correct") {       
        $.ajax({
            type: "POST",
            url: "archivo.php",
            data: dataString,
            success: function() {    
                $("#message").empty();        
                $("#message").append('<div>Hemos recibido su codigo correctamente</div>');
                $(this).remove();
            }
        });
      }
      $("#message").empty();
      $("#message").append('<div>Codigo no valido!</div>');
      return false;
});

La función submit() se suele utilizar para obtener la información de los formularios. En el código anterior vemos un ejemplo de lo que se podría hacer. El formulario debe tener id=»formulario» y método POST.

remove()

Source code

$("#contenido").remove();

Con la función remove() lo que hacemos es quitar de la vista el contenido del contenedor con id=»contenido».

removeAttr()

Source code

$("#image").removeAttr("width");

Con la función removeAttr() lo que hacemos es quitar un atributo del elemento con id=»image». En el caso del ejemplo estamos quitando el ancho.

text()

Source code

$("#contenido").text();

Con la función text() conseguimos el contenido textual del elemento o contenedor con id=»contenido».

toggle()

Source code

$("#contenido").toggle();

Con la función toggle() mostramos y ocultamos con efecto el contenedor con id=»contenido».

toggleClass()

Source code

$("#contenido").toggleClass("nombreclase");

Con la función toggleClass() podemos añadir y quitar la clase «nombreclase» al contenedor con id=»contenido».

val()

Source code

$("input").val();
$('select.foo option:selected').val();    // get the value from a dropdown select
$('select.foo').val();                    // get the value from a dropdown select even easier
$('input:checkbox:checked').val();        // get the value from a checked checkbox
$('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons

Con la función val() obtenemos el valor de los inputs, selects, textareas de nuestros formularios.

width()

Source code

$("#contenido").width("200px");

Con la función width() modificamos el ancho del contenedor con id=»contenido».

Personalmente, en mis más de 10 años de experiencia en esta materia suelo utilizar a menudo todas las funciones que están en este lista. El caso es que jQuery dispone de muchas más. Ver más funciones.

Si sabes de alguna función que no está en esta lista y consideras que debería estarlo, no dudes en enviar un comentario informando sobre ello. Lo añadiremos encantados si lo consideramos oportuno.

Autor

Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.

Te ha servido? Valora esta entrada!

(33 votos, promedio: 5 de 5)

Comparte en las redes sociales

¿Buscas trabajo de programador?

30 respuestas a “Funciones útiles para utilizar en jQuery”

Mario dice:

14/12/2017 a las 12:36

Hola es la primera vez que entro esta web y
me he decido a comentar. Me gusta este blog. Que ¿themeutiliza?
me gustaria poder utlizarlo para mi sitio pero no lo encuentros.
¿Es algún CMS como Budypress?

Si no molesta, no encuentro ningún marcador social como Digg creo que deberiais tener alguno.
Yo tengo Pinterest dado que es facil de usar

Responder
- Jose Aguilar dice:
  
  16/12/2017 a las 8:49
  
  Hola buenos días,
  
  El tema que estamos utilizando para este blog es personalizado y realizado a medida. Sentimos decirle que no está disponible para la descarga.
  
  Saludos
  
  Responder
Pablo Mendez Lizarbe dice:

22/10/2017 a las 15:51

Gran ayuda, lo más utilizado.

Responder
Javier dice:

25/09/2016 a las 11:24

Hola !
Es muy practico y util este blog. Gracias por compartir.

En Prestashop quiero que se ejecute en la pantalla de login
$ ( «.account-creation» ).append( «jgjprueba» ) ;
Para que añada a la clase account-creation el parrafo que indico.
No se que estare haciendo mal porque no funciona.

Si podeis ayudarme.
Gracias

Responder
- Javier dice:
  
  25/09/2016 a las 11:25
  
  Es en la segunda pantalla donde aparece el boton registrar.
  
  Responder
- Jose Aguilar dice:
  
  30/09/2016 a las 12:00
  
  Hola,
  
  No se si ya habrás podido solucionar este problema pero tienes que buscar el sitio correcto para ejecutar tu código:
  
  $ ( “.account-creation” ).append( “jgjprueba” ) ;
  
  Saludos
  
  Responder
Sebastian dice:

03/05/2016 a las 13:33

excelente post! gracias por tu tiempo!

Responder
nueva dice:

18/02/2016 a las 17:35

¡Hola! Me llamo Laura y soy nueva en jQuery. Estoy haciendo unos ejercicios y no consigo hacer este :
con jQuery, mostrar en pantalla un conjunto de números y al pulsar el botón “ver resultado” seleccionar en la pantalla únicamente los números impares.

Alguien me puede ayudar? Gracias!!

Responder
- Vicente dice:
  
  30/08/2017 a las 10:20
  
  Al final pudiste hacer este ejercicio? Creo que estoy haciendo el mismo ejercicio que tú, je je. Si puedes me dices. Gracias.
  
  Responder
sil dice:

19/01/2016 a las 10:58

Hola. Existe alguna manera para que al hacer un slideToggle, el contenido de la pagina no se desplace?. Ahora mismo tengo un botón de info que al hacer hover se despliega información adicional, pero todo el contenido que tengo por debajo se desplaza para dejar hueco al texto adicional. Se puede hacer que no se desplace?

muchas gracias

Responder
- Jose Aguilar dice:
  
  19/01/2016 a las 12:27
  
  Hola,
  
  Quizás te pueda interesar este post:
  http://www.jose-aguilar.com/blog/tooltips-click/
  
  Saludos
  
  Responder
Sergio Daniel Calvo Hidalgo dice:

16/10/2015 a las 12:55

Sobre la funcion .appenTo(), existe otra función parecida llamada .prependTo(), que hace justo lo contrario, en vez de colocar las cosas al final, las coloca justo al principio. Buena entrada 😉

Responder
kristian dice:

17/08/2015 a las 13:46

muy buena la informacion de aqui, muchas gracias

Responder
Efectos, Selectores, Eventos y Funciones de JQuery | rxbxrth's Bloggers dice:

26/01/2015 a las 19:20

[…] http://www.jose-aguilar.com/blog/funciones-utiles-para-utilizar-en-jquery/, recuperado el 16 de enero de 2015. […]

Responder
Trabajo Grupal | paulimasi dice:

23/01/2015 a las 3:19

[…] http://www.jose-aguilar.com/blog/funciones-utiles-para-utilizar-en-jquery/, recuperado el 16 de enero de 2015. […]

Responder
Efectos, Selectores, Eventos y Funciones de JQuery | Mis publicaciones de Diseño Gráfico dice:

19/01/2015 a las 6:10

[…] http://www.jose-aguilar.com/blog/funciones-utiles-para-utilizar-en-jquery/, recuperado el 16 de enero de 2015. […]

Responder
Jose Garcia dice:

25/11/2014 a las 6:34

Hola
A ver si me podeis ayudar, es posible llamar a varias funciones desde un solo evento? en este caso quiero hacer una llamada a tres funciones con el evento onkeyup.
Obviamente el codigo que adlunto no me funciona.

Saludos y Gracias

Responder
- Jose Aguilar dice:
  
  26/11/2014 a las 21:42
  
  Hola, yo diría que si que dentro del onkeyup puedes llamar a las funciones que quieras…
  
  Responder
Alejandro dice:

16/10/2014 a las 2:43

Hola, te hago una preguntar tengo un combobox estoy tratando de hacer que cuando se haga un hover sobre una opcion a un costado muestre una imgen, he intentado pero no me ha salido, me podes ayudar. Gracias

Responder
carlos julio muñoz lopez dice:

06/10/2014 a las 13:11

Cordial saludo, agradezco el que quieras compartir tus conocimientos.
Te quiero hacer la siguiente consulta: Tengo una aplicación web hecha en lenguaje «go», necesito saber como hago para hacer una llamada a una función del lado del servidor, después de un evento en un campo de un formulario.
Después de actualizar o perder el foco, por ejemplo, necesito que se llame a una función en servidor para que se haga alguna verificación u operación y poder tomar este resultado para hacer algo en la pagina.
Si tienes algún ejemplo o me indicas donde encontrarlo. Mil gracias!!

Responder
- Jose Aguilar dice:
  
  06/10/2014 a las 19:45
  
  Posiblemente te pueda servir este ejemplo:
  
  http://www.jose-aguilar.com/blog/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo/
  
  Saludos
  
  Responder
  - carlos julio muñoz lopez dice:
    
    08/10/2014 a las 13:08
    
    Mil gracias!!! , me ha servido tu ejemplo. Claro conciso y efectivo!!!!
    
    Responder
toqu3 dice:

07/10/2013 a las 18:34

Like 😀

Responder
Enzo dice:

04/08/2013 a las 12:56

Te pasaste, venia buscando esto hace tiempo!

Responder
dixon zamora dice:

07/06/2013 a las 4:44

Saludos tal vez me puedan ayudar tengo e siguiente codigo
// esperamos que el DOM cargue
$(document).ready(function() {
$(«#txtNOMBRE»).css(«text-transform»,»uppercase»);
$(«#txtAPELLIDO»).css(«text-transform»,»uppercase»);

// definimos las opciones del plugin AJAX FORM
var opciones= {
beforeSubmit: mostrarLoader, //funcion que se ejecuta antes de enviar el form
success: mostrarRespuesta, //funcion que se ejecuta una vez enviado el formulario

};
//asignamos el plugin ajaxForm al formulario y le pasamos las opciones
$(‘#hongkiat-form’).ajaxForm(opciones);

//lugar donde defino las funciones que utilizo dentro de «opciones»
function mostrarLoader(){
$(«#loader_gif»).fadeIn(«slow»);
};
function mostrarRespuesta (responseText){
alert(«Mensaje enviado: «+responseText); //responseText es lo que devuelve la página contacto.php. Si en contacto.php hacemos echo «Hola» , la variable responseText = «Hola» . Aca hago un alert con el valor de response text
$(«#loader_gif»).fadeOut(«slow»); // Hago desaparecer el loader de ajax
//$(«#ajax_loader»).append(«Mensaje: «+responseText); // Aca utilizo la función append de JQuery para añadir el responseText dentro del div «ajax_loader»
};
});
para guardar en una base de datos y l hace pero ahora como hago para buscar esos datos y mostrarlos en el formulario gracias

Responder
coyon dice:

31/05/2013 a las 18:09

tengo el siguiente problema cuando utilizo el evento change para recargar el form queda en un ciclo infinito;
esto estoy haciendo
$(function () {
$(«#Subcategory_Category_CategoryId»).change(function () {
$(«form»).submit();
} );
} ) ;

Responder
- Cristian dice:
  
  04/06/2013 a las 15:40
  
  prueba asi
  
  $(document).ready(function(){
  $(«select#Subcategory_Category_CategoryId»).change(function(){
  …
  });
  });
  
  Responder
David dice:

25/03/2013 a las 18:02

Gracias por la info!!!, me servirá un montónnn

Responder
David dice:

25/03/2013 a las 18:01

Gracias por la info!!!, me viene biennn.

Responder
avybar dice:

10/04/2012 a las 16:34

Muy interesante su informacion!!!!

Responder