Etiquetas

, , ,

A continuación le dejo algunas instrucciones básicas de JQuery con las que se pueden empezar si se quieren ir familiarizando con este framework javascript.

Además les dejo este enlace donde pueden acceder a una JQuery CheatSheet creada por la gente de colorcharge que además está bastante completa y muy bien hecha.


Referencia a la libreria:

<script src=”jquery.js”></script>
o

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js“></script>
Se puede descargar de aqui:

http://docs.jquery.com/Downloading_jQuery

Determinar cuando ya se ha cargado el DOM:

$(document).ready(function(){ // Your code here });
Agregar un evento a un control:

$(document).ready(function()

$(“a”).click(function(event)

{ alert(“Thanks for visiting!”);

});

});

Para conocer mas eventos disponibles:

http://api.jquery.com/category/events/
Agregar estilos a los controles:

$(“a”).addClass(“test”);

$(“a”).removeClass(“test”);

Agregar Efectos:


$(“a”).click(function(event){ event.preventDefault(); $(this).hide(“slow”); });

para conocer mas efectos:

http://api.jquery.com/category/effects/

LLamadas sin parametros:

$.get(‘myhtmlpage.html’, myCallBack);

Llamada con parametros:

$.get(‘myhtmlpage.html’, function(){ myCallBack(param1, param2); });

Seleccionar todos los elementos de un documento:

<script>var elementCount = $(“*”).css(“border”,”3px solid red”).length; $(“body”).prepend(“<h3>” + elementCount + ” elements found</h3>”);</script>

————————————————————————————
<div id=”test”>
<script> var elementCount = $(“#test”).find(“*”).css(“border”,”3px solid red”).length; $(“body”).prepend(“<h3>” + elementCount + ” elements found</h3>”);</script>

Seleccionar un control segun su ID:

<div id=”myDiv”>id=”myDiv”</div>

<script>$(“#myDiv”).css(“border”,”3px solid red”);</script>

Mas selectores aqui:

http://api.jquery.com/category/selectors/
Accediendo y modificando atributos:

<img id=”greatphoto” src=”brush-seller.jpg” alt=”brush seller” />

Cambiando el valor de atributo

$(‘#greatphoto’).attr(‘alt’, ‘Beijing Brush Seller’);

Agregando un atributo:

$(‘#greatphoto’) .attr(‘title’, ‘Photo by Kelly Clark’);

Modificando varios atributos:

$(‘#greatphoto’).attr({ alt: ‘Beijing Brush Seller’, title: ‘photo by Kelly Clark’ });


obteniendo el valor de un control:

<input value=”some text”/>

<p></p> <script>

$(“input”).keyup(function () { var value = $(this).val(); $(“p”).text(value); }).keyup(); </script>
Metodos:

Append():Inserta contenido al final del elemento

<h2>Greetings</h2>

<div>

<div class=”inner”>Hello</div>

<div class=”inner”>Goodbye</div> </div>

$(‘.inner’).append(‘<p>Test</p>’);

Html(): Obtiene el contenido html de un elemento

<div>

<div class=”demo-box”>Demonstration Box</div>

</div>

$(‘div.demo-container’).html();

Html(htmlString): fija el contenido html de un elemento

<div class=”demo-container”>

<div>Demonstration Box</div>

</div>

$(‘div.demo-container’) .html(‘<p>All new content. <em>You bet!</em></p>’);

Mas Metodos:

http://api.jquery.com/category/manipulation/