const el = document.querySelector('#section');

if (el) {
  el.style.color = 'green';
}

$('#section')(el => el.style.color = 'green');

const elements = document.querySelectorAll('div, p');

for (let i = 0; i < elements.length; ++i) {
  elements[i].style.color = 'green';
}

if (elements.length) {
  elements[elements.length - 1].style.color = 'red';
}

$('div, p')
  .each(el => el.style.color = 'green')
  .last(el => el.style.color = 'red');

import $ from 'bonze';

$(() => {
  document.body.classList.add('ready');
});

$('h1, h2, h3').each(headings => {
  headings.classList.add('red');
});

$('h1, h2, h3')(headings => { // Shortcut for each
  headings.classList.add('red');
});

$('h1, h2, h3', '#article')(headings => {
  headings.classList.add('red');
});

$('div').first(div => {
  div.classList.add('first');
});

$('div').nth(2, div => {
  div.classList.add('third');
});

$('div').last(div => {
  div.classList.add('last');
});

$('div').odd(div => {
  div.classList.add('odd');
});

$('div').even(div => {
  div.classList.add('even');
});

$('div').filter(div => div.textContent.includes('error'), div => {
  div.classList.add('red');
});

$('<h1>My New Title</h1>')((h1) => {
  document.body.prepend(h1);
});

$('div')
  ((div, i) => {
    div.innerHTML = 'Paragraph ' + i;
  })
  (div => {
    div.classList.add('green');
  })
  .last(div => {
    div.classList.add('red');
  });

$.plugin('addClass', (el, index, elmts, name) => {
  el.classList.add(name);
});

$('div').odd().addClass('black');
$('div').even().addClass('white');

const domElementArray = $('div')();

const domFirstElement = $('div')(0);

const domSecondElement = $('div')(1);