/Javascript/jQuery/Jquery like selector in javascript

Jquery like selector in javascript

var domElement = function(selector) {
 this.selector = selector || null;
 this.element = null;
};
domElement.prototype.init = function() {
 switch (this.selector[0]) {
 case ‘<’:
 var matches = this.selector.match(/<([\w-]*)>/);
 if (matches === null || matches === undefined) {
 throw ‘Invalid Selector / Node’;
 return false;
 }
 var nodeName = matches[0].replace(‘<’, ‘’).replace(‘>’, ‘’);
 this.element = document.createElement(nodeName);
 break;
 default:
 this.element = document.querySelector(this.selector);
 }
};
domElement.prototype.on = function(event, callback) {
 var evt = this.eventHandler.bindEvent(event, callback, this.element);
}
domElement.prototype.off = function(event) {
 var evt = this.eventHandler.unbindEvent(event, this.element);
}
domElement.prototype.val = function(newVal) {
 return (newVal !== undefined ? this.element.value = newVal : this.element.value);
};
domElement.prototype.append = function(html) {
 this.element.innerHTML = this.element.innerHTML + html;
};
domElement.prototype.prepend = function(html) {
 this.element.innerHTML = html + this.element.innerHTML;
};
domElement.prototype.html = function(html) {
 if (html === undefined) {
 return this.element.innerHTML;
 }
 this.element.innerHTML = html;
};
domElement.prototype.eventHandler = {
 events: [],
 bindEvent: function(event, callback, targetElement) {
 this.unbindEvent(event, targetElement);
 targetElement.addEventListener(event, callback, false);
 this.events.push({
 type: event,
 event: callback,
 target: targetElement
 });
 },
 findEvent: function(event) {
 return this.events.filter(function(evt) {
 return (evt.type === event);
 }, event)[0];
 },
 unbindEvent: function(event, targetElement) {
 var foundEvent = this.findEvent(event);
 if (foundEvent !== undefined) {
 targetElement.removeEventListener(event, foundEvent.event, false);
 }
 this.events = this.events.filter(function(evt) {
 return (evt.type !== event);
 }, event);
 }
};
$ = function(selector) {
 var el = new domElement(selector);
 el.init();
 return el;
}

Source: freecodecamp.org

Jquery like selector in javascript

var $ = (function () {

	'use strict';

	/**
	 * Create the constructor
	 * @param {String} selector The selector to use
	 */
	var Constructor = function (selector) {
		if (!selector) return;
		if (selector === 'document') {
			this.elems = [document];
		} else if (selector === 'window') {
			this.elems = [window];
		} else {
			this.elems = document.querySelectorAll(selector);
		}
	};

	/**
	 * Do ajax stuff
	 * @param  {String} url The URL to get
	 */
	Constructor.prototype.ajax = function (url) {
		// Do some XHR/Fetch thing here
		console.log(url);
	};

	/**
	 * Run a callback on each item
	 * @param  {Function} callback The callback function to run
	 */
	Constructor.prototype.each = function (callback) {
		if (!callback || typeof callback !== 'function') return;
		for (var i = 0; i < this.elems.length; i++) {
			callback(this.elems[i], i);
		}
		return this;
	};

	/**
	 * Add a class to elements
	 * @param {String} className The class name
	 */
	Constructor.prototype.addClass = function (className) {
		this.each(function (item) {
			item.classList.add(className);
		});
		return this;
	};

	/**
	 * Remove a class to elements
	 * @param {String} className The class name
	 */
	Constructor.prototype.removeClass = function (className) {
		this.each(function (item) {
			item.classList.remove(className);
		});
		return this;
	};

	/**
	 * Instantiate a new constructor
	 */
	var instantiate = function (selector) {
		return new Constructor(selector);
	};

	/**
	 * Return the constructor instantiation
	 */
	return instantiate;

})();

Source: gomakethings.com

Similar codes

6 votes168 views3 answers
Jquery bind function to multiple events
Javascript jQuery
14 votes142 views6 answers
Jquery import js file
Javascript jQuery
55 votes142 views5 answers
Jquery reload page
Javascript jQuery
11 votes176 views3 answers
Jquery validate cdn
Javascript jQuery
49 votes128 views6 answers
How to get selected radio button value in jquery
Javascript jQuery
0 vote146 views1 answer
Jquery replace h1 with h2
Javascript jQuery
34 votes155 views3 answers
Check element exist in jquery
Javascript jQuery
0 vote156 views1 answer
Validation for start date and end date in jquery
Javascript jQuery
1 vote138 views1 answer
Convert jquery to string
Javascript jQuery
5 votes146 views6 answers
Jquery get class name
Javascript jQuery