Vanilla JS: $(selector)

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Traineeship junior programmeur

Zoek jij een stevige uitdaging en de mogelijkheid om veel nieuwe dingen te leren in een dynamisch vakgebied? Doe mee aan ons IT Professional Program en ontwikkel jezelf tot software engineer! Je begint met een opleidingstraject van 2-4 maanden. Hierin ga je aan de slag met verschillende technieken die je op conceptueel niveau leert te overzien en interpreteren. Onderwerpen die aan bod komen zijn o.a. programmeren (Java/C#/Python), Object Oriëntatie, Databases, Webservices & webtechnologieën, Domain Driven Design en Continuous Integration/Continuous Delivery. Sommige van deze onderdelen sluit je af met een examen en bijbehorende certificering. Na de opleidingsperiode start je bij één

Bekijk vacature »

Junior+ Medior Backend PHP

Organisatie Met 10 man sterk maakt deze organisatie de gaafste campagnes. Een campagne maken duurt gemiddeld 6 tot 8 weken waarna de campagne vervolgens ook 6 tot 8 weken online zal zijn. Dit doet deze organisatie niet alleen voor grote merken zelf maar ook voor Nederlands grootste reclame bureaus. Naast de campagnes wordt er ook veel gebrainstormd over eigen projecten en producten en is deze organisatie bezig om ook hun eigen product te lanceren. Bij deze organisatie vind iedereen het heel belangrijk om ook genoeg tijd voor hun privé leven te hebben, daarom wordt er lang niet iedere week een

Bekijk vacature »

Java Developer

Java Developer Voor een van mijn opdrachtgevers is de regio Utrecht ben ik op zoek naar een ervaren Java Developer. Als ervaren Java ontwikkelaar kom je terecht in een complexe omgeving waarin nauw wordt samengewerkt. Binnen dit project zal je gaan werken aan de nieuwbouw van diverse applicaties. Bij deze opdrachtgever is er ruimte voor eigen initiatief en de inbreng van nieuwe toolings en technieken. Gewenste ervaring Java Hibernate Maven Spring Boot Docker Jenkins Jira Confluence Git Agile / Scrum Algemene informatie Locatie: regio Utrecht Duur: 6 maanden met optie tot verlenging Uren per week: minimaal 32/ maximaal 40 uur

Bekijk vacature »

Senior .Net Developer Doorgroeimogelijkheden Cloud

Senior .Net Developer Doorgroeimogelijkheden Cloud Wat ga je doen als Senior .Net developer? Bij deze IT organisatie in Utrecht ga je als senior .Net developer werken aan innovatieve en complexe oplossingen. Je levert een waardevolle bijdrage aan het ontwikkelen van applicaties voor klanten zoals de Tilburg University, GVB, IBM, de SVB, Ziggo, de NS, Telegraaf Media Groep en BNP Paribas Group. Zo houd je je bezig met de ontwikkeling van accelerated application development om platformen voor deze klanten op te zetten. Dit heeft het doel om kosten efficiënt maatwerk applicaties te leveren, zoals de Ziggo Go app om online TV

Bekijk vacature »

PHP Developer die wel een bakkie pleur lust&hellip

Een ras echt Rotterdams bedrijf. Dat is hoe deze organisatie het best omschreven kan worden. Als strategisch-creatief internetbureau bieden zij oplossingen voor internetvragen van hun klanten. Dit gaat van het creëren van een nieuwe corporate identity, social mediastrategie en het bouwen van complete webshops en apps. Het complete pakket. Door de combinatie van grafische en interactieve concepten komen zij tot een uitstekende technische realisatie waar hun klanten gelukkig van worden. Het team bestaat uit zowel strategische als creatieve specialisten. Daarnaast wordt er ook veel samengewerkt met externe partijen, om zo de best mogelijke oplossingen te bieden. Functiebeschrijving Als PHP developer

Bekijk vacature »

Medior C# .NET developer gezocht

Organisatie Voor een van mijn businesspartners in de regio van Nijmegen ben ik op zoek naar een medior C# developer. Dit bedrijf ontwikkelt, als volwaardig Microsoft Partner, softwareoplossingen voor onder andere het onderwijs en de sportbranche. Denk bij het onderwijs aan bijvoorbeeld digitale leestesten, examenplanners en plagiaatherkenning, en bij de sportbranche aan sportplanregistratie. Het is een van de oudste IT dienstverleners van Nederland, waar momenteel ongeveer dertig mensen werkzaam zijn. Op de werkvloer heerst een nuchtere en informele sfeer. Voor elke werknemer wordt een persoonlijk ontwikkelingsplan opgesteld, waarin wordt vastgesteld wat jouw ambities zijn en hoe je dit gaat bereiken.

Bekijk vacature »

Als Fullstack Developer aan de slag voor de groots

Wil jij met een kleine hechte groep werken voor de allergrootste bedrijven? Zoek dan niet verder! Deze partij uit Rotterdam is rond 1990 klein begonnen, maar ondertussen uitgegroeid tot een reus die 98% van de markt bediend. Samen met zo’n 15 gedreven collega’s werk je aan de software om klantcontact tussen bedrijf en consument mogelijk te maken. Denk hierbij aan wachtrijbeheer, kalender koppelingen, sms-diensten, terugbelverzoeken en de uitgebreide realtime statistieken die hierbij horen. Naast het stroomlijnen van één-op-één-communicatie tussen bedrijf en consument is dit bedrijf gespecialiseerd in de software voor onder andere voting-diensten voor tv-programma’s en bel & win acties.

Bekijk vacature »

Medior PHP developer Hostingbranche

Organisatie Onze partner uit de omgeving van Rotterdam is opgericht in 2000 en beheert ruim tienduizenden websites en is met ruim 190.000 domeinnamen een van de grootste cloud en hostingproviders van Nederland. Hun missie is om de online ambities van klanten waar te maken en werkt met het gehele team aan een zo goed mogelijke klantbeleving. Zij leveren domeinnamen, shared webhosting, Virtual Private Servers, e-mailhosting en online back up aan zzp-ers en MKB bedrijven. Op dit moment zorgen zij met hun team van 25 medewerkers ervoor dat zij hun missie waar kunnen maken. Functie Als medior backend PHP developer werk

Bekijk vacature »

Full-stack starter/junior C# software programmeur

Organisatie Voor een van mijn business partners uit Arnhem ben ik momenteel op zoek naar een starter/junior C# programmeur. Arnhem is de standplaats, maar ze zijn ook actief in Duitsland en Oostenrijk. Het doel is om zo snel mogelijk meerdere landen te bereiken. Het bedrijf is in 2014 gestart met een missie om ouderen en minder-valide mensen actiever te maken door middel van audio, video en spelletjes. De 12 werknemers dragen dagelijks bij aan producten die een steentje bijdragen aan het actiever maken van ouderen en minder-validen. Binnen het bedrijf is een jong team werkzaak en is de sfeer open

Bekijk vacature »

Fullstack Webdeveloper Emailmarketing 2.500 - 4.00

Functieomschrijving Fullstack Webdeveloper Amsterdam Emailmarketing 2.500 - 4.000 Voor de vacature als Fullstack Webdeveloper Amsterdam Emailmarketing ga je het volgende doen: Je werkt zowel in teamverband als zelfstandig aan uitdagende online marketingprojecten. Dagelijks werk je aan het ontwikkelen van volledige email campagnes voor grote merken. Naast HTML snap je data of wilt er heel veel meer over leren. Marketing automation is je ambitie en jij snapt waarom wij data en marketing engineers zijn. Daarnaast ben je goed in staat onze klanten verder te helpen. Je adviseert ze hoe ze het maximale uit hun online campagne kunnen halen en waakt over

Bekijk vacature »

SQL Ontwerper

Voor ons BI team in Leusden zijn wij op zoek naar een ervaren en gedreven SQL Developer/BI Informatie Analist. In deze rol help je met BI en DWH concepten, technieken en gereedschappen om onze organisatorische besturingsvraagstukken op te lossen. Informatie Je bent verantwoordelijk voor de analyse van business processen. En de vertaling hiervan naar een concrete, consistente en betrouwbare informatievoorziening. Ook ben je mede verantwoordelijk voor de procesinrichting en -bewaking rondom het vergaren en bewaken van externe data. Daarnaast ontwerp, ontwikkel, documenteer en implementeer je concrete oplossingen zoals ETL packages in MS SQL, managementdashboards en -rapportages en analyse-omgevingen. Je bent

Bekijk vacature »

Front-end Developer met affiniteit voor auto&rsquo

Deze overkoepelende organisatie voor verschillende auto gerelateerde organisaties is op zoek naar een creatieve front-end developer. Een van de organisaties waar jij voor zal gaan werken is de grootste occasiondealer van Nederland, met in totaal 8 vestigingen. Op jaarbasis worden er maar liefst 7.500 occasions verkocht, met een wisselende voorraad van bijna 1.500 jong gebruikte auto's. Jij gaat als Front-end developer er aan bijdragen dat de klanten enerzijds de beste ervaring hebben met de verschillende organisaties en anderzijds dat de organisaties zo efficiënt en effectief mogelijk kunnen functioneren. Functiebeschrijving Jij bent als Front-end developer werkzaam in een team van 4

Bekijk vacature »

Innovatieve web based C# ASP.NET developer

Bedrijfsinfo Momenteel ben ik op zoek naar een gedreven en creatieve ontwikkelaar die ervaring heeft met C# en web based applicaties. Je gaat werken bij een organisatie die uitsluitend gespecialiseerd zijn in het leveren van maatwerk oplossingen voor klanten op het .NET platform. Deze organisatie telt 40 werknemers en zij werken vanuit 2 vestigingen in Nederland. Deze organisatie werkt voor vele top klanten in Nederland. Functie Je taak als software engineer bestaat voornamelijk uit het programmeren. Naast het programmeren hou je je bezig met het opleveren van verschillende web based applicaties. Je werkt zowel individueel als in multidisciplinaire teams om

Bekijk vacature »

.NET Ontwikkelaar C# 2 2.500 - 5.000

Functieomschrijving .NET Ontwikkelaar Almere C# 2.500 - 5.000 Voor de vacature als .NET Ontwikkelaar Almere C# ga je het volgende doen: De kandidaat die wij zoeken is een.Net ontwikkelaar die in staat is zelfstandig nieuwe functionaliteiten te ontwikkelen en op de hoogte is en blijft van de nieuwste ontwikkelingen. De taken zijn afwisselend en je houdt je bezig met de modernste systemen en technieken. Je bent werkzaam in een team van ervaren ontwikkelaars. Je denkt actief mee bij het ontwikkelen van nieuwe of het aanpassen van bestaande klantapplicaties. Je werkt afwisselend zelfstandig of in multidisciplinaire SCRUM teams. Ter versterking van

Bekijk vacature »

PHP Software Ontwikkelaar Javascript 2.700 - 4.300

Functieomschrijving PHP Software Ontwikkelaar Javascript 2.700 - 4.300 Voor de vacature als PHP Software Ontwikkelaar Den Hout Javascript ga je het volgende doen: Typisch jouw werkdag: vandaag is het vrijdag, de laatste dag van de week én de laatste dag van de sprint. Je rijdt vol goede zin richting het kantoor om nog 1 dag samen met je collega’s te knallen om de sprint af te krijgen. Na een goede kop koffie starten jullie met de daily stand-up. Hierin bespreek je wat je gisteren gedaan heb, eventuele blokkades waar je tegenaan bent gelopen en wat je vandaag gaat doen om

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

19/10/2018 16:40:14
 

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.