O mică istorie

• Până acum câțiva ani au existat mari diferențe între browsere:

• bibliotecile au apărut să se ocupe de acest tip de lucru:

  • JQuery (2005)

<

• Ce sa întâmplat de atunci, în 2010?
  • Microsoft se apropie de standarde de la IE9 (2011)
  • Utilizarea browserelor non-compatibile a scăzut.
  • Există mai multe posibilități de la JavaScript pentru accesul duminicii.
  • cadre ca unghi (din 2010) Utilizați JQLITE, o versiune foarte redusă a jquery

• React tip cadre (2013) Începeți să lucrați cu dom:
  • Lucrul cu Sunda este scump, mai bine Lucrați cu o versiune „mai ușoară”
  • Dacă se schimbă apar în Dom virtual, se deplasează la fac M Real
  • JQUEY funcționează direct cu DOM, astfel încât acesta rămâne eficiență

folosim jQuery?

• Răspuns rapid: Nu, cu excepția subiectelor de compatibilitate
• Răspuns meditat:
  • Dacă faceți o rețea (nu un webApp) dacă
    • Aruncați mai multe pluginuri și evoluțiile deja realizate
  • Dacă faceți un site web, nu utilizați un cadru JS, dar analizați:
    • SEO? Timp de încărcare? Render pe server?

e-am obișnuit să folosim cât mai mult jQuery, care acum va învăța din nou:

• pentru a face lucruri cu JavaScript înainte de
• pentru a utiliza noi caracteristici JavaScript acum

Dacă este cazul nostru, venim dintr-un fundal jQuery, merită să luăm un ochi pe un ghid.

Selector de clasă

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

Selector de identificare

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

Selector de etichetă

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

JavaScript Evenimente

Evenimente

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

Evenimente Encorate

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

DOM Ready Event

• Suport Majoritatea browserelor

  document.addEventListener('DOMContentLoaded', function() { // DOM ready, run it!}, false);