showing results for - "jquery like selector in javascript"
Jannik
28 Jan 2020
1var domElement = function(selector) {
2 this.selector = selector || null;
3 this.element = null;
4};
5domElement.prototype.init = function() {
6 switch (this.selector[0]) {
7 case ‘<’:
8 var matches = this.selector.match(/<([\w-]*)>/);
9 if (matches === null || matches === undefined) {
10 throw ‘Invalid Selector / Node’;
11 return false;
12 }
13 var nodeName = matches[0].replace(‘<’, ‘’).replace(‘>’, ‘’);
14 this.element = document.createElement(nodeName);
15 break;
16 default:
17 this.element = document.querySelector(this.selector);
18 }
19};
20domElement.prototype.on = function(event, callback) {
21 var evt = this.eventHandler.bindEvent(event, callback, this.element);
22}
23domElement.prototype.off = function(event) {
24 var evt = this.eventHandler.unbindEvent(event, this.element);
25}
26domElement.prototype.val = function(newVal) {
27 return (newVal !== undefined ? this.element.value = newVal : this.element.value);
28};
29domElement.prototype.append = function(html) {
30 this.element.innerHTML = this.element.innerHTML + html;
31};
32domElement.prototype.prepend = function(html) {
33 this.element.innerHTML = html + this.element.innerHTML;
34};
35domElement.prototype.html = function(html) {
36 if (html === undefined) {
37 return this.element.innerHTML;
38 }
39 this.element.innerHTML = html;
40};
41domElement.prototype.eventHandler = {
42 events: [],
43 bindEvent: function(event, callback, targetElement) {
44 this.unbindEvent(event, targetElement);
45 targetElement.addEventListener(event, callback, false);
46 this.events.push({
47 type: event,
48 event: callback,
49 target: targetElement
50 });
51 },
52 findEvent: function(event) {
53 return this.events.filter(function(evt) {
54 return (evt.type === event);
55 }, event)[0];
56 },
57 unbindEvent: function(event, targetElement) {
58 var foundEvent = this.findEvent(event);
59 if (foundEvent !== undefined) {
60 targetElement.removeEventListener(event, foundEvent.event, false);
61 }
62 this.events = this.events.filter(function(evt) {
63 return (evt.type !== event);
64 }, event);
65 }
66};
67$ = function(selector) {
68 var el = new domElement(selector);
69 el.init();
70 return el;
71}
Aleah
04 Feb 2019
1var $ = (function () {
2
3	'use strict';
4
5	/**
6	 * Create the constructor
7	 * @param {String} selector The selector to use
8	 */
9	var Constructor = function (selector) {
10		if (!selector) return;
11		if (selector === 'document') {
12			this.elems = [document];
13		} else if (selector === 'window') {
14			this.elems = [window];
15		} else {
16			this.elems = document.querySelectorAll(selector);
17		}
18	};
19
20	/**
21	 * Do ajax stuff
22	 * @param  {String} url The URL to get
23	 */
24	Constructor.prototype.ajax = function (url) {
25		// Do some XHR/Fetch thing here
26		console.log(url);
27	};
28
29	/**
30	 * Run a callback on each item
31	 * @param  {Function} callback The callback function to run
32	 */
33	Constructor.prototype.each = function (callback) {
34		if (!callback || typeof callback !== 'function') return;
35		for (var i = 0; i < this.elems.length; i++) {
36			callback(this.elems[i], i);
37		}
38		return this;
39	};
40
41	/**
42	 * Add a class to elements
43	 * @param {String} className The class name
44	 */
45	Constructor.prototype.addClass = function (className) {
46		this.each(function (item) {
47			item.classList.add(className);
48		});
49		return this;
50	};
51
52	/**
53	 * Remove a class to elements
54	 * @param {String} className The class name
55	 */
56	Constructor.prototype.removeClass = function (className) {
57		this.each(function (item) {
58			item.classList.remove(className);
59		});
60		return this;
61	};
62
63	/**
64	 * Instantiate a new constructor
65	 */
66	var instantiate = function (selector) {
67		return new Constructor(selector);
68	};
69
70	/**
71	 * Return the constructor instantiation
72	 */
73	return instantiate;
74
75})();
76