Mediatafel.com

Over het boek | Inhoudsopgave | Updates

Efficiënt scripten met jQuery 1.8

Over het boek

Cover boek jQuery1.8

Auteur: Patrick Verhaert
ISBN: 97890356.1274.7
Prijs: € 25
Pagina's: 217 p met CD-ROM (full collor)
Uitgever: Campinia Media

jQuery is veruit de populairste freeware JavaScript bibliotheek voor het ontwerp van interactieve webpagina’s. Via eenvoudige voorbeelden en oefeningen ontdekt u de mogelijkheden van jQuery. Elk hoofdstuk behandelt een deelaspect van de bibliotheek.

Met dit boek ontwerpt u een volledig interactieve en gebruiksvriendelijke website.

Volgende onderwerpen komen aan bod.

Voorkennis:

De cd-rom bevat:

Inhoudsopgave

  1. Voorwoord.
    1. Voordelen van jQuery.
    2. Inhoud van het boek.
    3. Voor wie is dit boek bedoeld?
    4. HTML editor.
    5. Lesmateriaal bij dit handboek.
    6. HTML5 en CSS3.
    7. Conventies.
    8. Bronnen.
  2. Inleiding tot JavaScript.
    1. Events en Actions.
    2. Syntax regels.
    3. JavaScript debugger.
    4. Variabelen.
    5. Operatoren
    6. Voorwaardelijke instructies.
    7. Lussen.
    8. Functies.
    9. Functies in jQuery.
    10. Scope (zichtbaarheid) van variabelen.
    11. Objecten.
    12. Ingebouwde JavaScriptobjecten.
    13. Bronnen.
  3. jQuery integratie.
    1. jQuery integreren.
    2. Javascript window.onload vs jQuery $(document).ready().
    3. Unobtrusive JavaScript.
    4. jQuery documentatie (API).
    5. Afgeschafte (deprecated) methodes en selectors.
    6. jQuery cheat sheets.
    7. jQuery in combinatie met andere JavaScriptbibliotheken gebruiken.
    8. Bronnen.
  4. Elementen selecteren.
    1. Basis selectors.
    2. Hiërarchische selectors.
    3. Basisfilters.
    4. Inhoudsfilters.
    5. Attribuut selectors.
    6. Childfilters.
    7. Formulierfilters.
    8. Zichtbaarheidsfilters.
    9. Toepassing 1: gemeentelijst filteren (basisversie).
    10. Bronnen.
  5. Selectie verfijnen (traversing).
    1. Filter methodes.
    2. Element looping: each().
    3. Selecties in cascade: end().
    4. Hiërarchische selectors.
    5. De snelheidstest.
    6. Toepassing 1: gemeentelijst filteren (uitgebreide versie).
    7. Toepassing 2: rating.
    8. Bronnen.
  6. Events.
    1. Documentevents.
    2. Gebruikersevents.
    3. Event bubbling.
    4. Event methodes en properties.
    5. Methodes met een dubbele functie.
    6. De methode on().
    7. Event handlers verwijderen.
    8. Toepassing 1: reactietest.
    9. Bronnen.
  7. Animaties en effecten.
    1. Basiseffecten.
    2. Aangepaste animaties.
    3. Animatie pauzeren: delay().
    4. Animatie afbreken: stop().
    5. Versnellingsparameter.
    6. Toepassing 1: vloeiend scrollen.
    7. Toepassing 2: tabbladen.
    8. Bronnen.
  8. DOM manipulatie.
    1. HTML-attributen.
    2. Object dimensies.
    3. Elementen toevoegen.
    4. Elementen verwijderen.
    5. Elementen vervangen.
    6. Elementen klonen.
    7. Toepassing 1: tabs.
    8. Toepassing 2: lightbox.
    9. Bronnen.
  9. Inleiding tot AJAX.
    1. Historiek.
    2. Wat is XML?
    3. Wat is JSON?
    4. Requests filteren met GET en POST.
    5. Zes soorten AJAX requests.
    6. Same origin policy.
    7. Cross-site scripting.
    8. Bronnen.
  10. AJAX zonder server-side scripting.
    1. Load().
    2. $.getScript().
    3. $.getJSON().
    4. $.get() en $.post().
    5. $.ajax().
    6. Globale AJAX event handlers.
    7. Externe gegevens ophalen via JSONP.
    8. Bronnen.
  11. AJAX met server-side scripting.
    1. Master/detailrelatie met load().
    2. Master/detailrelatie met $.get().
    3. Contactformulier verzenden met $.post()
    4. Cross-site scripting (XSS).
    5. Bronnen.
  12. Index.

Updates

Pagina 27: twee laatste items.

  • var txt rest = (getal%2 == 0) ? 'even' : 'oneven';
    Met de verkorte if-else constructie bepalen we of het getal even of oneven is. Het resultaat
    (de string even of oneven) komt in de variabele txt rest terecht.
  • $('#resultaat').html(getal + ' is een ' + txt rest + ' getal.');
    Selecteer het element met id resultaat (de span tag dus). Plaats vervolgens het resultaat van getal + ' is een ' + txt rest + ' getal.' als HTML-code binnen de span-tag.

Pagina 85: derde en vierde item.

  • $('#theItem').parents()
    Selecteer alle parent ancestor elementen van theItem.
  • $('#theItem').parents('ul')
    Selecteer alle ul-tags die een parent ancestor van theItem zijn.

Pagina 97: 6.1 Documentevents.

Documentevents zijn gebeurtenissen die de browser zelf genereert en waar de gebruiker geen
invloed op heeft. jQuery kent vier drie documentevents, namelijk:

Pagina 108: 6.6.3 Live events.

Waar de selector normaal voor de methode staat, verhuist deze nu binnen de methode. Voor de selector komt een parent ancestor tag vanwaar het event actief wordt. De ancestor tags voor onze litag zijn ul, article, div#outline en body.

Pagina 141: 8.3.2 Buiten de selector.

In deze voorbeelden gaan we de nieuwe inhoud niet binnen, maar net voor of net achter de geselecteerde tag selector plaatsen.

Pagina 143: 8.3.3 Rond de selector.

Waar wrap() een nieuwe tag buiten rond de selectie plaatst, plaatst wrapInner() een nieuwe tag
binnen de selectie.

Pagina 145: laatste items.

Besluit:

  • Wilt u enkel nieuwe inhoud toevoegen, dan kan u zowel append() before() als appendTo() insertBefore() gebruiken.
  • Indien u, VOOR het toevoegen, nog extra jQuery methodes toepast op de nieuwe inhoud,
    gebruik dan STEEDS appendTo() insertBefore().

Dezelfde logica geldt natuurlijk ook voor append()/appendTo(),
prepend()/prependTo(), after()/insertAfter(), before()/insertBefore() en replaceWith()/replaceAll().
De laatst genoemde methodes komen dadelijk aan bod.

Pagina 176: 10.4.2 $.get(): JSON met één object.

Ook deze toepassing is een bijna exacte kopie van json23.html . Vervang $.getJSON door $.get en voeg achteraan het datatype json toe.

// Code json23.html
$.getJSON('data/bloemen23.json', function(data) {
   ...
});
// Code getJSON.html
$.get('data/bloemen3.json', function(data) {
   ...
}, 'json');

Pagina 209: 11.4.4 XML: iTunes feed.

Het uitlezen van de afbeelding im:image vraagt wat extra uitleg. Voor Firefox en Internet Explorer Chrome en Safari hoeft u geen rekening te houden met de prefix. Omdat de pagina drie dezelfde nodes bevat en we enkel de eerste node met de kleinste afbeelding gebruiken, wordt de selector image:first. Voor Chrome en Safari Firefox en Internet Explorer is de prefix wel belangrijk. Een dubbelpunt moet u wel altijd laten voorafgaan door twee backslashes. De selector wordt dus im\\:image:first. Door beide te combineren, werkt de selector find('im\\:image:first, image:first') in alle browsers.