jQuery - 4 | WebMaster & WebDesigner
Upcoming SlideShare
Loading in...5
×
 

jQuery - 4 | WebMaster & WebDesigner

on

  • 611 views

Quarta lezione del modulo jQuery del corso per WebMaster & WebDesigner

Quarta lezione del modulo jQuery del corso per WebMaster & WebDesigner

Statistics

Views

Total Views
611
Views on SlideShare
609
Embed Views
2

Actions

Likes
0
Downloads
11
Comments
0

1 Embed 2

http://blog.ilbonzo.org 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery - 4 | WebMaster & WebDesigner jQuery - 4 | WebMaster & WebDesigner Presentation Transcript

  • JQuery [4] Matteo Magni
  • EventijQuery ovviamente cimette a disposizioneuna serie di semplicimetodi per gestire glieventi generati dalbrowser e I metodi hanno una nomenclatura molto simile agli eventi che giàdallutente. 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 Loadingil codice viene eseguito quando il DOM è pronto ma prima che le immaginied 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() • .mousedown()• .dblclick() • .mouseenter()• .focusin() • .mouseleave()• .focusout() • .mousemove()• .hover() • .mouseout() • .mouseover() • .mouseup()
  • bind()Tutti i metodi semplificati per gestire glieventi utilizzano il metodo bind() al quale vapassato il nome dellevento.$(#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 glieventi 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 statisostituiti dal metodo on e off.$("#pippo").on("click", function(event){   alert($(this).text());});$("#pippo").off()$("#pippo").off(click,)
  • Traversing
  • TraversingAbbiamo 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 • .children()• .eq() • .closest() .find()• .filter() • • .next()• .first() .nextAll() •• .has() • .nextUntil() • .parent()• .is() • .parents()• .last() • .parentsUntil()• .map() • .prev() • .prevAll()• .not() • .prevUntil()• .slice() • .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() <h2>Greetings</h2> <div class="container">Inserisce il   <div class="inner">Hello</div>contenuto passato   <div class="inner">Goodbye</div> </div>come parametroalla fine degli $(.inner).append(<p>Test</p>);elementi passaticome insieme
  • DOM Insertion, Inside [2].appendTo() <h2>Greetings</h2> <div class="container">Inserisce ogni   <div class="inner">Hello</div>elemento   <div  class="inner">Goodbye</div>individuato nella </div>selezione a tuttigli elementi $(<p>Test</p>).appendTo(.inner);passati comeparametro.
  • DOM Insertion, Inside [3]<h2>Greetings</h2><div class="container">  <div class="inner">Hello</div> • .prepend()  <div class="inner">Goodbye</div></div> • .prependTo()$(.inner).prepend(<p>Test</p>);$(<p>Test</p>).prependTo(.inner);
  • DOM Insertion, Around• .wrap() <div class="container">   <div class="inner">Hello</div>• .wrapAll()   <div class="inner">Goodbye</div> </div>• .wrapInner() $(.inner).wrap(<div class="new"  />); $(.inner).wrapAll(<div  class="new" />); $(.inner).wrapInner(<div class="new"  />);
  • DOM Insertion, Outside• .after() <div class="container">   <h2>Greetings</h2>• .before()   <div class="inner">Hello</div>• .insertAfter()   <div  class="inner">Goodbye</div>• .insertBefore() </div> $(.inner).after(<p>Test</p>);
  • Removal, Replacement• .detach() • .replaceAll()• .empty() • .replaceWith()• .remove()• .unwrap()
  • Copying• .clone()<div class="container">  <div class="hello">Hello</div>  <div class="goodbye">Goodbye</div></div>$(.hello).clone().appendTo(.goodbye);
  • Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me