Vanilla JS: $(selector)

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Front-End Developer

Functieomschrijving Omdat onze opdrachtgever blijft groeien, zijn we op zoek naar een medior Front-End Developer. Je gaat deel uitmaken van het UX/UI team dat verantwoordelijk is voor webportals en -applicaties. Daarnaast werk je regelmatig samen met andere (internationale) back- en front-end teams. Jouw vertrekpunt is het prototype opgeleverd door de UX/UI Designer. Je transformeert prototypes met mooie grafische afbeeldingen in en met code. In gesprek met de backend worden alle animaties en afbeeldingen omgezet in semantisch HTML, CSS (SASS) en JavaScript. Als Front-End Developer ben je vanaf het begin van de creatie van een webapplicatie betrokken, en ontwikkelt zo de

Bekijk vacature »

Traineeship junior software developer

Zoek jij een stevige uitdaging en de mogelijkheid om veel nieuwe dingen te leren in een dynamisch vakgebied? Doe mee aan ons IT Traineeship en ontwikkel jezelf tot software engineer! Je begint met een opleidingstraject van 2 tot 4 maanden binnen de Sogyo Academy. 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

Bekijk vacature »

PHP Back-end Developer

FarMedvisie is een snel groeiend ICT-bedrijf in de zorgsector, dat zich bezighoudt met medicatieveiligheid. FarMedvisie is gevestigd op loopafstand van het treinstation van Woerden. De komende jaren ligt de focus op doorgroei, o.a. door nog intensiever samen te werken met onze klanten en apothekers in de zorgketen en door met hen onze dienstverlening te optimaliseren. Teneinde deze ambitie waar te maken, zoeken wij een: Voor op onze locatie in Woerden, 28 min van Amsterdam zoeken wij een PHP Back-end developer (M/V) Bij FarMedvisie werken wij dagelijks hard aan het verbeteren van medicatieveiligheid. Dat doen wij met ons moderne medicatievoorschrijf- en

Bekijk vacature »

Senior developer / Microservices / SOAP / REST / U

Functieomschrijving Ben jij een kenner op het gebied van Microservices? Heb jij ervaring met het bouwen van koppelingen met SOAP en REST? En wil jij graag betrokken worden bij het opzetten van een nieuwe architectuur? Lees dan snel verder! Bijdragen aan de nieuwe Microservices architectuur; Ontwikkelen van webservices op basis van SOAP en REST; Opzetten van externe services van derde partijen; Werken binnen een Agile/Scrum team; Nieuwe technische ontwikkelingen bijhouden en eventueel implementeren. Functie-eisen Minimaal een afgeronde hbo opleiding; Ervaring met het opzetten van een Microservices architectuur; Goede kennis van webservices op basis van SOAP en REST: Kennis van Java

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 »

Android Developer

Voor een klant van Computer Futures ben ik per direct op zoek naar een Android developer in de omgeving Apeldoorn. Ben jij op zoek naar een project waarbij je werkt met een tastbaar product en hierin zorgt voor de communicatie tussen de applicatie en het product. Je zal komen te werken in het Mobile Android team van de klant en zal aan een applicatie gaan werken die zowel nationaal als internationaal gelanceerd gaat worden. Aanvullende info : - Omgeving Apeldoorn - ASAP starten - 6 maanden (optie tot verlenging) - Nederlands en Engelstalig - Uitdagend project voor een grote klant!

Bekijk vacature »

.Net front-end Developer

Wat je gaat doen: Of beter nog, wat wil jij doen? Bij DPA GEOS werken onze consultants als Front-end Developer in Agile teams bij onze klanten en zijn ze verantwoordelijk voor de grotere webapplicaties. Wil jij dit ook, want we zijn op zoek naar enthousiaste Front-end Developers om ons development team te versterken. Je draagt positief bij aan de teamgeest binnen een projectteam en je ondersteunt de software architect en projectleider bij hun werkzaamheden. Je gaat webapplicaties maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege

Bekijk vacature »

SOFTWARE ENGINEER (PLC) Onderhoud en ontwikkeling

Nuchter, Twents, creatief, innovatief. Zo kennen veel (inter)nationale relaties ons. En natuurlijk van onze buigmachines. Compleet met al onze knowhow en service. Maar wij zijn meer dan onze machines. En wij doen ook meer dan buigmachines maken. Want wij leveren oplossingen. Opvallende, onderscheidende en zeer hoogwaardige oplossingen voor buigvraagstukken. Vanuit onze voorliefde voor technologie. En met als uitgangspunt altijd de klant en - hoe specifiek ook - zijn buigvraag! Wie wij zeker ook zijn? Wij zijn die prettig eigenwijze persoonlijke adviseur richting onze klant. Wij denken mee, wij denken vooruit over het beste antwoord op elke buigvraag. Dat doen wij

Bekijk vacature »

Front-end Developer

Do you want to work in a fun, and innovative scrum team and dynamic working environment? Do you want to make a great contribution to the development of our high traffic websites, thanks to your knowledge in Front-end Development in a high–performance environment?! Then we are looking for you! Due to replacement in the IT team we are immediately looking for a: Front-end Developer Haarlem What does your day look like? As our new front-end developer, you have the flexibility to create and innovate in a challenging and fast-moving environment. Whether you optimize the booking funnel, implement A/B tests or

Bekijk vacature »

Senior C# .Net Developer

Senior C# .Net Developer Je komt te werken in een gezellig en informele scrumteam en bouwt mee aan de ontwikkeling van een nieuwe applicatie voor groothandelaren in de bloemen- en plantenbranche. Hierbij krijg je de mogelijkheid jezelf te ontwikkelen in de richting jij wilt! Front end, back end of full stack. Wijvragen van jou… Ervaring in ontwikkelen van applicaties m.b.v. C# Teamplayer met goede communicatieve vaardigheden Een pro-actieve werkhouding De eigenschappen zelfstandig, nauwkeurig en gestructureerd HBO werk- en denkniveau Wat bieden wij… Een fulltime functie (32-40 uur) Een marktconform salaris afhankelijk van kennis en ervaring Een 13e maand en reiskostenvergoeding

Bekijk vacature »

C++ Developer/High-tech ingenieursbureau/Thuiswerk

Functieomschrijving Wil jij als Software Developer met C++ werken aan dé Google Maps van Nederland bij een high-tech ingenieursbureau in Rotterdam? Lijkt het jou gaaf om een applicatie te ontwikkelen waardoor hele topografische kaarten opgebouwd kunnen worden voor grote en bekende organisaties, waaronder de top 10 gemeentes in dit land? Lees dan nu verder! Ontwikkelen van en werken aan innovatieve ruimtelijke ordening applicatie; Uitvoeren van technische implementaties bij klanten op locatie; Samenwerken in een dynamisch Agile team; Werken aan innovatie en kennisdeling. Functie-eisen Minimaal HBO of WO werk- en denkniveau; Je hebt minimaal 2 jaar ervaring als Developer (bij voorkeur

Bekijk vacature »

Java Developer met een passie voor techniek en inf

Functieomschrijving Ben jij toe aan een nieuwe uitdaging binnen een complexe technische omgeving en wil jij met je ruime kennis van Java bijdragen aan een optimaal wegennet? Dan is dit de vacature voor jou! Ontwikkelen van applicaties met behulp van Java; Overleggen en samenwerken met architecten en Product Owners; Werken binnen een multidisciplinair Scrumteam met betrekking tot analyse, design en ontwikkeling; Samenwerken en ondersteunen van testers in het proces van automatische regressietesten. Functie-eisen Afgeronde HBO- opleiding (Technische richting is een pre); Ruime ervaring in de rol van Java Developer; Een passie voor techniek en programmeren; Technologieën, frameworks en tools zijn:

Bekijk vacature »

C# .NET webdeveloper gezocht, inhouse, afwisselend

Heb je ervaring als .NET C# webdeveloper en je bent op zoek naar een nieuwe baan in Den Haag? Bij een kleinschalig bedrijf met een korte lijnen en een informele maar ambitieuze sfeer? Waar je met de laatste ontwikkelingen kan werken op zowel back- als frontend? Wellicht dat dit iets voor jou is! Voor een full service webbureau in Den Haag zijn we op zoek naar een ervaren .NET C# webdeveloper. Het bedrijf bestaat uit ongeveer 40 mensen met in totaal circa 10 software developers. Binnen deze organisatie zal je samen met je team meewerken aan het onderhoud en de

Bekijk vacature »

Innovatieve Back-end Software ONTWIKKELAAR HBO C#

Innovatieve Back-end SoftwareONTWIKKELAAR HBO C# SQL Voor de uitbreiding van ons ontwikkelteam zijn we op zoek naar een enthousiaste ontwikkelaar die deel uit komt maken van ons team voor de ontwikkeling van interne applicaties en databases Onze toepassingen en data zijn bedoeld voor professionals in de auto- en verzekeringsbranche. Wij maken gebruik van bekende ontwikkeltalen, design patterns, frameworks en tools zoals Scrum, C#, SQL, enz.. Er wordt in een scrum team van 2 man gewerkt en er is ruimte om nieuwe ideeën- en innovaties te verkennen en te ontwikkelen. Bedrijfsprofiel: Onze software AutotelexPRO wordt door bijna alle autobedrijven gebruikt om

Bekijk vacature »

Ervaren Xamarin / Mobiele App developer bij Randst

Locatie/Standplaats Amsterdam Functieomschrijving Onze missie is het creëren van maximale waarde voor de Randstad Groep Nederland met onze ICT-oplossingen. Jouw inbreng is voor hen van essentieel belang voor een toonaangevende positie op de markt. Jij maakt dus echt het verschil! Randstad Groep IT is op zoek naar een ervaren Xamarin app developer. Als app ontwikkelaar ben je verantwoordelijk voor het bedenken, ontwikkelen en implementeren van apps voor de Randstad Groep Nederland. Onder de Randstad Groep vallen Randstad en Tempo-Team, de nr. 1 en 2. bedrijven van Nederland op het gebied van uitzenden. Ook Yacht, dat zich vooral op de professionals

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/02/2019 14:44:32
 

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.