Skip to content

Instantly share code, notes, and snippets.

@viniceosm

viniceosm/vkek.js

Last active March 21, 2018 19:54
Show Gist options
  • Save viniceosm/ad5016d26924867cf9f958522a7f1c5e to your computer and use it in GitHub Desktop.
Save viniceosm/ad5016d26924867cf9f958522a7f1c5e to your computer and use it in GitHub Desktop.
Download ZIP
vkek - manipular o DOM
Raw
vkek.js
function Vkek(){
// this.el será o elemento buscado apartir do Vkek.$()
}
Vkek.prototype = {
$: function(selector) {
if (typeof selector == 'string') {
this.el = (document.querySelectorAll(selector).length > 1) ? document.querySelectorAll(selector) : document.querySelector(selector);
} else {
this.el = selector;
}
return this;
},
addEvent: function(eventName, fn) {
this.el.addEventListener(eventName, fn);
return this;
},
click: function(fn){
this.el.addEventListener('click', fn);
return this;
},
load: function(fn){
window.addEventListener('load', fn);
return this;
},
html: function(html){
if (html == undefined) {
return this.el.innerHTML;
}
this.el.innerHTML = html;
return this;
},
each: function(fn){
for (i in this.el) {
fn(this.el[i], i);
}
}
}
function vkek(selector) {
_vkek = new Vkek();
if (selector != undefined){
_vkek.$(selector).el;
}
return _vkek;
}
@viniceosm
Copy link
Author 

<html>
	<script src="vkek.js"></script>
	<body>
		<div id="div1"></div>

		<a>nada</a>
		<a>nada</a>

		<button id="btn1">teste</button>
	</body>

	<script>
		// usar $ invés de vkek
		var $ = vkek;

		$().load(function() {
			// retorna elemento html
			console.log($('#div1').el);

			// altera innerHTML do elemento
			$('#div1').html('<p>teste</p>');

			// retorna innerHTML
			console.log($('#div1').html());

			// adiciona evento click
			$('#btn1').click(function(e) {
				self = this;

				$(self).html('eu fui clicado');

				setTimeout(function(){
					$(self).html('teste');
				}, 100);

				console.log(self, 'foi clicado.');
			});

			// each nos elementos a
			$('a').each(function(v, i){
				$(v).html(i + '<br>');
			});
		});
	</script>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment