Vanilla JS: $(selector)

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Innovatieve Senior .NET Developer

Organisatie Een van de grootste digital agencies van Nederland staat namelijk op het punt om een nieuwe vestiging te openen in regio Eindhoven. Dit zal een hub worden voor innovatieve nationale en internationale samenwerking met ’s werelds grootste multinationals. Hierbij wordt er gewerkt met de nieuwste technieken, van 3D-printen tot VR, en van chatbots tot AI. Je krijgt dus de mogelijkheid om te werken met de laatste cutting-edge technieken! Deze high-tech organisatie kenmerkt zich door middel van een open en relaxte sfeer. Er is weinig hiërarchie en een platte organisatiestructuur. Het team is enthousiast en gedreven. Waarbij de gemoederen hoog

Bekijk vacature »

Xamarin Developer

Functieomschrijving Ben jij de Xamarin expert die de volgende stap in zijn carrière wil zetten? Houd jij er van om veelgebruikte apps verder uit te bouwen terwijl je de kwaliteit blijft waarborgen en heb je daarnaast zelf innovatieve ideeën ? Lees dan snel verder! Samen met het gehele mobile app team ben jij verantwoordelijk voor: de (door)ontwikkeling van Native applicaties voor Android en iOS; het verder samenbrengen van de applicatie en de web omgeving; de innovatie van de applicatie, het is belangrijk dat jij zelf meedenkt en jouw ideeën voorlegt binnen het team; feedback vanuit de gebruikers te behandelen en

Bekijk vacature »

Senior .NET developer gezocht die graag in de zorg

Functieomschrijving Wil jij als .NET Developer als kartrekker in een Scrum team fungeren en je helemaal uitleven in de backend met C#? Krijg jij een grotere kick van high-security en high-availability dan van een gelikte frontend? Dan past deze functie jou perfect! Programmeren van high-availability en high-security applicaties in ASP.NET en C#; Samen met je teamgenoten nieuwe applicaties/diensten ontwikkelen in .NET; Overleggen met de informatie analisten en testers; Ontwikkelen van webservices (WCF); 20% van je tijd besteden aan innovatie; Deelnemen aan projecten om nieuwe ketenpartijen toe te voegen; Bouwen van unit testen; Deelnemen aan Scrummeetings. Functie-eisen Beschikt over HBO/WO werk-

Bekijk vacature »

Junior .NET Developer

Organisatie Leef jij voor muziek, heb je minimaal één jaar ervaring als .NET developer en ben je toe aan een nieuwe uitdaging omgeving Oss? Deze toonaangevende organisatie met ruim 15 jaar ervaring in de muziekbranche is klaar voor de internationale stap en zoekt daarom een ambitieuze webdeveloper. Het bedrijf zit gevestigd in Oss maar heeft wegens succes ook ambities wereldwijd te gaan, te starten in Australië, Engeland, Duitsland en binnenkort Amerika. Wanneer je in contact staat met dit bedrijf merk je dat er één gemeenschappelijke bindende factor is: Iedereen houdt onwijs veel van muziek. In het jonge team is dan

Bekijk vacature »

Medior .Net developer gezocht!

Vacature Omschrijving Wil jij je verder ontwikkelen als .Net developer? Bij deze klant van ons kom je te werken bij een bedrijf dat begonnen is in 1961 als architectenbureau. Dit bedrijf is zich ook gaan bezighouden als softwareontwikkelaar en dit is een groot succes geworden! Er werken ongeveer 80 werknemers en er heerst een platte organisatiestructuur. Functieomschrijving Ligt jouw hard bij het bouwen van complexe applicaties? Dan is dit de perfecte baan voor jou. Je gaat applicaties bouwen die gebruikt worden door woningcorporaties, huurders, huiseigenaren en aannemers. Bij elk nieuw project hoort een nieuwe configuratiesite die door jou samen met

Bekijk vacature »

Lead Developer

Organisatie Voor een groeiend bedrijf in Nijmegen ben ik opzoek naar een Lead 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 vindt 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 »

Front-end Developer / Machinebouw / Marktleider

Functieomschrijving Ben jij een Front-end Developer met affiniteit voor machinebouw? Lijkt het jou gaaf om samen met collega-ontwikkelaars te werken aan userinterfaces voor deze machines? Lees dan snel verder! Werken aan een zeer veeleisende omgeving en continu veranderende applicaties; Je participeert in diverse projecten ter bevordering van de kwaliteit en gebruikersgemak; Het ontwikkelen en onderhouden van userinterfaces; Het werken in een multidsciplinair scrumteam; Het analyseren van klantwensen om zo tot ontwerpeisen te komen; Het verlenen van service voor de ontwikkelde software. Functie-eisen Hbo werk- en denkniveau; Minimaal 2 jaar ervaring als Front-end Developer, Javascript Developer of Full-stack Developer; Je hebt

Bekijk vacature »

Lead Developer C# ASP.NET MVC

Functieomschrijving Wil jij als Lead Developer aan de slag bij een organisatie die trots is op het product wat zij in de markt zetten? Lijkt het jou leuk om naast ontwikkelen ook input te geven aan de verbetering van de bedrijfsprocessen in regio Den Haag/Delft? Lees dan snel verder over deze uitdaging! Ontwikkelen van websites en applicaties met C#, ASP.NET MVC; Zowel ontwikkelen op de back-end als op de front-end; Gebruikmaken van de modernste tools; Meedraaien in een scrumteam: peer reviews, daily standups, kennis overdragen en advies vragen; Input geven en meedenken over de verbetering van de bedrijfsprocessen; Op de

Bekijk vacature »

Java developer / Goede doelen organisatie

Java developer voor een goede doelen organisatie gezocht! Functieomschrijving Wil jij als Java developer bijdragen aan een betere wereld? Ben jij een developer die graag afwisseling in zijn werk heeft? Dan is dit de baan voor jou! Als software developer werk je in teamverband aan het bouwen en uitbreiden van diverse financiële applicaties, alsmede de koppeling met diverse externe leveranciers (ASP’s); Om aan de specifieke wensen, ingegeven door de doelstellingen van de klant, gehoor te geven worden de applicaties binnen de organisatie ontwikkeld en op maat gemaakt; Het hele Java EE spectrum van de web front-end, EJB’s tot aan de

Bekijk vacature »

Java Developer / Java EE frameworks / Inhouse (Clo

Functieomschrijving Ben jij een Java Developer met een zeer uitgebreide kennis van REST API's en wil jij graag werken aan uitdagende Inhouse projecten voor grote en bekende partijen in Nederland? Dan is dit de rol waarnaar jij op zoek bent! Binnen deze rol zal jij je als Java Developer aan de slag gaan voor een van de meest bekende bureaus op het gebied online platformen, een rol met veel afwisseling en voldoende technische uitdaging! Werken aan diverse en uiteenlopende projecten, waarbij je meer dan eens pionierswerk zal moeten verrichten; De mogelijkheden tot het toepassen van nieuwe technieken bespreken, beoordelen en

Bekijk vacature »

PHP & GoLang developer / Maatschappelijk belan

Houd jij je graag bezig met het ontwikkelen van software met de nieuwste technologieën (Go, Polymer, Docker, Kubernetes)? Vind je het leuk om samen met je team van gedreven developers te werken aan innovatieve concepten die daadwerkelijk impact hebben op de maatschappij? Dan ben ik op zoek naar jou. Deze platte en snelgroeiende organisatie heeft een passie voor het ontwikkelen van vernieuwende software. Dit doen zij samen met hun team van ca. 15 gedreven developers voor innovatieve start-ups, grote gemeenten en een series aan eigen projecten. Vanwege de toenemende groei aan projecten, zijn zij op zoek naar versterking in hun

Bekijk vacature »

Junior PHP developer

Organisatie Stel je voor; je schakelt binnen een van de meest toonaangevende organisaties binnen de zorg- en verzekeringsbranche. De informatie die feilloos door de zeer complexe applicaties stroomt die jij en je team elke dag weer perfectioneren is uiterst betrouwbaar. Jij bent dan ook een absolute PHP-held die zich kan vinden in het gezegde; ‘’onmogelijk bestaat niet, het kost alleen wat meer tijd’’. Je bekleed de rol van PHP developer binnen een team van absolute eindbazen op het gebied van software development. De producten en opdrachten zijn zeer divers, maar dat jij telkens weer diep in de code duikt verandert

Bekijk vacature »

Junior / Medior / Senior App developer

Vacature Omschrijving Het ontwikkelen van innovatieve mobiele zelfscanoplossingen voor de Food Retail (supermarkten) is een continu proces bij MDC. Naast het innoveren van bestaande oplossingen, zijn we volop bezig met de bouw van een geheel nieuw softwareplatform met de meest moderne “state of the art” technieken. Door onze sterk groeiende (inter)nationale klantenportfolio, onder andere door de sterke toename van het gebruik van Mobile Devices binnen de Retail, zijn wij per direct op zoek naar een Junior/Medior/Senior App Developer. Een overzicht van de ontwikkelde product protfolio van MDC is te vinden op de website van de exclusieve reseller Re-Vision. (www.re-vision.nl) Momenteel

Bekijk vacature »

Junior C# .NET developer / Medische sector /

Midden in een bosrijke omgeving ten Noorden van Utrecht ligt het hoofdkantoor van deze organisatie. Een absoluut unieke locatie voor de veeleisende ontwikkelaar die alleen genoegen neemt met het beste. Deze organisatie wordt gekenmerkt als een informele club developers die graag het beste in zichzelf en hun teamgenoot naar boven halen. Van een dagelijkse verse lunch tot uiteenlopende bedrijfsactiviteiten; deze organisatie heeft het allemaal! Ze zijn gespecialiseerd in software om het voor ziekenhuizen inhoudelijk overzichtelijk te maken hoe efficiënt hun processen verlopen. Hierbij ga je te werk in scrumteams van gemiddeld 5 personen, zodat jij met je team elke dag

Bekijk vacature »

Medior ASP.NET Developer

Bedrijfsinfo Als medior ASP.NET ontwikkelaar ga je aan de slag bij een van de meest toonaangevende softwareorganisaties van Nederland. Deze organisatie is gevestigd in Zoetermeer en is al ruim 15 jaar een bepalende speler in het ontwikkelen van software voor totaaloplossingen. Denk hierbij aan: websites, webshops, intranet en emailmarketing-applicaties. Zij zijn continue bezig om deze applicaties te blijven vernieuwen door de actuele ontwikkelingen in de markt in de gaten te houden. Dit wordt onderzocht en uitgevoerd door de Research & Development afdeling, deze afdeling heeft een grote overlap met de ‘reguliere’ ontwikkelafdeling. Dit bedrijf heeft haar pijlen gericht op de

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

22/08/2019 18:47:50
 

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.