jQuery para principiantes
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.’);
}
}
});
excelente ayuda, enverdad me ha servido mucho esto k has posteado.