jQuery - 3 | WebMaster & WebDesigner

: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 • :input
• :checkbox • :password
• :checked • :radio
• :disabled • :reset
• :enabled • :selected
• :focus • :submit
• :file • :text
• :image

Visibilità - not
• :hidden • :not(selector)
• :visible 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://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me

jQuery - 3 | WebMaster & WebDesigner

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (12)

Mehr von Matteo Magni

Mehr von Matteo Magni (20)

jQuery - 3 | WebMaster & WebDesigner