JQUERY waarom eigenlijk

Heb je jQuery ooit gebruikt?

Enkele voordelen:
- cross browser compatibiliteit
- "write less, do more"
- heel veel out-of-the-box functionaliteit

Maar het heeft eerlijk gezegd geen enkele zin om te vertellen wat iets inhoudt, als je het niet zelf probeert.

Probeer het uit, en vorm je eigen mening.

IMO tilt jQuery JavaScript naar een hoger niveau.

Als je het niet nodig hebt, vooral niet de moeite nemen om te gebruiken. Daar zie ik namelijk geen voordelen van :) ('t is een beetje alsof je een graafmachine gaat gebruiken voor het graven van een gat dat je makkelijk met een schep had kunnen doen, gewoon omdat je hebt gehoord dat op een bouwplaats een graafmachine handiger is).

jQuery is opgericht met 1 doel: 1 API voor elk browser. Je moet weten dat een aantal jaar geleden elke browser zijn eigen javascript API's had. De ene browser had document.innerHTML, terwijl je bij de andere nog moest werken met document.appendChild en document.createElement. De ene browser had document.addEventListener, terwijl de ander document.attachEvent had en weer een ander document.onXxx. Alles bij elkaar zorgde dit voor heel wat meer javascript code.

Met jQuery werkt alles veel simpeler, gewoon: $(document).on('click').

Maar tegenwoordig zijn de standaarden veel meer gebruikt. Veel browser (Chrome, Safari en Opera) gebruiken dezelfde JavaScript engine en de andere browser (IE en FireFox) houden zich ook aan de standaard APIs. Dit zorgt ervoor dat je zonder jQuery praktisch het zelfde kan bereiken. In de meeste gevallen (waarbij je geen compabiliteit voor IE <9 nodig hebt), is jQuery dus niet meer nodig. Een voorbeeldje:

[code lang=js]// jQuery
var $elem = $('#output-element');
$('#some-element').on('click', function (e) {
$elem.text('You clicked!');
});

// Javascript
var elem = document.querySelector('#output-element');
document.querySelector('#output-element').addEventListener('click', function (e) {
elem.innerText = 'You clicked!';
}, false);[/code]

Mocht je document.querySelector teveel typen vinden kun je deze makkelijk aliasen met var $ = document.querySelector.bind(document);, waardoor je gewoon $('#output-element') kunt gebruiken.

Ik gebruik alleen Javascript.
Met jQuery ben je afhankelijk van derden terwijl het gewoon met Javascript is op te lossen.

Ik heb nog nooit jQuery gebruikt, daarom deze vraag vooraf. Ik wil géén overbodige tools leren, die wellicht niet echt nodig zijn. En wat mij ook tegenstaat is zoals jij dat zegt: 'heel veel out-of-the-box functionaliteit', zo'n beetje een black-box idee. Je hebt geen idee meer hoe het nu echt werkt. Ik, als beginner (inmiddels als een iets gevorderde beginner), wil graag snappen hoe de (onderliggende) techniek werkt.
Ach, misschien moet ik gewoon gebruik maken van die tools die voorhanden zijn, want jQuery wordt heel vaak gebruikt. Niet zeuren gewoon gebruiken ?

@SanThe: Ja, dat vind ik nu ook !
@Wouter J: duidelijk, thx.

Handig topic, ik vroeg het me ook al af.

Door niet gebruik te maken van geijkte paden duurt de reis meestal wel (iets) langer, maar dat kan ook de lol zijn als je niet bang hoeft te zijn voor de details.

Nu browsercompatibiliteit geen issue meer is en de lengte van de code niet opweegt tegen het onthouden van JQuery syntax ben ik niet geneigd te kiezen voor JQuery voor mijn eigen projectjes.

Zelf grijp ik al snel naar jQuery als ik uit een groep elementen slechts één element zichtbaar wil hebben. Denk hierbij aan bijvoorbeeld tabs. Ik vind dat jQuery dan echt gemak biedt omdat je met één regel code dan de hele groep kunt verbergen. Hier heb je in plain javascript nog altijd een for lus voor nodig. Al draai ik daar mijn hand ook niet voor om is het zakelijk gezien ook belangrijk dat er redelijk snel vorderingen gemaakt worden.

jQuery & Mootools zijn gewoon API's die je kan gebruiken, ik gebruik ze omdat ik graag compacte code zie.
Het heeft ook zijn nadelen dit te gebruiken want met deze twee API's kan je heel veel maar je gebruikt misschien maar 10% van de totale code die er ingebakken zit.

Maar het bespaard veel tijd in het ontwerpen van "flashy" effecten op je website.
Wil je nog meer, kan je jQuery UI eens even bekijken of de berg met plugins die ervoor beschikbaar is.
XMLHTTPObject? ik zou er nog geen eens meer aan willen beginnen zonder jQuery.

Zoals wouter zijn code al zegt is dat jQuery met minder code hetzelfde doet, (slogan jQuery) alleen kon zijn code nog compacter.

// jQuery
$("#cssid").click(function() {
  $(this).html('You clicked!');
});

// Javascript
var elem = document.querySelector('#output-element');
document.querySelector('#output-element').addEventListener('click', function (e) {
    elem.innerText = 'You clicked!';
}, false);

Ik ben van mening dat jQuery in veel gevallen toch wel een verbetering is en meer voordelen heeft. Tuurlijk kan alles met gewoon javascript opgelost worden. jQuery is ook puur javascript. Maar bij jQuery zit wel al veel meer ervaring, tijd en bugfixes die je zelf anders ook weer moet op gaan lossen.

Ik gebruik jQuery veel voor eventlisteners maar ook voor animaties en ajax calls. Met jQuery is dit soms maar 2 of 3 regels code. Als je dit met Javascript gaat doen heb je een heel stuk meer nodig, en dan krijg je het ( mijn ervaring ) nooit zo mooi en soepel als dat je het met jQuery wel krijgt.

Daarom ben ik dus van mening dat je jQuery ook prima kunt combineren met basic javascript. Soms is de javascript basic meer dan voldoende en dan is het overbodig om het met jQuery te doen.

@Johan,

Zou iets als dit niet eenvoudiger zijn?

document.getElementByID('output-element').onclick = function() {this.innerHTML = 'You clicked!';}

Drie tabjes:

<ul>
  <li><a class="tab-links" href="#">tab1</a></li>
  <li><a class="tab-links" href="#">tab2</a></li>
  <li><a class="tab-links" href="#">tab3</a></li>
</ul>

<div class="tab-windows" id="tab1">Inhoud tab 1</div>
<div class="tab-windows" id="tab2">Inhoud tab 2</div>
<div class="tab-windows" id="tab3">Inhoud tab 3</div>

css:

.tab-windows {
  display:none;
}

#tab1 {
  display:block;
}

ZONDER jquery:

window.onload = function() {
  var links = document.getElementsByClassName('tab-links');
  var windows = document.getElementsByClassName('tab-windows');

  function changeTabs() {
    var activeWindow = document.getElementById(this.innerHTML);
    
    for(var i = 0 ; i < windows.length ; i++) {
      windows[i].style.display = 'none';
    }
    
    activeWindow.style.display = 'block';
  }

  for(var i = 0 ; i < links.length ; i++) {
    links[i].onclick = changeTabs;
  }
};

MET jquery:

$(function() {
  $('.tab-links').click(function() {
    $('.tab-windows').hide();
    $("#" + $(this).html()).show();
  });
});