Manual JQuery

Agregar:

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

</script>

DEBEMOS METER TODO LO DE JQUERY DENTRO DE:

Opcion 1:
$(document).ready(function(){

   // jQuery methods go here...

});


Opcion 2:
$(function(){

   // jQuery methods go here...

})

SELECTORES:

$("p") ---> Selecciona todos los elementos "p" de la pagina

$("#test") ---> Selecciona por id

$(".test") ---> Selecciona por clase (<d class="test" >)


ARCHIVO APARTE

<script src="my_jquery_functions.js"></script>

FUNCIONES EVENTOS

Mouse Events:---> click, dblclick, mouseenter, mouseleave ( $("p").click(function() ) ( $("p").dblclick(function())
Keyboard Events:---> keypress, keyup, keydown
Form Events:---> submit, focus, change, blur
Document/Window Events:---> load, resize, scroll, unload

MOSTRAR / OCULTAR

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

Unir las 2 en una:

$("button").click(function(){
  $("p").toggle();
});

Suavemente:

$("p").fadeIn();

$("p").fadeOut();

Unir las 2 en una:

$("p").fadeToggle();


ANIMACION

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

Agrandar y achicar:

$("#nono").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });

  <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>


ALERTA EN TEXTO O HTML o un atributo:

$("#nono").click(function(){
  alert("Text: " + $("#pepito").text());
});
$("#nono2").click(function(){
  alert("HTML: " + $("#pepito").html());
});

 alert($("#w3s").attr("href"));


CAMBIAR COSAS

$("#pepito").text("Hello world!");
  });

$("#test2").html("<b>Hello world!</b>");
$("#test3").val("Dolly Duck");

AÑADIR ATRIBUTOS:

$("#pepito").attr("href","http://www.w3schools.com/jquery");


AÑADIR TEXTO:
Detras:
  $("p").append("Some appended text.");
Delante:
  $("p").prepend("Some prepended text.");


DEJAR ALGO EN BLANCO O ELIMINARLO:

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

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


AÑADIR/ELIMINAR CSS:

.important
{
font-weight:bold;
font-size:xx-large;
}

$("#div1").addClass("important");
$("#div1").removeClass("important");

$("#div1").toggleClass("important");


MODIFICAR CSS:

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

MODIFICAR TAMAÑO:

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

$("#pepito").width(500).height(500);
  });

<p id="pepito" style="height:100px;width:300px;background-color:lightblue;">nono <bold> HOLAA!</bold></p>


Fuente: http://www.w3schools.com/jquery/default.asp