Vanilla JS - Documentation en français

Obtenir un nœud par son identifiant...

var htmlElement = $('#id')[0];

...avec Vanilla JS

var htmlElement = document.getElementById('id');

Obtenir un nœud avec un sélecteur...

var htmlElement = $('#id .classname tagname')[0];

...avec Vanilla JS

var htmlElement = document.querySelector('#id .classname tagname');

Obtenir plusieurs nœuds avec un sélecteur...

$('#id .classname tagname').each(function (i, htmlElement) {
    htmlElement;
});

...avec Vanilla JS

var nodeList = document.querySelectorAll('#id .classname tagname'); // Not Live (Snapshot)
[].forEach.call(nodeList, function (node) {
    node;
});

Obtenir un nœud par par son nom de classe...

$('.classname').each(function (i, htmlElement) {
    htmlElement;
});

...avec Vanilla JS

var htmlCollection = document.getElementsByClassName('classname'); // Live
// var nodeList = document.querySelectorAll('.classname'); // Not Live (Snapshot)
[].forEach.call(htmlCollection, function (htmlElement) {
    htmlElement;
});

Obtenir un nœud par son attribut `name`...

$('[name="classname"]').each(function (i, htmlElement) {
    htmlElement;
});

...avec Vanilla JS

var nodeList = document.getElementsByName("name"); // Live
// var nodeList = document.querySelectorAll('[name=name]'); // Not Live (Snapshot)
[].forEach.call(nodeList, function (node) {
    node;
});

Obtenir un nœud par son nom de balise...

$('tagname').each(function (i, htmlElement) {
    htmlElement;
});

...avec Vanilla JS

var htmlCollection = document.getElementsByTagName('tagname'); // Live
// var nodeList = document.querySelectorAll('tagname'); // Not Live (Snapshot)
[].forEach.call(htmlCollection, function (htmlElement) {
    htmlElement;
});

Parcourir les nœuds dans leur ordre inverse...

$($('.className').get().reverse()).each(function (i, htmlElement) {
    htmlElement;
});

...avec Vanilla JS

var htmlCollection = document.getElementsByClassName('className'), // Live
    i = htmlCollection.length;
while (htmlElement = htmlCollection[--i]) {
    htmlElement;
}

Ajouter une classe...

$(<htmlElement>).addClass(<className>);

...avec Vanilla JS

<htmlElement>.classList.add(<className>);

Obtenir un attribut d'un nœud HTML...

$(<htmlElement>).attr(<attributeName>);

...avec Vanilla JS

<htmlElement>.getAttribute(<attributeName>);

Obtenir une donnée d'un nœud HTML...

$(<htmlElement>).data(<dataName>);

...avec Vanilla JS

<htmlElement>.getAttribute('data-' + <dataName>);

Obtenir la valeur d'un champ de formulaire...

$(<htmlElement>).value();

...avec Vanilla JS

<htmlElement>.value;

Vérifier la présence d'une classe...

$(<htmlElement>).hasClass(<className>);

...avec Vanilla JS

<htmlElement>.classList.contains(<className>);

Retirer un attribut...

$(<htmlElement>).removeAttr(<attributeName>);

...avec Vanilla JS

<htmlElement>.removeAttribute(<attributeName>);

Retirer une classe...

$(<htmlElement>).removeClass(<className>);

...avec Vanilla JS

<htmlElement>.classList.remove(<className>);

Retirer une donnée d'un nœud HTML...

$(<htmlElement>).removeData(<dataName>);

...avec Vanilla JS

<htmlElement>.removeAttribute('data-' + <dataName>);

Définir un attribut d'un nœud HTML...

$(<htmlElement>).attr(<attributeName>, <value>);

...avec Vanilla JS

<htmlElement>.setAttribute(<attributeName>, <value>);

Définir une donnée d'un nœud HTML...

$(<htmlElement>).data(<dataName>, <value>);

...avec Vanilla JS

<htmlElement>.setAttribute('data-' + <dataName>, <value>);

Définir la valeur d'un champ de formulaire...

$(<htmlElement>).value(<value>);

...avec Vanilla JS

<htmlElement>.value = <value>;

Retirer ou ajouter une classe...

$(<htmlElement>).toggleClass(<className>);

...avec Vanilla JS

<htmlElement>.classList.toggle(<className>);

Enyoyer des informations à une URL par méthode GET...

$.ajax({
    type: 'GET',
    url: <url>,
    data: <data>
});

...avec Vanilla JS

fetch(<url>, {
    method: 'GET',
    body: <data>
});

/* // IE fallback
var get = new XMLHttpRequest();
get.open('GET', <url>, true);
get.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
get.send(<data>); */

Récupérer des informations au format JSON...

function getJSON(url, next) {
    $.getJSON(url, function (data) {
        next(null, data);
    }).error(function () {
        next(new Error('There was a connection error of some sort.'));
    });
}

getJSON(<url>, function (err, data) {
    if (err) {
        return err;
    }
    data;
});

...avec Vanilla JS

function getJSON(url, next) {
    fetch(url)
        .then(function (data) {
            if (data.status >= 200 && data.status < 300) {
                return data;
            } 
            next(new Error('We reached our target server, but it returned an error.'));
        })
        .then(function (data) {
            next(null, data.json());
        })
        .catch(function () {
            next(new Error('There was a connection error of some sort.'));
        });
}

/* // IE fallback
function getJSON(url, next) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.send();
    request.addEventListener('load', function () {
        if (request.status < 200 && request.status >= 400) {
            return next(new Error('We reached our target server, but it returned an error.'));
        }
        next(null, JSON.parse(request.responseText));
    });
    request.addEventListener('error', function () {
        next(new Error('There was a connection error of some sort.'));
    });
} */
getJSON(<url>, function (err, data) {
    if (err) {
        return err;
    }
    data;
});

Enyoyer des informations à une URL par méthode POST...

$.ajax({
    type: 'POST',
    url: <url>,
    data: <data>
});

...avec Vanilla JS

fetch(<url>, {
    method: 'POST',
    body: <data>
});

/* // IE fallback
var post = new XMLHttpRequest();
post.open('POST', <url>, true);
post.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
post.send(<data>); */

Récupérer le contenu d'une URL...

function request(url, next) {
    $.ajax({
        type: 'GET',
        url: url,
        success: function(response) {
            next(null, response);
        },
        error: function() {
            next(new Error('There was a connection error of some sort.'));
        }
    });
}

request(<url>, function (err, response) {
    if (err) {
        return err;
    }
    response;
});

...avec Vanilla JS

function request(url, next) {
    fetch(url)
        .then(function (response) {
            if (response.status >= 200 && response.status < 300) {
                return response;
            } 
            next(new Error('We reached our target server, but it returned an error.'));
        })
        .then(function (response) {
            next(null, response);
        })
        .catch(function () {
            next(new Error('There was a connection error of some sort.'));
        });
}

/* // IE fallback
function request(url, next) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.send();
    request.addEventListener('load', function () {
        if (request.status < 200 && request.status >= 400) {
            return next(new Error('We reached our target server, but it returned an error.'));
        }
        next(null, request.responseText);
    });
    request.addEventListener('error', function () {
        return next(new Error('There was a connection error of some sort.'));
    });
} */
request(>url>, function (err, response) {
    if (err) {
      return err;
    }
    response;
});

Animer une propriété...

function fadeIn($element, speed, next) {
    $element.css('opacity', '0').animate({ opacity: 1 }, speed, next);
}
fadeIn($(<htmlElement>), 2000, function () {
  $(this).css('opacity', '');
});

...avec Vanilla JS

function fadeIn(htmlElement, speed, next) {
    var last = +new Date(),
        tick = function () {
            htmlElement.style.opacity = +htmlElement.style.opacity + (new Date() - last) / speed;
            last = +new Date();
            if (+htmlElement.style.opacity < 1) {
                requestAnimationFrame(tick);
            } else if (next) {
                next.call(htmlElement);
            }
        };
    htmlElement.style.opacity = 0;
    tick();
}

fadeIn(<htmlElement>, 2000, function () {
    this.style.opacity = '';
});

Cacher un élément...

$(<htmlElement>).hide();

...avec Vanilla JS

<htmlElement>.style.display = 'none';

Afficher un élément...

$(<htmlElement>).show();

...avec Vanilla JS

<htmlElement>.style.display = '';

Équivalent du hover CSS en JavaScript...

$(<htmlElement>).hover(<eventHandlerMouseIn>, <eventHandlerMouseOut>);

...avec Vanilla JS

<htmlElement>.addEventListener('mouseenter', <eventHandlerMouseIn>);
<htmlElement>.addEventListener('mouseleave', <eventHandlerMouseOut>);

Attendre que le DOM et les fichiers externes (images, styles, scripts) soient chargés...

$(<htmlElement).load(function () {
    // I am full loaded.
});

...avec Vanilla JS

<htmlElement>.addEventListener('load', function () {
    // I am full loaded.
});

Se désabonner d'un évènement...

$(<htmlElement>).off(<eventName>, <eventHandler>);

...avec Vanilla JS

<htmlElement>.removeEventListener(<eventName>, <eventHandler>);

S'abonner à un évènement...

$(<htmlElement>).on(<eventName>, <eventHandler>);

...avec Vanilla JS

<htmlElement>.addEventListener(<eventName>, <eventHandler>);

S'abonner à un évènement une seule fois...

$(<htmlElement>).one(<eventName>, <eventHandler>);

...avec Vanilla JS

<htmlElement>.addEventListener(<eventName>, <eventHandler>, { once: true });

/* // IE fallback
<htmlElement>.addEventListener(<eventName>, function callee(event) {
    event.target.removeEventListener(e.type, callee);
}); */

Attendre que le DOM soit chargé...

$(document).ready(function () {
    // I am ready to be manipulate.
});

...avec Vanilla JS

document.addEventListener('DOMContentLoaded', function () {
    // I am ready to be manipulate.
});

Déclencher un évènement...

var event = jQuery.Event('click');
event.test = true;

$(<htmlElement>).click(function (event) {
    event.test; // undefined by click, true by trigger.
});
$(<htmlElement>).trigger(event);
// $(<htmlElement>).trigger('click'); // Shortcut without test property.

...avec Vanilla JS

var event = new Event('click');
event.test = true;

<htmlElement>.addEventListener('click', function (event) {
    event.test; // undefined by click, true by trigger.
});
<htmlElement>.dispatchEvent(event);

Retirer des nœuds d'une liste d'après des instructions...

$(<selector>).filter(function (i, htmlElement) {
    return <filterCondition>;
}).each(function (i, htmlElement) {
    htmlElement;
});

...avec Vanilla JS

var nodeList = document.querySelectorAll(<selector>);

nodeList = [].filter.call(nodeList, function (node) {
    return <filterCondition>;
});
[].forEach.call(nodeList, function (node) {
    node;
});

Sélectionner le premier nœud d'une liste...

$(<selector>).first();

...avec Vanilla JS

<htmlCollection>.item(0);
// <htmlCollection>[0];

Quels nœuds contiennent l'élément enfant...

$(<selector>).has(<matchesChildSelector>);

...avec Vanilla JS

var nodeList = document.querySelectorAll(<selector>);
[].filter.call(nodeList, function (node) {
    return node.querySelector(<matchesChildSelector>);
});

Est-ce qu'au moins un nœud correspond...

$(<selector>).is(<matchesSelector>);

...avec Vanilla JS

var nodeList = document.querySelectorAll(<selector>);
[].some.call(nodeList, function (node) {
    return node.matches(<matchesSelector>);
});

Sélectionner un nœud à l'index souhaité d'une liste...

$(<selector>).eq(<index>);

...avec Vanilla JS

<htmlCollection>.item(<index>);
// <htmlCollection>[<index>];

Sélectionner le dernier nœud d'une liste...

$(<selector>).last();

...avec Vanilla JS

<htmlCollection>.item(<htmlCollection>.length - 1);
// <htmlCollection>[<htmlCollection>.length - 1];

Récupérer les nœuds qui ne correspondent pas...

$(<selector>).not(<matchesSelector>);

...avec Vanilla JS

var nodeList = document.querySelectorAll(<selector>);
[].filter.call(nodeList, function (node) {
    return !node.matches(<matchesSelector>);
});

Sélectionner une portion de nœuds dans une liste...

$(<selector>).slice(<startIndex>, <endIndex>);

...avec Vanilla JS

var nodeList = document.querySelectorAll(<selector>);
[].slice.call(nodeList, <startIndex>, <endIndex>);

(Dé)placer un nœud dans un autre nœud, à la fin...

$(<htmlElement>).append($(<appendHtmlElement>));
// $(<htmlElement>).append(<htmlString>);

...avec Vanilla JS

<htmlElement>.appendChild(<appendHtmlElement>);
// <htmlElement>.insertAdjacentHTML('beforeEnd', <htmlString>);

Dupliquer un nœud...

$(<htmlElement>).clone();

...avec Vanilla JS

<htmlElement>.cloneNode(true);

Comparer deux nœuds du DOM...

var $a = $(<selectorToFirstHtmlElement>).find(<selectorToSecondHtmlElement>);
    $b = $(<selectorToSecondElement>);

$a.is($b);

...avec Vanilla JS

var temp = document.getElementsByTagName(<selectorToFirstHtmlElement>)[0],
    a = temp.getElementsByTagName(<selectorToSecondHtmlElement>)[0],
    b = document.querySelector(<selectorToSecondHtmlElement>);

(a === b);

Savoir si un nœud est le fils d'un autre...

$.contains($(<htmlElement>), $(<childHtmlElement>));

...avec Vanilla JS

(<htmlElement> !== <childHtmlElement>) && <htmlElement>.contains(<childHtmlElement>);

Créer un nouveau nœud HTML...

$('<' + <tagString> + '>');

...avec Vanilla JS

document.createElement(<tagString>);

Effacer tout le contenu d'un nœud...

$(<htmlElement>).empty();

...avec Vanilla JS

<htmlElement>.innerHTML = '';

Obtenir le HTML interne d'un élément...

$(<htmlElement>).html();

...avec Vanilla JS

<htmlElement>.innerHTML;

Obtenir le HTML d'un élément (lui y compris)...

$('<div>').append($(<htmlElement>).clone()).html();

...avec Vanilla JS

<htmlElement>.outerHTML;

Obtenir le texte interne d'un objet...

$(<htmlElement>).text();

...avec Vanilla JS

<htmlElement>.textContent;

Connaître la position d'un nœud dans son parent...

$(<htmlElement>).index();

...avec Vanilla JS

[].slice.call(<htmlElement>.parentNode.children).indexOf(<htmlElement>);

Créer un nœud après un nœud...

$(<htmlElement>).after($(<afterHtmlElement>));
// $(<htmlElement>).after(<htmlString>);

...avec Vanilla JS

<htmlElement>.parentNode.insertBefore(<afterHtmlElement>, <htmlElement>.nextElementSibling);
// <htmlElement>.insertAdjacentHTML('afterend', <htmlString>);

Créer un nœud avant un nœud...

$(<htmlElement>).before($(<beforeHtmlElement>));
// $(<htmlElement>).before(<htmlString>);

...avec Vanilla JS

<htmlElement>.parentNode.insertBefore(<beforeHtmlElement>, <htmlElement>);
// <htmlElement>.insertAdjacentHTML('beforebegin', <htmlString>);

(Dé)placer un nœud dans un autre nœud, au début...

$(<htmlElement>).prepend($(<prependHtmlElement>));
// $(<htmlElement>).prepend(<htmlString>);

...avec Vanilla JS

<htmlElement>.insertBefore(<prependHtmlElement>, <htmlElement>.firstChild);
// <htmlElement>.insertAdjacentHTML('afterBegin', <htmlString>);

Retirer un nœud du DOM...

$(<htmlElement>).remove();

...avec Vanilla JS

<htmlElement>.parentNode.removeChild(<htmlElement>);

Retirer tous les enfants d'un nœud du DOM...

$(<htmlElement>).empty();

...avec Vanilla JS

while (<htmlElement>.firstChild) {
    <htmlElement>.removeChild(<htmlElement>.firstChild);
}
// <htmlElement>.innerHTML = '';

Remplacer un nœud du DOM par un autre...

$(<htmlElement>).replaceWith($(<newHtmlElement>));

...avec Vanilla JS

<htmlElement>.parentNode.replaceChild(<newHtmlElement>, <htmlElement>);

Définir le HTML interne d'un élément...

$(<htmlElement>).html(<htmlString>);

...avec Vanilla JS

<htmlElement>.innerHTML = <htmlString>;

Définir le HTML d'un élément (lui y compris)...

$(<htmlElement>).replaceWith(<htmlString>);

...avec Vanilla JS

<htmlElement>.outerHTML = <htmlString>;

Définir le texte interne d'un objet...

$(<htmlElement>).text(<string>);

...avec Vanilla JS

<htmlElement>.textContent = <string>;

Retirer le nœud englobant de tous les nœuds enfants...

$(<htmlElement>).unwrap();

...avec Vanilla JS

while (<htmlElement>.firstChild) {
    <unwrapHtmlElement>.insertBefore(<htmlElement>.firstChild, <htmlElement>);
}
<unwrapHtmlElement>.removeChild(<htmlElement>);

Entourer un nœud du DOM par un autre...

$(<htmlElement>).wrap($(<wrapHtmlElement>));

...avec Vanilla JS

<htmlElement>.parentNode.insertBefore(<wrapHtmlElement>, <htmlElement>);
<wrapHtmlElement>.appendChild(<htmlElement>);

Obtenir tous les nœuds après...

$(<htmlElement>).nextAll();

...avec Vanilla JS

var nextAll = false;
nextAll = [].filter.call(<htmlElement>.parentNode.children, function (htmlElement) {
    return (htmlElement.previousElementSibling === <htmlElement>) ? nextAll = true : nextAll;
});

Obtenir tous les nœuds parents au dessus...

var parents = $(<htmlElement>).parents();

...avec Vanilla JS

var htmlElement = <htmlElement>,
    parents = [];
while (htmlElement = htmlElement.parentNode) {
    parents.push(htmlElement);
}
parents;

Obtenir tous les nœuds avant...

$(<htmlElement>).prevAll();

...avec Vanilla JS

var prevAll = true;
prevAll = [].filter.call(<htmlElement>.parentNode.children, function (htmlElement) {
    return (htmlElement === <htmlElement>) ? prevAll = false : prevAll;
});

Obtenir les nœuds fils d'un élément...

$(<htmlElement>).children();

...avec Vanilla JS

<htmlElement>.children;

Obtenir le premier nœud parent correspondant au sélecteur...

$(<htmlElement>).closest(<parentSelector>);

...avec Vanilla JS

<htmlElement>.closest(<parentSelector>);

/* // IE fallback
var htmlElement = <htmlElement>,
    parents = [];
while (htmlElement = htmlElement.parentNode) {
    (htmlElement.matches && htmlElement.matches(<parentSelector>)) ? parents.push(htmlElement) : '';
}
parents[0]; */

Trouver des nœuds enfants dans un nœud...

$(<htmlElement>).find(<childrenSelector>);

...avec Vanilla JS

<htmlElement>.querySelectorAll(<childrenSelector>);

Sélectionner le premier enfant d'un nœud...

$(<htmlElement>).children().first();

...avec Vanilla JS

<htmlElement>.firstChild();

Sélectionner le dernier enfant d'un nœud...

$(<htmlElement>).children().last();

...avec Vanilla JS

<htmlElement>.lastChild();

Savoir si un nœud peut-être trouver avec un sélecteur...

$(<htmlElement>).is(<selector>);

...avec Vanilla JS

<htmlElement>.matches(<selector>);

Obtenir le nœud immédiatement après...

$(<htmlElement>).next();

...avec Vanilla JS

<htmlElement>.nextElementSibling; // HTMLElement
// <htmlElement>.nextSibling; // Node

Obtenir tous les nœuds suivant jusqu'à croiser le nœud du sélecteur (non inclus)...

$(<htmlElement>).nextUntil(<nextSelector>);

...avec Vanilla JS

var htmlElement = <htmlElement>,
    nextUntil = [],
    until = true;
while (htmlElement = htmlElement.nextElementSibling) {
    (until && htmlElement && !htmlElement.matches(<nextSelector>)) ? nextUntil.push(htmlElement) : until = false;
}
nextUntil;

Obtenir le nœud parent immédiatement au dessus...

$(<htmlElement>).parent();

...avec Vanilla JS

<htmlElement>.parentNode;

Obtenir tous les nœuds parent correspondant au sélecteur...

var parents = $(<htmlElement>).parents(<parentsSelector>);

...avec Vanilla JS

var htmlElement = <htmlElement>,
    parents = [];
while (htmlElement = htmlElement.parentNode.closest(<parentSelector>)) {
    parents.push(htmlElement);
}
parents;

/* // IE fallback
var htmlElement = <htmlElement>,
    parents = [];
while (htmlElement = htmlElement.parentNode) {
    (htmlElement.matches && htmlElement.matches(<parentSelector>)) ? parents.push(htmlElement) : '';
}
parents; */

Obtenir tous les nœuds parents précédent le nœud parent correspondant au sélecteur...

var parents = $(<htmlElement>).parentsUntil(<parentsSelector>);

...avec Vanilla JS

var htmlElement =  <htmlElement>,
    parentsUntil = [],
    until = true;
while (htmlElement = htmlElement.parentNode.closest(<parentSelector>)) {
    (until) ? parents.push(htmlElement) : until = false;
}
parentsUntil;

/* // IE fallback
var htmlElement =  <htmlElement>,
    parentsUntil = [],
    until = true;
while (htmlElement = htmlElement.parentNode) {
    (until && htmlElement.matches && !htmlElement.matches(<parentSelector>)) ? parents.push(htmlElement) : until = false;
}
parentsUntil; */

Obtenir le nœud immédiatement avant...

$(<htmlElement>).prev();

...avec Vanilla JS

<htmlElement>.previousElementSibling; // HTMLElement
// <htmlElement>.previousSibling // Node

Obtenir tous les nœuds précédent jusqu'à croiser le nœud du sélecteur (non inclus)...

$(<htmlElement>).prevUtil(<previousSelector>);

...avec Vanilla JS

var htmlElement = <htmlElement>,
    previousUntil = [],
    until = true;
while (htmlElement = htmlElement.previousElementSibling) {
    (until && htmlElement && !htmlElement.matches(<previousSelector>)) ? previousUntil.push(htmlElement) : until = false;
}
previousUntil;

Obtenir la liste des nœuds voisins...

$(<htmlElement>).siblings();

...avec Vanilla JS

[].filter.call(<htmlElement>.parentNode.children, function (htmlElement) {
    return htmlElement !== <htmlElement>;
});

Obtenir une propriété d'une règle CSS...

$(<htmlElement>).css(<property>);

...avec Vanilla JS

getComputedStyle(<htmlElement>)[<property>];

Obtenir la position de la barre de défilement horizontal...

$(<htmlElement>).scrollLeft();

...avec Vanilla JS

<htmlElement>.scrollLeft;

Obtenir la position de la barre de défilement vertical...

$(<htmlElement>).scrollTop();

...avec Vanilla JS

<htmlElement>.scrollTop;

Obtenir la hauteur d'un élément en incluant la marge interne sans la bordure...

$(<htmlElement>).innerHeight();

...avec Vanilla JS

<htmlElement>.clientHeight

Obtenir la largeur d'un élément en incluant la marge interne sans la bordure...

$(<htmlElement>).innerWidth();

...avec Vanilla JS

<htmlElement>.clientWidth

Obtenir les coordonnées d'affichage du nœud par rapport aux bords de la page...

$(<htmlElement>).offset();

...avec Vanilla JS

var rect = <htmlElement>.getBoundingClientRect()
{
    top: rect.top + document.body.scrollTop,
    left: rect.left + document.body.scrollLeft
}

Obtenir les coordonnées d'affichage du nœud par rapport aux bords du premier nœud parent...

$(<htmlElement>).position();

...avec Vanilla JS

{
    left: <htmlElement>.offsetLeft,
    top: <htmlElement>.offsetTop
}

Obtenir les coordonnées d'affichage du nœud par rapport aux bords de la partie visible de la fenêtre...

$(<htmlElement>).offset();

...avec Vanilla JS

var rect = <htmlElement>.getBoundingClientRect()
{
    top: rect.top + document.body.scrollTop,
    left: rect.left + document.body.scrollLeft
}

Obtenir la hauteur d'un élément en incluant la marge interne et la bordure...

$(<htmlElement>).outerHeight();

...avec Vanilla JS

<htmlElement>.offsetHeight

Obtenir la largeur d'un élément en incluant la marge interne et la bordure...

$(<htmlElement>).outerWidth();

...avec Vanilla JS

<htmlElement>.offsetWidth

Obtient le premier nœud parent qui n'est pas en `position: static` s'il existe...

$(<htmlElement>).offsetParent();

...avec Vanilla JS

(<htmlElement>.offsetParent || <htmlElement>)

Définir une propriété CSS dans l'attribut style...

$(<htmlElement>).css(<property>, <value>);

...avec Vanilla JS

<htmlElement>.style.<property> = <value>;

Définir la position de la barre de défilement horizontal...

$(<htmlElement>).scrollLeft(<distance>);

...avec Vanilla JS

<htmlElement>.scrollLeft = <distance>;

Définir la position de la barre de défilement vertical...

$(<htmlElement>).scrollTop(<distance>);

...avec Vanilla JS

<htmlElement>.scrollTop = <distance>;

Lister les éléments d'un tableau...

$.each(<array>, function (i, item) {
    (item === <array>[i]); // true
});

...avec Vanilla JS

<array>.forEach(function (item, i) {
    (item === <array>[i]); // true
});

Définir le contexte d'execution qui sera utilisé à l'instanciation de la fonction...

$.proxy(<fn>, <context>);

...avec Vanilla JS

<fn>.bind(<context>);

Étendre un objet avec d'autres objets...

<object> = $.extend(<extendingObject>, <object>);

...avec Vanilla JS

<object> = Object.assign(<object>, <extendingObject>);

/* // IE fallback (not deep)
Object.keys(<object>).forEach(function (key) {
    <object>[key] = (<extendingObject>[key]) ? <extendingObject>[key] : <object>[key];
});
<object>; */

Trouver la position d'un élément dans un tableau...

$.inArray(<item>, <array>);

...avec Vanilla JS

<array>.indexOf(<item>);

Savoir si un élément est un tableau...

$.isArray(<array>);

...avec Vanilla JS

Array.isArray(<array>);

Transformer un tableau en un autre suivant des opérations sur chaque élément...

$.map(<array>, function (item, i) {
    return <operations>;
});

...avec Vanilla JS

<array>.map(function (item, i) {
    return <operations>;
});

Retourner le timestamp courant...

$.now();

...avec Vanilla JS

Date.now();

Transformer une chaine de caractère en objet HTML...

$.parseHTML(<htmlString>);

...avec Vanilla JS

function parseHTML(htmlString) {
    var body = document.implementation.createHTMLDocument().body;
    body.innerHTML = htmlString;
    return body.childNodes;
}

parseHTML(<htmlString>);

Transformer une chaine de caractère en objet JSON...

$.parseJSON(<jsonString>);

...avec Vanilla JS

JSON.parse(<jsonString>);

Transformer une chaine de caractère en objet XML...

$.parseXML(<xmlString>);

...avec Vanilla JS

function parseXML(xmlString) {
    return (new DOMParser()).parseFromString(xmlString, 'text/xml');
}

parseXML(<xmlString>);

Récupérer tous les champs de formulaire dans un Array JSON...

$.serializeArray(<form>);

...avec Vanilla JS

function serializeArray(form) {
    var field, length, output = [];
    if (typeof form === 'object' && form.nodeName === 'FORM') {
        var length = form.elements.length;
        for (i = 0; i < length; i++) {
            field = form.elements[i];
            if (field.name && !field.disabled && field.type !== 'file' && field.type != 'reset' && field.type != 'submit' && field.type != 'button') {
                if (field.type === 'select-multiple') {
                    length = form.elements[i].options.length;
                    for (j = 0; j < length; j++) {
                        if(field.options[j].selected)
                            output[output.length] = { name: field.name, value: field.options[j].value };
                    }
                } else if ((field.type !== 'checkbox' && field.type !== 'radio') || field.checked) {
                    output[output.length] = { name: field.name, value: field.value };
                }
            }
        }
    }
    return output;
}
serializeArray(<form>);

Récupérer tous les champs de formulaire dans une QueryString...

$.serialize(<form>);

...avec Vanilla JS

function serialize(form) {
    var field, length, output = [];
    if (typeof form === 'object' && form.nodeName === 'FORM') {
        var length = form.elements.length;
        for (var i = 0; i < length; i++) {
            field = form.elements[i];
            if (field.name && !field.disabled && field.type !== 'file' && field.type !== 'reset' && field.type !== 'submit' && field.type !== 'button') {
                if (field.type === 'select-multiple') {
                    length = form.elements[i].options.length;
                    for (var j=0; j < length; j++) {
                        if (field.options[j].selected) {
                            output[output.length] = encodeURIComponent(field.name) + '=' + encodeURIComponent(field.options[j].value);
                        }
                    }
                } else if ((field.type !== 'checkbox' && field.type !== 'radio') || field.checked) {
                    output[output.length] = encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value);
                }
            }
        }
    }
    return output.join('&').replace(/%20/g, '+');
}
serialize(<form>);

Transformer une chaine de caractère en objet JSON...

$.trim(<string>);

...avec Vanilla JS

<string>.trim();