Vanilla JS: $(selector)
jQuery $() selector in vanilla JS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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];
}
?>
// 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)
Gebruiksaanwijzing:
Quote:
$('#id');
$('.class');
$('button > span');
$('#id, .class, button > span');
$('.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)
Gewijzigd op 20/06/2016 15:14:27 door Inter Kode
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
Code (js)
1
$=(s,e)=>{return(e||document).querySelectorAll(s);};
Moet je browser wel ECMA6 ondersteunen overigens, anders:
Code (js)
1
$=function(s,e){return(e||document).querySelectorAll(s);};
mocht je het tweede argument nooit gebruiken kan t nog simpeler:
Code (js)
1
var $ = document.querySelectorAll.bind(document);
Vaak gebruik ik zelf:
Code (js)
1
2
3
4
5
6
7
8
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); }
);
// ... 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
Code (js)
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
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]
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