SlideShare a Scribd company logo
1 of 24
Download to read offline
JQuery [4]
Matteo Magni
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.
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.
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');});
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");
 });
Form Events
• .blur()
• .change()
• .focus()
• .select()
• .submit()
Keyboard Events
• .keydown()
• .keypress()
• .keyup()
Mouse Events
• .click()
• .dblclick()
• .focusin()
• .focusout()
• .hover()
• .mousedown()
• .mouseenter()
• .mouseleave()
• .mousemove()
• .mouseout()
• .mouseover()
• .mouseup()
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."');
});
bind() [2]
Il vantaggio è che possiamo passare più
eventi
$('#foo').bind('click onmouseover', 
function() {
  alert('User clicked or mouseover on 
"foo."');
});
unbind()
Il metodo unbind permette di rimuovere gli
eventi precedentemente collegati.
//rimuovo gli eventi
$('#foo').unbind();
//specifico il tipo di evento
$('#foo').unbind('click');
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',)
Traversing
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').
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()
Manipolare il DOM
Al fine di
raggiungere i nostri
obbiettivi spesso
serve intervenire sul
DOM, andando ad
aggiungere,
rimuovere o
modificare elementi.
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>');
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');
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()
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" 
/>');
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>');
Removal, Replacement
• .detach()
• .empty()
• .remove()
• .unwrap()
• .replaceAll()
• .replaceWith()
Copying
• .clone()
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>
$('.hello').clone().appendTo('.goodbye');
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail:
matteo@magni.me

More Related Content

Viewers also liked

Javascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerJavascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 5 | WebMaster & WebDesigner
Javascript - 5 | WebMaster & WebDesignerJavascript - 5 | WebMaster & WebDesigner
Javascript - 5 | WebMaster & WebDesignerMatteo Magni
 
ModulAngular
ModulAngularModulAngular
ModulAngularextrategy
 
AngularJS: server communication
AngularJS: server communicationAngularJS: server communication
AngularJS: server communicationVittorio Conte
 
jQuery - 3 | WebMaster & WebDesigner
jQuery - 3 | WebMaster & WebDesignerjQuery - 3 | WebMaster & WebDesigner
jQuery - 3 | WebMaster & WebDesignerMatteo Magni
 
Angular js desenvolvimento de frontend zen - python nordeste
Angular js   desenvolvimento de frontend zen - python nordesteAngular js   desenvolvimento de frontend zen - python nordeste
Angular js desenvolvimento de frontend zen - python nordesteRenzo Nuccitelli
 
Introduzione a jQuery
Introduzione a jQueryIntroduzione a jQuery
Introduzione a jQuerySandro Marcon
 
jQuery e i suoi plugin
jQuery e i suoi pluginjQuery e i suoi plugin
jQuery e i suoi pluginPasquale Puzio
 
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascriptcorso web developer - Introduzione a Javascript
corso web developer - Introduzione a JavascriptRiccardo Piccioni
 
AngularJS: accessibility
AngularJS: accessibilityAngularJS: accessibility
AngularJS: accessibilityVittorio Conte
 
Introduzione a JavaScript e jQuery (2/2)
Introduzione a JavaScript e jQuery (2/2)Introduzione a JavaScript e jQuery (2/2)
Introduzione a JavaScript e jQuery (2/2)Giuseppe Vizzari
 
Introduzione a JavaScript e jQuery (1/2)
Introduzione a JavaScript e jQuery (1/2)Introduzione a JavaScript e jQuery (1/2)
Introduzione a JavaScript e jQuery (1/2)Giuseppe Vizzari
 

Viewers also liked (20)

Javascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerJavascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesigner
 
Javascript - 5 | WebMaster & WebDesigner
Javascript - 5 | WebMaster & WebDesignerJavascript - 5 | WebMaster & WebDesigner
Javascript - 5 | WebMaster & WebDesigner
 
Flash vs jQuery
Flash vs jQueryFlash vs jQuery
Flash vs jQuery
 
Jquery mobile per App
Jquery mobile per AppJquery mobile per App
Jquery mobile per App
 
ModulAngular
ModulAngularModulAngular
ModulAngular
 
AngularJS: server communication
AngularJS: server communicationAngularJS: server communication
AngularJS: server communication
 
Angular js: routing
Angular js: routingAngular js: routing
Angular js: routing
 
jQuery - 3 | WebMaster & WebDesigner
jQuery - 3 | WebMaster & WebDesignerjQuery - 3 | WebMaster & WebDesigner
jQuery - 3 | WebMaster & WebDesigner
 
Workshop angular
Workshop angularWorkshop angular
Workshop angular
 
AngularJS-Intro
AngularJS-IntroAngularJS-Intro
AngularJS-Intro
 
Angularjs
AngularjsAngularjs
Angularjs
 
Angular js desenvolvimento de frontend zen - python nordeste
Angular js   desenvolvimento de frontend zen - python nordesteAngular js   desenvolvimento de frontend zen - python nordeste
Angular js desenvolvimento de frontend zen - python nordeste
 
Introduzione a jQuery
Introduzione a jQueryIntroduzione a jQuery
Introduzione a jQuery
 
jQuery e i suoi plugin
jQuery e i suoi pluginjQuery e i suoi plugin
jQuery e i suoi plugin
 
jQuery
jQueryjQuery
jQuery
 
Introduzione a jQuery
Introduzione a jQueryIntroduzione a jQuery
Introduzione a jQuery
 
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascriptcorso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascript
 
AngularJS: accessibility
AngularJS: accessibilityAngularJS: accessibility
AngularJS: accessibility
 
Introduzione a JavaScript e jQuery (2/2)
Introduzione a JavaScript e jQuery (2/2)Introduzione a JavaScript e jQuery (2/2)
Introduzione a JavaScript e jQuery (2/2)
 
Introduzione a JavaScript e jQuery (1/2)
Introduzione a JavaScript e jQuery (1/2)Introduzione a JavaScript e jQuery (1/2)
Introduzione a JavaScript e jQuery (1/2)
 

Similar to jQuery - 4 | WebMaster & WebDesigner

Luca Masini: Introduzione a GWT 2.0
Luca Masini: Introduzione a GWT 2.0Luca Masini: Introduzione a GWT 2.0
Luca Masini: Introduzione a GWT 2.0firenze-gtug
 
jQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesignerjQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesignerMatteo Magni
 
jQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesignerjQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesignerMatteo Magni
 
E suap - tecnologie client
E suap - tecnologie client E suap - tecnologie client
E suap - tecnologie client Sabino Labarile
 

Similar to jQuery - 4 | WebMaster & WebDesigner (6)

Luca Masini: Introduzione a GWT 2.0
Luca Masini: Introduzione a GWT 2.0Luca Masini: Introduzione a GWT 2.0
Luca Masini: Introduzione a GWT 2.0
 
jQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesignerjQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesigner
 
jQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesignerjQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesigner
 
AngularJS 2.0
AngularJS 2.0 AngularJS 2.0
AngularJS 2.0
 
E suap - tecnologie client
E suap - tecnologie client E suap - tecnologie client
E suap - tecnologie client
 
Django
DjangoDjango
Django
 

More from Matteo Magni

Introduzione DevOps con Ansible
Introduzione DevOps con AnsibleIntroduzione DevOps con Ansible
Introduzione DevOps con AnsibleMatteo Magni
 
HTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesignerHTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 4 | WebMaster & WebDesigner
HTML5 e Css3 - 4 | WebMaster & WebDesignerHTML5 e Css3 - 4 | WebMaster & WebDesigner
HTML5 e Css3 - 4 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesignerHTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 2 | WebMaster & WebDesigner
HTML5 e Css3 - 2 | WebMaster & WebDesignerHTML5 e Css3 - 2 | WebMaster & WebDesigner
HTML5 e Css3 - 2 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner Matteo Magni
 
Javascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesignerJavascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesignerJavascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesignerMatteo Magni
 
Web Usability - 3 | WebMaster & WebDesigner
 Web Usability - 3 | WebMaster & WebDesigner Web Usability - 3 | WebMaster & WebDesigner
Web Usability - 3 | WebMaster & WebDesignerMatteo Magni
 
Web Usability - 2 | WebMaster & WebDesigner
Web Usability - 2 | WebMaster & WebDesignerWeb Usability - 2 | WebMaster & WebDesigner
Web Usability - 2 | WebMaster & WebDesignerMatteo Magni
 
Web Usability - 1 | WebMaster & WebDesigner
Web Usability - 1 | WebMaster & WebDesignerWeb Usability - 1 | WebMaster & WebDesigner
Web Usability - 1 | WebMaster & WebDesignerMatteo Magni
 
Seo e Web Marketing - 5 | WebMaster & WebDesigner
Seo e Web Marketing - 5 | WebMaster & WebDesignerSeo e Web Marketing - 5 | WebMaster & WebDesigner
Seo e Web Marketing - 5 | WebMaster & WebDesignerMatteo Magni
 
Seo e Web Marketing - 4 | WebMaster & WebDesigner
 Seo e Web Marketing - 4 | WebMaster & WebDesigner Seo e Web Marketing - 4 | WebMaster & WebDesigner
Seo e Web Marketing - 4 | WebMaster & WebDesignerMatteo Magni
 
Seo e Web Marketing - 3 | WebMaster & WebDesigner
Seo e Web Marketing - 3 | WebMaster & WebDesignerSeo e Web Marketing - 3 | WebMaster & WebDesigner
Seo e Web Marketing - 3 | WebMaster & WebDesignerMatteo Magni
 
Seo e Web Marketing - 2 | WebMaster & WebDesigner
Seo e Web Marketing - 2 | WebMaster & WebDesignerSeo e Web Marketing - 2 | WebMaster & WebDesigner
Seo e Web Marketing - 2 | WebMaster & WebDesignerMatteo Magni
 
Seo e Web Marketing - 1 | WebMaster & WebDesigner
Seo e Web Marketing - 1 | WebMaster & WebDesignerSeo e Web Marketing - 1 | WebMaster & WebDesigner
Seo e Web Marketing - 1 | WebMaster & WebDesignerMatteo Magni
 
Html e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerHtml e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerMatteo Magni
 
Html e Css - 2 | WebMaster & WebDesigner
 Html e Css - 2 | WebMaster & WebDesigner Html e Css - 2 | WebMaster & WebDesigner
Html e Css - 2 | WebMaster & WebDesignerMatteo Magni
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Matteo Magni
 

More from Matteo Magni (20)

Introduzione DevOps con Ansible
Introduzione DevOps con AnsibleIntroduzione DevOps con Ansible
Introduzione DevOps con Ansible
 
HTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesignerHTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesigner
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesigner
 
HTML5 e Css3 - 4 | WebMaster & WebDesigner
HTML5 e Css3 - 4 | WebMaster & WebDesignerHTML5 e Css3 - 4 | WebMaster & WebDesigner
HTML5 e Css3 - 4 | WebMaster & WebDesigner
 
HTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesignerHTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesigner
 
HTML5 e Css3 - 2 | WebMaster & WebDesigner
HTML5 e Css3 - 2 | WebMaster & WebDesignerHTML5 e Css3 - 2 | WebMaster & WebDesigner
HTML5 e Css3 - 2 | WebMaster & WebDesigner
 
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner
 
Javascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesignerJavascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesigner
 
Javascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesignerJavascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesigner
 
Web Usability - 3 | WebMaster & WebDesigner
 Web Usability - 3 | WebMaster & WebDesigner Web Usability - 3 | WebMaster & WebDesigner
Web Usability - 3 | WebMaster & WebDesigner
 
Web Usability - 2 | WebMaster & WebDesigner
Web Usability - 2 | WebMaster & WebDesignerWeb Usability - 2 | WebMaster & WebDesigner
Web Usability - 2 | WebMaster & WebDesigner
 
Web Usability - 1 | WebMaster & WebDesigner
Web Usability - 1 | WebMaster & WebDesignerWeb Usability - 1 | WebMaster & WebDesigner
Web Usability - 1 | WebMaster & WebDesigner
 
Seo e Web Marketing - 5 | WebMaster & WebDesigner
Seo e Web Marketing - 5 | WebMaster & WebDesignerSeo e Web Marketing - 5 | WebMaster & WebDesigner
Seo e Web Marketing - 5 | WebMaster & WebDesigner
 
Seo e Web Marketing - 4 | WebMaster & WebDesigner
 Seo e Web Marketing - 4 | WebMaster & WebDesigner Seo e Web Marketing - 4 | WebMaster & WebDesigner
Seo e Web Marketing - 4 | WebMaster & WebDesigner
 
Seo e Web Marketing - 3 | WebMaster & WebDesigner
Seo e Web Marketing - 3 | WebMaster & WebDesignerSeo e Web Marketing - 3 | WebMaster & WebDesigner
Seo e Web Marketing - 3 | WebMaster & WebDesigner
 
Seo e Web Marketing - 2 | WebMaster & WebDesigner
Seo e Web Marketing - 2 | WebMaster & WebDesignerSeo e Web Marketing - 2 | WebMaster & WebDesigner
Seo e Web Marketing - 2 | WebMaster & WebDesigner
 
Seo e Web Marketing - 1 | WebMaster & WebDesigner
Seo e Web Marketing - 1 | WebMaster & WebDesignerSeo e Web Marketing - 1 | WebMaster & WebDesigner
Seo e Web Marketing - 1 | WebMaster & WebDesigner
 
Html e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerHtml e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesigner
 
Html e Css - 2 | WebMaster & WebDesigner
 Html e Css - 2 | WebMaster & WebDesigner Html e Css - 2 | WebMaster & WebDesigner
Html e Css - 2 | WebMaster & WebDesigner
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner
 

jQuery - 4 | WebMaster & WebDesigner