jQuery para principiantes

Julio 30th, 2009 by admin

Esta entrada es vecina de la de Linux  pues es un recopilatorio de cosas que he ido necesitando y con las que he ido trabajando en jQuery espero que les sirvan y seguire editando a medida que vayan surgiendo nuevos apuntes.

Garantizarme este todo listo para operar con los Ids  es mejor trabajar dentro de esta function.
$(document).ready(function() {
// lo que quiera
});

Agregar una clase a un id
$(’#popDiselo’).addClass(’opcioHo’);

Mostrar todos los li que tienen un class especifico
$(”li.colorLateral”).show();

Capturar valor del elemento de formulario
$(”#algo”).val()

Capturar valor del elemento id html
$(”#parrafo1″).html()

Mete contenido en el id especificado. Soporta html tags
$(”#algo”).html( ‘contenido’)

Me genera la cadena de datos que puedo querer enviar tipo
single=Single&multiple=Multiple&multiple=Multiple3&check=check1&check=check2&radio=radio2
var datos= $(”#form”).serialize();

Puedo usarla en conjunción con el post:
datos=    ’accion=diselo&’+$(”#frmDiselo”).serialize();
$.post(’ajax.gateway.php’, datos,…..

Mostrar un ID
$(’#popDiselo’).show();

Ocultar un ID
$(’#popDiselo’).hide();

Definir acciones para cuando hagan click en un elemento.
$(’#btnDiseloCerrar’).click(function() {
$(’#popDiselo’).hide();
});

Enviar datos y recibir respuesta…
$.post(’ajax.gateway.php’, datos,
function (resp) {
//resp[0]
}, “json”);

Cambiando atributos dinámicamente. Ej. Src de una imagen
$(”#imatgeQ”).attr(”src”, “./game/img/juegos/”+resp[0]);

Timers (esto no es jQuery pero lo necesite :) )
setInterval(”dummy()”, 1000);

Comunicarse via GET y Json
$.getJSON(’gateway.proc.php?accion=hotbutton’,
function parsearData(resp) {
$(”#resultado_hotbutton”).html(resp['resultado']);
}
);

Un poco de efectos
$(”#resultado_hotbutton”).fadeIn(’slow’).animate({opacity: 1.0}, 3000).fadeOut(’slow’, function() {
$(this).hide();
$(”#resultado_hotbutton”).html(”…”);
$(”#resultado_hotbutton”).show();
});

Recorre una matriz retornada desde php
$.each(resp[1], function(i,item){
frases+=item+”<br />”;
})

otra forma…

$.each(resp['bids'], function(i,item){
estiloCSS=(item[3]==”1″ ) ?”Estilo8Red”:”Estilo8″    // Definir que estilo usar
contenido = contenido + ‘ <tr bgcolor=”#ebebeb” > <td align=”center”>’+ item[0]+’</td><td align=”center”>’+ item[1]+’</td> <td align=”center” >’+ item[2]+’</td></tr>’ ;
})

y otra forma…

$.each(resp[3], function(i,item){
informacion+=’<li>’;
informacion+=’<h4>’;
informacion+=’<a href=”operadores_detalle.php?informacionID=’+item["informacionID"]+’”>’;
informacion+=item["titulo"];
informacion+=’</a>’;
informacion+=’</h4>’;
informacion+=’<p>’;
informacion+=item["fecha"];
informacion+=’<br />’;
informacion+=item["entradilla"];
informacion+=’</p>’;
informacion+=’</li>\r\n’;
idx_informacion++;
})

Traductor requiere .js especial
$(’#text’).translate(’ca’, ‘en’);

Aplicar una clase a varios ID´s
$(’#frmDiselo_ok, #frmDiselo_ko’).addClass(”desaparece”);

Acciones consecutivas. En el ejemplo agrego una clase a un DIV y luego lo muestro
$(’#popDiselo’).addClass(’opcioHo’).show();

Capturar valor de un Radio Button
$(’input:radio’).click(function(){
valor = $(this).attr(”value”);
})

$(”.wr_cv div form blockquote”).before(”algo”);

console.log( $(”input[@name='modalidad']:checked”).val() );

Esto es del player de flash que uso para flvs y audios y asi no me olvido…
audio.sendEvent(’STOP’);
audio.sendEvent(’LOAD’, ‘./game/audios/’+mp3);

Enviar Formularios

$(”#myform”).ajaxForm({
url: “mypage.php”,
type: “POST”
});

Lectura de atributos

$(this).attr(”rel”);

Controlando los timeout´s

// fuente: http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=715
$.ajax({
url : ‘ajaxurl.json’,
type : ‘get’,
data :  {name : ‘value’},
dataType : ‘json’,
timeout : 20000,
tryCount : 0,
retryLimit : 3,
success : function(json) {
//do something
},
error : function(xhr, textStatus, errorThrown ) {
if (textStatus == ‘timeout’) {
this.tryCount++;
if (this.tryCount <= this.retryLimit) {
//try again
$.ajax(this);
return;
}
alert(’We have tried ‘ + this.retryLimit + ‘ times and it is still not working. We give in. Sorry.’);
return;
}
if (xhr.status == 500) {
alert(’Oops! There seems to be a server problem, please try again later.’);
} else {
alert(’Oops! There was a problem, sorry.’);
}
}
});

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.