Adeus JQuery


Um pouco de história

  • Até alguns anos atrás, havia grandes diferenças entre os navegadores:?

    • Acesso ao DOM
    • Gerenciamento de eventos
  • Bibliotecas apareceu para lidar com esse tipo de coisa:

    • jQuery (2005)
    • mootols (2007)
    • ….
  • O que aconteceu desde então, colocado em 2010?
    • A Microsoft vem se aproximando dos padrões do IE9 (2011)
    • O uso de navegadores não compatíveis diminuiu.
    • Existem mais possibilidades de JavaScript para o acesso ao domingo.
    • Frameworks como ângulo (desde 2010) use JQLite, uma versão muito reduzida do jQuery
  • reagem tipo enquadramentos (2013) começar a trabalhar com o Virtual Dom:
    • trabalho com o Sunda é caro, melhor trabalhar com uma versão mais “leve”
    • Se mudanças ocorrer no Dom virtual, eles se movem para o M REAIS
    • JQUEY trabalha diretamente com o DOM, por isso continua a eficiência

Não usamos jQuery?

  • Quick Response: não, exceto para temas compatibity
  • resposta Meditated:
    • Se você fizer uma web (não um WebApp) se
      • Elimine Muitos plugins e desenvolvimentos já feitos
    • Se você fizer um site, não use uma estrutura JS, mas analise:
      • SEO? Tempo de carregamento? Render no servidor?
      • Componentes você precisa?

javascript seletores

  • Nós nos tornamos acostumados a usar tanto jQuery que agora vai aprender de novo:
    • para fazer as coisas com javascript antes
    • usar nova JavaScript apresenta agora
  • Se ele é o nosso caso, viemos de um fundo jQuery, vale a pena tomar um olho em um guia.

Class selector

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

seletor de ID

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

Etiqueta selector

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

eventos JavaScript

Eventos

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

eventos Encorate

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

DOM evento pronto

  • Suporte A maioria dos navegadores
    document.addEventListener('DOMContentLoaded', function() { // DOM ready, run it!}, false);

Leave a Comment

O seu endereço de email não será publicado. Campos obrigatórios marcados com *