jQuery - 2 | WebMaster & WebDesigner
Upcoming SlideShare
Loading in...5
×
 

jQuery - 2 | WebMaster & WebDesigner

on

  • 263 views

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

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

Statistics

Views

Total Views
263
Views on SlideShare
252
Embed Views
11

Actions

Likes
0
Downloads
6
Comments
0

1 Embed 11

http://cypher.informazione.me 11

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery - 2 | WebMaster & WebDesigner jQuery - 2 | WebMaster & WebDesigner Presentation Transcript

  • JQuery [2] Matteo Magni
  • Selettori GerarchiciSono selettori chepermettono diricercare gli elementiall’interno di altrielementi invece cheall’interno di tutto ilDOM.
  • 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><li>Nested item 3</li></ul>       </li>    <li>Item 3</li></ul><script>alert($("ul.topnav > li").css("border", "3px”)) ;</script>
  • ancestor descendantSeleziona tutti glielementi che sonodiscendenti di unantenato 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 + 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>      <input name="newsletter" />    </fieldset>  </form>  <input name="none" /><script>$("label + input").css("color", "blue”).val("Labeled!")</script>
  • prev ~ siblingsSeleziona tutti glielementi di tipo“siblings” fratelli (cioèallo stesso livello)che seguonolelemento di tipo“prev”
  • 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>
  • 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 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
  • 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: matteo@magni.me