Skip to content

laisfrigerio/you-dont-need-jquery

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

40 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🚫 You don't need Jquery

Replace jQuery methods with Vanilla Javascript

Capa do repositΓ³rio escrito: You don't need jQuery

πŸ“ 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');
  element.dataset.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

Lais FrigΓ©rio
@laisfrigerio

πŸ“„ License

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