jQuery - 3 | WebMaster & WebDesigner
0 likes395 views
Il documento descrive vari filtri e metodi di jQuery per selezionare e manipolare elementi del DOM. Vengono presentate funzioni per filtrare elementi in base a indici, figli, contenuti e classi, nonché metodi per aggiungere, rimuovere e verificare classi. Inoltre, si evidenziano metodi per gestire gli attributi e le dimensioni degli elementi.
![JQuery [3]
Matteo Magni](https://image.slidesharecdn.com/03jquery-121025134900-phpapp01/85/jQuery-3-WebMaster-WebDesigner-1-320.jpg)
![Filtri per Indici
• :eq(index)
ritorno l'elemento corrispondente l'indice 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](https://image.slidesharecdn.com/03jquery-121025134900-phpapp01/85/jQuery-3-WebMaster-WebDesigner-3-320.jpg)
![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...)](https://image.slidesharecdn.com/03jquery-121025134900-phpapp01/85/jQuery-3-WebMaster-WebDesigner-4-320.jpg)
jQuery - 3 | WebMaster & WebDesigner
- 1. JQuery [3] Matteo Magni
- 2. :filter Jquery mette a disposizione dei filtri che permettono, combinati con i selettori, di raffinare ancora le selezioni.
- 3. Filtri per Indici • :eq(index) ritorno l'elemento corrispondente l'indice 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. 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. 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. Filtri per Form • :button • :input • :checkbox • :password • :checked • :radio • :disabled • :reset • :enabled • :selected • :focus • :submit • :file • :text • :image
- 7. Visibilità - not • :hidden • :not(selector) • :visible tutti gli elementi che non soddisfano il selettore
- 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. Classi • E se volessi utilizzare delle classi CSS che ho già definito nei miei file invece che modificare direttamente tutte le proprietà?
- 10. addClass Il metodo permette di aggiungere una classe <body> <p>Hello</p> <p>and</p> <p>Goodbye</p> <script> $("p:last").addClass("selected"); </script>
- 11. toggleClass Il metodo permette di rimuovere o aggiungere tipo interruttore una classe o una serie <div class="tumble">Some text.</div> $('div.tumble').toggleClass('bounce') <div class="tumble bounce">Some text.</div>
- 12. removeClass Il 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. hasClass Il metodo ritorna true o false se l'elemento ha una determinata classe <div id="mydiv" class="foo bar"></div> $('#mydiv').hasClass('bar') //true $('#mydiv').hasClass('qoeix') //false
- 14. Attributi • .attr( attributeName , value ) ritorna l'attributo o se passiamo il value lo setta. • .removeAttr() input.removeAttr("title")
- 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. Domande? Slide: http://www.slideshare.net/ilbonzo Code: https://github.com/ilbonzo/Cypher mail: matteo@magni.me