Goodye JQuery?


Un peu d’historique

    Jusqu’à il y a quelques années, il y a de grandes différences entre les navigateurs:

    • Accès à la DOM
    • Gestion des événements
  • Les bibliothèques semblaient gérer ce genre de chose:

    • jQuery (2005)
    • motols (2007)
    • ….
  • Que s’est-il passé depuis, mis en 2010?
    • Microsoft s’approche des normes de IE9 (2011)
    • L’utilisation de navigateurs non compatibles a diminué.
    • Il existe plus de possibilités de JavaScript pour l’accès au dimanche.
    • Cadres tels que Angle (depuis 2010) Utilisez JQLite, une version très réduite de JQuery
    • Type de réact (2013) Commencez à travailler avec Virtual Dom:
      • Travailler avec le Sunda est cher, de mieux travailler avec une version « plus claire »
      • si des changements se produire dans le DOM virtuel, ils se déplacent à la DO M Real
      • JQUEY fonctionne directement avec le DOM, donc il reste efficace

    utilisons-nous jQuery?

    • Réponse rapide: Non, à l’exception des sujets de compatibilité
    • Réponse méditée:
      • Si vous faites un Web (pas une webApp) si
        • dispose de nombreux plugins et les développements déjà fabriqués
      • Si vous faites un site Web, n’utilisez pas de cadre JS, mais analysez:
        • SEO? Temps de chargement? Rendre sur le serveur?
        • composants dont vous avez besoin?

    sélecteurs JavaScript

    • Nous sommes habitués à utiliser autant de jQuery qui va maintenant apprendre à nouveau:
      • faire des choses avec JavaScript avant
      • pour utiliser de nouvelles fonctionnalités JavaScript maintenant
    • Si c’est notre cas, nous venons d’un fond de jQuery, il est utile de passer un œil sur un guide.

    Sélecteur de classe

    // jQuery$('.myClass');// JavaScriptdocument.getElementsByClassName('myClass');

    sélecteur d’identifiant

    // jQuery$('#myID');// JavaScriptdocument.getElementById('myID');

    Sélecteur d’étiquette

    // jQuery$('div');// JavaScriptdocument.getElementsByTagName('div');

    QuerySelector

    // Grab the first .myClass class namedocument.querySelector('.myClass');// Return a NodeList of all instances of .myClassdocument.querySelectorAll('.myClass');// Grab the myID iddocument.querySelector('#myID');// Return a NodeList of all 'div' instancesdocument.querySelectorAll('div');// Grab the last list Node of .someList unordered listdocument.querySelector('ul.someList li:last-child');// Grab some data-* attributedocument.querySelectorAll('');

    Evénements JavaScript

    Événements

    /* * Click */// jQuery$(elem).on('click', function () {...});// JavaScriptdocument.querySelector(elem).onclick = function () {...}

    Encorer les événements

    document.addEventListener('click', function() { // ...}, false);

    DOM Evénement prêt

    • Support la plupart des navigateurs
      document.addEventListener('DOMContentLoaded', function() { // DOM ready, run it!}, false);

    Leave a Comment

    Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *