Download - 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

• Google

• Amazon

• Digg

• Nezlix• Dell

• HP

• BankofAmerica

• hlp://docs.jquery.com/Sites_Using_jQuery

Installa?ein3stappen

1.Download


1.Download

2.Plaatsinjewebsite


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/

Vragen?

AnneJanRoeleveld

hlp://www.annejanroeleveld.nl

hlp://twiler.com/annejan88