Skôr ako začnem, chcem povedať, že toto ma priviedlo k tomuto článku:
Natalia má úplnú pravdu, môj blog je v zásade venovaný JQuery a pluginom JQuery, ale čo to je a ako tieto pluginy používať na stránkach som nepísal nirazu. Milí čitatelia, odpustite mi :-) Napravím to, úprimne :-)
Natália, veľmi pekne ďakujem za takýto komentár! A ešte by som chcela poznamenať, že Natália je začínajúca blogerka (ako ja :-)) a všetkým rodičom odporúčam, aby si prečítali blog jej mamy. Natália, teba a tvoj blog čaká skvelá budúcnosť.
Dobre, nenechajme sa príliš odvádzať od témy, poďme na vec. Uvediem všeobecný koncept toho, čo je jQuery.
JQuery
jQuery je predovšetkým veľká skriptovacia knižnica JavaScript, pomocou ktorej môžete pristupovať k akémukoľvek prvku takzvaného DOM (Document Object Model). Inými slovami, pomocou tohto jQuery na stránke si môžete robiť čo chcete, ako chcete a kedy chcete, najmä sa to týka animácií :-) V podstate táto knižnica slúži na ozdobenie stránky, ktorá už dávno nahradila blesk... Ak nie v dávnej minulosti bolo možné vytvoriť krásnu stránku iba pomocou prvkov Flash, teraz sa to všetko dá urobiť pomocou jQuery.
Úprimne povedané, nechcem dlho vysvetľovať význam tohto slova, ale rád by som sa podrobnejšie venoval doplnkom jQuery, ako ich pripojiť na stránku. Najprv však zistíme, čo sú to pluginy.
pluginy jQuery
Doplnky jQuery sú hotové skripty plus HTML a CSS, ktoré si stačí stiahnuť a pripojiť k svojmu zdroju. Posuvníky, galérie, všetky druhy vyskakovacích tipov, viacúrovňové menu atď. Zoznam je nekonečný. Ako sa ukázalo, pripojiť hotový skript nie je také jednoduché, najmä ak ste sa s tým nikdy nestretli.
Aby to bolo jasnejšie, pripojím plugin na stránku na príklade, pretože príklad je vždy jasnejší.
Skôr ako začnete, musíte na stránku pripojiť samotnú knižnicu jQuery, nie je tu nič zložité, iba medzi značkami a daj toto:
To je všetko, urobili sme prvý krok :-)
Príklad
Napríklad som chcel na svoju webovú stránku pripojiť také zaujímavé a krásne obrázky so skvelou animáciou:
Ako vidíte, mám tri priečinky s obrázkami, štýlmi a samotným skriptom, ako aj tri príklady index.html... V tomto prípade ho využijeme.
Ďalej otvoríme prvý príklad, napríklad v Opere, potom sa musíme pozrieť na zdrojový kód samotnej stránky, kliknúť tam pravým tlačidlom a vybrať Zdroj, a podľa jeho vzoru pripojte galériu na našu stránku. Vo všeobecnosti sa pozeráme na to, ako sa to tam robilo, a tiež to robíme pre seba.
Hneď hovorím, že všetky zdrojové kódy sa môžu líšiť, ale princíp je rovnaký. Ja to napríklad robím vždy, pozriem si zdrojový kód v príklade a to isté urobím aj doma.
Dôležité body v tomto príklade.
Musíte pripojiť štýly presne toho pluginu, ktorý pripájate, v tomto prípade sa to robí takto:
Tento riadok musí byť umiestnený medzi značky. a a na stránke, kde bude samotná galéria, ak máte napríklad WordPress, treba vložiť hlavička.php.
Musíte tiež pripojiť skript tejto krásnej animácie, opäť medzi značky:
No, teraz sa pozrime, čo som urobil. Pre pripomenutie som vytvoril novú stránku a pripojil tam galériu. Tu je pohľad:
Uistite sa, že používate zdrojový kód vzorového doplnku, aby ste ho mohli jednoduchšie vložiť na svoje stránky. Môžete si pozrieť zdrojový kód v mojom príklade a pre každý prípad ho zverejním aj tu :-)
< !DOCTYPE html>
To je v podstate všetko. Najdôležitejšou vecou je pokúsiť sa zmeniť, vložiť, odstrániť atď. Pokazené, stiahnuté znova a znova, kým nedosiahnete požadovaný výsledok. Dúfam, že som vám všetko povedal v dostupnom jazyku. Ak stále niečomu nerozumiete, určite sa opýtajte v komentároch. Do skorého videnia priatelia.
JavaScript a jQuery
Čo je jQuery
jQuery je knižnica rôznych užitočných softvérových služieb na manipuláciu s prvkami html načítanej stránky. Je to napísané v. Jeho krása nie je len v tom, že má celkom vážne schopnosti, ale aj v tom, že jeho softvérové rozhranie je neuveriteľne jednoduché.
Predtým, ako prejdeme k popisu jQuery, dovoľte mi ešte raz pripomenúť, čo to je objektový model dokumentu alebo DOM (Režim objektu dokumentu l). DOM je hierarchická štruktúra objektov v RAM, zodpovedajúca štruktúre načítanej webovej stránky. DOM je generovaný prehliadačom a poskytuje programovacie rozhranie na prácu s prvkami značkovania, napríklad pomocou rovnakého JavaScriptu. Pomocou DOM môžete vyhľadávať, pridávať a odstraňovať prvky dokumentu, upravovať ich atribúty, meniť štýly atď. Inými slovami, pomocou DOM a JavaScriptu sa vytvárajú dynamické webové stránky, ktoré sú aj tzv DHTML stránky(Dynamické HTML stránky). Vráťme sa ku knižnici jQuery. Pomocou rozhrania jQuery API môžete jednoducho vybrať požadované prvky DOM a vykonať s nimi ľubovoľnú z nasledujúcich akcií:
To všetko sa dá samozrejme urobiť pomocou „holého“ DOM a JavaScriptu, ale prečo, ak existuje hotová a bezplatná sada nástrojov. Nezabudnite na kompatibilitu medzi prehliadačmi. Ak potrebujete, aby vaša stránka fungovala rovnakým spôsobom pod kontrolou všetkých populárnych prehliadačov, vyžaduje si to veľa úsilia, pretože existuje pomerne veľký zoznam vecí, ktoré rôzne prehliadače implementujú odlišne. Ak pracujete cez rozhranie jQuery, môžete na tento problém zabudnúť. Prirodzene, programy píšu ľudia a v jQuery sa môžu vyskytovať chyby, no v tomto prípade sa môžete spoľahnúť na to, že problém bude čoskoro odstránený. Ak ste oboznámení, máte predstavu o tom, čo je JavaScript, potom je čas naučiť sa pracovať s jQuery. S príchodom tejto nádhernej knižnice sa možnosti profesionálov a začínajúcich webdizajnérov trochu vyrovnali, čo môže prvých rozčúliť, ale druhých inšpirovať. Možno trochu preháňam, ale nespornou zásluhou jQuery je fakt, že dnes má každý, kto nie je obzvlášť skúsený v zložitosti programovania v JavaScripte, pomerne vážny arzenál na vytváranie efektívnych, rýchlych a spoľahlivých stránok DHTML.
- zmeniť ;
- Upravte zloženie atribútu;
- Vymazať;
- Pridať potomkov;
- Presuňte alebo zabaľte s iným prvkom;
- Kopírovať;
- Zviazať obsluhu udalosti;
- Prispôsobte vizuálny efekt alebo animáciu;
Pripojenie JQuery
Najprv si musíte stiahnuť knižnicu. Môžete to urobiť na stránke autorov jQuery: http://jquery.com... Ďalej ho stačí pripojiť pomocou značky To je všetko, môžete s ňou začať pracovať. Ak nechcete sťahovať, môžete odkazovať priamo na najnovšiu verziu knižnice umiestnenú na serveri vývojára: Na jednej strane je dobré odvolávať sa na najnovšiu verziu, pretože neustále odstraňuje niektoré chyby a optimalizuje prácu jej jednotlivých funkcií, no na druhej strane môže nová verzia obsahovať zmeny, ktoré neočakávate a ktoré viesť k zmenám v práci vášho projektu.
JQuery API alebo syntax
Ako som povedal, syntax dotazu jQuery je pomerne jednoduchá. Konkrétne dopyty, pretože programovanie JavaScript pomocou jQuery možno pripísať deklaratívne programovanie ktorý sa líši od klasického procedurálneho programovania tým, že popisujete skôr „čo robiť“ než „ako to urobiť“. Názov knižnice odráža jej podstatu – dopytovací jazyk v kontexte JavaScriptu. Všetky dotazy jQuery začínajú volaním funkcie $ ktorého argumentom je samotná žiadosť. Takže zovšeobecnená syntax pre dotaz jQuery vyzerá takto:
$(vyšetrovanie )[{.filter (kritérium)}].akcie (argumenty){ .akcie (argumenty)} Dopyt Je selektor alebo zoznam selektorov oddelených čiarkami. Syntax pre dotaz je rovnaká ako pre selektory štýlu CSS. Takže požiadavka jQuery môže začať niečo také:
$ (“Div”) - vyberte všetky prvky div;
$ (“Div, p”) - vyberte všetky prvky div a prvky p;
$ (. Class_name”) - výber všetkých členov triedy názov_triedy;
$ (“# Element_id”) - výber prvku s identifikátorom element_id;
$ (*) - výber všetkých prvkov vo všeobecnosti;
$ (. Class_name span”) - výber všetkých prvkov span v rámci všetkých prvkov triedy názov_triedy;
$ (“# Element_id> div”) – vyberte všetky prvky div ktoré sú priamymi potomkami (detmi) prvku s identifikátorom element_id.
$ (“# Element_id .class_name + div”) - výber všetkých prvkov, ktoré bezprostredne nasledujú za prvkami triedy názov_triedy v rámci prvku element_id.
$ (“# Ul_id> li: first”) - vyberte prvý prvok li zoznam ul_id... Môžete tiež vybrať posledný posledný prvok alebo všetky párne alebo nepárne nepárne prvky. Sú aj iné možnosti.
$ (“A”) - výber všetkých odkazov s hodnotou atribútu href počnúc "Http://ru.wikipedia.org"... Bez symbolu „^“ dostaneme podmienku úplnej zhody hodnôt, ak namiesto symbolu „^“ dáme symbol „$“, dostaneme limit na zhodu medzi koncovými bodmi a symbol * bude znamenať, že hodnota atribútu by mala jednoducho obsahovať špecifikovaný fragment.Filter - spôsob filtrovania množiny vybraných položiek podľa dodatočných kritérií. Kritériá sú rovnaké selektory. Existujú dve opačné operácie: filter a nie. Ak použijete operáciu filter (kritérium), potom zostanú vybraté len tie prvky, ktoré vyhovujú argumentu - kritériu, a ak nie, potom zostanú len tie, ktoré nevyhovujú. Zvyčajne má zmysel použiť operáciu nie od kritéria operácie filter zvyčajne sa ľahko kombinuje s hlavným voličom funkcií $() ... Tu je niekoľko príkladov použitia týchto operácií:
$ (“Div”). Nie (. Class_name”) – vylúčiť všetko div trieda názov_triedy;
$ (“Td, th, div”). Filter (. Class_name”) – výber prvkov td, th, div trieda názov_triedy.K dispozícii je tiež operácia rezu (od, do), ktorá umožňuje vybrať postupnosť prvkov s indexmi z intervalu [ od - do].
Akcia - to je v skutočnosti samotná akcia - nejaká operácie na množine vybraných prvkov... Každá operácia vráti určitý výsledok: buď rovnakú množinu, ak operácia nie je spojená s vytváraním nových alebo odstraňovaním vybraných prvkov, alebo už upravenú množinu alebo množinu novovytvorených prvkov. Vďaka tomu môžete určiť niekoľko operácií naraz oddelených bodkami. Príklad nižšie vyberie všetky položky rozpätie nepatriaci do triedy názov_triedy a skopírujte ich do prvku s id cieľ:
$ ("span"). nie (. class_name"). clone (). appendTo ("# target");Výsledkom každej operácie je pole prvkov HTMLElement... Veľkosť poľa možno zistiť pomocou vlastnosti length alebo funkcie size (). Argumenty operácie môžu byť nielen parametre reťazca, ale aj výsledky iných dotazov. Tu je príklad toho, ako možno umiestniť výsledok jedného dotazu do prvku, ktorý je zase výsledkom iného dotazu:
$ ("span"). nie (. class_name"). klon (). appendTo ($ ("span.class_name"))Ako argument môžete použiť nie celý výsledok požiadavky, ale jeho samostatný prvok:
$ ("span.class_name"). append ($ ("span"). nie (. class_name"));Argumentom operácie teda môže byť buď selektor vo forme reťazca, alebo výsledok iného dotazu, alebo akákoľvek inštancia HTMLElement.
Operácie JQuery
Nižšie sú uvedené kontingenčné tabuľky s operáciami jQuery, ich stručný popis a odkazy na príklady, ktoré demonštrujú ich uplatnenie v praxi.
Vlastnosti
Získa alebo nastaví hodnoty rôznych vlastností vybraných položiek. Ak potrebujete definovať novú hodnotu vlastnosti, potom by sa mala odovzdať ako argument, napríklad $ („# element”). Text (text_value) alebo $ (# element ”). Html (html_value):
názov Popis Príklad text () Text. - posun () Offset (vľavo, hore). , funkcia pohybu lopty lopta.pohyb (): $ ("# loptička"). odsadenie ((vľavo: $ ("# lopta"). odsadenie (). doľava + toto.dx, hore: $ ("# lopta"). odsadenie (). hore + toto. D Y)); Táto funkcia sa volá na časovači každých 10 milisekúnd. šírka výška () Šírka a výška. - html () html značky vo vybratých prvkoch. jQuery je JavaScriptová knižnica, ktorá sa zameriava na interoperabilitu JavaScriptu, HTML a CSS.
Čo dokáže jQuery
- Prístup a manipulácia s akýmkoľvek prvkom DOM (Document Object Model).
- Práca s udalosťami.
- Ľahko implementujte rôzne vizuálne efekty.
- Pracujte s AJAX (veľmi užitočná technológia, ktorá vám umožňuje komunikovať so serverom bez opätovného načítania stránky, ale zatiaľ sa jej nedotkneme).
- Má obrovské množstvo pluginov na vytváranie prvkov používateľského rozhrania.
Ako to funguje
Najprv si musíte stiahnuť samotnú knižnicu na webovej stránke vývojárov alebo ju v prípade potreby rozbaliť a preniesť (knižnicu) do rovnakého priečinka, kde sa nachádzajú naše html stránky (toto je voliteľné, ale adresy všetkých nasledujúcich príkladov budú byť napísané na základe tejto štruktúry).
Teraz musíme pripojiť jQuery k html stránke. Na tento účel, ako si pamätáte, existuje značka v html