README-fr.md

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+.

Sommaire

1. Traductions
2. Sélecteur jQuery
3. Style et CSS
4. Manipulation du DOM
5. Ajax
6. Évènements
7. Utilitaires
8. Promesses
9. Animation
10. Alternatives
11. Navigateurs compatibles

Traductions

• 한국어
• 简体中文
• Bahasa Melayu
• Bahasa Indonesia
• Português(PT-BR)
• Tiếng Việt Nam
• Español
• Русский
• Кыргызча
• Türkçe
• Italiano
• Français
• 日本語
• Polski

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 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 Requête par descendants

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

• 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 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 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.querySelectorAll('.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 = 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 Position et offset

  • Position

    Récupère les coordonnées courantes de l'élement relatif à l'offset parent.

    // 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 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 Supprimer

  Supprime l'élément du DOM.

  // jQuery
  $el.remove();
  
  // Natif
  el.parentNode.removeChild(el);

• 3.2 Texte

  • Obtenir le texte

    Récupère le contenu textuel combiné de l'élément en incluant ses descendants.

    // jQuery
    $el.text();
    
    // Natif
    el.textContent;

  • Définir le text

    Définit le contenu de l'élément à partir du texte spécifié.

    // 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 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 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 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 vider

  Supprime tous les noeuds enfants

  // jQuery
  $el.empty();
  
  // Natif
  el.innerHTML = '';

• 3.11 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 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 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

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 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 value === '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();

  • map

  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)
  }

  • now

  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 Contient

  Vérifie si un élément du DOM est un descendant d'un autre élément du DOM.

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

• 6.3 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 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 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.

  // jQuery
  $promise.done(doneCallback).fail(failCallback).always(alwaysCallback)
  
  // Natif
  promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)

• 7.2 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.

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

• 7.3 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 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 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 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 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 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 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 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 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

• 한국어
• 简体中文
• 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