jQuery - 3 | WebMaster & WebDesigner

349 views
336 views

Published on

Terza lezione del modulo jQuery del corso per 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
349
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery - 3 | WebMaster & WebDesigner

  1. 1. JQuery [3] Matteo Magni
  2. 2. :filter Jquery mette a disposizione dei filtri che permettono, combinati con i selettori, di raffinare ancora le selezioni.
  3. 3. Filtri per Indici• :eq(index) ritorno lelemento corrispondente lindice specificato• :even ritorna gli indici pari ([0]-primo,[2] terzo...)• :first primo 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-child ritorna elemento primo figlio• :last-child ritorna elemento ultimo figlio• :nth-child(index/even/odd) tutti i figli (odd, even, index...)• :only-child tutti gli elementi figli unici
  6. 6. Filtri per Form• :button • :input• :checkbox • :password• :checked • :radio• :disabled • :reset• :enabled • :selected• :focus • :submit• :file • :text• :image
  7. 7. Visibilità - not• :hidden • :not(selector)• :visible tutti gli elementi che non soddisfano il selettore
  8. 8. Filtri per Contenuto• :contains(text) tutti gli elementi che possiedono uno specifico text• :empty tutti gli elementi che non hanno figli• :has(selector) tutti gli elementi che contengono un elemento che soddisfa il selettore• :parent tutti gli elementi padre degli altri elementi inclusi i nodi di testo (inverso di empty
  9. 9. Classi• E se volessi utilizzare delle classi CSS che ho già definito nei miei file invece che modificare direttamente tutte le 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 lo setta.• .removeAttr()  input.removeAttr("title")
  15. 15. Dimesioni• .height()• .width()• .innerHeight() Get the current computed height for the first element in the set of matched elements, including padding but not border.• .innerWidth()• .outerHeight()• .outerWidth() Get the current computed width for the first element in the set of matched elements, including padding and border
  16. 16. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me

×