jQuery - 2 | WebMaster & WebDesigner

306 views
276 views

Published on

Seconda lezione del modulo Jquery per il corso di WebMaster & WebDesigner

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
306
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery - 2 | WebMaster & WebDesigner

  1. 1. JQuery [2] Matteo Magni
  2. 2. Selettori GerarchiciSono selettori chepermettono diricercare gli elementiall’interno di altrielementi invece cheall’interno di tutto ilDOM.
  3. 3. Selettori$("#pippo a"); //tutti i link allinterno dellelemento con id "pippo"
  4. 4. Parent > Child• Selettore padre figlio.parent > child
  5. 5. 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>
  6. 6. ancestor descendantSeleziona tutti glielementi che sonodiscendenti di unantenato dato.
  7. 7. 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>
  8. 8. prev + nextConsente diselezionare tutti glielementi di tipo"next"che sono successiviallelemento di tipo"prev".
  9. 9. 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>
  10. 10. prev ~ siblingsSeleziona tutti glielementi di tipo“siblings” fratelli (cioèallo stesso livello)che seguonolelemento di tipo“prev”
  11. 11. prev ~ siblings <div>div (doesnt 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>
  12. 12. Selettore Multiplo Seleziona tutti gli elementi combinando i selettori inseriti separati con la virgola.
  13. 13. 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>
  14. 14. Selettore universale (*) Seleziona tutti gli elementi del DOM
  15. 15. 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>
  16. 16. Siamo Grafici?Come gestiamo lo stile di un elemento?
  17. 17. .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.
  18. 18. .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});
  19. 19. Metodo .css()La sintassi quindi richiede di passare dueparametri.• 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
  20. 20. Rimuovere proprietà?• Se devo togliere una proprietà che cè già senza modificarla posso settarla con una stringa vuota.css(padding,)
  21. 21. Domande? Slide: http://cypher.informazione.me/ Code:https://github.com/inFormazione/Cypher/ mail: matteo@magni.me

×