jquery - 2 | webmaster & webdesigner

21
JQuery [2] Matteo Magni

Upload: matteo-magni

Post on 27-May-2015

200 views

Category:

Technology


1 download

DESCRIPTION

Seconda lezione del modulo jQuery del corso per WebMaster & WebDesigner

TRANSCRIPT

Page 1: jQuery - 2 | WebMaster & WebDesigner

JQuery [2]Matteo Magni

Page 2: 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.

Page 3: jQuery - 2 | WebMaster & WebDesigner

Selettori

$("#pippo a"); 

//tutti i link all'interno dell'elemento con id "pippo"

Page 4: jQuery - 2 | WebMaster & WebDesigner

Parent > Child

• Selettore padre figlio.

parent > child

Page 5: jQuery - 2 | WebMaster & WebDesigner

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>

Page 6: jQuery - 2 | WebMaster & WebDesigner

ancestor descendant

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

Page 7: jQuery - 2 | WebMaster & WebDesigner

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>

Page 8: jQuery - 2 | WebMaster & WebDesigner

prev + next

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

Page 9: jQuery - 2 | WebMaster & WebDesigner

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>

Page 10: jQuery - 2 | WebMaster & WebDesigner

prev ~ siblings

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

Page 11: jQuery - 2 | WebMaster & WebDesigner

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>

Page 12: jQuery - 2 | WebMaster & WebDesigner

Selettore Multiplo

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

Page 13: jQuery - 2 | WebMaster & WebDesigner

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>

Page 14: jQuery - 2 | WebMaster & WebDesigner

Selettore universale ('*')

Seleziona tutti gli elementi del DOM

Page 15: jQuery - 2 | WebMaster & WebDesigner

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>

Page 16: jQuery - 2 | WebMaster & WebDesigner

Siamo Grafici?

Come gestiamo lo stile di un elemento?

Page 17: jQuery - 2 | WebMaster & WebDesigner

.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.

Page 18: jQuery - 2 | WebMaster & WebDesigner

.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

});

Page 19: jQuery - 2 | WebMaster & WebDesigner

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

Page 20: jQuery - 2 | WebMaster & WebDesigner

Rimuovere proprietà?

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

.css('padding','')

Page 21: jQuery - 2 | WebMaster & WebDesigner

Domande?

Slide:

http://www.slideshare.net/ilbonzo

Code:

https://github.com/ilbonzo/Cypher

mail:

[email protected]