jQuery in 10 minuten
28
Wat is jQuery en wat kun je ermee? 7 mei 2009 Anne Jan Roeleveld
-
Upload
anne-jan-roeleveld -
Category
Self Improvement
-
view
970 -
download
4
description
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.
Transcript of jQuery in 10 minuten
WatisjQueryenwatkunjeermee?
7mei2009
AnneJanRoeleveld
Inhoud
• WatisjQuery?• WaaromjQuery?• Installa?e
• Voorbeelden– Verschillendefunc?es/methodes– Livevoorbeelden
WatisjQuery?
• Bibliotheek• Kleinensnel• Anima?es• AJAX• jQueryisgemaaktomJScodemakkelijkertemaken• Vereenvoudigtinterac?etussenHTMLenJavaScript
Voorbeeldif(!document.ELEMENT_NODE){
document.ELEMENT_NODE=1;document.ATTRIBUTE_NODE=2;
document.TEXT_NODE=3;document.CDATA_SECTION_NODE=4;
document.ENTITY_REFERENCE_NODE=5;document.ENTITY_NODE=6;
document.PROCESSING_INSTRUCTION_NODE=7;document.COMMENT_NODE=8;
document.DOCUMENT_NODE=9;document.DOCUMENT_TYPE_NODE=10;
document.DOCUMENT_FRAGMENT_NODE=11;document.NOTATION_NODE=12;
}
document._importNode=func?on(node,allChildren){switch(node.nodeType){casedocument.ELEMENT_NODE:varnewNode=document.createElement(node».nodeName);/*doesthenodehaveanyalributestoadd?*/if(node.alributes&&node.alributes».length>0)for(vari=0;il=node.alributes.length;»i<il)newNode.setAlribute(node.alributes».nodeName,node.getAlribute(node.alributes[i++]».nodeName));/*arewegoingaserchildrentoo,anddoes»thenodehaveany?*/if(allChildren&&node.childNodes&&»node.childNodes.length>0)for(vari=0;il=node.childNodes.length;»i<il)newNode.appendChild(document._importNode»(node.childNodes[i++],allChildren));returnnewNode;break;casedocument.TEXT_NODE:casedocument.CDATA_SECTION_NODE:casedocument.COMMENT_NODE:returndocument.createTextNode(node.nodeValue);break;}};
JavaScript
Voorbeeld
$("#content").load("page.html#content");
jQuery
Voorbeeld
$("#content").load("page.html#content");
(!)
jQuery
WatisjQuery?
• Selectors• Traversing:DOMdoorlopen
• Manipula?on:DOMveranderen
• Events• Effecten
WaaromjQuery?
• Simpelecode• Grotecommunity• Plugins• Boeken• Support• Tutorials• Openfreelicense• Snelheid• Lichtgewichtcode
WaaromeenJavaScriptbibliotheek?
• Schermtbrowserverschillenaf
• Voorkomtgeheugenlekken
• Geop?maliseerd
• Goedonderhoudendoorspecialisten
WaaromjQuery?
Iedereengebruikthetinmiddels
• Amazon
• Digg
• Nezlix• Dell
• HP
• BankofAmerica
• hlp://docs.jquery.com/Sites_Using_jQuery
Installa?ein3stappen
1.Download
Installa?ein3stappen
1.Download
2.Plaatsinjewebsite
Installa?ein3stappen
1.Download
2.Plaatsinjewebsite
3.Plaatscode
jQueryselector
• ZoekHTMLelementenmetde'Selector'• $(selector)‐gebruikdeCSSselector
$(”#myId") $(".myClass") $("table")
jQueryselector
• Zoekalledivs$("div")
<html> <body> <div>jQuery</div> <div>example</div> </body></html>
jQueryselector
• Zoekalledivs$("div").addClass('foo');
<html> <body> <divclass="foo">jQuery</div> <divclass="foo">example</div> </body></html>
Voorbeelden
• ZoekHTMLelementenmetde'Selector'• $(selector)‐gebruikdeCSSselector
$("myId") $(".myClass") $("table")
$("#myId,.myClass,table")
jQueryselector• $("#content") zoekelementmetidcontent• • $("li:first") zoekheteerstelistitem• • $("tr:odd") zoekalleonevengenummerdetabelregels• • $("a[target=_blank]") zoekallelinksmettargetblank
• $("form[id^=step]") zoekalleformswaarvandeidbegint metstep
Gavoormeervoorbeeldenvan‘Selectors’naarh"p://codylindley.com/jqueryselectors/
jQuery.ready()$(document).ready(func?on(){});
jQueryscriptpasac?efnahetvolledigladenvandewebsite
jQuerymethodesBewegendeelementen:before(),aser(),appendTo(),append()
Alributen:css(),alr(),html(),val(),addClass()
Effecten:show(),fadeOut(),toggle(),animate()
Opzoekenenvolgorde:find(),is(),prevAll(),next(),hasClass()
Ajax:get(),getJSON(),post(),ajax(),load()
jQuerymethodesVerplaatsparagraafnaarelementmetid"foo"
$("p").appendTo("#foo");
<html>
<body>
<div>jQuery
<p>moving</p>
<p>paragraphs</p>
</div>
<divid="foo">
example
</div>
</body>
</html>
jQuerymethodesVerplaatsparagraafnaarelementmetid"foo"
$("p").appendTo("#foo");
<html>
<body>
<div>jQuery</div>
<divid="foo”>example
<p>moving</p>
<p>paragraphs</p>
</div>
</body>
</html>
jQueryalributenVoegeenzwarterandtoe
$(...).css("border","1pxsolidblack");
VeranderCSSstyles$(...).css({"background":"yellow","height":"400px"});
Veranderallelinksingoogle.com
$("a").alr("href","hlp://google.com");
Voorbeelden
• hlp://www.annejanroeleveld.nl/jquery
Handigelinks• hlp://www.jquery.com
• hlp://docs.jquery.com• hlp://cli.gs/7D8rum(51tutorials)• 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?
AnneJanRoeleveld
hlp://www.annejanroeleveld.nl
hlp://twiler.com/annejan88
