-
-
Save morikawa77/7cb67b10b4ee7cff9bc1deeadaa46184 to your computer and use it in GitHub Desktop.
Vanilla JS equivalents of jQuery methods
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Sans jQuery | |
| ## Events | |
| ```javascript | |
| // jQuery | |
| $(document).ready(function() { | |
| // code | |
| }) | |
| // Vanilla | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // code | |
| }) | |
| ``` | |
| ```javascript | |
| // jQuery | |
| $('a').click(function() { | |
| // code… | |
| }) | |
| // Vanilla | |
| [].forEach.call(document.querySelectorAll('a'), function(el) { | |
| el.addEventListener('click', function() { | |
| // code… | |
| }) | |
| }) | |
| ``` | |
| ## Selectors | |
| ```javascript | |
| // jQuery | |
| var divs = $('div') | |
| // Vanilla | |
| var divs = document.querySelectorAll('div') | |
| ``` | |
| ```javascript | |
| // jQuery | |
| var newDiv = $('<div/>') | |
| // Vanilla | |
| var newDiv = document.createElement('div') | |
| ``` | |
| ## Attributes | |
| ```javascript | |
| // jQuery | |
| $('img').filter(':first').attr('alt', 'My image') | |
| // Vanilla | |
| document.querySelector('img').setAttribute('alt', 'My image') | |
| ``` | |
| ### Classes | |
| ```javascript | |
| // jQuery | |
| newDiv.addClass('foo') | |
| // Vanilla | |
| newDiv.classList.add('foo') | |
| ``` | |
| ```javascript | |
| // jQuery | |
| newDiv.toggleClass('foo') | |
| // Vanilla | |
| newDiv.classList.toggle('foo') | |
| ``` | |
| ## Manipulation | |
| ```javascript | |
| // jQuery | |
| $('body').append($('<p/>')) | |
| // Vanilla | |
| document.body.appendChild(document.createElement('p')) | |
| ``` | |
| ```javascript | |
| // jQuery | |
| var clonedElement = $('#about').clone() | |
| // Vanilla | |
| var clonedElement = document.getElementById('about').cloneNode(true) | |
| ``` | |
| ```javascript | |
| // jQuery | |
| $('#wrap').empty() | |
| // Vanilla | |
| var wrap = document.getElementById('wrap') | |
| while(wrap.firstChild) wrap.removeChild(wrap.firstChild) | |
| ``` | |
| ## Transversing | |
| ```javascript | |
| // jQuery | |
| var parent = $('#about').parent() | |
| // Vanilla | |
| var parent = document.getElementById('about').parentNode | |
| ``` | |
| ```javascript | |
| // jQuery | |
| if($('#wrap').is(':empty')) | |
| // Vanilla | |
| if(!document.getElementById('wrap').hasChildNodes()) | |
| ``` | |
| ```javascript | |
| // jQuery | |
| var nextElement = $('#wrap').next() | |
| // Vanilla | |
| var nextElement = document.getElementById('wrap').nextSibling | |
| ``` | |
| ## AJAX | |
| ### GET | |
| ```javascript | |
| // jQuery | |
| $.get('//example.com', function (data) { | |
| // code | |
| }) | |
| // Vanilla | |
| var httpRequest = new XMLHttpRequest() | |
| httpRequest.onreadystatechange = function (data) { | |
| // code | |
| } | |
| httpRequest.open('GET', url) | |
| httpRequest.send() | |
| ``` | |
| ### POST | |
| ```javascript | |
| // jQuery | |
| $.post('//example.com', { username: username }, function (data) { | |
| // code | |
| }) | |
| // Vanilla | |
| var httpRequest = new XMLHttpRequest() | |
| httpRequest.onreadystatechange = function (data) { | |
| // code | |
| } | |
| httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') | |
| httpRequest.open('POST', url) | |
| httpRequest.send('username=' + encodeURIComponent(username)) | |
| ``` | |
| ### JSONP | |
| ```javascript | |
| // jQuery | |
| $.getJSON('//openexchangerates.org/latest.json?callback=?', function (data) { | |
| // code | |
| }) | |
| // Vanilla | |
| function success(data) { | |
| // code | |
| } | |
| var scr = document.createElement('script') | |
| scr.src = '//openexchangerates.org/latest.json?callback=formatCurrency' | |
| document.body.appendChild(scr) | |
| ``` | |
| ## More | |
| Here are a few additional references demonstrating vanilla javascript equivalents of jquery methods: | |
| * [From jQuery to JS: A Reference](http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/) | |
| Also, see the two part series showing equivalents for ... | |
| * [DOM & Forms](http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/) | |
| * [Events, Ajax and Utilities](http://www.sitepoint.com/jquery-vs-raw- javascript-3-events-ajax/) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment