IE lost the Browser war, time to move on. Thank you for your service jQuery 🙏
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md

README.md

From jQuery to DOM and ES6

jQuery was created to cope with JavaScript implementation differences between browsers. Internet Explorer was the main culprit and lagged behind Mozilla Firefox and then Google Chrome.

In 2017, IE8 to IE11 usage have droppped to a very small part of web traffic and can be safely ignored. This means that we can drop jQuery from our applicaiton and rely on standard DOM and some ES6 sprinkles.

Selecting DOM elements

Suppose you have the following HTML:

<div id="lead">lorem ipsum</div>
<ul>
  <li class="green">First item</li>
  <li class="red">Second item</li>
  <li class="green">Third item</li>
  <li class="red">Last item</li>
</ul>
<p class="green status">A great status</p>

Then in jQuery you would use the $() function in combination with some CSS selector to go and fetch the DOM elements.

var lead = $('#lead');
var firstRedItem = $('.red').eq(0);
var greenListItems = $('li.green');  // Adding `li` not to select the `p`.

The alternative is now to use three standard DOM methods:

const lead = document.getElementById('lead');  // ⚠️ no #
const firstRedItem = document.querySelector('.red');
const greenListItems = document.querySelectorAll('li.green');

You may have noticed that we used const over var. Moving forward using ES6, we won't use var anymore, but const or let. We'll use let when we want to reassign a variable, const otherwise:

let name = "George";
name = name + " Abitbol"; // `name` is being re-assigned.
console.log(name);

You can read more on let and const

Inserting a DOM element

A classic usage of JavaScript would be to insert a new piece of content into the DOM. On a blog, an AJAX-powered comment section would insert the comment when it's submitted, without reloading the page.

<div id="comments">
  <p class="comment">This was great!</p>
  <p class="comment">I loved it :)</p>
</div>
<form>
  <textarea id="commentContent"></textarea>
  <button>Post comment</button>
</form>

Using jQuery, this is how we would do it:

var commentContent = $('#commentContent').val(); // Skipping AJAX part
$('#comments').append('<p class="comment">' + commentContent + '</p>');

Now we'll rely on Element#insertAdjacentHTML and ES6 template literals:

const commentContent = document.getElementById('commentContent').value;
const comments = document.getElementById('comments');
comments.insertAdjacentHTML('beforeend', `<p class="comment">${commentContent}</p>`);

Updating CSS classes

Adding, removing or toggling a CSS class on a DOM element is something quite common in a JavaScript app. With jQuery, we would use:

$(selector).addClass('bold');
$(selector).removeClass('bold');
$(selector).toggleClass('bold');

And this would apply the change to all elements matching the given selector.

Without jQuery, you can use classList:

// For one element selected with `getElementById` or `querySelector`
element.classList.add('bold');
element.classList.remove('bold');
element.classList.toggle('bold');

// For multiple elements selected with `querySelectorAll`:
elements.forEach((element) => {
  element.classList.add('bold');
  // etc.
});

See? We just used Array.forEach!

Event listeners

JavaScript lets your bring dynamic behavior to your webpage. The simplest example we can take is having an alert pop up when click on a button.

<button id="useless-btn">Click me!</button>

With jQuery, we would use the .on() method (or one of its shortcuts):

$('#useless-btn').on('click', function(event) {
  alert('Thanks for clicking!');
});

The modern DOM gives you addEventListener to play with:

const button = document.getElementById('useless-btn');
button.addEventListener('click', (event) => {
  alert('Thanks for clicking!');
});

To get information on the clicked element, you can use event.target inside the event listener callback. But what was that =>? Well, it is called an arrow function. Those are great to preserve this and get rid of the var that = this trick. Wes Bos did a great post and video on the topic.

Dispatching an event

Sometimes you manually need to trigger an event on an element. In jQuery, that's something you could do on links, buttons or forms:

$('#a-button').click();
$('#a-form').submit();

Without jQuery, you will rely on EventTarget.dispatchEvent():

const button = document.getElementById('a-button');
button.dispatchEvent(new Event('click'));

const form = document.getElementById('a-form');
form.dispatchEvent(new Event('submit'));

AJAX

When you want to do AJAX, the original implementation relies on XMLHttpRequest, but nobody wants to use that. jQuery solved this problem ten years ago introducing the $.ajax method with its two handy shortcuts $.get and $.post:

// GET request
$.ajax({
  url: "https://swapi.co/api/people/",
  type: "GET"
  success: function(data) {
    console.log(data);
  }
});

// POST request
const data = { name: "a name", email: "an@email.com" };
$.ajax({
  url: url,
  type: "POST",
  data: data,
  success: function(data) {
    console.log(data);
  }
});

With modern browsers, we can rely on fetch which provides a nicer API than raw XMLHttpRequest.

// GET request
fetch("https://swapi.co/api/people/")
  .then(response => response.json())
  .then((data) => {
    console.log(data);
  });

// POST request
const data = { name: "a name", email: "an@email.com" };
fetch(url, {
  method: 'POST',
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(data)
})
.then(response => response.json())
.then((data) => {
  console.log(data);
});

You can notice the fetch() second argument is a hash using more straightforward key names. Parts of the HTTP request are outlined: the method (or verb), the headers and the body.

Resources

Here are some useful resources you might want to read: