Skip to content

Instantly share code, notes, and snippets.

@ahmadmilzam

ahmadmilzam/javascript-vs-jquery.md

Forked from magicznyleszek/javascript-vs-jquery.md
Last active September 4, 2015 09:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ahmadmilzam/064afa5f153616fb871b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ahmadmilzam/064afa5f153616fb871b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @magicznyleszek magicznyleszek revised this gist Apr 17, 2014. 1 changed file with 40 additions and 3 deletions.
    43 changes: 40 additions & 3 deletions javascript-vs-jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -240,7 +240,7 @@ function hasClass(el, cl) {

    ``` JavaScript
    function addClass(el, cl) {
    if (!hasClass(el, cl)) {el.className += ' ' + cl;}
    if (!hasClass(el, cl)) { el.className += ' ' + cl; }
    }
    ```

    @@ -253,8 +253,7 @@ function removeClass(el, cl) {

    ``` JavaScript
    function toggleClass(el, cl) {
    if (hasClass(el, cl)) {removeClass(el, cl);}
    else {addClass(el, cl);}
    if (hasClass(el, cl)) { removeClass(el, cl); } else { addClass(el, cl); }
    }
    ```

    @@ -374,6 +373,44 @@ document.addEventListener('DOMContentLoaded', function() {
    ```


    ### Custom event

    jQuery:

    ``` JavaScript
    $('.item').trigger('foo');
    ```

    JavaScript:

    ``` JavaScript
    var element = document.querySelector('.item');
    var foo = new Event('customEvent');
    element.addEventListener('customEvent', function (e) { ... }, false);
    element.dispatchEvent(foo);
    ```


    #### With custom data

    jQuery:

    ``` JavaScript
    $('.item').trigger('customEvent', 'foo');
    ```

    JavaScript:

    ``` JavaScript
    var element = document.querySelector('.item');
    var foo = new CustomEvent('customEvent', {'bar': 'fum'});
    element.addEventListener('customEvent', function (e) {
    console.log(e.bar);
    }, false);
    element.dispatchEvent(foo);
    ```


    ## Helpers


  2. @magicznyleszek magicznyleszek revised this gist Mar 31, 2014. 1 changed file with 9 additions and 1 deletion.
    10 changes: 9 additions & 1 deletion javascript-vs-jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -230,7 +230,7 @@ document.querySelector('.item').className = 'active';
    document.querySelector('.item').className += ' active';
    ```

    Small, custom helper functions for checking if element has class (`hasClass(el, cl)`), adding new class (`addClass(el, cl)`) or removing an existing class (`removeClass(el, cl)`):
    Small, custom helper functions for checking if element has class (`hasClass(el, cl)`), adding new class (`addClass(el, cl)`), removing an existing class (`removeClass(el, cl)`) or toggling a class (`toggleClass(el, cl)`):

    ```JavaScript
    function hasClass(el, cl) {
    @@ -251,12 +251,20 @@ function removeClass(el, cl) {
    }
    ```

    ``` JavaScript
    function toggleClass(el, cl) {
    if (hasClass(el, cl)) {removeClass(el, cl);}
    else {addClass(el, cl);}
    }
    ```

    And then it's easy as pie:

    ``` JavaScript
    hasClass(document.querySelector('.item'), 'active');
    addClass(document.querySelector('.item'), 'active');
    removeClass(document.querySelector('.item'), 'active');
    toggleClass(document.querySelector('.item'), 'active');
    ```


  3. @magicznyleszek magicznyleszek revised this gist Mar 31, 2014. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions javascript-vs-jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -240,9 +240,7 @@ function hasClass(el, cl) {

    ``` JavaScript
    function addClass(el, cl) {
    if (!hasClass(el, cl)) {
    el.className += ' ' + cl;
    }
    if (!hasClass(el, cl)) {el.className += ' ' + cl;}
    }
    ```

  4. @magicznyleszek magicznyleszek revised this gist Mar 31, 2014. 1 changed file with 12 additions and 1 deletion.
    13 changes: 12 additions & 1 deletion javascript-vs-jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -230,21 +230,32 @@ document.querySelector('.item').className = 'active';
    document.querySelector('.item').className += ' active';
    ```

    Small, custom helper functions for checking if element has class (`hasClass(el, cl)`), adding new class (`addClass(el, cl)`) and removing a class (`removeClass(el, cl)`):
    Small, custom helper functions for checking if element has class (`hasClass(el, cl)`), adding new class (`addClass(el, cl)`) or removing an existing class (`removeClass(el, cl)`):

    ```JavaScript
    function hasClass(el, cl) {
    return el.className && new RegExp("(\\s|^)" + cl + "(\\s|$)").test(el.className);
    }
    ```

    ``` JavaScript
    function addClass(el, cl) {
    if (!hasClass(el, cl)) {
    el.className += ' ' + cl;
    }
    }
    ```

    ``` JavaScript
    function removeClass(el, cl) {
    var reg = new RegExp("(\\s|^)" + cl + "(\\s|$)");
    el.className = el.className.replace(reg, " ").replace(/(^\s*)|(\s*$)/g,"");
    }
    ```

    And then it's easy as pie:

    ``` JavaScript
    hasClass(document.querySelector('.item'), 'active');
    addClass(document.querySelector('.item'), 'active');
    removeClass(document.querySelector('.item'), 'active');
  5. @magicznyleszek magicznyleszek revised this gist Mar 31, 2014. 1 changed file with 12 additions and 21 deletions.
    33 changes: 12 additions & 21 deletions javascript-vs-jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -230,36 +230,27 @@ document.querySelector('.item').className = 'active';
    document.querySelector('.item').className += ' active';
    ```

    Check if element has class witha a custom function `addclass(element, cssClass)`:
    Small, custom helper functions for checking if element has class (`hasClass(el, cl)`), adding new class (`addClass(el, cl)`) and removing a class (`removeClass(el, cl)`):

    ```JavaScript
    function hasClass(element, cssClass) {
    return element.className && new RegExp("(\\s|^)" + cssClass + "(\\s|$)").test(element.className);
    function hasClass(el, cl) {
    return el.className && new RegExp("(\\s|^)" + cl + "(\\s|$)").test(el.className);
    }
    hasClass(document.querySelector('.item'), 'active');
    ```

    Add class with a custom function `addclass(element, cssClass)` (uses `hasClass()`):

    ```JavaScript
    function addClass(element, cssClass) {
    if (!hasClass(element, cssClass)) {
    element.className += ' ' + cssClass;
    function addClass(el, cl) {
    if (!hasClass(el, cl)) {
    el.className += ' ' + cl;
    }
    }
    addClass(document.querySelector('.item'), 'active');
    ```

    Remove class with a custom function `removeclass(element, cssClass)`:

    ```JavaScript
    function removeClass(element, cssClass) {
    var reg = new RegExp("(\\s|^)" + cssClass + "(\\s|$)");
    element.className = element.className.replace(reg, " ").replace(/(^\s*)|(\s*$)/g,"");
    function removeClass(el, cl) {
    var reg = new RegExp("(\\s|^)" + cl + "(\\s|$)");
    el.className = el.className.replace(reg, " ").replace(/(^\s*)|(\s*$)/g,"");
    }
    hasClass(document.querySelector('.item'), 'active');
    addClass(document.querySelector('.item'), 'active');
    removeClass(document.querySelector('.item'), 'active');
    ```


    ### Styles


  6. @magicznyleszek magicznyleszek revised this gist Mar 31, 2014. 1 changed file with 40 additions and 1 deletion.
    41 changes: 40 additions & 1 deletion javascript-vs-jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -211,7 +211,7 @@ $('.item').toggleClass('active');
    $('.item').hasClass('active');
    ```

    JavaScript:
    JavaScript for new browsers:

    ``` JavaScript
    document.querySelector('.item').classList.add('active');
    @@ -221,6 +221,45 @@ document.querySelector('.item').classList.contains('active');
    ```


    #### Managing classes for old browsers

    Set class or add to existing in a simple way:

    ``` Javascript
    document.querySelector('.item').className = 'active';
    document.querySelector('.item').className += ' active';
    ```

    Check if element has class witha a custom function `addclass(element, cssClass)`:

    ```JavaScript
    function hasClass(element, cssClass) {
    return element.className && new RegExp("(\\s|^)" + cssClass + "(\\s|$)").test(element.className);
    }
    hasClass(document.querySelector('.item'), 'active');
    ```

    Add class with a custom function `addclass(element, cssClass)` (uses `hasClass()`):

    ```JavaScript
    function addClass(element, cssClass) {
    if (!hasClass(element, cssClass)) {
    element.className += ' ' + cssClass;
    }
    }
    addClass(document.querySelector('.item'), 'active');
    ```

    Remove class with a custom function `removeclass(element, cssClass)`:

    ```JavaScript
    function removeClass(element, cssClass) {
    var reg = new RegExp("(\\s|^)" + cssClass + "(\\s|$)");
    element.className = element.className.replace(reg, " ").replace(/(^\s*)|(\s*$)/g,"");
    }
    removeClass(document.querySelector('.item'), 'active');
    ```

    ### Styles


  7. @magicznyleszek magicznyleszek revised this gist Mar 31, 2014. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions javascript-vs-jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -302,10 +302,10 @@ for (var a = 0; a < elements.length; a++) {

    You can also use one of these simple GlobalEventHandlers events:

    1. `element.onclick = functionRef;` -- when clicked, after the mousedown and mouseup
    2. `element.oninput = functionRef;` -- when input element value changes
    3. `window.onload = funcRef;` -- after all DOM elements and images are loaded
    4. `element.onscroll = functionRef;` -- when content of the element is scrolled
    1. `element.onclick = functionRef` -- when clicked, after the mousedown and mouseup
    2. `element.oninput = functionRef` -- when input element value changes
    3. `window.onload = funcRef` -- after all DOM elements and images are loaded
    4. `element.onscroll = functionRef` -- when content of the element is scrolled


    ### Ready
  8. @magicznyleszek magicznyleszek revised this gist Mar 31, 2014. 1 changed file with 36 additions and 25 deletions.
    61 changes: 36 additions & 25 deletions javascript-vs-jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -33,13 +33,15 @@ var kids = parent.getElementsByClassName('item');
    ```


    ### Family elements
    ### DOM traversing

    jQuery:

    ``` JavaScript
    $('.item').parentNode();
    $('.item').children();
    $('.item').children().first();
    $('.item').children().last();
    $('.item').next();
    $('.item').prev();
    ```
    @@ -49,6 +51,8 @@ JavaScript:
    ``` JavaScript
    document.querySelector('.item').parentNode;
    document.querySelector('.item').children;
    document.querySelector('.item').firstElementChild;
    document.querySelector('.item').lastElementChild;
    document.querySelector('.item').nextElementSibling;
    document.querySelector('.item').previousElementSibling;
    ```
    @@ -94,33 +98,37 @@ document.querySelector('.item').insertAdjacentHTML('afterend', '<p>Text</p>');
    ```


    #### Clear HTML content
    #### Manage HTML content

    jQuery:

    ``` JavaScript
    $('.item').empty();
    $('.item').html('<p>Text</p>');
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.item').innerHTML = null;
    document.querySelector('.item').innerHTML = '<p>Text</p>';
    ```


    #### Change HTML content
    ### Manage text content

    jQuery:

    ``` JavaScript
    $('.item').html('<p>Text</p>');
    $('.item').text();
    $('.item').text('Text');
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.item').innerHTML = '<p>Text</p>';
    document.querySelector('.item').textContent;
    document.querySelector('.item').textContent = 'Text';
    ```


    @@ -155,40 +163,40 @@ if (!document.querySelector('.item').hasChildNodes());
    ```


    ### Manage text content
    ### HTML attributes


    #### Managing attributes

    jQuery:

    ``` JavaScript
    $('.item').text();
    $('.item').text('Text');
    $('.home').attr('href');
    $('.home').attr('href', 'http://corpo.org');
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.item').textContent;
    document.querySelector('.item').textContent = 'Text';
    document.querySelector('.home').getAttribute('href');
    document.querySelector('.home').setAttribute('href', 'http://corpo.org');
    ```


    ### HTML attributes


    #### Managing attributes
    #### Get real image dimensions

    jQuery:

    ``` JavaScript
    $('.home').attr('href');
    $('.home').attr('href', 'http://corpo.org');
    $('img').naturalWidth;
    $('img').naturalHeight;
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.home').getAttribute('href');
    document.querySelector('.home').setAttribute('href', 'http://corpo.org');
    document.querySelector('img').naturalWidth;
    document.querySelector('img').naturalHeight;
    ```


    @@ -200,6 +208,7 @@ jQuery:
    $('.item').addClass('active');
    $('.item').removeClass('active');
    $('.item').toggleClass('active');
    $('.item').hasClass('active');
    ```

    JavaScript:
    @@ -208,6 +217,7 @@ JavaScript:
    document.querySelector('.item').classList.add('active');
    document.querySelector('.item').classList.remove('active');
    document.querySelector('.item').classList.toggle('active');
    document.querySelector('.item').classList.contains('active');
    ```


    @@ -275,18 +285,19 @@ jQuery:

    ``` JavaScript
    $('.clickable').on('click', function(e) {
    console.log('You clicked ' + e.target);
    e.preventDefault();
    ...
    });
    ```

    JavaScript:

    ``` JavaScript
    document.querySelectorAll('.clickable').addEventListener('click', function(e) {
    console.log('You clicked ' + e.target);
    e.preventDefault();
    });
    var elements = document.querySelectorAll('.clickable');
    for (var a = 0; a < elements.length; a++) {
    elements[a].addEventListener('click', function(e) {
    ...
    }, false);
    }
    ```

    You can also use one of these simple GlobalEventHandlers events:
    @@ -312,7 +323,7 @@ JavaScript:
    ``` JavaScript
    document.addEventListener('DOMContentLoaded', function() {
    ...
    });
    }, false);
    ```


  9. @magicznyleszek magicznyleszek revised this gist Mar 31, 2014. 1 changed file with 235 additions and 34 deletions.
    269 changes: 235 additions & 34 deletions javascript-vs-jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -8,13 +8,13 @@ Some vanilla equivalents to jQuery methods.
    jQuery:

    ``` JavaScript
    var target = $('.page-content');
    $('.item');
    ```

    JavaScript:

    ``` JavaScript
    var target = document.querySelectorAll('.page-content');
    document.querySelectorAll('.item');
    ```

    To be precise, there are five different ways for it:
    @@ -28,8 +28,8 @@ To be precise, there are five different ways for it:
    You can link those to find descendants:

    ``` JavaScript
    var parent = document.getElementById('distinct-id');
    var kids = parent.getElementsByClassName('my-class');
    var parent = document.getElementById('distinct');
    var kids = parent.getElementsByClassName('item');
    ```


    @@ -38,50 +38,105 @@ var kids = parent.getElementsByClassName('my-class');
    jQuery:

    ``` JavaScript
    var nextElement = $('.page-content').next();
    var parentElement = $('.page-content').parentNode();
    $('.item').parentNode();
    $('.item').children();
    $('.item').next();
    $('.item').prev();
    ```

    JavaScript:

    ``` JavaScript
    var nextElement = document.querySelector('.page-content').nextSibling;
    var parentElement = document.querySelector('.page-content').parentNode;
    document.querySelector('.item').parentNode;
    document.querySelector('.item').children;
    document.querySelector('.item').nextElementSibling;
    document.querySelector('.item').previousElementSibling;
    ```


    ## DOM manipulation


    ### Adding HTML
    ### Changing HTML


    #### Append

    jQuery:

    ``` JavaScript
    $('.page-content').append('<p>Some more text.</p>');
    $('.item').append('<p>Text</p>');
    ```

    JavaScript:

    ``` JavaScript
    var something = document.createElement('p');
    something.appendChild(document.createTextNode('Some more text.'));
    document.querySelector('.page-content').appendChild(something);
    something.appendChild(document.createTextNode('Text'));
    document.querySelector('.item').appendChild(something);
    ```


    #### Before & after

    jQuery:

    ``` JavaScript
    $('.item').before('<p>Text</p>');
    $('.item').after('<p>Text</p>');
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.item').insertAdjacentHTML('beforebegin', '<p>Text</p>');
    document.querySelector('.item').insertAdjacentHTML('afterend', '<p>Text</p>');
    ```


    #### Clear HTML content

    jQuery:

    ``` JavaScript
    $('.item').empty();
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.item').innerHTML = null;
    ```

    ### Clear HTML element content

    #### Change HTML content

    jQuery:

    ``` JavaScript
    $('.page-content').empty();
    $('.item').html('<p>Text</p>');
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.page-contentt').innerHTML = null;
    document.querySelector('.item').innerHTML = '<p>Text</p>';
    ```


    #### Remove HTML element

    jQuery:

    ``` JavaScript
    $('.item').remove();
    ```

    JavaScript:

    ``` JavaScript
    var element = document.querySelector('.item');
    element.parentNode.removeChild(element);
    ```


    @@ -90,68 +145,124 @@ document.querySelector('.page-contentt').innerHTML = null;
    jQuery:

    ``` JavaScript
    if ($('.page-content').is(':empty'))
    if ($('.item').is(':empty'));
    ```

    JavaScript:

    ``` JavaScript
    if (!document.getElementById('.page-content').hasChildNodes());
    if (!document.querySelector('.item').hasChildNodes());
    ```


    ### Remove HTML element
    ### Manage text content

    jQuery:

    ``` JavaScript
    $('.page-content').remove();
    $('.item').text();
    $('.item').text('Text');
    ```

    JavaScript:

    ``` JavaScript
    var something = document.querySelector('.unwanted-stuff');
    something.parentNode.removeChild(something);
    document.querySelector('.item').textContent;
    document.querySelector('.item').textContent = 'Text';
    ```


    ### HTML attributes


    #### Managing Classes
    #### Managing attributes

    jQuery:

    ``` JavaScript
    $('.list-element').addClass('active');
    $('.list-element').removeClass('active');
    $('.list-element').toggleClass('active');
    $('.home').attr('href');
    $('.home').attr('href', 'http://corpo.org');
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.list-element').classList.add('active');
    document.querySelector('.list-element').classList.remove('active');
    document.querySelector('.list-element').classList.toggle('active');
    document.querySelector('.home').getAttribute('href');
    document.querySelector('.home').setAttribute('href', 'http://corpo.org');
    ```


    #### Managing attributes
    #### Managing classes

    jQuery:

    ``` JavaScript
    $('.item').addClass('active');
    $('.item').removeClass('active');
    $('.item').toggleClass('active');
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.item').classList.add('active');
    document.querySelector('.item').classList.remove('active');
    document.querySelector('.item').classList.toggle('active');
    ```


    ### Styles


    #### Change style

    jQuery:

    ``` JavaScript
    $('.item').hide();
    $('.item').show();
    $('.item').css('border-width', '1rem');
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.item').style.display = 'none';
    document.querySelector('.item').style.display = '';
    document.querySelector('.item').style.borderWidth = '1rem';
    ```


    #### Get style

    jQuery:

    ``` JavaScript
    $('.item').css(display);
    ```

    JavaScript:

    ``` JavaScript
    var element = document.querySelector('.item');
    getComputedStyle(element)[display];
    ```


    #### Get position

    jQuery:

    ``` JavaScript
    $('.home-link').attr('href');
    $('.home-link').attr('href', 'http://corpo.org');
    $('.item').position().left;
    $('.item').position().top;
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.home-link').getAttribute('href');
    document.querySelector('.home-link').setAttribute('href', 'http://corpo.org');
    document.querySelector('.item').offsetLeft;
    document.querySelector('.item').offsetTop;
    ```


    @@ -183,4 +294,94 @@ You can also use one of these simple GlobalEventHandlers events:
    1. `element.onclick = functionRef;` -- when clicked, after the mousedown and mouseup
    2. `element.oninput = functionRef;` -- when input element value changes
    3. `window.onload = funcRef;` -- after all DOM elements and images are loaded
    4. `element.onscroll = functionRef;` -- when content of the element is scrolled
    4. `element.onscroll = functionRef;` -- when content of the element is scrolled


    ### Ready

    jQuery:

    ``` JavaScript
    $(document).ready(function(){
    ...
    });
    ```

    JavaScript:

    ``` JavaScript
    document.addEventListener('DOMContentLoaded', function() {
    ...
    });
    ```


    ## Helpers


    ### Each

    jQuery:

    ``` JavaScript
    $('.item').each(function(i, el){
    ...
    });
    ```

    JavaScript:

    ``` JavaScript
    var elements = document.querySelectorAll('.item');
    for (var a = 0; a < elements.length; a++) {
    ...
    }
    ```


    ### Index of

    jQuery:

    ``` JavaScript
    var array = ['a','b','c'];
    $.inArray('b', array);
    ```

    JavaScript:

    ``` JavaScript
    var array = ['a','b','c'];
    array.indexOf('b');
    ```


    ### Now

    jQuery:

    ``` JavaScript
    $.now();
    ```

    JavaScript:

    ``` JavaScript
    Date.now();
    ```


    ### Trim whitespace

    jQuery:

    ``` JavaScript
    $.trim(' string ');
    ```

    JavaScript:

    ``` JavaScript
    var string = ' string ';
    string.trim();
    ```
  10. @magicznyleszek magicznyleszek revised this gist Mar 29, 2014. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion javascript-vs-jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -33,18 +33,20 @@ var kids = parent.getElementsByClassName('my-class');
    ```


    ### Next element
    ### Family elements

    jQuery:

    ``` JavaScript
    var nextElement = $('.page-content').next();
    var parentElement = $('.page-content').parentNode();
    ```

    JavaScript:

    ``` JavaScript
    var nextElement = document.querySelector('.page-content').nextSibling;
    var parentElement = document.querySelector('.page-content').parentNode;
    ```


  11. @magicznyleszek magicznyleszek revised this gist Mar 29, 2014. 1 changed file with 30 additions and 39 deletions.
    69 changes: 30 additions & 39 deletions javascript-vs-jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -33,6 +33,21 @@ var kids = parent.getElementsByClassName('my-class');
    ```


    ### Next element

    jQuery:

    ``` JavaScript
    var nextElement = $('.page-content').next();
    ```

    JavaScript:

    ``` JavaScript
    var nextElement = document.querySelector('.page-content').nextSibling;
    ```


    ## DOM manipulation


    @@ -68,96 +83,72 @@ document.querySelector('.page-contentt').innerHTML = null;
    ```


    ### Remove HTML element
    ### Check if element is empty

    jQuery:

    ``` JavaScript
    $('.page-content').remove();
    if ($('.page-content').is(':empty'))
    ```

    JavaScript:

    ``` JavaScript
    var something = document.querySelector('.unwanted-stuff');
    something.parentNode.removeChild(something);
    if (!document.getElementById('.page-content').hasChildNodes());
    ```


    ### HTML attributes


    #### Add Class
    ### Remove HTML element

    jQuery:

    ``` JavaScript
    $('.list-element').addClass('active');
    $('.page-content').remove();
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.list-element').classList.add('active');
    ```


    #### Remove Class

    jQuery:

    ``` JavaScript
    $('.list-element').removeClass('active');
    var something = document.querySelector('.unwanted-stuff');
    something.parentNode.removeChild(something);
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.list-element').classList.remove('active');
    ```
    ### HTML attributes


    #### Toggle Class
    #### Managing Classes

    jQuery:

    ``` JavaScript
    $('.list-element').addClass('active');
    $('.list-element').removeClass('active');
    $('.list-element').toggleClass('active');
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.list-element').classList.add('active');
    document.querySelector('.list-element').classList.remove('active');
    document.querySelector('.list-element').classList.toggle('active');
    ```


    #### Get attribute
    #### Managing attributes

    jQuery:

    ``` JavaScript
    $('.home-link').attr('href');
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.home-link').getAttribute('href');
    ```


    ### Set attribute

    jQuery:

    ``` JavaScript
    $('.home-link').attr('href', 'http://corpo.org');
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.home-link').getAttribute('href');
    document.querySelector('.home-link').setAttribute('href', 'http://corpo.org');
    ```

  12. @magicznyleszek magicznyleszek revised this gist Mar 29, 2014. 1 changed file with 78 additions and 0 deletions.
    78 changes: 78 additions & 0 deletions javascript-vs-jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -84,6 +84,84 @@ something.parentNode.removeChild(something);
    ```


    ### HTML attributes


    #### Add Class

    jQuery:

    ``` JavaScript
    $('.list-element').addClass('active');
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.list-element').classList.add('active');
    ```


    #### Remove Class

    jQuery:

    ``` JavaScript
    $('.list-element').removeClass('active');
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.list-element').classList.remove('active');
    ```


    #### Toggle Class

    jQuery:

    ``` JavaScript
    $('.list-element').toggleClass('active');
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.list-element').classList.toggle('active');
    ```


    #### Get attribute

    jQuery:

    ``` JavaScript
    $('.home-link').attr('href');
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.home-link').getAttribute('href');
    ```


    ### Set attribute

    jQuery:

    ``` JavaScript
    $('.home-link').attr('href', 'http://corpo.org');
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.home-link').setAttribute('href', 'http://corpo.org');
    ```


    ## Events


  13. @magicznyleszek magicznyleszek revised this gist Mar 29, 2014. 1 changed file with 32 additions and 1 deletion.
    33 changes: 32 additions & 1 deletion javascript-vs-jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -81,4 +81,35 @@ JavaScript:
    ``` JavaScript
    var something = document.querySelector('.unwanted-stuff');
    something.parentNode.removeChild(something);
    ```
    ```


    ## Events


    ### Click

    jQuery:

    ``` JavaScript
    $('.clickable').on('click', function(e) {
    console.log('You clicked ' + e.target);
    e.preventDefault();
    });
    ```

    JavaScript:

    ``` JavaScript
    document.querySelectorAll('.clickable').addEventListener('click', function(e) {
    console.log('You clicked ' + e.target);
    e.preventDefault();
    });
    ```

    You can also use one of these simple GlobalEventHandlers events:

    1. `element.onclick = functionRef;` -- when clicked, after the mousedown and mouseup
    2. `element.oninput = functionRef;` -- when input element value changes
    3. `window.onload = funcRef;` -- after all DOM elements and images are loaded
    4. `element.onscroll = functionRef;` -- when content of the element is scrolled
  14. @magicznyleszek magicznyleszek revised this gist Mar 29, 2014. 1 changed file with 54 additions and 4 deletions.
    58 changes: 54 additions & 4 deletions javascript-vs-jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,18 +3,18 @@
    Some vanilla equivalents to jQuery methods.


    ## DOM Selectors
    ## DOM selectors

    jQuery:

    ``` JavaScript
    var target = $('.some. classes');
    var target = $('.page-content');
    ```

    JavaScript
    JavaScript:

    ``` JavaScript
    var target = document.querySelectorAll('.some. classes');
    var target = document.querySelectorAll('.page-content');
    ```

    To be precise, there are five different ways for it:
    @@ -32,3 +32,53 @@ var parent = document.getElementById('distinct-id');
    var kids = parent.getElementsByClassName('my-class');
    ```


    ## DOM manipulation


    ### Adding HTML

    jQuery:

    ``` JavaScript
    $('.page-content').append('<p>Some more text.</p>');
    ```

    JavaScript:

    ``` JavaScript
    var something = document.createElement('p');
    something.appendChild(document.createTextNode('Some more text.'));
    document.querySelector('.page-content').appendChild(something);
    ```


    ### Clear HTML element content

    jQuery:

    ``` JavaScript
    $('.page-content').empty();
    ```

    JavaScript:

    ``` JavaScript
    document.querySelector('.page-contentt').innerHTML = null;
    ```


    ### Remove HTML element

    jQuery:

    ``` JavaScript
    $('.page-content').remove();
    ```

    JavaScript:

    ``` JavaScript
    var something = document.querySelector('.unwanted-stuff');
    something.parentNode.removeChild(something);
    ```
  15. @magicznyleszek magicznyleszek created this gist Mar 29, 2014.
    34 changes: 34 additions & 0 deletions javascript-vs-jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    # Vanilla JavaScript

    Some vanilla equivalents to jQuery methods.


    ## DOM Selectors

    jQuery:

    ``` JavaScript
    var target = $('.some. classes');
    ```

    JavaScript

    ``` JavaScript
    var target = document.querySelectorAll('.some. classes');
    ```

    To be precise, there are five different ways for it:

    1. `document.querySelectorAll(selector)` -- all matching nodes
    2. `document.querySelector(selector)` -- the first matching node
    3. `document.getElementById(idname)` -- a single node by id
    4. `document.getElementsByTagName(tagname)` -- all nodes by html tag
    5. `document.getElementsByClassName(class)` -- all nodes by class

    You can link those to find descendants:

    ``` JavaScript
    var parent = document.getElementById('distinct-id');
    var kids = parent.getElementsByClassName('my-class');
    ```