JQuery [2] Matteo Magni
Selettori GerarchiciSono selettori chepermettono diricercare gli elementiall’interno di altrielementi invece cheall’intern...
Selettori$("#pippo a"); //tutti i link allinterno dellelemento 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...
ancestor descendantSeleziona tutti glielementi che sonodiscendenti di unantenato dato.
ancestor descendant  <form>    <label>Child:</label><input name="name" />    <fieldset>      <label>Grandchild:</label><in...
prev + nextConsente diselezionare tutti glielementi di tipo"next"che sono successiviallelemento di tipo"prev".
prev + next<form>    <label>Name:</label>    <input name="name" />    <fieldset>      <label>Newsletter:</label>      <inp...
prev ~ siblingsSeleziona tutti glielementi di tipo“siblings” fratelli (cioèallo stesso livello)che seguonolelemento di tip...
prev ~ siblings <div>div (doesnt match since before #prev)</div>  <span id="prev">span#prev</span>  <div>div sibling</div>...
Selettore Multiplo          Seleziona tutti gli          elementi          combinando i          selettori inseriti       ...
Selettore Multiplo<body>  <div>div</div>  <p class="myClass">p class="myClass"</p>  <p class="notMyClass">p class="notMyCl...
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 = ...
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   le...
.css()//restituisce il colore esadecimale del primo elemento link$("a").css("color"); //imposta il colore del testo dei li...
Metodo .css()La sintassi quindi richiede di passare dueparametri.• propertyName: è il nome della proprietà  che si può esp...
Rimuovere proprietà?• Se devo togliere una proprietà che cè già  senza modificarla posso settarla con una  stringa vuota.c...
Domande?               Slide:http://www.slideshare.net/ilbonzo               Code:https://github.com/ilbonzo/Cypher       ...
Upcoming SlideShare
Loading in...5
×

jQuery - 2 | WebMaster & WebDesigner

202

Published on

Seconda lezione del modulo jQuery del corso per WebMaster & WebDesigner

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
202
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
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://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×