| 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 JulkaIII-zz/9e72f1fb4c12c6b8c0198589a97fd1ad 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