Sesión ix

Publicado: febrero 26, 2012 en 9, Sesion
Etiquetas:, , , , ,
  • Fundamentos de Ajax.
  • El objeto xmlhttprequest
  • Atributos y métodos.
  • Eventos.
  • Manipulación de contenidos


Actividades

  1. Consulte los siguientes términos: request, post, get, json, eventos y selectores jquery,
  2. Exposición y socialización de las consultas
  3. Desarrolle un las siguientes páginas web implementando css y jquery
    • Desarrolle una página con los eventos: click, dobleclick, focus, over, keydown, keyup, live
    • Desarrolle una página con los efectos: show, hide, fadein, fadeout, anímate
    • Desarrolle una página que manipule el contenido de una tabla
Incluir la Libreria Jquery
se puede descargar desde la pagina oficial de jquery.com
o desde servidores que contengan el .js, ejemplo google apis http://code.google.com/apis/libraries/devguide.html#jquery
Función de Inicio
se adicionan las etiquetas script, para declarar el javascript y en ellas se coloca la funcion inicial que se carga con el documento
 <script>
            $(function(){
                      //aqui va el Codigo Jquery o Javascript
            });
 </script>
Selectores
los selectores de Jquery son igual que los de CSS, es por esta razón que a tenido mucha demanda ademas de su desempeño y plugins
ejemplo de selectores
     //selectores
$(“p”);//por elemento
$(“#miTabla”);//por ID
$(“.trColor”);//por CLASS
         $(“table > tr”);//hijos de table que son tr
ejemplo en jsfiddle:
EVENTOS
aqui esta el listado de Eventos que tiene Jquery
Click
$("p").click(function() {
  alert("click() en un parrafo.");
});
ver: http://jsfiddle.net/oscarviana/HsCUV/embedded/result/

dobleclick
$("thead").dblclick(function() {
  alert("click() en un parrafo.");
});
ver: http://jsfiddle.net/oscarviana/rxYQq/embedded/result/
 
hover
$("thead").hover(function() {
  alert("click() en un parrafo.");
});
_______________________________________
Manipulacion de HTML
$(“#new”).click(function() {
var tmpTXT = $(“#txtMSG”).val();$(“#content_msg”).html(“<h1>”+tmpTXT+”</h1>”);

$(“#content_msgX”).append(“<h1>”+tmpTXT+”</h1>”);

});

$(“#getHtml”).click(function() {
var tmpHTML = $(“#content_msgX”).html();
//alert(tmpHTML);

//observar con firebug
$(“#content_msgX”).after(“<s>|</s>”);
});

});

__________________________________–
Efectos
Show, Hide
fadeIn, fadeOut
_________________
Actividad
ver

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s