login  Naam:   Wachtwoord: 
Registreer je!
 Nota's op tutorial:

Tutorials > Javascript > jQuery - Basis
Pagina:

Reacties op de tutorial jQuery - Basis


Offline  ArieMedia
Gepost op: 18 mei 2011 - 09:34
Gouden medaille

PHP ver gevorderde


Misschien slimmer om jquery.tooltip.js op SiMa te laten hosten,

Als jij nu besluit om je hele mappenstructuur leeg te gooien blijft er niks over

Offline  svm
Gepost op: 24 mei 2011 - 20:28
PHP ver gevorderde

ArieMedia schreef:
Misschien slimmer om jquery.tooltip.js op SiMa te laten hosten,

Als jij nu besluit om je hele mappenstructuur leeg te gooien blijft er niks over
Mogen ze best doen hoor.
Maar deze hosting heb ik al 7 jaar (bij mn internet abbonement) en gebruik ik verder nergens voor; dingen uit andere tutorials staan hier ook op (bijv. een scriptje in een iframe bij CHMOD).
Ik kom er dus niet verder aan: zeker nu ik gestopt ben met programmeren zal ik er niet veel meer mee doen.

Offline  WouterJ
Gepost op: 06 juni 2011 - 21:44
HTML gevorderde

Ik vind deze zin wel vreemd: "Wat hierboven gebeurt in gewoon javascript kan niet"

Alles wat jQuery doet kan ook met gewoon javascript. jQuery gebruikt voor het selecteren sizzle.js en hoe die dat doet weet ik niet precies. Maar hoe ik het zou doen:
  1. var elems = document.getElementById('eerste').getElementById('tweede');
  2. for( i=0;i < elems.length;i++ ) {
  3. if( elems[i].attributes.class == 'opmaak' ) {
  4. elems[i].style.color = '#F00';
  5. }
  6. }

Offline  svm
Gepost op: 08 juni 2011 - 12:11
PHP ver gevorderde

Waldio schreef:
Ik vind deze zin wel vreemd: "Wat hierboven gebeurt in gewoon javascript kan niet"

Alles wat jQuery doet kan ook met gewoon javascript. jQuery gebruikt voor het selecteren sizzle.js en hoe die dat doet weet ik niet precies. Maar hoe ik het zou doen:
[..code..]

Uiteraard kan JS alles wat met jQuery kan: jQuery is immers gewoon JS.
Maar wat ik hiermee bedoel is dat de laatste twee structuren die ik beschrijf in 'gewoon' JS niet direct zo werken: dan dien je inderdaad de methode te gebruiken zoals jij beschrijft; jQuery daarentegen kun je meerdere childs en klassen in een object aanvraag gebruiken.

Offline  Thomas
Gepost op: 15 augustus 2011 - 17:02
Moderator

Wellicht is het goed om de volgende sterke punten van jQuery aan te stippen:

- jQuery is crossbrowser compatible
in plaats van het schrijven van browser-afhankelijke code om iets te realiseren (denk bijvoorbeeld aan AJAX-calls) schrijf je deze code eenmalig in de jQuery syntax; hierbij zorgt jQuery voor de browserspecifieke afhandeling
- jQuery is "non-obtrusive": je kunt je HTML en CSS verder loskoppelen van je (jQuery-)Javascript; dit kan de toegankelijkheid van je site bevorderen
- jQuery heeft superveel kant-en-klare functionaliteit, hetzij vanuit de jQuery core zelf (event handlers, DOM manipulatie, grafisch effecten), hetzij via plugins

Met andere woorden: bij een juist gebruik van deze library bespaar je jezelf een heleboel werk en wordt je code netter en schoner. Je tilt hiermee het gebruik van Javascript echt naar een hoger niveau.

Het is (vaak) wel belangrijk dat alle jQuery-code binnen een volgend soort blok staat:
  1. $().ready() {
  2. // code hier
  3. }


Dit zorgt ervoor dat de javascript pas wordt uitgevoerd als het document is geladen. Hoe vaak maken jullie mee dat je bij het laden van een pagina ergens te snel op klikt en je krijgt een Javascript-foutmelding? Hiermee voorkom je dit!

Offline  Thomas
Gepost op: 31 augustus 2014 - 15:31
Moderator

Haha, het bovenstaande moet natuurlijk zijn:
  1. $().ready(function() {
  2. // je code...
  3. });

svm schreef:
Je doet er echter slim aan om het script niet zelf te hosten, maar het in te laden via Google Code.
Hangt van de situatie af. Wat als je een intranet-applicatie hebt zonder verbinding naar buiten, of, zoals in mijn geval, je bent lokaal aan het ontwikkelen en je internet knalt eruit... Dan heb je niet de beschikking over je library.

Het selector-voorbeeld is niet zo sterk, hier zit niet-kloppende HTML in - je gebruikt immers meerdere keren hetzelde id. Je geeft terecht aan dat jQuery naar elementen kan zoeken die lager in de HTML (DOM) hiërarchie zitten maar vervolgens selecteer je rechtstreeks het element .

Gegegeven een soortgelijke (kloppende) bulleted list:
  1. <ul id="list">
  2. <li>eerste element</li>
  3. <li>tweede element</li>
  4. <li>derde element</li>
  5. </ul>

Kun je op vele manieren de tekst van het tweede element rood kleuren:
  1. $().ready(function() {
  2. // selecteer het tweede element (index 1) als jQuery object
  3. $('#list li').eq(1).addClass('red');
  4.  
  5. // of
  6.  
  7. // selecteer het eerste eerstvolgende element (vergelijk $('#list li') met een array van items)
  8. $('#list li').next(':first').addClass('red');
  9.  
  10. // of
  11.  
  12. // schrijf een custom filter functie
  13. $('#list li').filter(function(index) {
  14. return index == 1;
  15. }).addClass('red');
  16.  
  17. // of
  18.  
  19. // zoek het element (al is dat in dit geval redelijk triviaal, deze functie verdient dan ook niet
  20. // de voorkeur, maar het kan)
  21. // find() zoekt in alle onderliggende niveau's, children() alleen in het direct ondergelegen niveau
  22. var item2 = $('#list li')[1];
  23. $('#list').find(item2).addClass('red');
  24. // alternatief: $(item2).addClass('red');
  25.  
  26. // of
  27.  
  28. var $children = $('#list').children();
  29. $($children[1]).addClass('red');
  30. });

Het gebruik van jQuery kan je een hoop tijd besparen, maar ook kosten, zo is het namelijk heel belangrijk:
- hoe je je HTML opbouwt waarop je je jQuery wilt toepassen; hoe pas je classes, id's en custom "data-" attributen toe in je elementen en hoe steek je je HTML-structuur in elkaar voor efficiënte manipulatie?
- hoe je vervolgens je jQuery in elkaar steekt; stel dat je je HTML-structuur onhandig in elkaar steekt waardoor de selectors/filters/whatever moeite hebben om de manipulatie snel uit te voeren, of dat je selectors/filters/whatever op een verkeerde manier toepast met hetzelfde effect? Het bovenstaande voorbeeld laat al min of meer zien dat je hetzelfde "effect" vaak op meerdere manieren kunt bereiken; met name wanneer je (complexe) HTML-document groeit zal blijken of de gekozen structuur (in HTML) en aanpak (jQuery) de juiste was

De beste manier is leren-door-te-doen: probeer dingen uit, raadpleeg veelvuldig de documentatie site van jQuery en Google op vraagstukken waar je mee zit - je bent namelijk zelden de eerste persoon die tegen een bepaalde muur aan loopt.

Vaak kan het handig zijn om het "hoofdelement" van een lap HTML een id te geven of een (div-)container om het relevante deel heen te zetten zodat je een (vast) uitgangspunt hebt voor je manipulatie.

Vraag je bij het bouwen van je jQuery af of het ding wat je aan het maken bent meerdere keren kan voorkomen op dezelfde pagina. Dit kan er namelijk toe leiden dat je een andere opzet moet hanteren en zou in het ongunstigste geval kunnen resulteren in het (deels) ombouwen van je HTML en (het geheel herschrijven van je) jQuery!

Pagina:

Enkel aanvullende informatie is welkom. Geen prijzende of afkeurende reacties.
 
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.06s