jQuery in 10 minuten

1,049
-1

Published on

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.

2 Comments
2 Likes
Statistics
Notes
  • Thanks! Mis je in de presentatie dat je kennis van JS nodig hebt? In principe helpt jQuery je beter JS te begrijpen, dus als je een leek bent op JS gebied, zou ik juist jQuery aanraden om mee te beginnen. Met de vele tutorials die er zijn en ik ook genoemd hebt in mijn presentatie moet dat wel lukken lijkt me.

    Iemand uit mijn klas vroeg trouwens wat het specifieke verschil was met MooTools, weet jij dat zo? Ik ken die library wel, maar heb het nooit echt veel gebruikt. Simpelweg, omdat jQuery veel makkelijker (denk ik) is en algemeen geaccepteerd is.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great presentation. Especially for beginners. Knowledge about JS and the DOM is required to understand jQuery better .I miss that a bit.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,049
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
23
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

jQuery in 10 minuten

  1. 1. Wat
is
jQuery
en
wat
kun
je
ermee?
 7
mei
2009
 Anne
Jan
Roeleveld

  2. 2. Inhoud
 •  Wat
is
jQuery?
 •  Waarom
jQuery?
 •  Installa?e
 •  Voorbeelden
 – Verschillende
func?es/methodes
 – Live
voorbeelden

  3. 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. 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

  5. 5. Voorbeeld
 $(quot;#contentquot;).load(quot;page.html
#contentquot;);
 jQuery

  6. 6. Voorbeeld
 $(quot;#contentquot;).load(quot;page.html
#contentquot;);
 (!)
 jQuery

  7. 7. Wat
is
jQuery?
 •  Selectors
 •  Traversing:
DOM
doorlopen
 •  Manipula?on:
DOM
veranderen
 •  Events
 •  Effecten

  8. 8. Waarom
jQuery?
 •  Simpele
code

 •  Grote
community

 •  Plugins

 •  Boeken
 •  Support

 •  Tutorials

 •  Open
free
license

 •  Snelheid

 •  Lichtgewicht
code

  9. 9. Waarom
een
JavaScript
bibliotheek?
 •  Schermt
browserverschillen
af
 •  Voorkomt
geheugenlekken
 •  Geop?maliseerd
 •  Goed
onderhouden
door
specialisten

  10. 10. Waarom
jQuery?

  11. 11. Iedereen
gebruikt
het
inmiddels
 Google

 •  Amazon

 •  Digg

 •  Nezlix

 •  Dell

 •  HP

 •  Bank
of
America

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

 • 
  12. 12. Installa?e
in
3
stappen
 1.
Download

  13. 13. Installa?e
in
3
stappen
 1.
Download
 2.
Plaats
in
je
website

  14. 14. Installa?e
in
3
stappen
 1.
Download
 2.
Plaats
in
je
website
 3.
Plaats
code

  15. 15. jQuery
selector
 •  Zoek
HTML
elementen
met
de
'Selector'

 •  $(selector)
‐
gebruik
de
CSS
selector

 $(”#myIdquot;)

 
 $(quot;.myClassquot;)


 
 $(quot;tablequot;)

  16. 16. jQuery
selector
 •  Zoek
alle
divs
$(quot;divquot;)

 <html>
 
 <body>
 
 

 <div>jQuery</div>
 
 

 <div>example</div>
 
 </body>
 </html>

  17. 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. 18. Voorbeelden
 •  Zoek
HTML
elementen
met
de
'Selector'

 •  $(selector)
‐
gebruik
de
CSS
selector

 $(quot;myIdquot;)

 
 
 $(quot;.myClassquot;)

 
 
 $(quot;tablequot;)
 $(quot;#myId,
.myClass,
tablequot;)

  19. 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/


  20. 20. jQuery
.ready()
 $(document).ready(func?on()
{
});
 jQuery
script
pas
ac?ef
na
het
volledig
laden
van
de
website

  21. 21. jQuery
methodes
 Bewegende
elementen:

 before(),
aser(),
appendTo(),
append()

 Alributen:
 
css(),
alr(),
html(),
val(),
addClass()

 Effecten:
 show(),
fadeOut(),
toggle(),
animate()

 Opzoeken
en
volgorde:
 find(),
is(),
prevAll(),
next(),
hasClass()

 Ajax:

 get(),
getJSON(),
post(),
ajax(),
load()

  22. 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. 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>

  24. 24. jQuery
alributen
 Voeg
een
zwarte
rand
toe

 $(...).css(quot;borderquot;,
quot;1px
solid
blackquot;);

 Verander
CSS
styles

 $(...).css({
quot;backgroundquot;:
quot;yellowquot;,
quot;heightquot;:
quot;400pxquot;
});

 Verander
alle
links
in
google.com

 $(quot;aquot;).alr(quot;hrefquot;,
quot;hlp://google.comquot;);

  25. 25. Voorbeelden
 •  hlp://www.annejanroeleveld.nl/jquery


  26. 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. 27. Boek

  28. 28. Vragen?

 Anne
Jan
Roeleveld
 hlp://www.annejanroeleveld.nl
 hlp://twiler.com/annejan88


  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×