View
970
Download
4
Category
Preview:
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.
Citation preview
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
Recommended