jQuery - 2 | WebMaster & WebDesigner
-
Upload
matteo-magni -
Category
Documents
-
view
305 -
download
1
description
Transcript of jQuery - 2 | WebMaster & WebDesigner
JQuery [2]Matteo Magni
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://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail: