Příklad jQuery. Jednoduché příklady skriptů na jQuery

jQuery je knihovna jazyka jаvascript, která webovým vývojářům umožňuje přidávat na svých webových stránkách další funkce. Je k dispozici s otevřeným zdrojovým kódem a je poskytována zdarma pod licencí společnosti MIT. V posledních letech se jQuery stala nejoblíbenější knihovnou jаvascript používanou při vývoji webových stránek.

Příklad JQuery

Pro implementaci jQuery musí webový vývojář odkazovat na soubor jаvascript v kódu HTML webové stránky. Některé weby mají vlastní lokální kopii, zatímco jiné odkazují na knihovnu hostovanou společností Google nebo serverem. Například webová stránka může načíst knihovnu jQuery pomocí následujícího řádku v sekci HTML (například jQuery a cookie):

Příklady JQuery a Ajax

Po načtení knihovny může webová stránka volat libovolnou funkci podporovanou knihovnou. Mezi běžné příklady patří změna textu, zpracování dat formuláře, přesouvání položek na stránce a provádění animací. jQuery může také pracovat s Ajaxovým kódem a skriptovací jazyky, například PHP a ASP, pro přístup k datům z databáze. Protože jQuery běží na straně klienta (a ne na webovém serveru), může aktualizovat informace na webové stránce v reálném čase, aniž by znovu načte stránku. Obvyklým příkladem je automatické dokončování, ve kterém vyhledávací formulář automaticky zobrazí obecná data při zadávání dotazu.

Výhody

Kromě bezplatné licence je dalším hlavním důvodem, proč jQuery získala takovou popularitu, že je kompatibilní s různými prohlížeči. Vzhledem k tomu, že každý prohlížeč zobrazuje HTML, CSS a jаvascript různými způsoby, může být webový vývojář obtížné vytvořit webové stránky stejně ve všech prohlížečích. Namísto psaní vlastních funkcí pro každý prohlížeč může webový vývojář používat jednu funkci jQuery, která bude pracovat v prohlížečích Chrome, Safari, Firefox a Internet Explorer. Podpora více prohlížečů přiměla mnoho vývojářů přesunout ze standardního jazyka jаvascript do jQuery, protože to značně zjednodušuje proces kódování.

Popis

Syntaxe jQuery slouží k zjednodušení navigace dokumentů, výběru prvků DOM, vytváření animací, procesních událostí a vývoj aplikací Ajax. jQuery také poskytuje vývojářům možnost vytvářet plug-iny nad knihovnou jаvascript. To umožňuje programátorům vytvářet abstraktní struktury pro interakci a animaci na nízké úrovni, pokročilé efekty a tematické widgety na vysoké úrovni. Modulární přístup k knihovně jQuery umožňuje vytvářet výkonné dynamické webové stránky a webové aplikace.

Sada základních funkcí:

• výběr prvků DOM;
• obcházení a manipulace pomocí výběrového mechanismu;
• nový styl programování;
• algoritmy pro sloučení a datové struktury DOM.

Styl ovlivnil architekturu jiných rámců jazyka jаvascript, například YUI v3 a Dojo, a také stimuloval vytvoření standardního rozhraní API Selectors.

Microsoft a Nokia dodávají jQuery na svých platformách. Společnost Microsoft jej zahrnuje s aplikací Visual Studio pro použití s ​​ASP.NET AJAX a ASP.NET MVC a společnost Nokia ji integrovala do vývojové platformy Web Time Widget.

Přehled

jQuery je knihovna prvků s objektovým dokumentem (DOM). DOM je reprezentace stromové struktury všech prvků webové stránky. jQuery zjednodušuje syntaxi pro vyhledávání, výběru a správy těchto DOM elementů. Knihovna může být použity k hledání pro prvky v dokumentu s určitou vlastnost (například všechny prvky s h1 tag), změna v jednom nebo více z jeho atributů (barva, viditelnost), nebo aby byla přijata v reakci na události (jako kliknutí).

Vývoj

Knihovna využívá takové oblíbené funkce jаvascriptu jako vyblednutí a vyblednutí při skrývání prvků, animaci a práci s prvky jQuery CSS. jQuery také poskytuje paradigm pro zpracování událostí, který přesahuje výběr a manipulaci s prvky DOM. Účel události a definice funkce zpětného volání jsou prováděny v jednom kroku na jednom místě v kódu.

Principy vývoje pomocí jQuery (příklady):

• Oddělení jаvascript a knihovny HTML poskytuje jednoduchou syntaxi pro přidávání obslužných programátorů událostí do DOM pomocí jаvascript, spíše než přidávání atributů událostí HTML k volání funkcí JS. Takto podporuje vývojáře úplně oddělit jаvascript kód z HTML značení.
• Křehkost a jasnost - přispívá k stručnosti a srozumitelnosti nástroji, jako jsou řetězce a zkrácená jména funkcí.
• Odstranění neslučitelnosti mezi prohlížeči - motory jazyka jаvascript různých prohlížečů se mírně liší, takže kód JS, který pracuje pro jeden prohlížeč, nemusí pracovat pro jiný prohlížeč. Stejně jako ostatní jаvascriptové nástroje, jQuery zpracovává všechny tyto nesrovnalosti 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 mohou být snadno přidány a poté znovu použity jako plug-in.

Historie

jQuery byl původně vydán v lednu 2006 v BarCamp NYC od Johna Reciga a byl ovlivněn časnou knihovnou CSSQuery Deana Edwardse. V současné době je podporován vývojovým týmem vedeným Timmym Willisem (s výběrovým modulem jQuery - Sizzle, provozovaným Richardem Gibsonem).

Vlastnosti

Knihovna obsahuje následující funkce:

• výběr prvků DOM pomocí multi-serverového mechanismu voliče open source Sizzle;
• zdůraznění projektu manipulace DOM založeného na selektorech CSS, který používá jako kritéria pro výběr uzlů v DOM názvy a atributy prvků, například id a třídu;
• činnosti;
• efekty a animace;
• ajax;
• objekty odložené a slibné řídit asynchronní zpracování;
• analyzovat JSON;
• rozšíření prostřednictvím pluginů;
• Nástroje, jako je detekce funkcí;
• Kompatibilita znamená, že původně k dispozici v moderních prohlížečích, ale v případě potřeby dřívějších verzích, jako inArray () a každý (), multi-browser (neplést s cross-prohlížeče).

Použijte

Knihovna jQuery je jediný soubor jаvascriptu obsahující všechny své běžné funkce DOM, události, efekty a Ajax. Může být zahrnut do webové stránky odkazem na místní kopii nebo na jeden z více kopií dostupných na veřejných serverech. Knihovna má síť pro doručování obsahu (CDN), kterou hostí MaxCDN.

Příklad jQuery v PHP:

Styly

jQuery má dva styly použití:

1. Prostřednictvím funkce $, což je tovární metoda pro objekt jQuery. Tyto funkce, často nazývané příkazy, jsou neporušené, protože všechny vrátí objekty jQuery.
2. Prostřednictvím funkcí prefixu $ -. Jedná se o servisní funkce, které přímo neovlivňují objekt.

Přístup k jQuery a správa více uzlů DOM obvykle začíná voláním funkce $ pomocí řetězce Volič CSS. Tím se vrátí objekt jQuery, který odkazuje na všechny relevantní prvky na stránce HTML.

Režim bez konfliktů

jQuery obsahuje režim .noConflict (), který uvolňuje ovládání funkce $. To je užitečné, pokud se jQuery používá s jinými knihovnami, které také používají $ jako identifikátor. V nekonfliktním režimu mohou vývojáři používat knihovnu jako náhradu za $ bez ztráty funkčnosti.

Pokročilé funkce

Funkce zpětného volání pro zpracování událostí na položkách, které dosud nebyly načteny, mohou být registrovány uvnitř .ready () jako anonymní funkce. Tyto obsluhy budou volány pouze při spuštění události. Například následující kód přidá obslužný program pro klepnutí na prvek img image:

$ (funkce () {

$ (`img`) na (`kliknutí`, funkce () {

// zpracujte událost kliknutí na libovolném elementu IMG na stránce

});

}).

Některé funkce vracejí určité hodnoty (například $ (`# input-user-email`). V těchto případech řetězec nefunguje, protože hodnota neodkazuje na objekt jQuery.

Vytváření nových položek

Kromě přístupu k uzlům DOM prostřednictvím hierarchie objektů je možné vytvořit i nové položky, pokud řetězec předaný jako argument na $ () vypadá jako HTML. Řádek například nalezne prvek výběru HTML s identifikačními kartami a přidá prvek volby s hodnotou VAG a textem Volkswagen:

$ (`# vyberte carmakes`)

.připojit ($ (``)

.attr ({hodnota: VAG})

.připojit (Volkswagen)).

Pomůcky

Funkce JQuery s předponou $ jsou utilitní funkce, které ovlivňují globální vlastnosti a chování. Následující příklad používá funkci each (), která iteruje přes pole:

$ .each ([1,2,3], funkce () {

console.log (to je + 1);

});

Tento příklad post jQuery zapíše 2, 3, 4 do konzoly.

Ajax

Protokoly Ajax lze provést pomocí prohlížečů .ajax () jQuery, které mohou být příkladem souvisejících metod pro načítání a zpracování vzdálených dat:

$ .ajax ({

typ: POST,

url: `/process/submit.php`,

dаta: {

jméno: John,

umístění: "Boston",

},

}) hotovo (funkce (msg) {

upozornění (`Data Saved:` + msg);

}) selhání (funkce (xmlHttpRequest, statusText, errorThrown) {

oznámení (

`Vaše zpráva nemůže být odeslána. N n`

+`Požadavek XML Http:` + JSON.stringify (xmlHttpRequest)

+ `, nStatus Text:` + statusText

+ `, nError Thrown:` + errorThrown);

});

V tomto příkladu server specifikuje název dat = John a location = Boston pro /process/submit.php. Po dokončení této žádosti je funkce upozorněna na upozornění uživatele. Pokud žádost selže, upozorní uživatele na chybu, stav žádosti a konkrétní chybu.

Pluginy

jQuery architektura umožňuje vývojářům vytvářet plug-in kód pro rozšíření různých funkcí. Na internetu, tisíce plug-inů k dispozici, které pokrývají celou řadu funkcí, jako je Ajax pomocníků, webové služby, dynamické seznamy, XML a XSLT nástrojů, drag and drop, události, zpracování souborů cookie a modálních oken.

Existují alternativní pluginy pro vyhledávačů, jako je jquer.in, které používají specializované přístupy, jako například výpis pouze moduly, které splňují určitá kritéria (například ty, které mají veřejné úložiště kódu). Developer poskytuje „Learning Center» - jQuery zdroj pro začátečníky, které mohou pomoci uživatelům porozumět jаvascript a začít rozvíjet plug-inů.

jQuery UI

jQuery UI je sada grafických uživatelských widgetů, animovaných vizuálních efektů a motivů implementovaných pomocí jQuery CSS (knihovny jаvascript), kaskádových stylů a HTML. Podle služby jаvascript Analytics Libscore je uživatelské rozhraní jQuery používáno na více než 197 000 nejlepších webových stránkách, což z něj dělá druhou nejoblíbenější knihovnu JS. Nejslavnější z nich: Pinterest, PayPal, IMDb, Huffington Post a Netflix.

jQuery UI jsou volné a otevřené zdroje distribuované nadací pod licencí MIT. To bylo poprvé publikováno v září 2007.

jQuery Mobile

jQuery Mobile je webová infrastruktura s optimalizací senzorů (také známá jako mobilní infrastruktura). Hlavní pozornost při vývoji je věnována vytvoření infrastruktury kompatibilní se širokou škálou smartphonů a tabletů potřebných pro rostoucí trh s digitálním zařízením. Kompatibilní s dalšími mobilními aplikačními platformami, jako je PhoneGap, Worklight a mnoho dalších.