jQuery

Leerdoelen

• Chainablity
• Traversion
  

jQuery UI Effects

jQuery heeft een hele uitgebreide UI library van interaction effects en widgets (zoals, Draggable, Sortable, Tabs, Accordion). Er zijn ook een aantal basis UI effects die super makkelijk te gebruiken zijn:

• Basics: show(), hide(), toggle()
• Sliding: slideUp(), slideDown(), slideToggle()
• Fading: fadeIn(), fadeOut(), fadeTo()
• Custom: animate()

Zie de voorbeelden: demo1 | demo2 | demo3 | demo4 | demo5 | demo6 | demo7 | demo8

Echter de meeste jQuery code is niet UI gerelateerd. Het maakt de dingen die je met alleen javaScript kunt doen alleen dan beter, sneller en meer cross-browser combatible!

Traversing

Hoe kom je van het ene element naar het andere

De vorige les hebben we gezien hoe je elementen kunt zoeken in de DOM.

• $("#header") = zoekt het element met de id="header"
• $("h3") = zoekt allel <h3> elementen
• $("div#content .photo") = zoekt alle elementen met class="photo" die genest zijn binnen de <div id="content"> tag
• $("ul li") = zoekt alle <li> elementen die genest zitten in alle <ul> tags
• $("ul li:first") = zoekt alleen het eerste <li> element binnen de <ul> tags

Nu is het naurlijk handig als je vanuit een bepaalde element selectie, de totale DOM structuur van de pagina kunt verkennen. jQuery bied daar diverse mogelijkheden voor.

    <script type="text/javascript" src="../jquery.js"></script>


        <div>
            <span class="expand"><img src="een.jpg"></span>
            <span>Titeltjs</span>
        </div>
        <div class="record hidden">Laat deze tekst zien of verberg deze</div>
        

    <script type="text/javascript">
        $(document).ready(function(){
            $('.expand img').toggle(function(){
                $(this).parent().parent().next().hide();
            },function(){
                $(this).parent().parent().next().show();
            });
        });
    </script>

Zie dat ik twee keer parent gebruik, omdat het event toegevoegd is aan het plaatje (.expand img) wiens parent de span is, die verolgens weer in de div zit.
Een voorbeeld van 'method chaining'.
Method chaining is goed te gebruiken maar schaat de leesbaarheid, gebruik het daarom niet te veel!
Wat in dit geval ook zou kunnen is:
in plaats ' van $(this).parent().parent().next().show(); '
' $(this).parent(div).next().show(); ' parent(div) zoekt het eerste komende parent div element.

• $().find( selectors ) - geeft elementen binnen de context van een gegeven collectie
• $().children( [selectors] ) - geeft de children van elementen
• $().parent( [selectors] ) - geeft de parent van een element
• $().prev( [selectors] ) - geeft het voorgaande element
• $().prevAll( [selectors] ) - geeft alle voorgaande elementen
• $().next( [selectors] ) - geeft het volgende element
• $().nextAll( [selectors] ) - geeft alle volgende elementen binnen een set
  

Chain-able animatie

Hier een vooreeld van de kracht van jQuery’s chainability. Met maar enkele regels code, kan een div geanimeerd worden. (zie demo)

Line 1: when the <a class="run"> is clicked
Line 2: animate the <div id="box"> opacity=0.1, left property until it reaches 400px, with speed 1200 (milliseconds)
Line 3: then opacity=0.4, top=160px, height=20, width=20, with speed "slow"
Line 4: then opacity=1, left=0, height=100, width=100, with speed "slow"
Line 5: then opacity=1, left=0, height=100, width=100, with speed "slow"
Line 6: then top=0, with speed "fast"
Line 7: then slideUp (default speed = "normal")
Line 8: then slideDown, with speed "slow"
Line 9: return false will prevent the browser jump to the link anchor

(document).ready(function(){

	$(".run").click(function(){

	  $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
	  .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
	  .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
	  .animate({top: "0"}, "fast")
	  .slideUp()
	  .slideDown("slow")
	  return false;

	});

});

Opdracht

Maak een variatie met bovenstaande code met gebruik van traversion.
Zoiets als:

linken

jQuery voor beginners