Vanilla JS: $(selector)

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Java Full Stack Developer

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Full Stack Developers om ons development team te versterken. Als Full Stack developer werk je in Agile teams bij onze klanten en ben je verantwoordelijk voor alle lagen van de stack. Ben je beter in de backend, dan helpen we je verder met de front-end en andersom natuurlijk. Je gaat hoogwaardige software maken voor verschillende opdrachtgevers in jouw regio. Je ontwikkelt, adviseert over architectuur en past de nieuwste technologieën toe. Je bent een professional die het IT-vak serieus

Bekijk vacature »

Senior PHP ontwikkelaar met oog op lead rol

Bedrijfsinfo Deze organisatie is gevestigd in Eindhoven en telt zo’n 50 medewerkers. Zij leveren maatwerk web oplossingen voor een aantal grote klanten waarbij je kan denken aan bekende energieleveranciers, maar ook aan kleinere klanten. De projecten zijn erg divers en je kan ervan uitgaan dat er veel mensen mee in aanraking komen. Ondanks de grote klanten en de bekende namen zijn de lijnen binnen deze organisatie nog erg kort en voelt het nog altijd aan als een klein bedrijf. Er heerst een informele sfeer en er worden regelmatig bedrijfsborrels georganiseerd. Het is een erg open organisatie en dat is ook

Bekijk vacature »

Business Intelligence developer

Jij ben niet bang om hard te werken. Uitdagingen zijn welkom. En problemen? Die zijn er om opgelost te worden of, nog beter, om voorkomen te worden! Voor jij aan de slag gaat met het ontwerpen van BI- en DWH-oplossingen, leg je eerst je oor te luister bij de klant. Zo weet jij wat de klant wil, en hoe jouw ontwerp eruit moet komen te zien. Simpel! Althans… met jouw Developer-kwaliteiten wel! Over deze BI vacature Als Business Intelligence Developer ga je zowel op locatie bij de klant aan de slag, als op een van de Sogeti-locaties. Je analyseert de

Bekijk vacature »

PHP developer Midlance constructie

Jij hebt al een aantal jaren werkervaring in de PHP wereld en twijfelt over de stap naar freelance… Want hoe lekker is het als je in overleg met de eindgebruiker je tijden kan bepalen, je veel vrijheid hebt, bij alleen toonaangevende organisaties terecht komt en ook nog eens DIK betaald krijgt? Voor veel ontwikkelaars is dit toch net een stap te ver. Zij willen gewoon lekker code kloppen en zich niet bezig houden met het regelen van opdrachten, administratieve zaken of andere randzaken. Klinkt dit bekend? Wij bieden de middenweg! Wie zijn wij? Wij zijn niet het stereotype organisatie waar

Bekijk vacature »

Young Professional Front-end Developer

Jij weet wat er nodig is. Jouw hart gaat sneller kloppen van techniek. Jij wil vooruit. Vacature Front-end Developer per 1-7-2019 Je bent creatief, thuis in gebruikersinteractie en een gedreven developer in hart en nieren. Daarnaast heb jij een klantgerichte en proactieve houding. Precies de kwaliteiten die een Front-end Developer nodig heeft. Aan de slag als Young Professional Front-end Developer Als Front-end Developer werk je aan de technische realisatie van front-end (web)applicaties in de verschillende uitdagende opdrachten voor Sogeti’s klanten. Dit kan zowel op klantlocatie zijn, als intern bij Sogeti. Jij houdt van het uitdenken en implementeren van responsive (web)

Bekijk vacature »

.Net Custom Software Developer

Jouw rol Voor deze ‘leading edge’ technology practice zijn we op zoek naar een Senior Custom Software Developer. Echte IT-freaks die de ontwikkelingen in het vakgebied nauwkeurig volgen en weten wat er speelt. Die kunnen werken op de grens van het onmogelijke en zo onze nationale en internationale klanten een beslissende voorsprong geven in hun markt. Je adviseert over innovatie en werkt mee aan de agile ontwikkeling en implementatie van state-of-the-art oplossingen, gebaseerd op .Net, Java en/of Mendix. Het gaat vaak om nieuwe technieken, veel eindgebruikers en complexe omgevingen, waarin de lat hoog ligt. Snelheid en topkwaliteit zijn bij deze

Bekijk vacature »

Werken aan mooie SaaS producten? Wij zoeken PHP-er

Functieomschrijving Jij zal hier als software ontwikkelaar in een brede functie terecht komen waarbij je per project verschillende stukken van de software gaat programmeren. Je ontwikkelt de eindproducten echt samen met je collega's en zal dus erg goed moeten samenwerken. Technieken die gebruikt worden zijn momenteel voornamelijk PHP en Javascript waarbij er wordt gewerkt in een eigen framework. Ze zijn hier intern erg flexibel, er heerst een 'met beide benen op de grond' mentaliteit en als er iets gebeuren moet dan is dat binnen de kortste keren geregeld. Functie-eisen - HBO/WO werk- en denk niveau; - Enkele jaren ervaring op

Bekijk vacature »

ASP .NET Developer

Onze opdrachtgever in Alkmaar is een sterk groeiende, innovatieve onderneming in de zakelijke verzekeringswereld met een frisse kijk op online diensten aan zakelijke assurantiekantoren. Dit doen zij met een zelf ontwikkeld web platform. Dit platform biedt de verzekeringsadviseur toegant tot het verzekeringsassortiment van verschillende grote verzekeraars. Ze vormen een een divers en gedreven team bestaande uit ruim 20 medewerkers met ieder zijn specifieke IT kennis. Als ASP .NET Developer kun je bij hen veelzijdig aan de slag. Zij hebben een site in classic ASP, waarmee je eerst aan de slag gaat om deze te doorgronden. Op termijn wordt de hele

Bekijk vacature »

Medior Magento(2) Developer in ”Nimma”

Organisatie Voor een groeiend bedrijf in Nijmegen ben ik opzoek naar een Medior Developer. De organisatie is druk bezig met een professionaliseringsslag en daar kunnen ze wel wat extra kennis voor gebruiken. De afgelopen tijd heeft dit bedrijf haar krachten gebundeld met andere bedrijven om zo haar klanten volledig van dienst te kunnen zijn. Het huidige team vind het gaaf om voor dit bedrijf te werken omdat het erg dynamisch is, ze enkel met klanten werken die ook serieus een budget beschikbaar hebben ( €100.000 – €500.000+). Daarnaast werk je voor bedrijven waarvan de inkomstenbron afhankelijk is van de applicatie

Bekijk vacature »

.Net Custom Software Developer

Jouw rol Voor deze ‘leading edge’ technology practice zijn we op zoek naar een Senior Custom Software Developer. Echte IT-freaks die de ontwikkelingen in het vakgebied nauwkeurig volgen en weten wat er speelt. Die kunnen werken op de grens van het onmogelijke en zo onze nationale en internationale klanten een beslissende voorsprong geven in hun markt. Je adviseert over innovatie en werkt mee aan de agile ontwikkeling en implementatie van state-of-the-art oplossingen, gebaseerd op .Net, Java en/of Mendix. Het gaat vaak om nieuwe technieken, veel eindgebruikers en complexe omgevingen, waarin de lat hoog ligt. Snelheid en topkwaliteit zijn bij deze

Bekijk vacature »

Medior C# developer Traineeship

‘Wij willen goede engineers nog beter maken’ is een veelgebruikt gezegde binnen deze organisatie. Vanuit deze organisatie zijn ze op zoek naar de beste top 5% van de markt als het gaat om software ontwikkeling, motivatie en doorzettingsvermogen! Het probleem waar veel banken en verzekeraars tegen aanlopen is dat ze de transitie hebben gemaakt tot softwarehuizen. Om de kwaliteit te waarborgen worden de beste consultants ingehuurd en zijn ze gewend aan de hoge kwaliteit van inhuur. Het probleem is dat dergelijke bedrijven blijven zitten met een gigantisch kennisgat als deze consultants wegvallen. Daar speelt deze organisatie perfect op in door

Bekijk vacature »

Junior of medior .NET C# (web) ontwikkelaar gezoch

Ben je een junior of medior .NET C# ontwikkelaar en op zoek naar een nieuwe baan in Rotterdam? Een inhouse baan waar je werkt aan maatwerkapplicaties, direct contact hebt met klanten en samenwerkt met een leuk team van ontwikkelaars? Een baan waar je plezier haalt door de beste oplossing voor de klant te vinden? Wellicht dat deze organisatie dan iets voor jou is. Voor een software bedrijf in Rotterdam zijn we op zoek naar een .NET C# ontwikkelaar. Het bedrijf bestaat al meer dan 20 jaar en richt zich op het ontwikkelen van unieke software op maat (web, apps, desktop

Bekijk vacature »

Medior PHP Developer

Organisatie Wat deze Digital Agency onderscheid van de andere digital agencies in Amsterdam is de focus op technologie. Hier wordt design gecombineerd met innovatie en vakmanschap en zullen er altijd technisch hoogstaande producten worden opgeleverd. Deze organisatie bestaat nu ruim 8 jaar en is 24 man groot met een ontwikkelteam van 8 developers, waarvan meerdere ervaren senioren. Elke dag zijn zij bezig met het ontwerpen en ontwikkelen van digitale producten die er toe doen. Er wordt hier volgens de Agile methode gewerkt in kleine teams waarbij je ook regelmatig samenwerkt met de klant om kennis te delen. Deze toonaangevende digital

Bekijk vacature »

Innovatieve Junior/Medior PHP Developer

Organisatie Midden in het centrum van Breda staat een groot kantoorpand, waar hard gewerkt wordt om een groeiend platform internationaal uit te breiden. Op dit moment is dit bedrijf actief in Nederland, België, Spanje en UK. Zij bestaan nog niet zo vreselijk lang maar dit project staat intern bekend als innovatief en baanbrekend, er is weinig concurrentie in de markt en weten zichzelf te onderscheiden doordat ze een breed aanbod hebben. De organisatie bestaat uit 60 medewerkers. Het Ontwikkel team bestaat op dit moment uit 2 ontwikkelaars en een product Owner. Vanuit het team is er veel vertrouwen in de

Bekijk vacature »

Junior C# .NET software developer

Organisatie Dit familiebedrijf is gevestigd in de omgeving van Den Bosch en is al ruim 30 jaar actief. Deze organisatie heeft een unieke en eigen zoektechnologie ontwikkeld. Deze technologie wordt onder andere gebruikt door gemeenten en overheden. Het hoofdkantoorgebouw van deze organisatie is een zeer modern complex met een open cultuur. Je merkt aan alles dat dit een familiebedrijf is. Iedereen maakt gezellig een praatje met elkaar en de directeur is bijna dagelijks op de vloer te vinden. De directeur kent de namen van alle medewerkers. Zelfs kent hij in de meeste gevallen de namen van de partners en kinderen

Bekijk vacature »
Inter Kode

Inter Kode

20/06/2016 13:53:05
Quote Anchor link
Hey,

jQuery $() selector in vanilla JS:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php //Javascript
// Main selector

function $(selector) {
  // Initialize array to store element(s)
  var array = [];
  // If there are multiple selectors we split by ','
  var selectors = selector.split(','), i;
  // Loop over each selector
  for (i = 0; i < selectors.length; i++) {
    // Convert the node list to an array and append the array
    array.push.apply(array, Array.prototype.slice.call(document.querySelectorAll(selectors[i].trim())));
  }

  // If our array has 1 or more elements return the whole array, else we only return the single element
  return array.length > 1 ? array : array[0];
}

?>

Minified 171 bytes :P
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
function $(t){var e,r=[],l=t.split(",");for(e=0;e<l.length;e++)t=l[e].trim(),"#"==t.substr(0,1)&&!t.indexOf(" ")>=0?r.push(document.getElementById(t.substr(1))):r.push.apply(r,Array.prototype.slice.call(document.querySelectorAll(t)));return r.length>1?r:r[0]}
?>

Gebruiksaanwijzing:
Quote:
$('#id');
$('.class');
$('button > span');
$('#id, .class, button > span');

En bij meerdere elementen krijg je een array terug.

Ik dacht ik deel dit zodat andere mensen dit kunnen gebruiken of te verbeteren.
Hoor graag jullie mening!

Extra!
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php

Element.prototype.hide = function() {
  this.style.display = 'none';
}

Array.prototype.each = function(callback) {
  var
i = this.length;
  while(i--) {
    callback(this[i], i);
  }
}


//$('.foo').each(function(e) {
// e.hide();
//});


?>
Gewijzigd op 20/06/2016 15:14:27 door Inter Kode
 
PHP hulp

PHP hulp

25/04/2019 04:57:40
Honeypot
 

20/06/2016 14:09:13
Quote Anchor link
Ben het er mee eens. Ik heb me vroeger zo min mogelijk in JavaScript proberen te verdiepen, omdat ik dat inferieur achtte. En toen was JavaScript ook lastig, iedere browser had z'n eigen uitwerkingen. In die tijd kwamen er libraries als jQuery. Het is nu zelfs zo erg dat Microsoft z'n eigen JavaScript-stijl heeft uitgebracht onder de naam TypeScript. Ik snap het wel, maar als je voor iedereen (lees: moderne browsers) JavaScript wilt kunnen programmeren dan moet jQuery niet nodig zijn. Ook al zitten daar toch wel handige features in. ECMA-script is nu zo gestandaardiseerd met HTML5 dat het voor kleinere projecten ook helemaal niet nodig is om libraries te gebruiken. Dus je idee is een leuke aanvulling op het spectrum, scheelt weer zoeken als we minder 'verbose' JavaScript willen.
 
Inter Kode

Inter Kode

20/06/2016 14:18:35
Quote Anchor link
Klopt helemaal, als je aan mij vraagt waarom ik jQuery gebruik in productie is dat alleen voor cross-browser compatibility.
Mijn script is ook nog niet helemaal af want er is 1 functie die dus niet cross-browser is.
http://caniuse.com/#search=getElementsByClassName
IE8, hier moet ik nog even wat op verzinnen
Gewijzigd op 20/06/2016 14:19:53 door Inter Kode
 

20/06/2016 14:21:14
Quote Anchor link
IE8? Zou ik laten ziten. Kijk maar eens naar de usage statistics op caniuse.com voor Nederland. Ruimschoots onder de 1%. IE8 is dood aan het gaan en zo moet het ook zijn. Eindelijk gerechtigheid! :-)
 
Inter Kode

Inter Kode

20/06/2016 14:27:22
Quote Anchor link
Haha, ik heb toch even me script geupdate en zou nu cross-browser compatible zijn :-)
 

20/06/2016 14:30:24
Quote Anchor link
Soms zou ik graag bij de 1,2 miljoen Nederlanders horen die geen internet willen en/of kunnen gebruiken...
 
Wouter J

Wouter J

20/06/2016 15:39:35
Quote Anchor link
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
$=(s,e)=>{return(e||document).querySelectorAll(s);};

Moet je browser wel ECMA6 ondersteunen overigens, anders:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
$=function(s,e){return(e||document).querySelectorAll(s);};


mocht je het tweede argument nooit gebruiken kan t nog simpeler:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
var $ = document.querySelectorAll.bind(document);





Vaak gebruik ik zelf:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
(function ($, $$) {

    // ... mijn code

})(
    function (selector, elem) { return (elem || document).querySelector(selector); },
    function (selector, elem) { return (elem || document).querySelectorAll(selector); }
);
Gewijzigd op 20/06/2016 15:46:02 door Wouter J
 
Inter Kode

Inter Kode

20/06/2016 23:54:00
Quote Anchor link
jQuery in a vanilla JS nutshell

Code (js)
PHP script in nieuw venster Selecteer het PHP script
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
function $(selector) {
  var array = [];
  var selectors = selector.split(',');
  for (var i = 0; i < selectors.length; i++) {
    selector = selectors[i].trim();
    if (selector.substr(0,1) == '#' && !selector.indexOf(' ') >= 0) {
      array.push(document.getElementById(selector.substr(1)));
    }
else if (selector.substr(0,1) == '.' && !selector.indexOf(' ') >= 0) {
      array.push.apply(array, document.getElementsByClassName(selector.substr(1)));
    }
else {
      array.push.apply(array, [].slice.call(document.querySelectorAll(selector)));
    }
  }

  return array.length > 1 ? array : array[0];
}

function setCookie(name, value, days){
  document.cookie = name + '='+ value + '; expires=' + new Date((new Date).getTime()+days*24*60*60*1000).toUTCString() +'; path=/';
}

function deleteCookie(name){
  createCookie(name,'',-1);
}

function getCookie(name){
  var cookie = document.cookie.match('(^|;)\\s*'+name+'\\s*=\\s*([^;]+)');
  return cookie ? cookie.pop() : null;
}

String.prototype.contains = function(value) {
  return this.indexOf(value) >= 0;
}

Element.prototype.hide = function() {
  this.style.display = 'none';
}

Element.prototype.show = function() {
  this.style.display = '';
}

Element.prototype.disable = function(value) {
  return value == null ? this.disabled : this.disabled = value;
}

Element.prototype.check = function(value) {
  return value == null ? this.checked : this.checked = value;
}

Element.prototype.src = function(value) {
  return !value ? this.src : this.src = value;
}

Element.prototype.css = function(value) {
  return !value ? this.style : this.style = value;
}

Element.prototype.data = function(name, value) {
  return !value ? this.getAttribute('data-' + name) : this.setAttribute('data-' + name, value);
}

Element.prototype.val = function(value) {
  return !value ? this.value : this.value = value;
}

Element.prototype.html = function(value) {
  return !value ? this.innerHTML : this.innerHTML = value;
}

Element.prototype.text = function(value) {
  return !value ? this.textContent : this.textContent = value;
}

Element.prototype.empty = function() {
  this.innerHTML = '';
}

Element.prototype.append = function(value) {
  this.innerHTML += value;
}

Element.prototype.prepend = function(value) {
  this.innerHTML = value + this.innerHTML;
}

Element.prototype.hasClass = function(value) {
  return this.classList.contains(value);
}

Element.prototype.addClass = function(value) {
  this.classList.add(value);
  return this;
}

Element.prototype.removeClass = function(value) {
  this.classList.remove(value);
  return this;
}

Array.prototype.each = function(callback) {
  for (var i = 0; i < this.length; i++) {
    callback(this[i], i);
  }
}
[
code]
Gewijzigd op 20/06/2016 23:55:05 door Inter Kode
 

01/07/2016 11:01:23
Quote Anchor link
Ik geloof dat jullie code bewijzen dat jQuery overbodig is tegenwoordig :)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.