🚫 You don’t need Jquery

Replace jQuery methods with Vanilla Javascript

📝 Table of Content

1. Select something
2. Select something within a parent
3. Add class
4. Remove class
5. Toggle class
6. Get attribute
7. Set attribute
8. Get data attribute
9. Set data attribute
10. Get Text
11. Get HTML
12. Insert HTML string
13. Insert text string
14. Show element
15. Hide element
16. Show element with transition
17. Hide element with transition
18. Loop through Array
19. Loop through Object
20. Add Event Listener
21. Ajax request

How to replace jQuery with Vanilla Javascript

1. Select something

Selecting element by class name. You can also use to select by tag or identifier:

  // jQuery
  $('.class-name');

  // ES6
  document.querySelector('.class-name'); // single
  document.querySelectorAll('.class-name'); // multiple

2. Select something within a parent

This example is similar to the one above: with an additional selection throught a parent element:

  // jQuery
  parent.find('.class-name');

  // ES6
  parent.querySelector('.class-name'); // single
  parent.querySelectorAll('.class-name'); // multiple

3. Add class

Adding a class into an element:

  // jQuery
  element.addClass('.class-name');

  // ES6
  element.classList.add('.class-name');

4. Remove class

Removing a class from an element:

  // jQuery
  element.removeClass('.class-name');

  // ES6
  element.classList.remove('.class-name');

5. Toggle class

  // jQuery
  element.toggleClass('.class-name');

  // ES6
  element.classList.toggle('.class-name');

6. Get attribute

Get atrribute value from an element:

  // jQuery
  element.attr('href');

  // ES6
  element.getAttribute('href');

7. Set attribute

Set value into an attribute from an element:

  // jQuery
  element.attr('href', 'https://www.google.com');

  // ES6
  element.setAttribute('href', 'https://www.google.com');

8. Get data attribute

Get data atrribute value from an element:

  // jQuery
  element.data('id');

  // ES6
  element.getAttribute('data-id');

9. Set data attribute

Set value into data attribute from an element:

  // jQuery
  element.data('id');

  // ES6
  element.setAttribute('data-id', 1);
  element.dataset.id = 1;

10. Get Text

Getting text from an element:

  // jQuery
  element.text();

  // ES6
  element.textContent;

11. Get HTML

Getting HTML from an element:

  // jQuery
  element.html();

  // ES6
  element.innerHTML;

12. Insert HTML string

Adding HTML into an element:

  // jQuery
  element.html('<a href="https://www.gogle.com">Google</a>');

  // ES6
  element.innerHTML = '<a href="https://www.gogle.com">Google</a>';

13. Insert text string

Adding text into an element:

  // jQuery
  element.text('Your text here');

  // ES6
  element.innerText = 'Your text here';

14. Show element

  // jQuery
  element.show();

  // ES6
  element.style.display = 'block';

15. Hide element

  // jQuery
  element.hide();

  // ES6
  element.style.display = 'none';

16. Show element with transition

  // jQuery
  element.fadeIn();

  // ES6
  function fadeIn (element) {
    element.classList.add('show');
    element.classList.remove('hide');
  }

Using vanilla javascript, require extra css:

  .show {
    transition: opacity 400ms;
  }
  .hide {
    opacity: 0;
  }

17. Hide element with transition

  // jQuery
  element.fadeOut();

  // ES6
  function fadeOut (element) {
    element.classList.add('hide');
    element.classList.remove('show');
  }

Using vanilla javascript, require extra css:

  .show {
    opacity: 1;
  }
  .hide {
    opacity: 0;
    transition: opacity 400ms;
  }

18. Loop through Array

  // jQuery
  array.each((item), function {
    // ...
  });

  // ES6
  array.forEach((item) => {
    // ...
  });

19. Loop through Object

  // jQuery
  object.each((key, value), function {
    // ...
  });

  // ES6
  for (const key in object) {
    console.log(key, object[key]);
  }

  // or
  for (const [key, value] of Object.entries(object)) {
    console.log(key, value);
  }

20. Add Event Listener

  // jQuery
  element.on( 'click', function(event) {
    // ...
  });

  // ES6
  element.addEventListener('click', (event) => {
    // ...
  });

21. Ajax request

  // jQuery
  $.ajax({
    url: 'https://example.com',
    method: 'post',
    dataType: 'json',
    contentType: 'application/json',
    data: JSON.stringify(data),
    success: function(response){
      // ...
    },
    error: function(error){
      // ...
    }
  });

  // ES6
  fetch( 'https://example.com', {
    method: 'post',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  })
  .then(response => {
    // ...
  })
  .catch(error => {
    // ...
  });

How to Contribute

Please, read CONTRIBUTION.md file

👩 Author

|
_{@laisfrigerio}
| | :—: |

📄 License

This project is licensed under the MIT License - see the LICENSE.md file for details