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

MANUAL JAVASCRIPT

Cualquier trozo de javascript incrustrado en HTML debe ir entre esto:

<script type="text/javascript">
  "Instrucciones"
</script>

Al final de cada linea-----> ;

Para escribir en la pagina:
document.write('Hola Nono');
document.write(nombre + ' esta aprobado con un ' + nota);

Para marcar un intro:
document.write('<br>');

Declarar variables:
var nono;
nono='Antonio';

Ingresar variables por teclado:
var nombre;
nombre=prompt('Ingrese su nombre:','Valor por defecto');

Tratar un numero como tal (suma, multiplicacion, etc...):
var suma=parseInt(valor1)+parseInt(valor2);

Cambiar color del fondo:
document.bgColor='#ff0000';

CONDICIONES IF

if (nota > 4)
{

}
else
{

}
>  mayor
>= mayor o igual
<  menor
<= menor o igual
!= distinto
== igual

Para unir condiciones usamos && o ||

OPERADOR SWITCH

switch (valor) {
    case 1: document.write('uno');
            break;
    case 2: document.write('dos');
            break;
    case 3: document.write('tres');
            break;
    case 4: document.write('cuatro');
            break;
    case 5: document.write('cinco');
            break;
    default:document.write('debe ingresar un valor comprendido entre 1 y 5.');
  }

OPERADOR WHILE

while (condicion)
{
instrucciones
}

OPERADOR DO WHILE

do
{


}while(x!=0);


OPERADOR FOR

var f;
  for(f=1;f<=10;f++)
  {
   instrucciones
  }

 FUNCIONES

 function mostrarMensaje(x1,x2)
  {
  var nono='Hola';
    document.write("Cuidado<br>");
    document.write("Ingrese su documento correctamente<br>");

   return nono;
  }

 LLamada a la funcion ----->  mostrarMensaje(v1,v2);


OBJETOS CLASE DATE


fecha = new Date();//creación de un objeto de la clase Date
fecha = new Date(año, mes, dia);
fecha = new Date(año, mes, dia, hora, minuto, segundo);

Metodos de la clase:
getYear()
setYear(año)
    Obtiene y coloca, respectivamente, el año de la fecha.
    Éste se devuelve como número de 4 dígitos excepto en el
    caso en que esté entre 1900 y 1999, en cuyo caso
    devolverá las dos últimas cifras.
getFullYear()
setFullYear(año)
   Realizan la misma función que los anteriores, pero sin
    tanta complicación, ya que siempre devuelven números
    con todos sus dígitos.
getMonth()
setMonth(mes)
getDate()
setDate(dia)
getHours()
setHours(horas)
getMinutes()
setMinutes(minutos)
getSeconds()
setSeconds(segundos)
    Obtienen y colocan, respectivamente, el mes, día, hora,
    minuto y segundo de la fecha.
getDay()
    Devuelve el día de la semana de la fecha en forma de
    número que va del 0 (domingo) al 6 (sábado)


BOTONES

<form>
  <input type="button" onClick="funcionJS()" value="Incrementar">
</form>

CAJAS DE TEXTO

<script type="text/javascript">
function mostrar()
{
  var nom=document.getElementById('nombre').value;
  var ed=document.getElementById('edad').value;
  alert('Ingresó el nombre:' + nom);
  alert('Y la edad:' + ed);
}
</script>


<form>
Ingrese su nombre:
<input type="text" id="nombre"><br>
Ingrese su edad:
<input type="text" id="edad"><br>
<input type="button" value="Confirmar" onClick="mostrar()">
</form>

CONTRASEÑAS

<script type="text/javascript">
  function verificar()
  {
    var clave=document.getElementById('clave').value;
    if (clave.length<5)
    {
      alert('La clave no puede tener menos de 5 caracteres!!!');
    }
    else
    {
      alert('Largo de clave correcta');
    }
  }
</script>

<form>
Ingrese una clave:
<input type="password" id="clave">
<br>
<input type="button" value="Confirmar" onClick="verificar()">
</form>

CAJITA CON VALORES

<script type="text/javascript">
function cambiarColor()
{
  var seleccion=document.getElementById('select1');
  document.getElementById('text1').value=seleccion.selectedIndex;
  document.getElementById('text2').value=seleccion.options[seleccion.selectedIndex].text;
  document.getElementById('text3').value=seleccion.options[seleccion.selectedIndex].value;
}
</script>

<form>
  <select id="select1" onChange="cambiarColor()">
    <option value="0xff0000">Rojo</option>
    <option value="0x00ff00">Verde</option>
    <option value="0x0000ff">Azul</option>
  </select>
  <br>
  Número de índice seleccionado del objeto SELECT:<input type="text" id="text1"><br>
  Texto seleccionado:<input type="text" id="text2"><br>
  Valor asociado:<input type="text" id="text3"><br>
</form>


CAJITAS TRUE/FALSE

http://www.javascriptya.com.ar/temarios/descripcion.php?cod=27



ON MOUSE


<script type="text/javascript">
  function pintar(col)
  {
    document.bgColor=col;
  }
</script>

<a href="pagina1.html" onMouseOver="pintar('#ff0000')" onMouseOut="pintar('#ffffff')">Rojo</a>
-
<a href="pagina1.html" onMouseOver="pintar('#00ff00')" onMouseOut="pintar('#ffffff')">Verde</a>
-
<a href="pagina1.html" onMouseOver="pintar('#0000ff')" onMouseOut="pintar('#ffffff')">Azul</a>


ELEMENTO WINDOW


toolbar[=yes|no]
location[=yes|no]
directories[=yes|no]
status[=yes|no]
menubar[=yes|no]
scrollbars[=yes|no]
resizable[=yes|no]
width=pixels
height=pixels



IMPORTAR ARCHIVO .JS

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



MODIFICAR IMAGEN DINAMICAMENTE

<script type="text/javascript">

 function cambiar () {
  document.getElementById('matrix').src = "mt07.jpg";
 }

 function volver () {
  document.getElementById('matrix').src = "mt05.jpg";
 }

</script>

<img src="mt05.jpg" id="matrix" onMouseOver="cambiar();" onMouseOut="volver();"/>