Jose Fernandez: junio 2012

domingo, 24 de junio de 2012

Limpiar los datos de un formulario al hacer submit con Jquery

Hola a todos yo otra vez por aqui su amigo Jose Fernandez para traerles un ejemplo mas, adivinen de que, de jquery porsupuesto, el siguiente ejemplo trata de limpiar los datos de un formulario cuando le hacemos submit es decir cuando el usuario haga submit por mas que retroseda los datos no volveran a los campos, esto quiere decir que el formulario se ha reseteado por completo, mas que todo en eso consiste, los pasos que tiene que seguir para llevarlo acabo son los siguientes:

Paso1: Importar la libreria Jquery

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

Paso2: Realizar la funcion que nos limpie nuestro formulario utlizando el id del submit

<script type="text/javascript">
 $(document).ready(function() {
   $("#reset1").click(function() {
     $("form")[0].reset();
   });
 });
</script>

Paso3: Elaborar nuestro formulario en el body de nuestro html asignandole el id en el submit

<body>

Plato:



</body>

Resultado: La pagina html resultante nos quedaria como se muestra a continuacion

<html>
<head>


</head>
<body>

Plato:



</body>
</html>

Bueno eso seria todo espero que les haya servido, hasta pronto. un saludo su amigo Jose Fernandez Segura

martes, 19 de junio de 2012

Direccionar una URL de un Link con Jquery

Hola amigos soy jose fernandez espero que los ejercicios anteriores les aya sido facil de entender ahora en esta ocasion les traigo algunos ejemplos de como direccionar una url de un link con Jquery

Los pasos que deben seguir para llevar a cabo el ejemplo son los siguientes:

paso1:

importar la libreria jquery a su html

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

paso2:

crear la funcion que se active con el evento click de la etiqueta "a", el cual contiene la direccion web a la que nos queremos dirigir.

<script type="text/javescript">
 $(document).ready(function() {
   $("a").click(function() {
     alert("Hello world!");
   });
 });
</script>

paso3:

asignarle la direccion url a la etiqueta "a"

google

resultado:

como resultado la pagina html nos quedaria como se muestra

<html>
<head>


</head>
<body>
google
</body>
</html>

espero les haya servido mucha suerte a todos hasta luego, Jose Fernandez Segura

Capturar los indices de una lista con Jquery

Hola amigos soy yo otra vez jose fernandez y en esta oportunidad les traigo un ejemplo mas, que consiste en capturar los indices de una lista haciendo uso de la libreria Jquery.

Los pasos que deben seguir para llevar a cabo el ejemplo son los siguientes:

paso1:

importar la libreria jquery a su html

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

paso2:

crear la funcion que capture los indices de la lista utilizando el id de la lista y la etiqueta "li"

<script type="text/javescript">
 $(document).ready(function() {
   $("#orderedlist4").find("li").each(function(i) {
     $(this).append( " BAM! " + i );
   });
 });
</script>

paso3:

realizar una lista usando la etiqueta li y asignandole el "id" orderedlist4

<ul id="orderedlist4">
 windows 
 linux 
 mac 
</ul>

resultado:

como resultado la pagina html nos quedaria como se muestra

<html>
<head>


</head>
<body>

 windows 
 linux 
 mac 

</body>
</html>

espero les haya servido mucha suerte a todos hasta luego, Jose Fernandez Segura

Pintar el ultimo elemento de una lista con Jquery

Hola a todos soy jose fernandez y en esta oportunidad les traigo un ejemplo mas, que consiste en pintar el ultimo elemento de una lista cuando se detecta el mouse sobre el item.

Los pasos que deben seguir para llevar a cabo el ejemplo son los siguientes:

paso1:

crear la clase green en la seccion "head" de su html

<style>
.green { 
color: green;
 }
</style>

paso2:

importar la libreria jquery a su html

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

paso3:

crear la funcion que pinte el ultimo elemento cuando se detecte el mouse encima del ultimo item

<script type="text/javescript">
$(document).ready(function() {
   $("#orderedlist3 li:last").hover(function() {
     $(this).addClass("green");
   },function(){
     $(this).removeClass("green");
   });
 });
</script>

paso4:

realizar una lista usando la etiqueta li y asignandole el "id" orderedlist3

<ol type="1" id="orderedlist3">
 windows 
 linux 
 mac 
</ol>

resultado:

como resultado la pagina html nos quedaria como se muestra

<html>
<head>



</head>
<body>

 windows 
 linux 
 mac 

</body>
</html>

espero les haya servido mucha suerte a todos hasta luego, Jose Fernandez Segura

Añadir mas estilos a un id con Jquery

Hola amigos soy jose fernandez yo otra vez por aqui, espero que el ejercicio anterior les haya servido en esta ocasion voy a realizar uno similar la diferencia es que el estilo que se quiera añadir a un id va poder ser aplicable a un id de una etiqueta que ya contenga un estilo previamente

Los pasos que deben seguir para llevar a cabo el ejemplo son los siguientes:

paso1:

crear la clase blue en la seccion "head" de su html

<style>
.blue{
color:blue;
}
</style>

paso2:

importar la libreria jquery a su html

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

paso3:

crear la funcion que agregue la clase blue al id orderedlist2 de la etiqueta html "li"

<script type="text/javescript">
 $(document).ready(function() {
   $("#orderedlist2 > li").addClass("blue");
 });
</script>

paso4:

realizar una lista usando la etiqueta li y asignandole el "id" orderedlist1

<ol type="1" id="orderedlist2">
 windows 
 linux 
 mac 
</ol>

resultado:

como resultado la pagina html nos quedaria como se muestra

<html>
<head>



</head>
<body>

windows
linux
mac

</body>
</html>

espero les haya servido mucha suerte a todos hasta luego, Jose Fernandez Segura

domingo, 17 de junio de 2012

Establecer estilos con Jquery

Hola a todos soy jose fernandez y en esta oportunidad les vengo a traer un ejemplo de como establecer estilos de una clase a la etiqueta html llamada "li" haciendo uso de Jquery.

Los pasos que deben seguir para llevar a cabo el ejemplo son los siguientes:

paso1:

crear la clase red en la seccion "head" de su html

<style>
.red{
color:red;
}
</style>

paso2:

importar la libreria jquery a su html

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

paso3:

crear la funcion que agregue la clase red al id orderedlist1 de la etiqueta html "li"

<html>
<script type="text/javascript">
 $(document).ready(function() {
   $("#orderedlist1").addClass("red");
 });
</script>
</html>

paso4:

realizar una lista usando la etiqueta li y asignandole el "id" orderedlist1

<ol type="1" id="orderedlist1">
<li> windows </li>
<li> linux </li>
<li> mac </li>
</ol>

resultado:

como resultado la pagina html nos quedaria como se muestra

<html>
<head>



</head>
<body>

windows
linux
mac

</body>
</html>

espero les haya servido mucha suerte a todos hasta luego, Jose Fernandez Segura