Vanilla JS: $(selector)

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

.NET Software Ontwikkelaar

De baan Als Backend Developer werk je aan ons product Twinfield. Een product dat een slimme samenwerking tussen Ondernemers en Accountants mogelijk maakt. Jij bent een vakman die Clean Coding hoog in het vaandel heeft. Je werkt in een team dat verantwoordelijk is vanaf ontwerp tot en met deployment. Samen met je Product Owner, je team en direct belanghebbenden stel je de Product Backlog op. 2 keer per jaar doen we dat met alle teams uit de hele wereld op 1 plek door middel van een Big Room Planning. Je werkt niet alleen de Product Backlog af, maar kijkt verder

Bekijk vacature »

Senior C# Developer gezocht die wil werken met de

Deze internationale partner met meer dan 25 jaar specialisatie en 30 medewerkers, kenmerkt zichzelf als een sterke partner voor diverse grote financiële softwarepakketten. Er wordt gewerkt vanuit een mooi en modern kantoorpand in de omgeving van Den Haag en de lijnen onderling zijn erg kort. Zo loopt de directeur regelmatig rond op de werkvloer en worden er daarnaast regelmatig leuke bedrijfsuitjes georganiseerd. Functie Jij gaat aan de slag in een ontwikkel team met drie senior .NET ontwikkelaars met allen hetzelfde gewicht op het gebied van kennis en ervaring. Voor jou als ontwikkelaar betekent dit dat jij goede en sterke sparringpartners

Bekijk vacature »

Senior .NET developer die denkt in online toepassi

Deze snelgroeiende organisatie zoekt een senior .NET developer die met collega’s op een hoog niveau het fundament voor diverse applicaties legt. Deze applicaties zijn bedoelt voor organisaties in de media en advertising wereld. In de bijna 10 jaar dat deze onderneming actief is, is er een stabiele basis gelegd en blijft deze hard groeien. De sfeer is open en informeel en doordat de organisatie een platte structuur kent met korte lijnen kan er snel geschakeld worden. Functie-omschrijving Er zijn twee afdelingen binnen de organisatie te weten de klantenservice en het development team. Jij gaat in het development team een belangrijke

Bekijk vacature »

Drupal Front-end Developer Meedenken met de organi

Beeld je eens in dat je op een zachte lentedag fluitend in je korte broek binnen komt wandelen. Bij binnenkomst wordt je begroet door de servicebalie medewerker en stap je de lift in naar de eerste verdieping. Nog genietend van het deuntje wat te horen was in de lift loop je binnen in een open ruimte waar jij jouw directe collega’s gezellig een babbeltje ziet maken. Tegelijkertijd hoor je het geluid van de keu die tegen de witte bal stoot op de pooltafel. Naast de Pooltafel zie je een game-hol en een dartbord hangen. Daarachter zie je jouw 15 collega’s

Bekijk vacature »

Medior Fullstack .NET Developer Web Development

Organisatie: Voor een van PHIND’s businesspartners zijn wij opzoek naar een .NET fullstack developer. Het betreft een van de toonaangevende spelers op de markt en wilt steeds blijven innoveren. Opdrachtgevers bestaan uit onder andere uit Eneco, Phillips, de Hartstichting en de Efteling. De organisatie heeft de afgelopen tijd zich weten te bundelen met andere spelers op de markt om zo hun slagkracht te vergroten en zo ook mee te spelen op het internationale toneel. Inmiddels telt de organisatie ruim 100FTE waarvan er ongeveer 80 developers werkzaam zijn in Nederland verdeeld over 2 locaties. De overige 20 developers zijn werkzaam in

Bekijk vacature »

Client-side developer vacancy, building well archi

The company: For our client, a small company working for huge e-commerce parties we are looking for a medior or senior level developer focusing on Front-end development. Nowadays, more than 50% of e-commerce is taking place on mobile devices. To help them deliver a great user experience this company created a platform that is focusing on mobile e-commerce. They created a way to build a high-quality native retail app based on the existing look & feel. Because they always want to push to the limits in ways of ease of use the front-end plays a vital role in their dev

Bekijk vacature »

Senior PHP developer verzekeringenbranche

Organisatie Een van Nederlands grootste verzekeringsmaatschappijen is opzoek naar een goede PHP developer. De organisatie is zo’n 220 man groot en heeft een development team van 15 developers. De IT afdeling speelt een belangrijke rol binnen de organisatie. De klanten regelen steeds meer online en veel is een geautomatiseerd proces. Deze grootschalige verzekering is gespecialiseerd in de auto, reis, aansprakelijkheid, inboedel, zorg, studentenzorg, woonhuis pechhulp, rechtsbijstand en annuleringsverzekeringen. Met bijna 300.000 klanten behoren zij tot de absolute top! Functie Als senior PHP developer bedenk je niet alleen nieuwe functionaliteiten, je gaat ze ook daadwerkelijk ontwikkelen. Je perfectioneert de technologie die

Bekijk vacature »

Technisch IT trainee

Technisch IT trainee De basis leggen voor jouw IT-carrière Ben jij net of bijna afgestudeerd maar nog niet klaar met leren? Zie jij jezelf werken als engineer met opdrachten op het gebied van Linux-infrastructuren, Cloud, Programmeren en Configuration Management? Dit uitdagende IT-traineeship van Snow geeft binnen 7 maanden een vliegende start aan jouw IT-carrière! De combinatie van theorie en praktijk zorgt voor ijzersterke technische skills én professionele vaardigheden. Nergens anders ontwikkel jij jezelf zo snel. Op maat gemaakt Je stelt samen met je coach een persoonlijk ontwikkelplan op. Met de keuze uit meerdere trainingen en workshops kies je jouw weg.

Bekijk vacature »

PHP developer? En op zoek naar variatie in de e-co

Dit full services internetbureau bestaat vijf jaar. Het bedrijf is in een korte periode heel erg succesvol geworden. Dit komt door de fantastische mensen die daar werken. Ze boeken met elkaar het één na het andere resultaat. Ze krijgen mooie opdrachten van internationale klanten en daar behoort ook webshops maken in Magento. Het is de bedoeling dat je met Magento de schaalbaarheid en flexibiliteit biedt die nodig is om een webshop te laten groeien. De bedoeling is dat je jouw ideeën vertaalt naar mooie oplossingen en dat je in staat bent om de bestaande markt op het gebied van online

Bekijk vacature »

Senior Java Ontwikkelaar

Functieomschrijving Samen met multidisciplinaire teams ben je bezig met ontwikkelen van software geschreven in Java. Er wordt gebruik gemaakt van DDD en hebben een SOA architectuur. Daarbij zijn ze ook bezig met Continuous Integration. Ontwikkelen van nieuwe functionaliteiten; Onderhoud en probleem analyse; Meedenken en adviseren over de architectuur; Software aanpassen tbv wijzigingen in wet en regelgeving. Functie-eisen Minimaal hbo werk en denk niveau; Minimaal 5 jaar werkervaring als Java ontwikkelaar; Ervaring met Continuous Integration; Locatie/Standplaats Vianen Bedrijfsomschrijving Dit bedrijf bevindt zich op Flevoland en bedient klanten door heel Nederland. Samen met jouw collega zorg jij ervoor dat hun product optimaal

Bekijk vacature »

Medior Fullstack developer Tech bedrijf

Voor deze gave organisatie in Amsterdam zijn we op zoek naar goede full stack developers die dit geweldige team van developers wilt gaan versterken. De organisatie is zo’n 40 man groot en heeft op dit moment een development team bestaande uit 10 ontwikkelaars. Niet gek dat elke developer die hier werkt enthousiast is over de organisatie. Zij zitten namelijk in de luxe positie alleen toffe projecten aan te nemen waar ze achter staan. Het is voor hun belangrijk dat de projecten leuk en technisch uitdagend genoeg zijn zodat alle ontwikkelaars hun passie kwijt kunnen. Naast dat ze aan projecten voor

Bekijk vacature »

Medior Java Scala Developer

Jouw baan: Medior Java Scala Developer Amsterdam Vind je het leuk om Java en Scala te combineren met het werken aan systemen die een grote impact hebben? Ben jij iemand die graag direct schakelt met de business en zo direct feedback krijgt? Wil je meer leren over puur functioneel programmeren en het bouwen van schaalbare systemen? Hoe zou je het vinden om te werken met Java8, Spring, Scala, Akka, Microservices, Kafka, Cassandra, Docker en CI / CD-automatisering? Wacht dan niet langer, dan kan dit de baan zijn voor jou! Jouw werkgever: Bouwen de technologie die meer dan 80 miljoen mensen

Bekijk vacature »

Een Medior PHP developer met affiniteit voor truck

15 jaar geleden is dit familiebedrijf gestart als een kleine onderneming, nu is het uitgegroeid tot de grootste van Europa binnen hun markt. Het bedrijf valt onder een grote holding met vestigingen in zowel Nederland als in Duitsland. Het is voor hun essentieel dat op een gestructureerde manier gewerkt wordt. Hierin speelt automatisering een zeer belangrijke rol. Met een zeer uitgebreide database van een half miljoen klanten, iedere maand 200.000 websites bezoeken en met behulp van geautomatiseerde tools is automatisering van het hart van het bedrijf. Een team van vijftien programmeurs werk voortdurend aan optimalisering van het in- en verkoopproces.

Bekijk vacature »

PHP Developer voor een leuk bedrijf & werken m

Zo een 13 jaar geleden werd het bedrijf opgericht. Het zijn twee bedrijven die zijn gefuseerd, waaruit één bedrijf is ontstaan. Het ene bedrijf was gespecialiseerd in het maken van reclame en het andere bedrijf was een communicatiebureau. Met de komst van het internet veranderde een hoop. Online marketing werd een ding en daaruit is dit bedrijf voortgekomen. Anno 2016 staan ze bekend als een full-service internetbureau, die dus websites, webapplicaties, software en mobiele apps bouwen. Achter deze ontwikkelingen hebben ze natuurlijk ook gedacht over hoe ze de boodschap vanuit de klant het best in de websites en dergelijke zaken

Bekijk vacature »

Front-end developer - Eindhoven

Front-end developer Eindhoven Ben jij opzoek naar een baan in Eindhoven met veel afwisseling, waarin je je creativiteit kwijt kan en met je eigen ideeën aan de slag kan? Dan is dit de baan voor jou! Wij zijn opzoek naar een front-end developer met ervaring die graag: - Wil leren en wil groeien - Met verschillende klanten wil werken (met de mogelijkheid om in-house te werken!) - In een hecht, sociaal en energiek team wil werken - Vrijheid, zelfstandigheid en verantwoordelijkheid wilt hebben Als frontend developer ga je samen met backend developers, interaction designers, functional designers, projectmanagers en scrummasters proactief

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

14/12/2018 12:27:12
 

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.