Loading

jquery vs vanilla js

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>jquery vs vanilla js</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

  
  
</head>

<body>
  <div class="container jumbotron text-center">
	<h1>jQuery <span class="text-muted">vs</span> JavaScript Nativo</h1>
</div>
<div autoplay class="container nativo" disabled checked style="" id="MiIdUnico" data-mio="Juan" href="">
	<h2>Nativo</h2>
	<ul class="list-group"></ul>
</div>
<div class="container jquery mt-5">
	<h2>jQuery</h2>
	<ul class="list-group"></ul>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
/* Downloaded from https://ahoj.co.uk/ */
var nativo = ["document.querySelector()", "classList", "innerText", "innerHTML", "attributes", "dataset", "window"];

var jquery = ["$()", "$el.html()", "$el.text()", "$el.attr('style')", "$el.data('mio')", "$el.find()", "$(window)"];

var listNativo = document.querySelector('.container.nativo ul.list-group');

for (var item of nativo) {
	var li = document.createElement('li');
	li.innerText = item;
	li.classList.add('list-group-item');
	listNativo.appendChild(li);
}

listNativo.addEventListener('click', function(event) {
	var curr = event.target;
	console.log(curr.attributes);
	var prop = curr.innerText;
	if (curr[prop]) {
		curr.innerText += " " + JSON.stringify(curr[prop])
		curr.classList.toggle('list-group-item-success');
	}
});

var $listJquery = $('.container.jquery ul.list-group');

for (var item of jquery) {
	var $curr = $('<li></li>').text(item).addClass('list-group-item');
	$listJquery.append($curr);
}

$listJquery.on('click', 'li', function() {
	$(this).toggleClass('list-group-item-success');
});

This awesome code is write by Juan Sebastian Gaitan Villamizar, you can se more from this user in the personal repository