| 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 cesarmejiag/fb62073cc77d16d259a979b5f86a586f 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