jQuery - 2 | WebMaster & WebDesigner

Selettori Gerarchici
Sono selettori che
permettono di
ricercare gli elementi
all’interno di altri
elementi invece che
all’interno di tutto il
DOM.

Selettori
$("#pippo a");
//tutti i link all'interno dell'elemento con
id "pippo"

Parent > Child
• Selettore padre
figlio.
parent > child

Parent > child
<ul class="topnav">
    <li>Item 1</li>
    <li>Item 2
        <ul><li>Nested item 1</li><li>Nested item
2</li><li>Nested item 3</li></ul>
       </li>
    <li>Item 3</li>
</ul>
<script>alert($("ul.topnav > li").css("border",
"3px”)) ;</script>

ancestor descendant

Seleziona tutti gli
elementi che sono
discendenti di un
antenato dato.

ancestor descendant
  <form>
    <label>Child:</label><input name="name" />
    <fieldset>
      <label>Grandchild:</label><input
name="newsletter" />
    </fieldset>
  </form>
  Sibling to form: <input name="none" />
<script>$("form input").css("border", "2px dotted
blue");</script>

prev + next
Consente di
selezionare tutti gli
elementi di tipo"next"
che sono successivi
all'elemento di tipo
"prev".

prev + next
<form>
    <label>Name:</label>
    <input name="name" />
    <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
    </fieldset>
  </form>
  <input name="none" />
<script>$("label + input").css("color",
"blue”).val("Labeled!")</script>

prev ~ siblings
Seleziona tutti gli
elementi di tipo
“siblings” fratelli (cioè
allo stesso livello)
che seguono
l'elemento di tipo
“prev”

prev ~ siblings

<div>div (doesn't match since before #prev)</div>
  <span id="prev">span#prev</span>
  <div>div sibling</div>
  <div>div sibling <div id="small">div
niece</div></div>
  <span>span sibling (not div)</span>
  <div>div sibling</div>
<script>$("#prev ~ div").css("border", "3px groove
blue");</script>

Selettore Multiplo
Seleziona tutti gli
elementi
combinando i
selettori inseriti
separati con la
virgola.

Selettore Multiplo

<body>
  <div>div</div>

  <p class="myClass">p class="myClass"</p>
  <p class="notMyClass">p class="notMyClass"</p>
  <span>span</span>
<script>$("div,span,p.myClass").css("border","3px
solid red");</script>

Selettore universale ('*')
Seleziona tutti gli
elementi del DOM

Selettore Universale

<body>
  <div>DIV</div>
  <span>SPAN</span>
  <p>P <button>Button</button></p>
<script>var elementCount = $("*").css("border","3px
solid red").length;
alert('elementCount');</script>
</body>

Siamo Grafici?

Come gestiamo lo stile di un elemento?

.css()
jQuery ha come
metodo principale per
modificare i css il
metodo css().
Tale metodo
permette sia di
leggere che di settare
le proprietà css.

.css()
//restituisce il colore esadecimale del
primo elemento link
$("a").css("color");
//imposta il colore del testo dei link
$("a").css("color","#FF0000");
$("a").css({
"color" : "#FF0000", //imposta il colore
"display" : "block" // imposta la
visualizzazione
});

Metodo .css()
La sintassi quindi richiede di passare due
parametri.
• propertyName: è il nome della proprietà
che si può esprimere sia come Css (color,
border-color) che come DOM
(borderColor...)
• value: valore da associare alla proprietà.
Si passa solo in caso di set

Rimuovere proprietà?
• Se devo togliere una proprietà che c'è già
senza modificarla posso settarla con una
stringa vuota

.css('padding','')

Domande?

Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me

jQuery - 2 | WebMaster & WebDesigner

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to jQuery - 2 | WebMaster & WebDesigner

Similar to jQuery - 2 | WebMaster & WebDesigner (20)

More from Matteo Magni

More from Matteo Magni (20)

jQuery - 2 | WebMaster & WebDesigner