jQuery in 10 minuten
•
2 likes•624 views
Wat is jQuery, wat kun je ermee en waarom moet jij het gebruiken? Een korte presentatie voor mensen die nog geen kennis hebben van jQuery en het graag willen leren. Sommige slides zijn van marcgrabanski.com Credits gaan dus naar hem toe.
Recommended
More Related Content
What's hot
What's hot (18)
Viewers also liked
Viewers also liked (13)
jQuery in 10 minuten
- 1. Wat is jQuery en wat kun je ermee? 7 mei 2009 Anne Jan Roeleveld
- 2. Inhoud • Wat is jQuery? • Waarom jQuery? • Installa?e • Voorbeelden – Verschillende func?es/methodes – Live voorbeelden
- 3. 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 •
- 4. 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
- 7. Wat is jQuery? • Selectors • Traversing: DOM doorlopen • Manipula?on: DOM veranderen • Events • Effecten
- 8. Waarom jQuery? • Simpele code • Grote community • Plugins • Boeken • Support • Tutorials • Open free license • Snelheid • Lichtgewicht code
- 9. Waarom een JavaScript bibliotheek? • Schermt browserverschillen af • Voorkomt geheugenlekken • Geop?maliseerd • Goed onderhouden door specialisten
- 10. Waarom jQuery?
- 11. Iedereen gebruikt het inmiddels Google • Amazon • Digg • Nezlix • Dell • HP • Bank of America • hlp://docs.jquery.com/Sites_Using_jQuery •
- 15. jQuery selector • Zoek HTML elementen met de 'Selector' • $(selector) ‐ gebruik de CSS selector $(”#myIdquot;) $(quot;.myClassquot;) $(quot;tablequot;)
- 16. jQuery selector • Zoek alle divs $(quot;divquot;) <html> <body> <div>jQuery</div> <div>example</div> </body> </html>
- 17. jQuery selector • Zoek alle divs $(quot;divquot;).addClass('foo'); <html> <body> <div class=quot;fooquot;>jQuery</div> <div class=quot;fooquot;>example</div> </body> </html>
- 18. Voorbeelden • Zoek HTML elementen met de 'Selector' • $(selector) ‐ gebruik de CSS selector $(quot;myIdquot;) $(quot;.myClassquot;) $(quot;tablequot;) $(quot;#myId, .myClass, tablequot;)
- 19. jQuery selector $(quot;#contentquot;) zoek element met id content • • $(quot;li:firstquot;) zoek het eerste list item • • $(quot;tr:oddquot;) zoek alle oneven genummerde tabelregels • • $(quot;a[target=_blank]quot;) zoek alle links met target blank • • $(quot;form[id^=step]quot;) zoek alle forms waarvan de id begint met step Ga voor meer voorbeelden van ‘Selectors’ naar hquot;p://codylindley.com/jqueryselectors/
- 22. jQuery methodes Verplaats paragraaf naar element met id quot;fooquot; $(quot;pquot;).appendTo(quot;#fooquot;); <html> <body> <div>jQuery <p>moving</p> <p>paragraphs</p> </div> <div id=quot;fooquot;> example </div> </body> </html>
- 23. jQuery methodes Verplaats paragraaf naar element met id quot;fooquot; $(quot;pquot;).appendTo(quot;#fooquot;); <html> <body> <div>jQuery</div> <div id=quot;foo”>example <p>moving</p> <p>paragraphs</p> </div> </body> </html>
- 26. 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/ •
- 27. Boek