Post on 29-Jun-2015
description
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