JQUERY waarom eigenlijk
Nu heb ik javascript gebruikt en heb daar alles mee op kunnen lossen (tot dusver), dus waarom zou ik dan nog jQuery willen leren ? Ik lees dat iedereen wel jQuery gebruikt. Is het echt zoveel handiger ??
Wat zijn jullie meningen/ervaringen ?
Gewijzigd op 31/05/2015 11:37:22 door Paco de Wulp
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.
Gewijzigd op 31/05/2015 11:55:25 door Thomas van den Heuvel
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 (js)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
// 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);
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);
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.
Gewijzigd op 31/05/2015 12:10:58 door Wouter J
Met jQuery ben je afhankelijk van derden terwijl het gewoon met Javascript is op te lossen.
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.
Gewijzigd op 31/05/2015 12:27:20 door Paco de Wulp
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.
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
// 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);
$("#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);
Gewijzigd op 31/05/2015 13:56:47 door Johan K
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.
Zou iets als dit niet eenvoudiger zijn?
Code (php)
1
document.getElementByID('output-element').onclick = function() {this.innerHTML = 'You clicked!';}
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<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>
<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:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
.tab-windows {
display:none;
}
#tab1 {
display:block;
}
display:none;
}
#tab1 {
display:block;
}
ZONDER jquery:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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;
}
};
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:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$(function() {
$('.tab-links').click(function() {
$('.tab-windows').hide();
$("#" + $(this).html()).show();
});
});
$('.tab-links').click(function() {
$('.tab-windows').hide();
$("#" + $(this).html()).show();
});
});
An tje op 31/05/2015 13:59:53:
@Johan,
Zou iets als dit niet eenvoudiger zijn?
Zou iets als dit niet eenvoudiger zijn?
Code (php)
1
document.getElementByID('output-element').onclick = function() {this.innerHTML = 'You clicked!';}
Tja, het is een vereenvoudigde javascript code die hetzelfde doet idd.
Maar zoals je kan zien is die code alsnog groter dan de jQuery equivilant.
Het is dan ook maar een klein voorbeeldje, maar de veranderingen in de code worden steeds groter als je meer doet.
Voorbeeld:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<html><body>
<strong style="display: none;"> World!</strong>
<p>Hello</p>
<script>
$(function(){
$("p").click(function(){
$(this).append($("strong").show());
});
});
</script>
</body></html>
Probeer dit nog maar eens te "single linen" met zonder jQuery.
<strong style="display: none;"> World!</strong>
<p>Hello</p>
<script>
$(function(){
$("p").click(function(){
$(this).append($("strong").show());
});
});
</script>
</body></html>
Probeer dit nog maar eens te "single linen" met zonder jQuery.
Volgens die API documentatie doet show() weinig anders als:
Code (php)
1
this.style.display='block';
Maar welke return waarde voeg je dan met .append() toe?
En hoe debug je dit als deze regel er aan vooraf zou gaan:
Code (php)
1
jQuery.fx.off = true;
An tje op 31/05/2015 14:46:57:
Als ik dit voorbeeldje probeer te 'single linen'
Welk voorbeeldje?
An tje op 31/05/2015 14:46:57:
Als ik dit voorbeeldje probeer te 'single linen', loop ik stuk op de JQuery documentatie http://api.jquery.com/show
Volgens die API documentatie doet show() weinig anders als:
Maar welke return waarde voeg je dan met .append() toe?
En hoe debug je dit als deze regel er aan vooraf zou gaan:
Volgens die API documentatie doet show() weinig anders als:
Code (php)
1
this.style.display='block';
Maar welke return waarde voeg je dan met .append() toe?
En hoe debug je dit als deze regel er aan vooraf zou gaan:
Code (php)
1
jQuery.fx.off = true;
Append neemt in dit geval de complete element "strong" + inhoud en plakt deze in de innerHTML van element "p" vast. Dus je krijgt dus <p>Hello <strong style="display: block;">World!</strong></p>.
Met deze code gebruikt je de fx nog niet. Het kan dat je "strong" langzaam laat "infaden" terwijl hij aan <p> word gehangen maar als die boolean uit staat dan staan die effecten gewoon uit al zeg je dat hij moet doen.
Nog een voorbeeldje, en dan raad ik ook aan om de code dan in je browser te bekijken.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
<!-- zorg dat je deze bestanden heb en dat ze werken -->
<link rel="stylesheet" type="text/css" media="all" href="/jquery-ui.theme.min.css" />
<script type="text/javascript" src="/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/jquery-ui.min.js"></script>
</head>
<body>
<form action="#" method="post">
<input type="text" name="date" id="datepicker" value="">
</form>
<div id="result"></div>
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker();
$("#datepicker").change(function(){
$.ajax({
type: 'post',
url: '/request.php',
data: $("#datepicker").serialize(),
success: function(data){
$('#result').html( data );
}
});
});
});
</script>
</body>
</html>
<head>
<!-- zorg dat je deze bestanden heb en dat ze werken -->
<link rel="stylesheet" type="text/css" media="all" href="/jquery-ui.theme.min.css" />
<script type="text/javascript" src="/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/jquery-ui.min.js"></script>
</head>
<body>
<form action="#" method="post">
<input type="text" name="date" id="datepicker" value="">
</form>
<div id="result"></div>
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker();
$("#datepicker").change(function(){
$.ajax({
type: 'post',
url: '/request.php',
data: $("#datepicker").serialize(),
success: function(data){
$('#result').html( data );
}
});
});
});
</script>
</body>
</html>
XMLHTTPObject in javascript is veel werk om dat te beheersen, jQuery is gewoon makkelijker.
Frank Nietbelangrijk op 31/05/2015 14:51:59:
Welk voorbeeldje?
An tje op 31/05/2015 14:46:57:
Als ik dit voorbeeldje probeer te 'single linen'
Welk voorbeeldje?
Het ging er over een voorbeeldje die Wouter had gemaakt die nog wat compacter kon, en An tje gaf ook een compactere code zonder jQuery in 1 lijn geschreven.
Opzich nog "overzichtelijk" tenzij je er nog meer mee gaat doen.
Als die node van "strong" onder de node van "p" komt te hangen, wordt die node "strong" dan verplaatst of gekopieerd?
Ik vind de documentatie daarin niet heel duidelijk ofzo.
Natuurlijk heeft JQuery ook sterke punten, maar als ik dan weer eens moet afwijken van de standaard, zoals met de datepicker, dat-ie mooier of uitgebreider moet, of als mijn klanten klagen dat ze er niet met de TAB-toets voorbij kunnen komen, dan moet ik waarschijnlijk OF die JQuery code gaan uitpluizen OF het alsnog zelf opnieuw doen?
An tje op 31/05/2015 16:00:21:
Als ik sceptisch probeer te blijven; het is op zich wel logisch als .show() z'n eigen pointer teruggeeft zodat je makkelijker code er achteraan kan typen. Maar.. Hoe voorspel ik het gedrag van append()?
Als die node van "strong" onder de node van "p" komt te hangen, wordt die node "strong" dan verplaatst of gekopieerd?
Ik vind de documentatie daarin niet heel duidelijk ofzo.
Natuurlijk heeft JQuery ook sterke punten, maar als ik dan weer eens moet afwijken van de standaard, zoals met de datepicker, dat-ie mooier of uitgebreider moet, of als mijn klanten klagen dat ze er niet met de TAB-toets voorbij kunnen komen, dan moet ik waarschijnlijk OF die JQuery code gaan uitpluizen OF het alsnog zelf opnieuw doen?
Als die node van "strong" onder de node van "p" komt te hangen, wordt die node "strong" dan verplaatst of gekopieerd?
Ik vind de documentatie daarin niet heel duidelijk ofzo.
Natuurlijk heeft JQuery ook sterke punten, maar als ik dan weer eens moet afwijken van de standaard, zoals met de datepicker, dat-ie mooier of uitgebreider moet, of als mijn klanten klagen dat ze er niet met de TAB-toets voorbij kunnen komen, dan moet ik waarschijnlijk OF die JQuery code gaan uitpluizen OF het alsnog zelf opnieuw doen?
In dit geval verplaatst omdat ik in $() het element selecteer. Als ik de waarde van strong wil hebben kan ik .val() gebruiken of .html(), of een attribute via .attr('id') bijvoorbeeld.
In mijn code vertel ik je moet element <strong> appenden in <p>, daarna <strong> zichtbaar maken.
Je hoeft helemaal niet de jQuery code uit te pluizen, heb ik nog nooit gedaan. Simpelweg trial en error. Je kan via inspectors zoals die in Chrome zit prima kijken wat er gebeurd met de elementen.
En zoals die datepicker, als je dit wilt veranderen kan je gewoon de css aanpassen ervan. Of je gebruikt jQuery om je eigen datepicker te maken, je bent nergens tot verplicht alleen heb je wel effe snel een werkende datepicker zonder dat je je druk hoeft te maken wat voor code er allemaal achter hangt.
Maar nog maals, joe hoeft het niet te gebruiken het is en blijft een optie.
Gewijzigd op 31/05/2015 16:29:15 door Johan K
Paco de Wulp op 31/05/2015 12:16:15:
... Ik wil géén overbodige tools leren, die wellicht niet echt nodig zijn...
...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...
...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...
Zolang je niets uitprobeert, zal je inzicht ook niet verbeteren.
Je hoeft ook niet iets 100% te kunnen doorgronden om het te kunnen gebruiken. Een gemiddelde automobilist weet ook niet hoe een verbrandingsmotor werkt, maar dat belemmert hem/haar niet om zich van A naar B te verplaatsen. Het is immers geen noodzakelijke voorwaarde.
Wat wel in zekere mate een noodzakelijke voorwaarde is, is een zekere hoeveelheid interesse / gezonde portie nieuwsgierigheid en die bespeur ik op dit moment niet echt in je reacties. Het blijkt in ieder geval niet uit je handelen.
Nou, als je het netto gaat bekijken, krijg je juist veel meer code. ;-)
Om jQuery te kunnen gebruiken, zul je eerst een script van zo'n 95 kB moeten includen. En in 95 kB 'gewoon' JavaScript kun je ook een heleboel doen...
Het is er dus waarom geen gebruik van maken.
Jquery is er niet alleen om leuke knopjes klikbaar te maken met een animatie maar ook AJAX requests kunnen worden gemaakt hiermee met simpele regels code.
Degene die het zwaar afkeuren blijven in hun tijd zitten naar mijn idee. Leer wat je kan leren want alles is mooie meegenomen, ook jquery.