jQuery - jQuery

jQuery
Logo JQuery.svg
Původní autoři John Resig
Vývojáři Tým jQuery
První vydání 26. srpna 2006 ; před 15 lety ( 2006-08-26 )
Stabilní uvolnění
3.6.0 / (2. března 2021 ; před 7 měsíci ) ( 2021-03-02 )
Úložiště
Napsáno JavaScript
Plošina Viz § Podpora prohlížeče
Velikost 27–274 KB
Typ Knihovna JavaScript
Licence MIT
webová stránka jquery .com

jQuery je knihovna JavaScriptu, která má zjednodušit procházení a manipulaci se stromem HTML DOM , stejně jako zpracování událostí , CSS animaci a Ajax . Je to bezplatný software s otevřeným zdrojovým kódem s povolnou licencí MIT . V květnu 2019 používá jQuery 73% z 10 milionů nejoblíbenějších webů. Webová analýza naznačuje, že se jedná o nejrozšířenější knihovnu JavaScriptu s velkým náskokem, která má nejméně 3 až 4krát větší využití než kterákoli jiná knihovna JavaScript.

Syntaxe jQuery je navržena tak, aby usnadnila procházení dokumentu, výběr prvků DOM , vytváření animací , zpracování událostí a vývoj aplikací Ajax . jQuery také poskytuje vývojářům možnosti vytvářet zásuvné moduly nad knihovnou JavaScript. To umožňuje vývojářům vytvářet abstrakce pro interakce a animace na nízké úrovni, pokročilé efekty a tematické widgety na vysoké úrovni. Modulární přístup ke knihovně jQuery umožňuje vytváření výkonných dynamických webových stránek a webových aplikací.

Sada základních funkcí jQuery - výběr prvků DOM, procházení a manipulace - povolená jeho selektorovým motorem (s názvem „Sizzle“ od v1.3), vytvořil nový „styl programování“, spojovací algoritmy a datové struktury DOM. Tento styl ovlivnil architekturu jiných rámců JavaScriptu, jako je YUI v3 a Dojo , později stimuloval vytvoření standardního rozhraní Selectors API . Později byl tento styl vylepšen o hlubší fúzi algoritmu a dat v dědici jQuery, rámce D3.js.

Microsoft a Nokia sdružují jQuery na svých platformách. Společnost Microsoft ji zahrnuje s aplikací Visual Studio pro použití v rámci Microsoft ASP.NET AJAX a ASP.NET MVC, zatímco Nokia ji integrovala do vývojové platformy widgetu Web Run-Time.

Přehled

jQuery je jádrem manipulační knihovny Document Object Model (DOM). DOM je stromová struktura reprezentující všechny prvky webové stránky. jQuery zjednodušuje syntaxi pro hledání, výběr a manipulaci s těmito prvky DOM. JQuery lze například použít k vyhledání prvku v dokumentu s určitou vlastností (např. Všechny prvky se značkou h1 ), ke změně jednoho nebo více jeho atributů (např. Barva, viditelnost) nebo k reakci na událost ( např. kliknutí myší).

jQuery také poskytuje paradigma pro zpracování událostí, které přesahuje základní výběr a manipulaci s prvky DOM. Přiřazení události a definice funkce zpětného volání události se provádějí v jednom kroku na jednom místě v kódu. jQuery si také klade za cíl začlenit další vysoce používané funkce JavaScriptu (např. fade ins a fade out při skrývání prvků, animace manipulací s vlastnostmi CSS ).

Zásady vývoje pomocí jQuery jsou:

  • Oddělení JavaScriptu a HTML: Knihovna jQuery poskytuje jednoduchou syntaxi pro přidávání obslužných rutin událostí do DOM pomocí JavaScriptu, namísto přidávání atributů události HTML pro volání funkcí JavaScriptu. Proto doporučuje vývojářům, aby zcela oddělili kód JavaScript od kódu HTML.
  • Stručnost a jasnost: jQuery podporuje stručnost a přehlednost pomocí funkcí, jako jsou „řetězitelné“ funkce a zkratkové názvy funkcí.
  • Odstranění nekompatibility mezi prohlížeči: JavaScriptové nástroje různých prohlížečů se mírně liší, takže kód JavaScript, který funguje pro jeden prohlížeč, nemusí fungovat pro jiný. Stejně jako ostatní sady nástrojů JavaScript zpracovává jQuery všechny tyto nekonzistence mezi prohlížeči a poskytuje konzistentní rozhraní, které funguje v různých prohlížečích.
  • Rozšiřitelnost: Nové události, prvky a metody lze snadno přidat a poté znovu použít jako plugin.

Dějiny

jQuery byl původně vytvořen v lednu 2006 v BarCamp NYC Johnem Resigem , ovlivněn dřívější knihovnou cssQuery Deana Edwardse . V současné době je udržován týmem vývojářů pod vedením Timmyho Willisona (se selektorem jQuery Sizzle, který vede Richard Gibson).

jQuery byl původně pod licencí CC BY-SA 2.5 , a relicensed na MIT licencí v roce 2006. Na konci roku 2006 to bylo dual-licencovaný pod GPL a MIT licencí. Protože to vedlo k určitému zmatku, v roce 2012 byla GPL zrušena a nyní je licencována pouze pod licencí MIT.

Popularita

  • V roce 2015 byl jQuery použit na 62,7% z nejlepších 1 milionu webů (podle BuiltWith) a 17% všech internetových webů.
  • V roce 2017 byl jQuery použit na 69,2% z nejlepších 1 milionu webů (podle Libscore).
  • V roce 2018 byl jQuery použit na 78% nejlepších 1 milionu webů.
  • V roce 2019 byl jQuery použit na 80% nejlepších 1 milionu webů (podle BuiltWith) a 74,1% z top 10 milionů (na W3Techs).
  • K dubnu 2021 používá jQuery 77,8% z nejlepších 10 milionů webů (podle W3Techs) .

Funkce

jQuery obsahuje následující funkce:

  • Výběr prvků DOM pomocí motoru Sizzle s otevřeným zdrojovým kódem pro více prohlížečů , spin-off projektu jQuery
  • Manipulace s DOM na základě selektorů CSS, které jako kritéria pro výběr uzlů v DOM používají názvy a atributy prvků, jako je id a třída
  • Události
  • Efekty a animace
  • Ajax
  • Odložené a slibné objekty pro řízení asynchronního zpracování
  • Analýza JSON
  • Rozšiřitelnost pomocí zásuvných modulů
  • Nástroje, jako je detekce funkcí
  • Metody kompatibility, které jsou nativně dostupné v moderních prohlížečích, ale vyžadují záložní řešení pro starší prohlížeče, jako například jQuery.inArray()a jQuery.each().
  • Podpora více prohlížečů

Podpora prohlížeče

jQuery 3.0 a novější podporuje „aktuální − 1 verze“ (což znamená aktuální stabilní verzi prohlížeče a verzi, která mu předcházela) Firefox (a ESR), Chrome , Safari a Edge a také Internet Explorer 9 a novější. Na mobilních zařízeních podporuje iOS 7 a novější a Android 4.0 a novější.

Rozdělení

Knihovna jQuery je obvykle distribuována jako jeden soubor JavaScript, který definuje všechna její rozhraní, včetně funkcí DOM, Events a Ajax. Může být zahrnut na webovou stránku odkazem na místní kopii nebo odkazem na jednu z mnoha kopií dostupných z veřejných serverů. jQuery má síť pro doručování obsahu (CDN) hostovanou společností MaxCDN. Google ve službě Google Hosted Libraries a Microsoft také hostuje knihovnu.

Příklad místního propojení kopie knihovny (ze stejného serveru, který je hostitelem webové stránky):

<script src="jquery-3.5.1.min.js"></script>

Příklad propojení kopie knihovny z veřejné CDN jQuery:

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

Rozhraní

Funkce

jQuery poskytuje dva druhy funkcí , statické obslužné funkce a objektové metody jQuery . Každý má svůj vlastní styl použití.

Oba jsou přístupné přes hlavní identifikátor jQuery je: jQuery. Tento identifikátor má alias pojmenovaný $. Ke všem funkcím lze přistupovat prostřednictvím některého z těchto dvou jmen.

jQuery metody

jQueryFunkce je z výroby k vytvoření objektu jQuery, který představuje jednu nebo více DOM uzly. Objekty jQuery mají metody pro manipulaci s těmito uzly. Tyto metody (někdy nazývané příkazy) jsou řetězitelné, protože každá metoda také vrací objekt jQuery.

Přístup a manipulace s více uzly DOM v jQuery obvykle začíná voláním $funkce pomocí řetězce výběru CSS. Tím se vrátí objekt jQuery odkazující na všechny odpovídající prvky na stránce HTML . $("div.test")například vrátí objekt jQuery se všemi divprvky třídy test. S touto sadou uzlů lze manipulovat voláním metod na vráceném objektu jQuery.

Statické nástroje

Toto jsou pomocné funkce a nepůsobí přímo na objekt jQuery. Jsou přístupné jako statické metody v jQuery nebo $ identifikátoru. Je například $.ajax()statická metoda.

Režim bez konfliktu

jQuery poskytuje $.noConflict()funkci, která se vzdává kontroly nad $jménem. To je užitečné, pokud je jQuery použit na webové stránce, která také propojuje jinou knihovnu, která požaduje $jako svůj identifikátor symbol. V režimu bez konfliktů mohou vývojáři použít jQueryjako náhradu za $bez ztráty funkčnosti.

Typický počáteční bod

Typicky se jQuery používá vložením inicializačního kódu a funkcí zpracování událostí . Toto je spuštěno jQuery, když prohlížeč dokončil konstrukci DOM pro aktuální webovou stránku. $(handler)

$(function () {
        // This anonymous function is called when the page has completed loading.
        // Here, one can place code to create jQuery objects, handle events, etc.
});

nebo

$(fn); // The function named fn, defined elsewhere, is called when the page has loaded.

Historicky $(document).ready(callback)to byl de facto idiom pro spouštění kódu poté, co je DOM připraven. Od verze jQuery 3.0 se však vývojářům doporučuje používat mnohem kratší $(handler)podpis.

Řetězení

Objektové metody jQuery obvykle také vracejí objekt jQuery, který umožňuje použití řetězců metod :

$('div.test')
  .on('click', handleTestClick)
  .addClass('foo');

Tento řádek vyhledá všechny div prvky s atributem třídy test, poté zaregistruje obslužnou rutinu události na každém prvku pro událost „kliknutí“ a poté fooke každému prvku přidá atribut třídy .

Určité objektové metody jQuery načítají konkrétní hodnoty (namísto úpravy stavu). Příkladem je val()metoda, která vrací aktuální hodnotu prvku pro zadávání textu . V těchto případech $('#user-email').val()nelze takový řetězec použít jako řetězec, protože vrácená hodnota neodkazuje na objekt jQuery.

Vytváření nových prvků DOM

Kromě přístupu ke stávajícím uzlům DOM prostřednictvím jQuery je také možné vytvořit nové uzly DOM, pokud řetězec předaný jako argument do továrny $ () vypadá jako HTML. Níže uvedený kód například najde selectprvek HTML a vytvoří nový optionprvek s hodnotou „VAG“ a označením „Volkswagen“, který se poté připojí k nabídce výběru :

$('select#car-brands')
  .append($('<option>')
    .prop(value,"VAG")
    .text('Volkswagen')
  );

Ajax

Je možné zadávat požadavky Ajaxu (s podporou více prohlížečů ) pomocí $.ajax()pro načítání a manipulaci se vzdálenými daty.

$.ajax({
  type: 'POST',
  url: '/process/submit.php',
  data: {
    name : 'John',
    location : 'Boston',
  },
}).then(function(msg) {
  alert('Data Saved: ' + msg);
}).catch(function(xmlHttpRequest, statusText, errorThrown) {
  alert(
    'Your form submission failed.\n\n'
      + 'XML Http Request: ' + JSON.stringify(xmlHttpRequest)
      + ',\nStatus Text: ' + statusText
      + ',\nError Thrown: ' + errorThrown);
});

Tento příklad účtuje dat name=Johna location=Boston/process/submit.phpna serveru. Po dokončení tohoto požadavku se zavolá funkce úspěchu, která uživatele upozorní. Pokud požadavek selže, upozorní uživatele na selhání, stav požadavku a konkrétní chybu.

Výše uvedený příklad používá metody .then()a .catch()k registraci zpětných volání, která se spustí po dokončení odpovědi. Tato slibná zpětná volání je nutné použít kvůli asynchronní povaze požadavků Ajaxu .

Doplňky jQuery

Architektura jQuery umožňuje vývojářům vytvářet kód modulu plug-in pro rozšíření jeho funkcí. Na webu jsou k dispozici tisíce doplňků jQuery, které pokrývají celou řadu funkcí, jako jsou pomocníci Ajaxu, webové služby , datové mřížky, dynamické seznamy, nástroje XML a XSLT , přetahování , události, zpracování souborů cookie a modální okna .

Důležitým zdrojem modulů plug-in jQuery je subdoména modulů plugins na webu jQuery Project. Pluginy v této subdoméně však byly omylem smazány v prosinci 2011 ve snaze zbavit web nevyžádané pošty. Nový web je úložiště hostované na GitHubu , které vyžadovalo, aby vývojáři znovu odeslali své pluginy a vyhověli novým požadavkům na odesílání. jQuery poskytuje „Learning Center“, které může uživatelům pomoci porozumět JavaScriptu a začít vyvíjet doplňky jQuery.

Za účelem vytvoření těchto modulů plug-in se vývojáři mohou rozhodnout napsat svůj vlastní kód úplně od začátku nebo stavět na existující struktuře, jako je jQuery Boilerplate .

Historie vydání

Verze První vydání Poslední aktualizace Zmenšená velikost (KB) Další poznámky
1,0 26. srpna 2006 ( 2006-08-26 ) První stabilní vydání
1.1 14. ledna 2007 ( 2007-01-14 )
1.2 10. září 2007 ( 2007-09-10 ) 1.2.6 54,5
1.3 14. ledna 2009 ( 2009-01-14 ) 1.3.2 55,9 Sizzle Selector Engine zaveden do jádra
1.4 14. ledna 2010 ( 2010-01-14 ) 1.4.4 76,7
1.5 31. ledna 2011 ( 2011-01-31 ) 1.5.2 83,9 Odložená správa zpětného volání, přepsání modulu ajax
1.6 3. května 2011 ( 2011-05-03 ) 1.6.4 (12. září 2011 )  ( 12.09.2011 ) 89,5 Významné zlepšení výkonu funkcí attr () a val ()
1.7 03.11.2011 ( 2011-11-03 ) 1.7.2 (21. března 2012 )  ( 2012-03-21 ) 92,6 Nová rozhraní API událostí: .on () a .off (), zatímco stará rozhraní API jsou stále podporována.
1,8 09.08.2012 ( 2012-08-09 ) 1.8.3 (13. listopadu 2012 )  ( 2012-11-13 ) 91,4 Přepsán Sizzle Selector Engine, vylepšené animace a flexibilita $ (html, rekvizity).
1.9 15. ledna 2013 ( 2013-01-15 ) 1.9.1 (4. února 2013 )  ( 2013-02-04 ) 90,5 Odstranění zastaralých rozhraní a vyčištění kódu
1.10 24. května 2013 ( 2013-05-24 ) 1.10.2 (3. července 2013 )  ( 2013-07-03 ) 90,9 Začleněné opravy chyb a rozdíly hlášené z cyklů beta verze 1.9 a 2.0
1.11 24. ledna 2014 ( 2014-01-24 ) 1.11.3 (28. dubna 2015 )  ( 2015-04-28 ) 93,7
1.12 8. ledna 2016 ( 08.01.2016 ) 1.12.4 (20. května 2016 )  ( 2016-05-20 ) 94,9
2.0 18. dubna 2013 ( 2013-04-18 ) 2.0.3 (3. července 2013 )  ( 2013-07-03 ) 81,7 Byla ukončena podpora IE 6–8 pro vylepšení výkonu a zmenšení velikosti souborů
2.1 24. ledna 2014 ( 2014-01-24 ) 2.1.4 (28. dubna 2015 )  ( 2015-04-28 ) 82,4
2.2 8. ledna 2016 ( 08.01.2016 ) 2.2.4 (20. května 2016 )  ( 2016-05-20 ) 83,6
3,0 9. června 2016 ( 2016-06-09 ) 3.0.0 (9. června 2016 )  ( 2016-06-09 ) 84,3 Sliby/podpora A+ pro Deferreds, $ .ajax a $ .when, .data () kompatibilní s HTML5
3.1 7. července 2016 ( 07.07.2016 ) 3.1.1 (23. září 2016 )  ( 2016-09-23 ) 84,7 Přidána výjimka jQuery.readyException, chyby obslužné rutiny připravené nyní nejsou umlčeny
3.2 16. března 2017 ( 2017-03-16 ) 3.2.1 (20. března 2017 )  ( 2017-03-20 ) 84,6 Přidána podpora pro načítání obsahu <template>prvků a ukončování podpory různých starých metod.
3.3 19. ledna 2018 ( 2018-01-19 ) 3.3.1 (20. ledna 2018 )  ( 2018-01-20 ) 84,9 Ukončení podpory starých funkcí, funkce, které přijímají třídy, je nyní také podporují ve formátu pole.
3.4 10. dubna 2019 ( 2019-04-10 ) 3.4.1 (1. května 2019) 86,1 Vylepšení výkonu noncea nomodulepodpora, opravy rádiových prvků, drobná oprava zabezpečení.
3.5 10. dubna 2020 ( 2020-04-10 ) 3.5.1 (4. května 2020) 87,4 Opravy zabezpečení .even()a .odd()metody, jQuery.trimzastaralé
3.6 2. března 2021 3.6.0 (2. března 2021) 90,0 Opravy chyb, v případě chyby JSONP vraťte JSON

Testovací rámec

QUnit je rámec pro automatizaci testů, který slouží k testování projektu jQuery. Tým jQuery jej vyvinul jako interní knihovnu testování jednotek. Tým jQuery jej používá k testování kódu a doplňků, ale může testovat jakýkoli obecný kód JavaScript, včetně kódu JavaScript na straně serveru.

Od roku 2011 testovací tým jQuery používá QUnit s TestSwarm k testování každé verze kódové základny jQuery.

Alternativy k jQuery

Díky zjednodušení úkolů, jako je procházení dokumentů HTML, animace a zpracování událostí, stálou knihovnu JavaScript jQuery změnila tvář webového vývoje. Podle průzkumu webových technologií W3Techs je v květnu 2019 jQuery stále používáno na 74 procentech známých webů. Knihovnu jQuery, která debutovala v srpnu 2006, však nyní někteří vývojáři považují za starší technologii, jejíž čas již uplynul. V posledních letech se objevily alternativy k jQuery, jako je knihovna Cash nebo dokonce jen moderní, vanilkový JavaScript, nyní, když všechny webové prohlížeče zpracovávají JavaScript stejným způsobem a jQuery již není potřeba k řešení problémů s kompatibilitou. Argumenty na Redditu a videa na YouTube svědčí o tom, že jQuery zastaral nebo alespoň není tak zásadní, jako kdysi.

-  Paul Krill, InfoWorld (2019)

Protože kompatibilita mezi prohlížeči již není tak velkým problémem, lze většinu jQuery v dnešní době nahradit moderními webovými standardy, aniž by přišlo o mnoho pohodlí. Částečně kvůli tomu GitHub v roce 2018 odstranil jQuery ze svých stránek.

Alternativní knihovny

Viz také

Reference

Další čtení

externí odkazy