Entradas con la etiqueta jquery

Tip 3: Añadir o quitar una clase css a un elemento html

A continuación muestro como añadir o quitar una clase a un elemento html con jQuery

Para añadir una clase

$('#idelemento').addClass('verde');

Para eliminar una clase

$('#idelemento').removeClass('verde');

 

Para más información: http://api.jquery.com/addClass/ y http://api.jquery.com/removeClass/

 

Etiquetas: ,

Tip 2: Cambiar propiedades css con jQuery

Para cambiar propiedades css de un elemento, utilizaremos la siguiente instrucción

$(“#idelemento”).css(“color”,”red”);

Para más información: http://api.jquery.com/css/#css2

Etiquetas: ,

Tip 1: ¿Cómo cambiar el valor de un TextBox con jQuery?

A continuación muestro como cambiar el valor de un textbox con jQuery, así de simple así de rápido.

$('#texto').val('valorpersonalizado');

Si necesitáis profundizar más sobre la función val, os dejo el siguiente enlace http://api.jquery.com/val/

Etiquetas: ,

Añadir borde a un div ou imaxe con jQuery

Deixo este enlace a un plugin en jQuery permite añadir un borde a un div ou unha imaxe que podemos ocultar ou mostrar ó posicionarnos encima.
Exemplo: http://css-tricks.com/examples/InsetBorderEffect/

Etiquetas: ,

30 consellos e trucos para jQuery

Nesta web encontrei uns consellos e trucos para jQuery que realmente, dende o meu punto de vista son moi útiles (algúns).  De todos destacaría
#13 – Friendly Text Resizing, que sirve para cambiar o tamaño do texto e tamén destacaría o #23 – Configure jQuery to be Compatible with Other Libraries, algo que é moi sencillo e lóxico, que permite engadir outras librerías sen que entren en conflicto con jQuery.

Enlace problogdesign.com

Etiquetas: , , ,

Preloading con jQuery

Query Loader es una pequeña implementación en jQuery que nos permite personalizar el efecto a mostrar durante la carga del sitio.

Ejemplo: http://www.gayadesign.com/scripts/queryLoader/

La implementación de este script es de lo más simple:

1. Descarguen el código del sitio oficial.

2. Subirlo al servidor.

3. Colocar la llamada al javascript desde alguna parte del código del sitio, obviamente quitar la llamada a jQuery si ya la están realizando con anterioridad.

<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js’></script>
<link rel=”stylesheet” href=”css/queryLoader.css” type=”text/css” />
<script type=’text/javascript’ src=’js/queryLoader.js’></script>

4. Colocar este código en el pie de la página

<script type=’text/javascript’>
QueryLoader.init();
</script>

Etiquetas: ,

Introdución a jQuery

1.-Selección de elementos (http://docs.jquery.com/Selectors)

  • Seleccion por id: $(”#id_elemento”)
  • Seleccion por class: $(”.clase”)
  • Seleccion de todos los elementos de un tipo: $(”p”), $(”img”), $(”input”)
  • Seleccion con filtro por valor de atributo: $(”input[name='username']“) (selecciona todos los input cuyo atributo name sea igual a “username”).
  • Podemos combinarlos: $(”input.clase[name='username']“)

2.- Atributos , Clases y Estilos CSS (http://docs.jquery.com/Attributes)

  • Obtener valor de atributo: $(selector).attr(”attr_name”) (devuelve un string).
  • Establecer valor: $(selector).attr(”nombre_atributo”, “valor”)
  • Eliminar atributo: $(selector).removeAttr(”nombre_atributo”)
  • Añadir clase (class): $(selector).addClass(”nombre_clase”)
  • Eliminar clase: $(selector).removeClass(”nombre_clase”)
  • Obtener valor (value): $(selector).val()
  • Establecer valor (value): $(selector).val(”valor”)
  • Establecer valor de estilo CSS: $(selector).css(”elemento”, “valor”) ( pj: .css(”display”, “none”) )
  • Obtener valor de elemento CSS: $(selector).css(”elemento”)
  • Establecer tamaño CSS: $(selector).width(anchura), $(selector).height(altura)
  • Obtener tamaño CSS: $(selector).width(), $(selector).height()

3.- Manipulación de contenido (http://docs.jquery.com/Manipulation)

  • Obtener contenido HTML: $(selector).html()
  • Establecer contenido HTML: $(selector).html(”contenido”)
  • Añadir contenido al principio: $(selector).prepend(”contenido”)
  • Añadir contenido al final: $(selector).append(”contenido”)

4.- Eventos (http://docs.jquery.com/Events)

  • Función de click, se llama al hacer click sobre el elemento: $(selector).click( fn ).
  • Función de focus, se llama al hacer focus en un elemento: $(selector).focus( fn ).
  • Función de submit (típica de un formulario, se llama cuando este se envia): $(selector).submit( fn ).

5.- Efectos (http://docs.jquery.com/Effects)

  • Esconder/Mostrar un elemento: $(selector).hide(), $(selector).show() Esto esconderá/mostrará un elemento al momento, pero podremos animarlo con un simple .hide(velocidad), donde “velocidad” puede ser un string de entre “slow”, “normal” y “fast” o bien un valor numérico en milisegundos que durará dicha animación. Ademas podremos añadir una parámetro más en el que definiremos una función que se llamará cuando finalice la animación, ideal para componer animaciones ( .show(”slow”, function(){…})).
  • Efecto slide (cortina): $(selector).slideUp(velocidad) $(selector).slideDown(…).
  • Efecto desvanecimiento: $(selector).fadeIn(velocidad), $(selector).fadeOut(…)
  • Parar animación en curso: $(selector).stop()

Etiquetas: , ,

Menús desplegables (jQuery e CSS)

Etiquetas: , ,