jquery - 4 | webmaster & webdesigner
DESCRIPTION
Quarta lezione del modulo Jquery per il corso di WebMaster & WebDesignerTRANSCRIPT
![Page 1: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/1.jpg)
JQuery [4]Matteo Magni
![Page 2: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/2.jpg)
Eventi
jQuery ovviamente ci mette a disposizione una serie di semplici metodi per gestire gli eventi generati dal browser e dall'utente.
I metodi hanno una nomenclatura molto simile agli eventi che già conosciamo.
![Page 3: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/3.jpg)
Browser Events
• .error()<img src=”noimage.ppp” alt="Book" id="book" />
$('#book')
.error(function() {
alert('Handler for .error() called.')
})
.attr("src", "missing.png");
ci permette di gestire eventuali errori tipo la mancanza di una immagine.
![Page 4: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/4.jpg)
Browser Events [2]• .resize()$(window).resize(function() {
alert($(window).width());
});
Gestisce se qualcuno modifica le dimensioni della finestra.
• .scroll()<div id="target" style="overflow: scroll; width: 200px; height: 100px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
</div>
$('#target').scroll(function() {alert('attento');});
![Page 5: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/5.jpg)
Event Loading
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");
});
![Page 6: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/6.jpg)
Form Events
• .blur()
• .change()
• .focus()
• .select()
• .submit()
![Page 7: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/7.jpg)
Keyboard Events
• .keydown()
• .keypress()
• .keyup()
![Page 8: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/8.jpg)
Mouse Events
• .click()
• .dblclick()
• .focusin()
• .focusout()
• .hover()
• .mousedown()
• .mouseenter()
• .mouseleave()
• .mousemove()
• .mouseout()
• .mouseover()
• .mouseup()
![Page 9: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/9.jpg)
bind()
Tutti i metodi semplificati per gestire gli eventi utilizzano il metodo bind() al quale va passato il nome dell'evento.
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
![Page 10: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/10.jpg)
bind() [2]
Il vantaggio è che possiamo passare più eventi
$('#foo').bind('click onmouseover', function() {
alert('User clicked or mouseover on "foo."');
});
![Page 11: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/11.jpg)
unbind()
Il metodo unbind permette di rimuovere gli eventi precedentemente collegati.
//rimuovo gli eventi
$('#foo').unbind();
//specifico il tipo di evento
$('#foo').unbind('click');
![Page 12: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/12.jpg)
on() e off()
Dalla versione 1.7 i metodi bind e unbind sono stati sostituiti dal metodo on e off.
$("#pippo").on("click", function(event){
alert($(this).text());
});
$("#pippo").off()
$("#pippo").off('click',)
![Page 13: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/13.jpg)
Traversing
![Page 14: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/14.jpg)
Traversing
Abbiamo visto i selettori e i filtri ma:
Selector context is implemented with the .find() method; therefore, $('li.item-ii').find('li') is equivalent to $('li', 'li.item-ii').
![Page 15: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/15.jpg)
Metodi di traversing
• .eq()
• .filter()
• .first()
• .has()• .is()
• .last()
• .map()
• .not()
• .slice()
• .children()• .closest()• .find()• .next()• .nextAll()• .nextUntil()• .parent()• .parents()• .parentsUntil()• .prev()• .prevAll()• .prevUntil()• .siblings()
![Page 16: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/16.jpg)
Manipolare il DOM
Al fine di raggiungere i nostri obbiettivi spesso serve intervenire sul DOM, andando ad aggiungere, rimuovere o modificare elementi.
![Page 17: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/17.jpg)
DOM Insertion, Inside
.append()
Inserisce il contenuto passato come parametro alla fine degli elementi passati come insieme
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('.inner').append('<p>Test</p>');
![Page 18: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/18.jpg)
DOM Insertion, Inside [2]
.appendTo()
Inserisce ogni elemento individuato nella selezione a tutti gli elementi passati come parametro.
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('<p>Test</p>').appendTo('.inner');
![Page 19: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/19.jpg)
DOM Insertion, Inside [3]
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('.inner').prepend('<p>Test</p>');
$('<p>Test</p>').prependTo('.inner');
• .prepend()
• .prependTo()
![Page 20: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/20.jpg)
DOM Insertion, Around
• .wrap()
• .wrapAll()
• .wrapInner()
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('.inner').wrap('<div class="new" />');
$('.inner').wrapAll('<div class="new" />');
$('.inner').wrapInner('<div class="new" />');
![Page 21: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/21.jpg)
DOM Insertion, Outside
• .after()
• .before()
• .insertAfter()
• .insertBefore()
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('.inner').after('<p>Test</p>');
![Page 22: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/22.jpg)
Removal, Replacement
• .detach()
• .empty()
• .remove()
• .unwrap()
• .replaceAll()
• .replaceWith()
![Page 23: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/23.jpg)
Copying
• .clone()<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
$('.hello').clone().appendTo('.goodbye');
![Page 24: jQuery - 4 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479d9ab5806b58a048b4724/html5/thumbnails/24.jpg)
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail: