• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery - 4 | WebMaster & WebDesigner
 

jQuery - 4 | WebMaster & WebDesigner

on

  • 356 views

Quarta lezione del modulo Jquery per il corso di WebMaster & WebDesigner

Quarta lezione del modulo Jquery per il corso di WebMaster & WebDesigner

Statistics

Views

Total Views
356
Views on SlideShare
356
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

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 edallutente.I metodi hanno una nomenclaturamolto 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 tipola 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()• .dblclick()• .focusin()• .focusout()• .hover()• .mousedown()• .mouseenter()• .mouseleave()• .mousemove()• .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 sonostati sostituiti 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• .eq()• .filter()• .first()• .has()• .is()• .last()• .map()• .not()• .slice()• .children()• .closest()• .find()• .next()• .nextAll()• .nextUntil()• .parent()• .parents()• .parentsUntil()• .prev()• .prevAll()• .prevUntil()• .siblings()
    • Manipolare il DOMAl fine diraggiungere i nostriobbiettivi spessoserve intervenire sulDOM, andando adaggiungere,rimuovere omodificare elementi.
    • DOM Insertion, Inside.append()Inserisce ilcontenuto passatocome parametroalla fine deglielementi passaticome 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 ognielementoindividuato nellaselezione a tuttigli elementipassati comeparametro.<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