Vous n'avez pas besoin de jQuery

De nos jours, les environnements frontend évoluent si rapidement que les navigateurs récents ont déjà implémenté beaucoup d'API DOM/BOM suffisantes. Il n'est pas utile d'apprendre jQuery à partir de rien pour manipuler le DOM ou les évènements. Pendant ce temps, grâce à l'efficacité de bibliothèques frontend comme React, Angular et Vue, manipuler directement le DOM est devenu obsolète, jQuery n'a jamais été aussi peu important. Ce projet résume la plupart des alternatives à jQuery à l'aide d'implémentations natives, compatibles avec IE 10+.

Traductions

Sélecteur jQuery

À la place des sélecteurs communs comme class, id ou attribute il est possible d'utiliser document.querySelector ou document.querySelectorAll. Les différences sont que:

document.querySelector retourne le premier élément trouvé,
document.querySelectorAll retourne tous les éléments trouvés sous forme d'une NodeList. Il est possible de le convertir en Array à l'aide de [].slice.call(document.querySelectorAll(selector) || []);,
si aucun élément n'a été trouvé, jQuery peut retourner [] alors que l'API DOM va retourner null. Faites attention au Null Pointer Exception. Vous pouvez aussi utiliser || pour définir la valeur par défaut si rien n'a été trouvé, comme document.querySelectorAll(selector) || [].

Remarque: document.querySelector et document.querySelectorAll sont assez LENTS, essayez plutôt d'utiliser getElementById, document.getElementsByClassName ou document.getElementsByTagName si vous souhaitez obtenir un gain de performance.

1.0 <a name='1.0'></a> Requête par sélecteur

// jQuery
$('selector');

// Natif
document.querySelectorAll('selector');

1.1 <a name='1.1'></a> Requête par classe

// jQuery
$('.class');

// Natif
document.querySelectorAll('.class');

// ou
document.getElementsByClassName('class');

1.2 <a name='1.2'></a> Requête par id

// jQuery
$('#id');

// Natif
document.querySelector('#id');

// ou
document.getElementById('id');

1.3 <a name='1.3'></a> Requête par attribut

// jQuery
$('a[target=_blank]');

// Natif
document.querySelectorAll('a[target=_blank]');

1.4 <a name='1.4'></a> Requête par descendants

// jQuery
$el.find('li');

// Natif
el.querySelectorAll('li');

1.5 <a name='1.5'></a> Éléments voisins/précédents/suivants

Éléments voisins

// jQuery
$el.siblings();

// Natif
[].filter.call(el.parentNode.children, function(child) {
  return child !== el;
});

Éléments précédents

// jQuery
$el.prev();

// Natif
el.previousElementSibling;

Éléments suivants

// next
$el.next();
el.nextElementSibling;

1.6 <a name='1.6'></a> Plus proche

Retourne le premier élément trouvé à l'aide du sélecteur fourni, parcourant l'élément actuel vers le document.

// jQuery
$el.closest(queryString);

// Natif - Seulement le dernier, ne fonctionne pas sous IE
el.closest(selector);

// Natif - IE10+
function closest(el, selector) {
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

  while (el) {
    if (matchesSelector.call(el, selector)) {
      return el;
    } else {
      el = el.parentElement;
    }
  }
  return null;
}

1.7 <a name='1.7'></a> Parents jusqu'à

Retourne les ancêtres de chaque élément dans l'ensemble d'éléments trouvés courants, jusqu'à (sans l'inclure) l'élément correspondant au sélecteur, le noeud DOM ou l'objet JQuery.

// jQuery
$el.parentsUntil(selector, filter);

// Natif
function parentsUntil(el, selector, filter) {
  const result = [];
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

  // la correspondance commence à partir du parent
  el = el.parentElement;
  while (el && !matchesSelector.call(el, selector)) {
    if (!filter) {
      result.push(el);
    } else {
      if (matchesSelector.call(el, filter)) {
        result.push(el);
      }
    }
    el = el.parentElement;
  }
  return result;
}

1.8 <a name='1.8'></a> Formulaire

Input/Textarea

// jQuery
$('#my-input').val();

// Natif
document.querySelector('#my-input').value;

Obtenir l'index du e.currentTarget entre .radio

// jQuery
$(e.currentTarget).index('.radio');

// Natif
[].indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);

1.9 <a name='1.9'></a> Contenus Iframe

$('iframe').contents() retourne contentDocument pour cet iframe en particulier

Contenus de l'Iframe

// jQuery
$iframe.contents();

// Natif
iframe.contentDocument;

Requête Iframe

// jQuery
$iframe.contents().find('.css');

// Natif
iframe.contentDocument.querySelectorAll('.css');

⬆ remonter

Style & CSS

2.1 <a name='2.1'></a> CSS

Obtenir le style

// jQuery
$el.css("color");

// Natif
// NOTE: Bug connu, retournera 'auto" si la valeur du site est 'auto'
const win = el.ownerDocument.defaultView;
// null signifie ne pas retourner les pseudo styles
win.getComputedStyle(el, null).color;

Définir le style

// jQuery
$el.css({ color: "#ff0011" });

// Natif
el.style.color = '#ff0011';

Obtenir/Définir les styles

Notez que si vous souhaitez définir plusieurs styles à la fois, you devriez vous référer à la méthode setStyles du paquet oui-dom-utils.

Ajouter une classe

// jQuery
$el.addClass(className);

// Natif
el.classList.add(className);

Supprimer une classe

// jQuery
$el.removeClass(className);

// Natif
el.classList.remove(className);

Possède une classe

// jQuery
$el.hasClass(className);

// Natif
el.classList.contains(className);

Basculer une class

// jQuery
$el.toggleClass(className);

// Natif
el.classList.toggle(className);

2.2 <a name='2.2'></a> Largeur et Hauteur

Travailler avec la hauteur ou la largeur est en théorie identique, prenons la hauteur pour exemple:

Hauteur de la fenêtre

// hauteur de la fenêtre
$(window).height();
// se comporte comme jQuery sans ascenseur
window.document.documentElement.clientHeight;
// avec ascenseur
window.innerHeight;

Hauteur du document

// jQuery
$(document).height();

// Natif
document.documentElement.scrollHeight;

Hauteur de l'élement

// jQuery
$el.height();

// NatiF
function getHeight(el) {
  const styles = window.getComputedStyle(el);
  const height = el.offsetHeight;
  const borderTopWidth = parseFloat(styles.borderTopWidth);
  const borderBottomWidth = parseFloat(styles.borderBottomWidth);
  const paddingTop = parseFloat(styles.paddingTop);
  const paddingBottom = parseFloat(styles.paddingBottom);
  return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}
// précis à l'entier près (quand `border-box`, son `height - border`; quand `content-box`, son `height + padding`)
el.clientHeight;
// précis à la décimale près (quand `border-box`, son `height`; quand `content-box`, son `height + padding + border`)
el.getBoundingClientRect().height;

2.3 <a name='2.3'></a> Position et offset

Position

Récupère les coordonnées courantes de l'élement relatif à l'offset parent.
js
```
// jQuery
$el.position();

// Natif
{ left: el.offsetLeft, top: el.offsetTop }
```

Offset

Récupère les coordonnées courantes de l'élement relatif au document.

// jQuery
$el.offset();

// Natif
function getOffset (el) {
  const box = el.getBoundingClientRect();

  return {
    top: box.top + window.pageYOffset - document.documentElement.clientTop,
    left: box.left + window.pageXOffset - document.documentElement.clientLeft
  }
}

2.4 <a name='2.4'></a> Défiler vers le haut

Récupère la position verticale courante de l'ascenseur pour cet élément.

// jQuery
$(window).scrollTop();

// Natif
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

⬆ remonter

Manipulation du DOM

3.1 <a name='3.1'></a> Supprimer

Supprime l'élément du DOM.

// jQuery
$el.remove();

// Natif
el.parentNode.removeChild(el);

3.2 <a name='3.2'></a> Texte
- Obtenir le texte
  
  Récupère le contenu textuel combiné de l'élément en incluant ses descendants.
  js
```
// jQuery
$el.text();

// Natif
el.textContent;
```
- Définir le text
  
  Définit le contenu de l'élément à partir du texte spécifié.
  js
```
// jQuery
$el.text(string);

// Natif
el.textContent = string;
```

3.3 <a name='3.3'></a> HTML

Obtenir l'HTML

// jQuery
$el.html();

// Natif
el.innerHTML;

Définir l'HTML

// jQuery
$el.html(htmlString);

// Natif
el.innerHTML = htmlString;

3.4 <a name='3.4'></a> Ajouter

Ajouter un élément enfant après le dernier enfant de l'élément parent.

// jQuery
$el.append("<div id='container'>hello</div>");

// Natif
let newEl = document.createElement('div');
newEl.setAttribute('id', 'container');
newEl.innerHTML = 'hello';
el.appendChild(newEl);

3.5 <a name='3.5'></a> Faire précéder

// jQuery
$el.prepend("<div id='container'>hello</div>");

// Natif
let newEl = document.createElement('div');
newEl.setAttribute('id', 'container');
newEl.innerHTML = 'hello';
el.insertBefore(newEl, el.firstChild);

3.6 <a name='3.6'></a> Insérer avant

Insérer un nouveau noeud avant les éléments sélectionnés.

// jQuery
$newEl.insertBefore(queryString);

// Natif
newEl.insertBefore(document.querySelector(queryString));

3.7 <a name='3.7'></a> Insérer après

Insérer un nouveau noeud après les noeuds sélectionnés

// jQuery
$newEl.insertAfter(queryString);

// Natif
function insertAfter(newEl, queryString) {
  const parent = document.querySelector(queryString).parentNode;

  if (parent.lastChild === newEl) {
    parent.appendChild(newEl);
  } else {
    parent.insertBefore(newEl, parent.nextSibling);
  }
},

3.8 <a name='3.8'></a> est

Retourne true le paramètre correspond à la requête de sélection

// jQuert - Noter que `is` fonctionne également avec `function` ou `elements` qui ne sont pas concernés ici
$el.is(selector);

// Natif
el.matches(selector);

3.9 <a name='3.9'></a> clone

Créé une copie profonde de cet élément

// jQuery
$el.clone();

// Natif
el.cloneNode();

// Pour une copie profonde, définir le paramètre à `true`

3.10 <a name='3.10'></a> vider

Supprime tous les noeuds enfants
js
```
// jQuery
$el.empty();

// Natif
el.innerHTML = '';
```

3.11 <a name='3.11'></a> enrouler

Enrouler une structure HTML autour de chaque élément

// jQuery
$('.inner').wrap('<div class="wrapper"></div>');

// Natif
[].slice.call(document.querySelectorAll('.inner')).forEach(function(el){
  var wrapper = document.createElement('div');
  wrapper.className = 'wrapper';
  el.parentNode.insertBefore(wrapper, el);
  el.parentNode.removeChild(el);
  wrapper.appendChild(el);
});

3.12 <a name='3.12'></a> dérouler

Supprime les parents de la collection des éléments correspondants du DOM

// jQuery
$('.inner').unwrap();

// Natif
[].slice.call(document.querySelectorAll('.inner')).forEach(function(el){
  [].slice.call(el.childNodes).forEach(function(child){
    el.parentNode.insertBefore(child, el);
  });
  el.parentNode.removeChild(el);
});

⬆ remonter

Ajax

Fetch API est le nouveau standard qui a pour but de remplacer XMLHttpRequest afin de faire de l'ajax. Il fonctionne sous Chrome et Firefox, il est possible d'utiliser polyfills pour le faire fonctionner sur de vieux navigateurs.

Essayer github/fetch sous IE9+ ou fetch-ie8 sous IE8+, fetch-jsonp pour construire des requêtes JSONP.

⬆ remonter

Évènements

Pour remplacer complètement jusqu'aux espaces de nom et délégations, se référer à https://github.com/oneuijs/oui-dom-events

5.1 <a name='5.1'></a> Attacher un événement avec on

// jQuery
$el.on(eventName, eventHandler);

// Natif
el.addEventListener(eventName, eventHandler);

5.2 <a name='5.2'></a> Détacher un événement avec off

// jQuery
$el.off(eventName, eventHandler);

// Natif
el.removeEventListener(eventName, eventHandler);

5.3 <a name='5.3'></a> Trigger

// jQuery
$(el).trigger('custom-event', {key1: 'data'});

// Natif
if (window.CustomEvent) {
  const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
  const event = document.createEvent('CustomEvent');
  event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}

el.dispatchEvent(event);

⬆ remonter

Utilitaires

La plupart des utilitaires se trouvent dans l'API native. D'autres fonctions avancées peuvent être choisies afin de se concentrer sur la cohérence et la performance. Il est recommandé de remplacer par lodash.

6.1 <a name='6.1'></a> Utilitaires basiques

isArray

Détermine si l'argument est un tableau.

// jQuery
$.isArray(range);

// Natif
Array.isArray(range);

isWindow

Détermine si l'argument est une fenêtre.

// jQuery
$.isWindow(obj);

// Native
function isWindow(obj) {
  return obj != null && obj === obj.window;
}

inArray

Recherche une valeur spécifique à l'intérieur d'un tableau et retourne son index (ou -1 si rien n'a été trouvé).

// jQuery
$.inArray(item, array);

// Natif
Array.indexOf(item);

isNumeric

Détermine si l'argument est un nombre. Utiliser typeof pour décider du type. Si nécessaire utiliser une bibliothèque, parfois typeof n'est pas exact.

// jQuery
$.isNumeric(item);

// Natif
function isNumeric(item) {
  return typeof item === 'number';
}

isFunction

Détermine si l'argument est un objet fonction JavaScript.

// jQuery
$.isFunction(item);

// Natif
function isFunction(item) {
  return typeof value === 'function';
}

isEmptyObject

Vérifie si un objet est vide (ne contient aucune propriétés énumérables).

// jQuery
$.isEmptyObject(obj);

// Natif
function isEmptyObject(obj) {
  for (let key in obj) {
    return false;
  }
  return true;
}

isPlainObject

Vérifie si un objet est un objet "plat" (créé en utilisant "{}" ou "new Object").

// jQuery
$.isPlainObject(obj);

// Natif
function isPlainObject(obj) {
  if (typeof (obj) !== 'object' || obj.nodeType || obj != null && obj === obj.window) {
    return false;
  }

  if (obj.constructor &&
      !{}.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
    return false;
  }

  return true;
}

extend

Fusionne le contenu de deux objets ou plus ensembles en un seul objet. Object.assign fait parti de l'API ES6, il est également possible d'utiliser polyfill.

// jQuery
$.extend({}, defaultOpts, opts);

// Natif
Object.assign({}, defaultOpts, opts);

trim

Supprime les espaces au début et à la fin d'une chaine de caractères String.

// jQuery
$.trim(string);

// Natif
string.trim();

Traduit tous les éléments d'un tableau ou d'un objet vers un nouveau tableau d'éléments.

// jQuery
$.map(array, function(value, index) {
});

// Natif
array.map(function(value, index) {
});

each

Une fonction générique d'itération, qui peut être utilisée pour itérer de façon transparente à travers des objets et des tableaux.

// jQuery
$.each(array, function(value, index) {
});

// Natif
array.forEach(function(value, index) {
});

grep

Trouve les éléments d'un tableau qui satisfont avec une fonction filtre.

// jQuery
$.grep(array, function(value, index) {
});

// Natif
array.filter(function(value, index) {
});

type

Détermine la [[Class]] interne JavaScript d'un objet.

// jQuery
$.type(obj);

// Natif
Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, '$1').toLowerCase();

merge

Fusionne le contenu de deux tableau dans un seul tableau.

// jQuery
$.merge(array1, array2);

// Natif
// But concat function don't remove duplicate items.
function merge() {
  return Array.prototype.concat.apply([], arguments)
}

Retourne un nombre représentant l'heure actuelle.

// jQuery
$.now();

// Natif
Date.now();

proxy

Prend une fonction et en retourne une nouvelle qui aura toujours un contexte particulier.

// jQuery
$.proxy(fn, context);

// Natif
fn.bind(context);

makeArray

Convertit un objet "array-like" vers un véritable tableau JavaScript.

// jQuery
$.makeArray(array);

// Natif
[].slice.call(array);

6.2 <a name='6.2'></a> Contient

Vérifie si un élément du DOM est un descendant d'un autre élément du DOM.
js
```
// jQuery
$.contains(el, child);

// Natif
el !== child && el.contains(child);
```

6.3 <a name='6.3'></a> Globaleval

Exécute du code JavaScript de manière globale.

// jQuery
$.globaleval(code);

// Natif
function Globaleval(code) {
  let script = document.createElement('script');
  script.text = code;

  document.head.appendChild(script).parentNode.removeChild(script);
}

// Utilise eval, mais le contexte d'eval est l'actuel alors que le contexte de $.Globaleval est global.
eval(code);

6.4 <a name='6.4'></a> parse

parseHTML

Parse une chaine de caractères vers un tableau de noeuds DOM.

// jQuery
$.parseHTML(htmlString);

// Natif
function parseHTML(string) {
  const tmp = document.implementation.createHTMLDocument();
  tmp.body.innerHTML = string;
  return tmp.body.children;
}

parseJSON

Prend une chaine JSON correctement formatée et retourne la valeur JavaScript résultante.

// jQuery
$.parseJSON(str);

// Natif
JSON.parse(str);

⬆ remonter

Promesses

Une promesse représente le résultat éventuel d'une opération asynchrone. jQuery a sa propre manière de traiter les promesses. JavaScript natif implémente une API minimale et légère afin de traiter les promesses en accord avec les spécifications Promises/A+.

7.1 <a name='7.1'></a> done, fail, always

done est appelée quand une promesse est résolue, fail est appelée quand une promesse est rejetée et always est appelée quand une promesse n'est ni résolue ni rejetée.
js
```
// jQuery
$promise.done(doneCallback).fail(failCallback).always(alwaysCallback)

// Natif
promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)
```
7.2 <a name='7.2'></a> when

when est utilisée pour traiter de multiples promesses. Elle sera résolue quand toutes les promesses le seront, and rejetée si au moins une est rejetée.
js
```
// jQuery
$.when($promise1, $promise2).done((promise1Result, promise2Result) => {})

// Natif
Promise.all([$promise1, $promise2]).then([promise1Result, promise2Result] => {});
```

7.3 <a name='7.3'></a> Deferred

Deferred est un moyen de créer une promesse.

// jQuery
function asyncFunc() {
  var d = new $.Deferred();
  setTimeout(function() {
    if(true) {
      d.resolve('some_value_compute_asynchronously');
    } else {
      d.reject('failed');
    }
  }, 1000);
  return d.promise();
}

// Natif
function asyncFunc() {
  return new Promise((resolve, reject) => {
    setTimeout(function() {
      if (true) {
        resolve('some_value_compute_asynchronously');
      } else {
        reject('failed');
      }
    }, 1000);
  });
}

// Avec deferred
function defer() {
  let resolve, reject;
  let promise = new Promise(function() {
    resolve = arguments[0];
    reject = arguments[1];
  });
  return { resolve, reject, promise };
}
function asyncFunc() {
  var d = defer();
  setTimeout(function() {
    if(true) {
      d.resolve('some_value_compute_asynchronously');
    } else {
      d.reject('failed');
    }
  }, 1000);
  return d.promise;
}

⬆ remonter

Animation

8.1 <a name='8.1'></a> Show & Hide

// jQuery
$el.show();
$el.hide();

// Natif
//Pour plus de détails à propos de la méthode show, merci de se référer à https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L363

el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
el.style.display = 'none';

8.2 <a name='8.2'></a> Toggle

Affiche ou cache un élément.

// jQuery
$el.toggle();

// Natif
if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') {
  el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
}
else {
  el.style.display = 'none';
}

8.3 <a name='8.3'></a> FadeIn & FadeOut

// jQuery
$el.fadeIn(3000);
$el.fadeOut(3000);

// Natif
el.style.transition = 'opacity 3s';
// fadeIn
el.style.opacity = '1';
// fadeOut
el.style.opacity = '0';

8.4 <a name='8.4'></a> FadeTo

Ajuste l'opacité d'un élément.

// jQuery
$el.fadeTo('slow',0.15);
// Natif
el.style.transition = 'opacity 3s'; // assume que 'slow' vaut 3 seconds
el.style.opacity = '0.15';

8.5 <a name='8.5'></a> FadeToggle

Affiche ou cache un élément en animant son opacité.

// jQuery
$el.fadeToggle();

// Natif
el.style.transition = 'opacity 3s';
let { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (opacity === '1') {
  el.style.opacity = '0';
}
else {
  el.style.opacity = '1';
}

8.6 <a name='8.6'></a> SlideUp & SlideDown

// jQuery
$el.slideUp();
$el.slideDown();

// Natif
let originHeight = '100px';
el.style.transition = 'height 3s';
// slideUp
el.style.height = '0px';
// slideDown
el.style.height = originHeight;

8.7 <a name='8.7'></a> SlideToggle

Affiche ou cache un élément en le faisant glisser.

// jQuery
$el.slideToggle();

// Natif
let originHeight = '100px';
el.style.transition = 'height 3s';
let { height } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (parseInt(height, 10) === 0) {
  el.style.height = originHeight;
}
else {
 el.style.height = '0px';
}

8.8 <a name='8.8'></a> Animate

Réalise une animation personnaliée à partir d'une collection de propriétés CSS.

// jQuery
$el.animate({params}, speed);

// Natif
el.style.transition = 'all' + speed;
Object.keys(params).forEach(function(key) {
  el.style[key] = params[key];
})

Alternatives

You Might Not Need jQuery - Des exemples sur comment faire un simple évènement, ajax etc avec du javascript pur.
npm-dom et webmodules - Modules DOM sur NPM.

Traductions

Navigateurs compatibles


Plus récente ✔	Plus récente ✔	10+ ✔	Plus récente ✔	6.1+ ✔

Licence

MIT

README Fr

Vous n'avez pas besoin de jQuery

Sommaire

Traductions

Sélecteur jQuery

Style & CSS

Manipulation du DOM

Ajax

Évènements

Utilitaires

Promesses

Animation

Alternatives

Traductions

Navigateurs compatibles

Licence