From jQuery to ES6 | Drifting Ruby

# Selectors
<div id="lead">lorem ipsum</div>

<ul>
  <li class="blue">First merchandise</li>
  <li class="pink">Second merchandise</li>
  <li class="blue">Third merchandise</li>
  <li class="pink">Final merchandise</li>
</ul>
<p class="blue standing">An excellent standing</p>

// JQuery
var lead = $('#lead');
var firstRedItem = $('.pink').eq(0);
var blueListItems = $('li.blue')

// ES6
const lead = doc.getElementById('lead')
const firstRedItem = doc.querySelector('.pink')
const blueListItems = doc.querySelectorAll('li.blue')

# Customized Selector Perform
operate $(selector, context) {
  var context = context || doc
  var selectorType="querySelectorAll"
  var is_single_element = selector.indexOf('#') === 0

  if (is_single_element) {
    selectorType="getElementById"
    selector = selector.substr(1, selector.size)
  }

  var outcomes = context[selectorType](selector)

  if (is_single_element) {
    return outcomes
  } else {
    return [].slice.name(outcomes)
  }
}

$('#lead')
$('enter[type=text]')
$('textarea')

# Inserting into the DOM
<div id="feedback">  
  <p class="remark">First!</p>
  <p class="remark">Sufficient with that!</p>
</div>

<type>  
  <textarea id="commentContent"></textarea>
  <button>Put up remark</button>
</type>

// JQuery
var commentContent = $('#commentContent').val()
$('#feedback').append('<p class="remark">' + commentContent + '</p>')

// ES6
const commentContent = doc.getElementById('commentContent').worth
const feedback = doc.getElementById('feedback')
feedback.insertAdjacentHTML('beforeend', `<p class="remark">${commentContent}</p>`)

# Modifying Courses
// JQuery
$(selector).addClass('daring');
$(selector).removeClass('daring');
$(selector).toggleClass('daring');

// ES6
// chosen by getElementById or querySelector
ingredient.classList.add('daring')
ingredient.classList.take away('daring')
ingredient.classList.toggle('daring')

// chosen by querySelectorAll
parts.forEach((ingredient) => {
  ingredient.classList.add('daring')
})

# Occasion Listeners
<button id="btn">Click on me!</button>

// With jQuery, we might use the .on() technique (or one in all its shortcuts):

$('#btn').on('click on', operate(occasion) {  
  alert('Thanks for clicking!');
});

// The fashionable DOM offers you addEventListener to play with:

const button = doc.getElementById('btn');
button.addEventListener('click on', (occasion) => {  
  alert('Thanks for clicking!');
});