jQuery - 3 | WebMaster & WebDesigner
16
JQuery [3] Matteo Magni
-
Upload
matteo-magni -
Category
Technology
-
view
312 -
download
1
description
Terza lezione del modulo Jquery per il corso di WebMaster & WebDesigner
Transcript of jQuery - 3 | WebMaster & WebDesigner
JQuery [3]Matteo Magni
:filter
Jquery mette a disposizione dei filtri che permettono, combinati con i selettori, di raffinare ancora le selezioni.
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
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...)
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
Filtri per Form
• :button• :checkbox• :checked• :disabled• :enabled• :focus• :file• :image
• :input
• :password
• :radio
• :reset
• :selected
• :submit
• :text
Visibilità - not
• :hidden
• :visible
• :not(selector)
tutti gli elementi che non soddisfano il selettore
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
Classi
• E se volessi utilizzare delle classi CSS che ho già definito nei miei file invece che modificare direttamente tutte le proprietà?
addClass
Il metodo permette di aggiungere una classe<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$("p:last").addClass("selected");
</script>
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>
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>
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
Attributi
• .attr( attributeName , value )
ritorna l'attributo o se passiamo il value lo setta.
• .removeAttr()
input.removeAttr("title")
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
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail:
