JQuery [1]Matteo Magni

jQuery: The Write Less, Do More, JavaScript Library

jQuery

Cos'è?

jQuery è una libreria di funzioni (framework) javascript, cross-browser per le applicazioni web, che si propone come obiettivo quello di semplificare la programmazione lato client delle pagine HTML. (wikipedia)

Cos'è:

• Framework

• Cross browser

Cosa fa:

• Document traversing

• Event handling

• Animating

• Ajax interactions

Quindi?

Versioni

http://jquery.com/a)PRODUCTION (32KB, Minified and Gzipped)

b)DEVELOPMENT (252KB, Uncompressed Code)

Differenze?

Production

Pesa solo 32 kb perché è minificata.http://en.wikipedia.org/wiki/Minification_(programming)

“processo di rimozione di tutti i caratteri non necessari dal codice sorgente, senza cambiarne la sua funzionalità.”

Development

252 kb perché scritta in maniera leggibile al programmatore.

Adatta per la fase di sviluppo, meno per la produzione per via della banda che occupa.

Le funzionalità di tutte e due sono le stesse

Integrare jQuery

Per integrare jQuery nei nostri progetti basta includere il file js come javascript esterno.

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

A quel punto tutte le funzionalità di jQuery ci saranno disponibili.

Content Delivery Network

E' possibile utilizzare jQuery anche da CDN.

• CDN:Content Delivery Network

Rete per la consegna di contenuti, cioè sistema distribuito di grande estensione che attraverso un alto numero di server, il quale consente di fornire contenuti agli utenti con maggior affidabilità.

CDN

Vantaggi • Far risparmiare banda al

proprio server

• L'utente avendola già utilizzata protrebbe quindi averla già in cache nel browser

Google

https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

Microsoft

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js

jQuery

http://code.jquery.com/jquery-1.8.2.min.js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Release

Da CDN possiamo vedere che jQuery è arrivato alla versione 1.8.2 e che quando le chiamiamo la libreria in quel modo dobbiamo ricordaci quale vogliamo.

Come usiamo jQuery?

Il framework jQuery definisce una variabile jQuery la quale contiene un oggetto che ha tutti i metodi e le proprietà implementate dalla libreria.

Alias $

jQuery.isNumeric(“­10”);

Ma abbiamo anche a disposizione un alias come

$ che rappresenta la variabile jQuery.

$.isNumeric(“­10”);

Aspettare il DOM

Fino ad ora dovevamo fare una cosa del genere per far partire lo script dopo il caricamento del documento.

window.onload = function(){ 

  alert("welcome"); 

}

Con jQuery possiamo usare una sintassi di questo tipo

$(document).ready(function(){

   alert("welcome");

 });

Ready vs Load

il codice viene eseguito quando il DOM è pronto ma prima che le immagini ed altri elementi grafici siano caricati

$(document).ready(function(){

   alert("welcome");

 });

Qui aspetto che tutti gli elementi siano caricati

$(window).load(function(){

   alert("welcome");

 });

Selettori

Attraverso jQuery possiamo selezionare tutti gli elementi presenti nel DOM, attraverso una sintassi più semplice che con Javascript, e poi andare a manipolarli a nostro piacimento.

Per elemento - tag

<div>DIV1</div>

<div>DIV2</div>

<span>SPAN</span>

<script>

divs = $("div");

alert(divs);

divs.each(function(index) {

alert(index + ': ' + $(this).text());

});

</script>

http://api.jquery.com/element-selector/

.each()

Il metodo each() è pensato per eseguire cicli.

Quando viene chiamato scandisce gli elementi DOM che fanno parte dell'oggetto jQuery.

Molto importante, la parola chiave this fa riferimento ogni volta ad un elemento diverso del “ciclo”

Per ID

<div id=”pippo”>DIV1</div>

<div>DIV2</div>

<span>SPAN</span>

<script>

divs = $("#pippo");

alert(divs.text());

</script>

http://api.jquery.com/id-selector/

Per className

<div class=”pippo”>DIV1</div>

<div>DIV2</div>

<span class=”pippo”>SPAN</span>

<script>

divs = $(".pippo");

alert(divs.text());

divs.each(function(index) {

alert(index + ': ' + $(this).text());

});

</script>

http://api.jquery.com/class-selector/

Per Attributo [name]

Has Attribute Selector [name]

Selects elements that have the specified attribute, with any value.

<div>no id</div>

  <div id="hey">with id</div>

  <div id="there">has an id</div>

  <div>nope</div>

<script>

    $('div[id]').each(function(index) {

       alert(index + ': ' + $(this).text());    });

</script>

Per attributo [name|="value"]

Attribute Contains Prefix Selector [name|="value"]

Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).

<body>

  <a href="example.html" hreflang="en">Some text</a> 

  <a href="example.html" hreflang="en­UK">Some other text</a>

  <a href="example.html" hreflang="english">will not be outlined</a>

<script>

$('a[hreflang|="en"]').css('border','3px dotted green');

</script>

Per attributo [name*="value"]

Attribute Contains Selector [name*="value"]

Selects elements that have the specified attribute with a value containing the a given substring.

<input name="man­news" />

<input name="milkman" />

<input name="letterman2" />

<input name="newmilk" />

<script>$('input[name*="man"]').val('has man in it!');</script>

Per attributo [name~="value"]

Attribute Contains Word Selector [name~="value"]

Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.

 <input name="man­news" />

  <input name="milk man" />

  <input name="letterman2" />

  <input name="newmilk" />

<script>$('input[name~="man"]').val('mr. man is in it!');</script>

Per Attributo [name$="value"]

Attribute Ends With Selector [name$="value"]

Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.

<input name="newsletter" />

  <input name="milkman" />

  <input name="jobletter" />

<script>$('input[name$="letter"]').val('a letter');</script>

Per Attributo [name="value"]

Attribute Equals Selector [name="value"]

Selects elements that have the specified attribute with a value exactly equal to a certain value.

      <input type="radio" name="newsletter" value="Hot Fuzz" />

      <span>name?</span>

      <input type="radio" name="newsletter" value="Cold Fusion" />

      <span>value?</span>

      <input type="radio" name="newsletter" value="Evil Plans" />

      <span>value?</span>

<script>$('input[value="Hot Fuzz"]').next().text(" Hot Fuzz");</script>

Per attributo [name!="value"]

Attribute Not Equal Selector [name!="value"]

Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value.

   <input type="radio" name="newsletter" value="Hot Fuzz" />

    <span>name is newsletter</span>

    <input type="radio" value="Cold Fusion" />

    <span>no name</span>

    <input type="radio" name="accept" value="Evil Plans" />

    <span>name is accept</span>

  </div>

<script>$('input[name!="newsletter"]').next().append('<b>; not newsletter</b>');</script>

Per Attributo [name^="value"]

Attribute Starts With Selector [name^="value"]

Selects elements that have the specified attribute with a value beginning exactly with a given string.

  <input name="newsletter" />

  <input name="milkman" />

  <input name="newsboy" />

<script>$('input[name^="news"]').val('news here!');</script>

Domande?

Slide:

http://www.slideshare.net/ilbonzo

Code:

https://github.com/ilbonzo/Cypher

mail:

matteo@magni.me