Revisions
-
joyrexus renamed this gist
Nov 4, 2013 . 1 changed file with 16 additions and 2 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -1,4 +1,5 @@ # Sans jQuery ## Events @@ -176,4 +177,17 @@ function success(data) { 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/) -
Liam Curry revised this gist
May 4, 2012 . 1 changed file with 33 additions and 0 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -129,6 +129,39 @@ 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 -
May 4, 2012 . 1 changed file with 57 additions and 25 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -1,3 +1,7 @@ # Moving from jQuery ## Events ```javascript // jQuery $(document).ready(function() { @@ -10,6 +14,22 @@ document.addEventListener('DOMContentLoaded', function() { }) ``` ```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') @@ -26,36 +46,36 @@ var newDiv = $('<div/>') 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/>')) @@ -66,49 +86,61 @@ 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 ### 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) ``` -
May 4, 2012 . 1 changed file with 26 additions and 53 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -1,141 +1,114 @@ ```javascript // jQuery $(document).ready(function() { // code }) // Vanilla document.addEventListener('DOMContentLoaded', function() { // code }) ``` ```javascript // jQuery var divs = $('div') // Vanilla var divs = document.querySelectorAll('div') ``` ```javascript // jQuery var newDiv = $('<div/>') // Vanilla var newDiv = document.createElement('div') ``` ```javascript // jQuery newDiv.addClass('foo') // Vanilla newDiv.classList.add('foo') ``` ```javascript // jQuery newDiv.toggleClass('foo') // Vanilla newDiv.classList.toggle('foo') ``` ```javascript // jQuery $('a').click(function() { // code… }) // Vanilla [].forEach.call(document.querySelectorAll('a'), function(el) { el.addEventListener('click', function() { // code… }) }) ``` ```javascript // jQuery $('body').append($('<p/>')) // Vanilla document.body.appendChild(document.createElement('p')) ``` ```javascript // jQuery $('img').filter(':first').attr('alt', 'My image') // Vanilla document.querySelector('img').setAttribute('alt', 'My image') ``` ```javascript // jQuery var parent = $('#about').parent() // Vanilla var parent = document.getElementById('about').parentNode ``` ```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) ``` ```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 ``` -
May 4, 2012 . 1 changed file with 38 additions and 46 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -1,74 +1,66 @@ - - - ```javascript $(document).ready(function() { // code }) ``` ```javascript document.addEventListener('DOMContentLoaded', function() { // code }) ``` - - - ```javascript var divs = $('div') ``` ```javascript var divs = document.querySelectorAll('div') ``` - - - ```javascript var newDiv = $('<div/>') ``` ```javascript var newDiv = document.createElement('div') ``` - - - ```javascript newDiv.addClass('foo') ``` ```javascript newDiv.classList.add('foo') ``` - - - ```javascript newDiv.toggleClass('foo') ``` ```javascript newDiv.classList.toggle('foo') ``` - - - ```javascript $('a').click(function() { // code… }) ``` ```javascript [].forEach.call(document.querySelectorAll('a'), function(el) { el.addEventListener('click', function() { @@ -77,73 +69,73 @@ $('a').click(function() { }) ``` - - - ```javascript $('body').append($('<p/>')) ``` ```javascript document.body.appendChild(document.createElement('p')) ``` - - - ```javascript $('img').filter(':first').attr('alt', 'My image') ``` ```javascript document.querySelector('img').setAttribute('alt', 'My image') ``` - - - ```javascript var parent = $('#about').parent() ``` ```javascript var parent = document.getElementById('about').parentNode ``` - - - ```javascript var clonedElement = $('#about').clone() ``` ```javascript var clonedElement = document.getElementById('about').cloneNode(true) ``` - - - ```javascript $('#wrap').empty() ``` ```javascript var wrap = document.getElementById('wrap') while(wrap.firstChild) wrap.removeChild(wrap.firstChild) ``` - - - ```javascript if($('#wrap').is(':empty')) ``` ```javascript if(!document.getElementById('wrap').hasChildNodes()) ``` - - - ```javascript var nextElement = $('#wrap').next() ``` ```javascript var nextElement = document.getElementById('wrap').nextSibling ``` -
May 4, 2012 . 1 changed file with 15 additions and 11 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -46,7 +46,8 @@ var newDiv = document.createElement('div') ```javascript newDiv.addClass('foo') ``` <td> ```javascript newDiv.classList.add('foo') ``` @@ -61,16 +62,19 @@ newDiv.classList.toggle('foo') ``` <tr> <td> ```javascript $('a').click(function() { // code… }) ``` <td> ```javascript [].forEach.call(document.querySelectorAll('a'), function(el) { el.addEventListener('click', function() { // code… }) }) ``` <tr> -
May 4, 2012 . 1 changed file with 101 additions and 23 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -41,27 +41,105 @@ var newDiv = $('<div/>') var newDiv = document.createElement('div') ``` <tr> <td> ```javascript newDiv.addClass('foo') ``` <td>```javascript newDiv.classList.add('foo') ``` <tr> <td> ```javascript newDiv.toggleClass('foo') ``` <td> ```javascript newDiv.classList.toggle('foo') ``` <tr> <td> `$('a').click(function() { // code… })` <td> `[].forEach.call(document.querySelectorAll('a'), function(el) { el.addEventListener('click', function() { // code… }) })` ``` <tr> <td> ```javascript $('body').append($('<p/>')) ``` <td> ```javascript document.body.appendChild(document.createElement('p')) ``` <tr> <td> ```javascript $('img').filter(':first').attr('alt', 'My image') ``` <td> ```javascript document.querySelector('img').setAttribute('alt', 'My image') ``` <tr> <td> ```javascript var parent = $('#about').parent() ``` <td> ```javascript var parent = document.getElementById('about').parentNode ``` <tr> <td> ```javascript var clonedElement = $('#about').clone() ``` <td> ```javascript var clonedElement = document.getElementById('about').cloneNode(true) ``` <tr> <td> ```javascript $('#wrap').empty() ``` <td> ```javascript var wrap = document.getElementById('wrap') while(wrap.firstChild) wrap.removeChild(wrap.firstChild) ``` <tr> <td> ```javascript if($('#wrap').is(':empty')) ``` <td> ```javascript if(!document.getElementById('wrap').hasChildNodes()) ``` <tr> <td> ```javascript var nextElement = $('#wrap').next() ``` <td> ```javascript var nextElement = document.getElementById('wrap').nextSibling ``` -
May 4, 2012 . 1 changed file with 24 additions and 11 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -1,33 +1,46 @@ <table> <thead> <tr> <th>jQuery <th>Vanilla <tbody> <tr> <td> ```javascript $(document).ready(function() { // code }) ``` <td> ```javascript document.addEventListener('DOMContentLoaded', function() { // code }) ``` <tr> <td> ```javascript var divs = $('div') ``` <td> ```javascript var divs = document.querySelectorAll('div') ``` <tr> <td> ```javascript var newDiv = $('<div/>') ``` <td> ```javascript var newDiv = document.createElement('div') ``` <tr><td>`newDiv.addClass('foo')` <td>`newDiv.classList.add('foo')` <tr><td>`newDiv.toggleClass('foo') <td>newDiv.classList.toggle('foo') <tr> -
May 4, 2012 . 1 changed file with 16 additions and 8 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -4,19 +4,27 @@ </thead> <tbody> <tr> <td> ```javascript $(document).ready(function() { }) ``` </td> <td> ```javascript document.addEventListener('DOMContentLoaded', function() { }) ``` </td> </tr> <tr> <td> ```javascript var divs = $('div') ``` </td> <td> ```javascript var divs = document.querySelectorAll('div') ``` </td> </tr> <tr><td>`var newDiv = $('<div/>')` <td>`var newDiv = document.createElement('div')` -
May 4, 2012 . No changes.There are no files selected for viewing
-
May 4, 2012 . 1 changed file with 44 additions and 30 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -1,32 +1,46 @@ <table> <thead> <tr><th>jQuery</th><th>Vanilla</th></tr> </thead> <tbody> <tr> <td>```javascript $(document).ready(function() { })``` </td> <td>```javascript document.addEventListener('DOMContentLoaded', function() { })``` </td> </tr> <tr> <td>```javascript var divs = $('div')``` </td> <td>```javascript var divs = document.querySelectorAll('div')``` </td> </tr> <tr><td>`var newDiv = $('<div/>')` <td>`var newDiv = document.createElement('div')` <tr><td>`newDiv.addClass('foo')` <td>`newDiv.classList.add('foo')` <tr><td>`newDiv.toggleClass('foo') <td>newDiv.classList.toggle('foo') <tr> <td> `$('a').click(function() { // code… })` <td> `[].forEach.call(document.querySelectorAll('a'), function(el) { el.addEventListener('click', function() { // code… }) })` <tr><td>`$('body').append($('<p/>')) <td>document.body.appendChild(document.createElement('p')) <tr><td>`$('img').filter(':first').attr('alt', 'My image') <td>document.querySelector('img').setAttribute('alt', 'My image') <tr><td>`var parent = $('#about').parent()` <td>`var parent = document.getElementById('about').parentNode` <tr><td>`var clonedElement = $('#about').clone()` <td>var clonedElement = document.getElementById('about').cloneNode(true) <tr> <td>`$('#wrap').empty()` <td> `var wrap = document.getElementById('wrap') while(wrap.firstChild) wrap.removeChild(wrap.firstChild)` <tr><td>`if($('#wrap').is(':empty'))` <td>`if(!document.getElementById('wrap').hasChildNodes())` <tr><td>`var nextElement = $('#wrap').next()` <td>`var nextElement = document.getElementById('wrap').nextSibling` -
May 4, 2012 . 1 changed file with 4 additions and 3 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -1,9 +1,10 @@ <table> <thead> <tr><th>jQuery</th> <th>Vanilla</th></tr> </thead> <tbody> <tr><td>`$(document).ready(function() { })`</td> <td>`document.addEventListener('DOMContentLoaded', function() { })`</td></tr> <tr><td>var divs = $('div')`</td> <td>`var divs = document.querySelectorAll('div')` <tr><td>`var newDiv = $('<div/>')` <td>`var newDiv = document.createElement('div')` <tr><td>`newDiv.addClass('foo')` <td>`newDiv.classList.add('foo')` <tr><td>`newDiv.toggleClass('foo') <td>newDiv.classList.toggle('foo') -
May 4, 2012 . 1 changed file with 31 additions and 72 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -1,72 +1,31 @@ <table> <thead> <tr><th>jQuery <th>Vanilla <tbody> <tr><td>`$(document).ready(function() { })` <td>`document.addEventListener('DOMContentLoaded', function() { })` <tr><td>var divs = $('div')` <td>`var divs = document.querySelectorAll('div')` <tr><td>`var newDiv = $('<div/>')` <td>`var newDiv = document.createElement('div')` <tr><td>`newDiv.addClass('foo')` <td>`newDiv.classList.add('foo')` <tr><td>`newDiv.toggleClass('foo') <td>newDiv.classList.toggle('foo') <tr> <td> `$('a').click(function() { // code… })` <td> `[].forEach.call(document.querySelectorAll('a'), function(el) { el.addEventListener('click', function() { // code… }) })` <tr><td>`$('body').append($('<p/>')) <td>document.body.appendChild(document.createElement('p')) <tr><td>`$('img').filter(':first').attr('alt', 'My image') <td>document.querySelector('img').setAttribute('alt', 'My image') <tr><td>`var parent = $('#about').parent()` <td>`var parent = document.getElementById('about').parentNode` <tr><td>`var clonedElement = $('#about').clone()` <td>var clonedElement = document.getElementById('about').cloneNode(true) <tr> <td>`$('#wrap').empty()` <td> `var wrap = document.getElementById('wrap') while(wrap.firstChild) wrap.removeChild(wrap.firstChild)` <tr><td>`if($('#wrap').is(':empty'))` <td>`if(!document.getElementById('wrap').hasChildNodes())` <tr><td>`var nextElement = $('#wrap').next()` <td>`var nextElement = document.getElementById('wrap').nextSibling` -
May 4, 2012 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -1,5 +1,5 @@ jQuery | Vanilla ------ | ------- $(document).ready(function() { }); | document.addEventListener("DOMContentLoaded", function() { }); var divs = $("div"); | var divs = document.querySelectorAll("div"); var newDiv = $("<div/>"); | var newDiv = document.createElement("div"); -
May 4, 2012 . 1 changed file with 5 additions and 21 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -1,24 +1,8 @@ jQuery | Vanilla ---------------- $(document).ready(function() { }); | document.addEventListener("DOMContentLoaded", function() { }); var divs = $("div"); | var divs = document.querySelectorAll("div"); var newDiv = $("<div/>"); | var newDiv = document.createElement("div"); // jQuery newDiv.addClass("foo"); -
May 4, 2012 .There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,88 @@ // jQuery $(document).ready(function() { // code… }); // Vanilla document.addEventListener("DOMContentLoaded", function() { // code… }); // jQuery var divs = $("div"); // Vanilla var divs = document.querySelectorAll("div"); // jQuery var newDiv = $("<div/>"); // Vanilla var newDiv = document.createElement("div"); // jQuery newDiv.addClass("foo"); // Vanilla newDiv.classList.add("foo"); // jQuery newDiv.toggleClass("foo"); // Vanilla newDiv.classList.toggle("foo"); // jQuery $("a").click(function() { // code… }) // Vanilla [].forEach.call(document.querySelectorAll("a"), function(el) { el.addEventListener("click", function() { // code… }); }); // jQuery $("body").append($("<p/>")); // Vanilla document.body.appendChild(document.createElement("p")); // jQuery $("img").filter(":first").attr("alt", "My image"); // Vanilla document.querySelector("img").setAttribute("alt", "My image"); // jQuery var parent = $("#about").parent(); // Vanilla var parent = document.getElementById("about").parentNode; // jQuery var clonedElement = $("#about").clone(); // Vanilla var clonedElement = document.getElementById("about").cloneNode(true); // jQuery $("#wrap").empty(); var wrap = document.getElementById("wrap"); // Vanilla while(wrap.firstChild) wrap.removeChild(wrap.firstChild); // jQuery if($("#wrap").is(":empty")) // Vanilla if(!document.getElementById("wrap").hasChildNodes()) // jQuery var nextElement = $("#wrap").next(); // Vanilla var nextElement = document.getElementById("wrap").nextSibling;
Liam Curry
revised
this gist