Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
1197 lines (865 sloc) 26.6 KB

Vous n'avez pas besoin de jQuery Build Status

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

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

Traductions

Navigateurs compatibles

Chrome Firefox IE Opera Safari
Plus récente ✔ Plus récente ✔ 10+ ✔ Plus récente ✔ 6.1+ ✔

Licence

MIT