cferdinandi/diy-jquery.html

## diy-jquery.html
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>jQuery => Vanilla JS</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>

	<body>

		<nav id="menu">
			<ul>
				<li class="item bar">Home</li>
				<li class="item">About</li>
				<li class="item bar">Articles</li>
				<li class="item">Resources</li>
			</ul>
			<div class="hidden">Hide me</div>
			<div class="hidden">Hide me, too</div>
			<div class="hidden">Also hide me!</div>
		</nav>


		<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
		<script>
			/*
			jQuery(document).ready( function() {

				let menu = jQuery('#menu');

				menu.find('li.item')
					.addClass('foo')
					.removeClass('bar')
					.css('background-color', 'rebeccapurple')
					.css('color', '#fff');

				menu.find('.hidden').css('display', 'none');

			});
			*/

			class $ {

				/**
				 * The constructor object
				 * @param  {String} selector The selector to use
				 * @param  {Element} context The element to search for the selector in
				 */
				constructor (selector, context = document) {
					this.elems = Array.from(context.querySelectorAll(selector));
				}

				/**
				 * Find matching elements inside the parent element
				 * @param  {String} selector The selector string
				 * @return {$}               A new $ instance
				 */
				find (selector) {
					return new $(selector, this.elems[0]);
				}

				/**
				 * Add classes to all elements
				 * @param {...String} classes The classes to add
				 */
				addClass(...classes) {
					for (let item of this.elems) {
						item.classList.add(...classes);
					}
					return this;
				}

				/**
				 * Remove classes from all elements
				 * @param {...String} classes The classes to remove
				 */
				removeClass(...classes) {
					for (let item of this.elems) {
						item.classList.remove(...classes);
					}
					return this;
				}

				/**
				 * Set CSS on elements
				 * @param  {String} prop The property to set
				 * @param  {String} val  The value to use
				 */
				css (prop, val) {

					// Convert CSS naming to JavaScript naming
					prop = prop.split('-').map(function (part, index) {
						if (index === 0) return part;
						let arr = part.split('')
						arr.splice(0, 1, arr[0].toUpperCase());
						return arr.join('');
					}).join('');

					for (let item of this.elems) {
						item.style[prop] = val;
					}

					return this;
				}

				/**
				 * Set an attribute on elements
				 * @param  {String} attr The attribute to set
				 * @param  {String} val  The attribute value
				 */
				attr (attr, val = '') {

					for (let item of this.elems) {
						item.setAttribute(attr, val);
					}

					return this;

				}

			}

			// find ✓
			// addClass ✓
			// removeClass ✓
			// css() ✓
			// attr()

			let menu = new $('#menu');

			menu.find('li.item')
				.addClass('foo')
				.removeClass('bar')
				.css('background-color', 'rebeccapurple')
				.css('color', '#fff');

			menu.find('.hidden').attr('hidden');
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>jQuery => Vanilla JS</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>

	<body>

	<nav id="menu">
	<ul>
	<li class="item bar">Home</li>
	<li class="item">About</li>
	<li class="item bar">Articles</li>
	<li class="item">Resources</li>
	</ul>
	<div class="hidden">Hide me</div>
	<div class="hidden">Hide me, too</div>
	<div class="hidden">Also hide me!</div>
	</nav>




	<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
	<script>
	/*
	jQuery(document).ready( function() {

	let menu = jQuery('#menu');

	menu.find('li.item')
	.addClass('foo')
	.removeClass('bar')
	.css('background-color', 'rebeccapurple')
	.css('color', '#fff');

	menu.find('.hidden').css('display', 'none');

	});
	*/

	class $ {

	/**
	* The constructor object
	* @param {String} selector The selector to use
	* @param {Element} context The element to search for the selector in
	*/
	constructor (selector, context = document) {
	this.elems = Array.from(context.querySelectorAll(selector));
	}

	/**
	* Find matching elements inside the parent element
	* @param {String} selector The selector string
	* @return {$} A new $ instance
	*/
	find (selector) {
	return new $(selector, this.elems[0]);
	}

	/**
	* Add classes to all elements
	* @param {...String} classes The classes to add
	*/
	addClass(...classes) {
	for (let item of this.elems) {
	item.classList.add(...classes);
	}
	return this;
	}

	/**
	* Remove classes from all elements
	* @param {...String} classes The classes to remove
	*/
	removeClass(...classes) {
	for (let item of this.elems) {
	item.classList.remove(...classes);
	}
	return this;
	}

	/**
	* Set CSS on elements
	* @param {String} prop The property to set
	* @param {String} val The value to use
	*/
	css (prop, val) {

	// Convert CSS naming to JavaScript naming
	prop = prop.split('-').map(function (part, index) {
	if (index === 0) return part;
	let arr = part.split('')
	arr.splice(0, 1, arr[0].toUpperCase());
	return arr.join('');
	}).join('');

	for (let item of this.elems) {
	item.style[prop] = val;
	}

	return this;
	}

	/**
	* Set an attribute on elements
	* @param {String} attr The attribute to set
	* @param {String} val The attribute value
	*/
	attr (attr, val = '') {

	for (let item of this.elems) {
	item.setAttribute(attr, val);
	}

	return this;

	}

	}

	// find ✓
	// addClass ✓
	// removeClass ✓
	// css() ✓
	// attr()

	let menu = new $('#menu');

	menu.find('li.item')
	.addClass('foo')
	.removeClass('bar')
	.css('background-color', 'rebeccapurple')
	.css('color', '#fff');

	menu.find('.hidden').attr('hidden');
	</script>
	</body>
	</html>