Jquery - Riassunto delle funzioni di base

Partenza del codice quando il documento (il DOM) è pronto


far partire il codice jQuery con il gestore "document eready" assicura che il codice sia applicato ad oggetti esistenti. Inoltre porre al termine del caricamento della pagina contribuisce alla sostanziale divisione del codice (JS) dal contenuto (HTML) e dalla presentazione (CSS)

Ecco la base del codice (come abbiamo già visto nella leizione precedente)

$(document).ready(function() {
 
});


di seguito la porzione di codice di sopra sarà omessa

Selezionare gli elementi


La principale caratteristica della funzione jQuery() (abbreviata in $() ) è quella di selezionare elementi HTML per modificarli: basta passare un parametro stringa (tra apici doppi ["] o singoli ['] ) come negli esempi che seguono:

$("div");
$("#mioId");
$(".miaClasse");
$("p#mioId");
$("ul li a.nav");

selettori css 2 / css 3


jQuery supporta tutti i selettori anche quelli avanzati e quelli del CSS3

$("p > a");
$("input[type=text]");
$("a:first");
$("p:odd");
$("li:first-child");


jQuery supporta poi alcuni selettori custom:

$(":animated");
$(":button"); selects any button elements (inputs or buttons)
$(":radio");
$(":checkbox"); selects checkboxes
$(":checked");
$(":header"); selects header elements (h1, h2, h3, etc.)




Tutti i selettori jQuery


Accedere e modificare le classi CSS


Con jQuery è facile aggiungere, scambiare o rimuovere classi CSS: ecco i tre metodi

$("div").addClass("content");
$("div").removeClass("content"); removes class "content" from all <div> elements
$("div").toggleClass("content");


// toggles the class "content" on all <div> elements (adds it if it doesn't exist, and removes it if it does)
You can also check to see if a selected element has a particular CSS class, and then run some code if it does. You would check this using an if statement. Here is an example:
view plain?

Se un elemento è di una determinata classe allora esegui il codice:

if ($("#myElement").hasClass("content")) {
 
}




Gestire gli stili Css con Jquery


Ecco come modificare i css con jQuery:


$("p").css("width", "400px");
$("#myElement").css("color", "blue") makes text color blue on element #myElement
$("ul").css("border", "solid 1px #ccc")

Aggiungere e rimuovere contenuto e inserire elementi


There are a number of ways to manipulate groups of elements with jQuery, including manipulating the content of those elements (whether text, inline elements, etc).

Ottenere l'elemento html


var myElementHTML = $("#myElement").html();


// variable contains all HTML (including text) inside #myElement

Ottenere solo il testo contenuto nel tag


var myElementHTML = $("#myElement").text();



Cambiare l'HTML e/o il Testo


$("#myElement").html("<p>Questo è il nuovo contenuto</p>");
$("#myElement").text("Questo è il nuovo contenuto."); // questo sostituisce il testo presente




Far seguire (appendere) del contenuto ad un elemento


$("#myElement").append("<p>Questo lo aggiungo.</p>");
$("p").append("<p>Questo pure.</p>"); // Aggiunge questo contenuto ad ogni paragrafo



Altri comandi

  • appendTo()
  • prepend()
  • prependTo()
  • before()
  • insertBefore()
  • after()
  • insertAfter()

lavorano in modo simile con specifiche peculiarità

Ulteriori informazioni - jQuery.com-

Gli Eventi in jQuery



Ecco come intercettare il click del mouse con jQuery:

$("a").click(function() {
// il codice presente viene eseguito onclick!
});



Il codice dentro function() viene eseguito quando un link viene cliccato. Ecco altri comuni eventi inclusi injQuery:

  • blur
  • focus
  • hover
  • keydown
  • load
  • mousemove
  • resize
  • scroll
  • submit
  • select

Lista completa - jQuery.com -

Mostrare e nascondere elementi con il jQuery


Ecco la sintassi :

$("#myElement").hide("slow", function() {
 
} // nasconde
 
$("#myElement").show("fast", function() {
// qui dentro viene eseguito una volta che l'elemento è stato mostrato
} //scopre
 
$("#myElement").toggle(1000, function() {
// scambia: se è nascosto mostra e se è visibile nasconde
}



Remember that the “toggle” command will change whatever state the element currently has, and the parameters are both optional. The first parameter indicates the speed of the showing/hiding. If no speed is set, it will occur instantly, with no animation. A number for “speed” represents the speed in milliseconds. The second parameter is an optional function that will run when the command is finished executing.

You can also specifically choose to fade an element in or out, which is always done by animation:
  1. $("#myElement").fadeOut("slow", function() {
  2. do something when fade out finished
  3. }


  4. $("#myElement").fadeIn("fast", function() {
  5. do something when fade in finished
  6. }
To fade an element only partially, either in or out:
view plain?
  1. $("#myElement").fadeTo(2000, 0.4, function() {
  2. // do something when fade is finished
  3. }
The second parameter (0.4) represents “opacity”, and is similar to the way opacity is set in CSS. Whatever the opacity is to start with, it will animate (fadeTo) until it reaches the setting specified, at the speed set (2000 milliseconds). The optional function (called a “callback function”) will run when the opacity change is complete. This is the way virtually all callback functions in jQuery work.

jQuery Animations and Effects

You can slide elements, animate elements, and even stop animations in mid-sequence. To slide elements up or down:
view plain?
  1. $("#myElement").slideDown("fast", function() {
  2. do something when slide down is finished
  3. }


  4. $("#myElement").slideUp("slow", function() {
  5. do something when slide up is finished
  6. }

  7. $("#myElement").slideToggle(1000, function() {
  8. // do something when slide up/down is finished
  9. }
To animate an element, you do so by telling jQuery the CSS styles that the item should change to. jQuery will set the new styles, but instead of setting them instantly (as CSS or raw JavaScript would do), it does so gradually, animating the effect at the chosen speed:
view plain?
  1. $("#myElement").animate(
  2. {
  3. opacity: .3,
  4. width: "500px",
  5. height: "700px"
  6. }, 2000, function() {
  7. // optional callback after animation completes
  8. }
  9. );