Vous n'avez pas besoin de jQuery

De nos jours, les environnements frontend évolues si rapidement que les navigateurs récents ont déjà implémentés beaucoup d'API DOM/BOM suffisants. 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 IE 10+.

Sommaire

Sélecteur jQuery
Style et CSS
Manipulation du DOM
Ajax
Évènements
Utilitaires
Traduction
Navigateurs compatibles

Sélecteur jQuery

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

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. Faite 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 LENT, essayez plutôt d'utiliser getElementById, document.getElementsByClassName ou document.getElementsByTagName si vous souhaitez obtenir un gain de performance.

1.0 Requête par sélecteur

// jQuery
$('selector');

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

1.1 Requête par classe

// jQuery
$('.class');

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

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

1.2 Requête par id

// jQuery
$('#id');

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

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

1.3 Requête par attribut

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

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

1.4 Trouver le n-ème

Trouver des noeus

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

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

Trouver le body

// jQuery
$('body');

// Natif
document.body;

Trouver un attribut

// jQuery
$el.attr('foo');

// Natif
e.getAttribute('foo');

Trouver un attribut data

// jQuery
$el.data('foo');

// Natif
// avec getAttribute
el.getAttribute('data-foo');
// vous pouvez également utiliser `dataset` si seule la compatibilité IE 11+ est nécessaire
el.dataset['foo'];

1.5 É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 Plus proche

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

// jQuery
$el.closest(queryString);

// Natif
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 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 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.querySelectAll('.radio'), e.currentTarget);

1.9 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 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 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 = this.getComputedStyles(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`; quand `content-box`, son `height + padding + border`)
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 Position et offset

Position

// jQuery
$el.position();

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

Offset

// 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 Défiler vers le haut

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

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

⬆ remonter

Manipulation du DOM

3.1 Supprimer

// jQuery
$el.remove();

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

3.2 Texte

Obtenir le texte

// jQuery
$el.text();

// Natif
el.textContent;

Définir le text

// jQuery
$el.text(string);

// Natif
el.textContent = string;

3.3 HTML

Obtenir l'HTML

// jQuery
$el.html();

// Natif
el.innerHTML;

Définir l'HTML

// jQuery
$el.html(htmlString);

// Natif
el.innerHTML = htmlString;

3.4 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 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 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 Insérer après

Insérer un nouveau noeud après les noeufs 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);
  }
},

⬆ remonter

Ajax

Remplacer avec fetch et fetch-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 Attacher un événement avec on

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

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

5.2 Détacher un événement avec off

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

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

5.3 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

6.1 isArray

// jQuery
$.isArray(range);

// Natif
Array.isArray(range);

6.2 Trim

// jQuery
$.trim(string);

// Natif
string.trim();

6.3 Assigner un objet

Pour étendre, utiliser le polyfill object.assign https://github.com/ljharb/object.assign
```
// jQuery
$.extend({}, defaultOpts, opts);

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

6.4 Contient

// jQuery
$.contains(el, child);

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

⬆ remonter

Traductions

한국어
简体中文
Bahasa Melayu
Bahasa Indonesia
Português(PT-BR)
Tiếng Việt Nam
Español
Русский
Türkçe
Italian
Français

Navigateurs compatibles


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

Licence

MIT

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README-fr.md

README-fr.md

Vous n'avez pas besoin de jQuery

Sommaire

Sélecteur jQuery

Style & CSS

Manipulation du DOM

Ajax

Évènements

Utilitaires

Traductions

Navigateurs compatibles

Licence

Files

README-fr.md

Latest commit

History

README-fr.md

File metadata and controls

Vous n'avez pas besoin de jQuery

Sommaire

Sélecteur jQuery

Style & CSS

Manipulation du DOM

Ajax

Évènements

Utilitaires

Traductions

Navigateurs compatibles

Licence