/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

2 votes135 views2 answers
Jquery scroll to id
Javascript jQuery
3 votes147 views5 answers
Get span text jquery
Javascript jQuery
0 vote152 views1 answer
Jquery ready wordpress
Javascript jQuery
0 vote191 views1 answer
Jquery plugin boielr plate
Javascript jQuery
0 vote173 views2 answers
Jquery val style
Javascript jQuery
1 vote142 views2 answers
How to wait till jquery post request has been made
Javascript jQuery
7 votes149 views3 answers
Jquery remove option from dropdown
Javascript jQuery
5 votes170 views3 answers
Jquery ajax request
Javascript jQuery
12 votes148 views3 answers
How to move div using jquery
Javascript jQuery
11 votes149 views2 answers
Set select option as selected jquery
Javascript jQuery