| jQuery | Vanilla |
|---|---|
| ```javascript $(document).ready(function() { }) ``` | ```javascript document.addEventListener('DOMContentLoaded', function() { }) ``` |
| ```javascript var divs = $('div') ``` | ```javascript var divs = document.querySelectorAll('div') ``` |
| `var newDiv = $(' ')` | `var newDiv = document.createElement('div')` |
| `newDiv.addClass('foo')` | `newDiv.classList.add('foo')` |
| `newDiv.toggleClass('foo') | newDiv.classList.toggle('foo') |
| `$('a').click(function() { // code… })` | `[].forEach.call(document.querySelectorAll('a'), function(el) { el.addEventListener('click', function() { // code… }) })` |
| `$('body').append($(' ')) | document.body.appendChild(document.createElement('p')) |
| `$('img').filter(':first').attr('alt', 'My image') | document.querySelector('img').setAttribute('alt', 'My image') |
| `var parent = $('#about').parent()` | `var parent = document.getElementById('about').parentNode` |
| `var clonedElement = $('#about').clone()` | var clonedElement = document.getElementById('about').cloneNode(true) |
| `$('#wrap').empty()` | `var wrap = document.getElementById('wrap') while(wrap.firstChild) wrap.removeChild(wrap.firstChild)` |
| `if($('#wrap').is(':empty'))` | `if(!document.getElementById('wrap').hasChildNodes())` |
| `var nextElement = $('#wrap').next()` | `var nextElement = document.getElementById('wrap').nextSibling` |
-
-
Save Zahid-Iqbal-Marth/ab9279ad1802e4a7fbaa2bdf6b8a876c to your computer and use it in GitHub Desktop.
Vanilla JS equivalents of jQuery methods
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment