jQuery - 3 | WebMaster & WebDesigner

347 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
347
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery - 3 | WebMaster & WebDesigner

  1. 1. JQuery [3]Matteo Magni
  2. 2. :filterJquery mette adisposizione dei filtriche permettono,combinati con iselettori, di raffinareancora le selezioni.
  3. 3. Filtri per Indici• :eq(index)ritorno lelemento corrispondente lindice specificato• :evenritorna gli indici pari ([0]-primo,[2] terzo...)• :firstprimo elemento come eq(0)• :gt(index)tutti gli elementi con indice maggiore di index
  4. 4. Filtri per Indici• :last()ritorna ultimo elemento• :lt(index)tutti gli elementi con indice minore di index• :odd()tutti gli elementi con indice dispari ([1]->secondo...)
  5. 5. Filtri per figlio• :first-childritorna elemento primo figlio• :last-childritorna elemento ultimo figlio• :nth-child(index/even/odd)tutti i figli (odd, even, index...)• :only-childtutti gli elementi figli unici
  6. 6. Filtri per Form• :button• :checkbox• :checked• :disabled• :enabled• :focus• :file• :image• :input• :password• :radio• :reset• :selected• :submit• :text
  7. 7. Visibilità - not• :hidden• :visible• :not(selector)tutti gli elementiche nonsoddisfano ilselettore
  8. 8. Filtri per Contenuto• :contains(text)tutti gli elementi che possiedono uno specifico text• :emptytutti gli elementi che non hanno figli• :has(selector)tutti gli elementi che contengono un elemento chesoddisfa il selettore• :parenttutti gli elementi padre degli altri elementi inclusi i nodidi testo (inverso di empty
  9. 9. Classi• E se volessiutilizzare delleclassi CSS che hogià definito nei mieifile invece chemodificaredirettamente tuttele proprietà?
  10. 10. addClassIl metodo permette di aggiungere una classe<body>    <p>Hello</p>  <p>and</p>  <p>Goodbye</p>  <script>  $("p:last").addClass("selected");  </script>
  11. 11. toggleClassIl metodo permette di rimuovere oaggiungere tipo interruttore una classe ouna serie<div class="tumble">Some text.</div>$(div.tumble).toggleClass(bounce)<div class="tumble bounce">Some text.</div>
  12. 12. removeClassIl metodo permette di rimuovere una classe<p class="blue under">Hello</p>  <p class="blue under highlight">and</p>  <p class="blue under">then</p>  <p class="blue under">Goodbye</p><script>$("p:even").removeClass("blue");</script>
  13. 13. hasClassIl metodo ritorna true o false se lelementoha una determinata classe<div id="mydiv" class="foo bar"></div>$(#mydiv).hasClass(bar) //true$(#mydiv).hasClass(qoeix) //false
  14. 14. Attributi• .attr( attributeName , value )ritorna lattributo o se passiamo il value losetta.• .removeAttr() input.removeAttr("title")
  15. 15. Dimesioni• .height()• .width()• .innerHeight()Get the current computed height for the first element in the set ofmatched elements, including padding but not border.• .innerWidth()• .outerHeight()• .outerWidth()Get the current computed width for the first element in the set ofmatched elements, including padding and border
  16. 16. Domande?Slide:http://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:matteo@magni.me

×