jQuery in 10 minuten

Wat is jQuery en wat kun je ermee?  7 mei 2009  Anne Jan Roeleveld 

Inhoud  • Wat is jQuery?  • Waarom jQuery?  • Installa?e  • Voorbeelden  – Verschillende func?es/methodes  – Live voorbeelden 

Wat is jQuery?  Bibliotheek  • Klein en snel  • Anima?es  • AJAX  • jQuery is gemaakt om JS code makkelijker te maken  • Vereenvoudigt interac?e tussen HTML en JavaScript  •

Voorbeeld  if (!document.ELEMENT_NODE) {  document._importNode = func?on(node, allChildren) {    switch (node.nodeType) {    document.ELEMENT_NODE = 1;      case document.ELEMENT_NODE:    document.ATTRIBUTE_NODE = 2;        var newNode = document.createElement(node »    document.TEXT_NODE = 3;  .nodeName);    document.CDATA_SECTION_NODE = 4;        /* does the node have any alributes to add? */    document.ENTITY_REFERENCE_NODE = 5;        if (node.alributes && node.alributes »  .length > 0)    document.ENTITY_NODE = 6;          for (var i = 0; il = node.alributes.length; »    document.PROCESSING_INSTRUCTION_NODE = 7;  i < il)    document.COMMENT_NODE = 8;            newNode.setAlribute(node.alributes »    document.DOCUMENT_NODE = 9;  .nodeName, node.getAlribute(node.alributes[i++] »    document.DOCUMENT_TYPE_NODE = 10;  .nodeName));        /* are we going aser children too, and does »    document.DOCUMENT_FRAGMENT_NODE = 11;  the node have any? */    document.NOTATION_NODE = 12;        if (allChildren && node.childNodes && »  }  node.childNodes.length > 0)          for (var i = 0; il = node.childNodes.length; »  i < il)            newNode.appendChild(document._importNode »  (node.childNodes[i++], allChildren));        return newNode;        break;      case document.TEXT_NODE:      case document.CDATA_SECTION_NODE:      case document.COMMENT_NODE:        return document.createTextNode(node.nodeValue);        break;    }  };  JavaScript 

Voorbeeld  $(\"#content\").load(\"page.html #content\");  jQuery 

Voorbeeld  $(\"#content\").load(\"page.html #content\");  (!)  jQuery 

Wat is jQuery?  • Selectors  • Traversing: DOM doorlopen  • Manipula?on: DOM veranderen  • Events  • Eﬀecten 

Waarom jQuery?  • Simpele code   • Grote community   • Plugins   • Boeken  • Support   • Tutorials   • Open free license   • Snelheid   • Lichtgewicht code 

Waarom een JavaScript bibliotheek?  • Schermt browserverschillen af  • Voorkomt geheugenlekken  • Geop?maliseerd  • Goed onderhouden door specialisten 

Waarom jQuery? 

Iedereen gebruikt het inmiddels  Google   • Amazon   • Digg   • Nezlix   • Dell   • HP   • Bank of America   • hlp://docs.jquery.com/Sites_Using_jQuery   •

Installa?e in 3 stappen  1. Download 

Installa?e in 3 stappen  1. Download  2. Plaats in je website 

Installa?e in 3 stappen  1. Download  2. Plaats in je website  3. Plaats code 

jQuery selector  • Zoek HTML elementen met de 'Selector'   • $(selector) ‐ gebruik de CSS selector   $(”#myId\")     $(\".myClass\")      $(\"table\") 

jQuery selector  • Zoek alle divs $(\"div\")   <html>    <body>       <div>jQuery</div>       <div>example</div>    </body>  </html> 

jQuery selector  • Zoek alle divs $(\"div\").addClass('foo');   <html>    <body>       <div class=\"foo\">jQuery</div>       <div class=\"foo\">example</div>    </body>  </html> 

Voorbeelden  • Zoek HTML elementen met de 'Selector'   • $(selector) ‐ gebruik de CSS selector   $(\"myId\")       $(\".myClass\")       $(\"table\")  $(\"#myId, .myClass, table\") 

jQuery selector  $(\"#content\")       zoek element met id content  •    • $(\"li:ﬁrst\")         zoek het eerste list item  •    • $(\"tr:odd\")        zoek alle oneven genummerde tabelregels  •    • $(\"a[target=_blank]\")   zoek alle links met target blank  • • $(\"form[id^=step]\")   zoek alle forms waarvan de id begint                   met step  Ga voor meer voorbeelden van ‘Selectors’ naar   h\"p://codylindley.com/jqueryselectors/  

jQuery .ready()  $(document).ready(func?on() { });  jQuery script pas ac?ef na het volledig laden van de website 

jQuery methodes  Bewegende elementen:   before(), aser(), appendTo(), append()   Alributen:   css(), alr(), html(), val(), addClass()   Eﬀecten:  show(), fadeOut(), toggle(), animate()   Opzoeken en volgorde:  ﬁnd(), is(), prevAll(), next(), hasClass()   Ajax:   get(), getJSON(), post(), ajax(), load() 

jQuery methodes  Verplaats paragraaf naar element met id \"foo\"   $(\"p\").appendTo(\"#foo\");   <html>    <body>       <div>jQuery         <p>moving</p>         <p>paragraphs</p>       </div>       <div id=\"foo\">         example       </div>    </body>  </html> 

jQuery methodes  Verplaats paragraaf naar element met id \"foo\"   $(\"p\").appendTo(\"#foo\");   <html>    <body>       <div>jQuery</div>       <div id=\"foo”>example         <p>moving</p>         <p>paragraphs</p>       </div>    </body>  </html> 

jQuery alributen  Voeg een zwarte rand toe   $(...).css(\"border\", \"1px solid black\");   Verander CSS styles   $(...).css({ \"background\": \"yellow\", \"height\": \"400px\" });   Verander alle links in google.com   $(\"a\").alr(\"href\", \"hlp://google.com\"); 

Voorbeelden  • hlp://www.annejanroeleveld.nl/jquery  

Handige links  hlp://www.jquery.com   • hlp://docs.jquery.com  • hlp://cli.gs/7D8rum (51 tutorials)  • hlp://cli.gs/zv82js (screencast)  • hlp://groups.google.com/group/jquery‐en (discussie)  • hlp://www.ajaxline.com/20‐best‐jquery‐tutorials‐march‐2009  • hlp://neluts.s3.amazonaws.com/196_jquery/index.htm   • hlp://visualjquery.com/    •

Boek 

Vragen?   Anne Jan Roeleveld  hlp://www.annejanroeleveld.nl  hlp://twiler.com/annejan88  

jQuery in 10 minuten

2 comments

Notes on slide 1

Favorites, Groups & Events