Úvod
HTML, CSS a JavaScript jsou tři základní jazyky pro web. Strukturujeme naše webové stránky s HTML, styl je s CSS, a přidat interaktivní funkce s JavaScriptem. Ve skutečnosti je většina animací a jakékoli akce, ke které dochází v důsledku kliknutí uživatele, vznášení nebo rolování, vytvořena pomocí JavaScriptu.
jQuery je knihovna JavaScriptu „Write Less, Do More“. Není to programovací jazyk, ale spíše nástroj používaný k tomu, aby psaní běžných úkolů JavaScriptu bylo stručnější., jQuery má další výhodu, že je kompatibilní s cross-browser, což znamená, že si můžete být jisti, že výstup vašeho kódu bude vykreslen tak, jak je zamýšleno v jakémkoli moderním prohlížeči.
porovnáním jednoduchého “ Ahoj, svět!“program v JavaScriptu i jQuery, můžeme vidět rozdíl v tom, jak jsou oba napsány.
document.getElementById("demo").innerHTML = "Hello, World!";$("#demo").html("Hello, World!");Tento krátký příklad ukazuje, jak jQuery může dosáhnout stejného konečného výsledku jako prostý JavaScript ve stručné způsobem.,
Cíle
Tento průvodce předpokládá, že žádné předchozí znalosti jQuery, a bude zahrnovat následující témata:
- Jak nainstalovat jQuery ve webovém projektu.
- definice důležitých konceptů vývoje webu, jako jsou API, DOM a CDN.
- běžné jQuery selektory, události a efekty.
- příklady pro testování konceptů naučených v celém článku.
předpoklady
než začnete tuto příručku, budete potřebovat následující:
- základní znalost HTML a CSS., Měli byste již vědět, jak nastavit jednoduchý web a porozumět selektorům CSS, jako jsou ID, třídy a pseudo prvky.
- pochopení základů programování. I když je možné začít psát jQuery bez pokročilé znalosti JavaScriptu, znalost pojmů proměnných a datových typů, stejně jako matematiky a logiky výrazně pomůže.
nastavení jQuery
jQuery je soubor JavaScriptu, na který budete odkazovat ve vašem HTML. Existují dva způsoby, jak zahrnout jQuery do projektu:
- Stáhněte si místní kopii.,
- odkaz na soubor prostřednictvím sítě pro doručování obsahu (CDN).
Poznámka: síť pro doručování obsahu (CDN) je systém více serverů, které uživateli dodávají webový obsah na základě geografické polohy. Když odkazujete na hostovaný soubor jQuery přes CDN, potenciálně dorazí uživateli rychleji a efektivněji, než kdybyste jej hostili na svém vlastním serveru.
budeme pomocí CDN odkazovat na jQuery v našich příkladech. Nejnovější verzi jQuery najdete v hostovaných knihovnách Google., Pokud si jej chcete místo toho stáhnout, můžete získat kopii jQuery z oficiálních webových stránek.
začneme toto cvičení vytvořením malého webového projektu. To se bude skládat z style.css css/ adresář scripts.js js/ adresář, a hlavní index.html v kořenovém adresáři projektu.
project/├── css/| └── style.css├── js/| └── scripts.js└── index.htmlChcete-li začít, aby HTML kostru a uložit jej jako index.html.
<!doctype html><html lang="en"><head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"></head><body></body></html>Odkaz na jQuery CDN těsně před zavírací </body> tag, následuje vlastní soubor jazyka JavaScript, scripts.js.
váš soubor JavaScript (scripts.js) musí být v dokumentu zahrnut pod knihovnu jQuery nebo nebude fungovat.
Poznámka: Pokud jste stáhli místní kopii jQuery, uložit jej do js/ složky a odkaz na js/jquery.min.js.,
v tomto okamžiku je knihovna jQuery nyní načtena na váš web a máte plný přístup k rozhraní jQuery API.
Poznámka: rozhraní pro programování aplikací (API) je rozhraní, které umožňuje vzájemné interakci softwarových programů. V tomto případě API pro jQuery obsahuje všechny informace a dokumentaci potřebné pro přístup k jQuery.
pomocí jQuery
ve svém jádru se jQuery používá k propojení s HTML prvky v prohlížeči přes DOM.,
model objektu dokumentu (DOM) je metoda, pomocí které JavaScript (a jQuery) interagují s HTML v prohlížeči. Chcete-li zobrazit přesně to, co je DOM, ve webovém prohlížeči klikněte pravým tlačítkem myši na aktuální webovou stránku vyberte možnost zkontrolovat. Tím se otevřou nástroje pro vývojáře. HTML kód, který zde vidíte, je DOM.
každý prvek HTML je považován za uzel v DOM-objekt, kterého se JavaScript může dotknout. Tyto objekty jsou uspořádány ve stromové struktuře, přičemž <html> je blíže ke kořenu a každý vnořený prvek je větví dále podél stromu., JavaScript může přidat, odebrat a změnit některý z těchto prvků.
Pokud znovu kliknete pravým tlačítkem myši na web a kliknete na Zobrazit zdroj stránky, uvidíte raw HTML výstup webu. Zpočátku je snadné zaměnit DOM se zdrojem HTML, ale jsou odlišné – zdroj stránky je přesně to, co je napsáno v souboru HTML. Je statický a nezmění se a nebude ovlivněn JavaScriptem. DOM je dynamický a může se změnit.
nejvzdálenější vrstva DOM, vrstva, která obaluje celý uzel <html>, je objekt dokumentu., Chcete-li začít manipulovat stránku s jQuery, musíme zajistit, aby dokument byl nejprve „připraven“.
Vytvořit soubor scripts.js js/ adresáře a zadejte následující kód:
$(document).ready(function() { // all custom jQuery will go here});všechny kódy jQuery, které píšete, budou zabaleny do výše uvedeného kódu. jQuery detekuje tento stav připravenosti, takže kód obsažený v této funkci bude spuštěn pouze poté, co je DOM připraven k spuštění kódu JavaScript., I když v některých případech nebude JavaScript načten, dokud nebudou vykresleny prvky, včetně tohoto bloku je považován za nejlepší postup.
v úvodu tohoto článku jste viděli jednoduché “ Ahoj, svět!” skripta. Chcete-li spustit tento skript a vytisknout text do prohlížeče pomocí jQuery, nejprve vytvoříme prázdný prvek odstavce na úrovni bloku s ID demo.
...<body><p></p>...jQuery je volán a reprezentován znakem dolaru ($)., Přistupujeme k DOM pomocí jQuery pomocí většinou syntaxe CSS a použijeme akci metodou. Základní příklad jQuery následuje tento formát.
$("selector").method();Od ID je reprezentován symbol hash (#) v CSS, bude přístup k demo ID s voličem #demo. html() je metoda, která mění HTML v prvku.
nyní uvedeme náš zvyk “ Ahoj, svět!“program uvnitř jQuery ready() obal., Přidejte tento řádek do souboru scripts.js v rámci existující funkce:
$(document).ready(function() { $("#demo").html("Hello, World!");});po uložení souboru můžete v prohlížeči otevřít soubor index.html. Pokud vše fungovalo správně, uvidíte výstup Hello, World!.
selektory
selektory jsou, jak řekneme jQuery, na kterých prvcích chceme pracovat. Většina jQuery selektory jsou stejné jako to, co jste obeznámeni s v CSS, s několika jQuery specifické dodatky., Úplný seznam selektorů jQuery si můžete prohlédnout na jejich oficiálních stránkách dokumentace.
pro přístup k selektoru použijte symbol jQuery $, následovaný závorkami ().
$("selector")dvojité řetězce jsou preferovány průvodcem stylem jQuery, i když se často používají i jednočíselné řetězce.
níže je stručný přehled některých nejčastěji používaných selektorů.,
Obecně platí, tříd a id jsou, co se setkáte nejvíce — třídy, když chcete vybrat více prvků, a id, pokud chcete vybrat pouze jednu.
jQuery Events
v “ Hello, World!“příklad, kód běžel, jakmile je stránka načtena a dokument byl připraven, a proto nevyžaduje žádnou interakci uživatele. V tomto případě jsme mohli text napsat přímo do HTML, aniž bychom se obtěžovali jQuery. Budeme však muset využít jQuery, pokud chceme, aby se text objevil na stránce kliknutím na tlačítko.,
vraťte se do souboru index.html a přidejte prvek <button>. Toto tlačítko použijeme k poslechu naší události kliknutí.
...<body><button>Click me</button><p></p>použijeme metodu click() k volání funkce obsahující naši “ Ahoj, svět!” kód.
$(document).ready(function() { $("#trigger").click();});function() { $("#demo").html("Hello, World!");}zde je konečný kód.
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); });});Uložit scripts.js soubor a aktualizovat index.html v prohlížeči., Nyní, když kliknete na tlačítko, “ Ahoj, svět!“zobrazí se text.
událost je kdykoli uživatel interaguje s prohlížečem. Obvykle se to provádí pomocí myši nebo klávesnice. Příklad, který jsme právě vytvořili, použil událost kliknutí. Z oficiální dokumentace jQuery si můžete prohlédnout úplný seznam metod událostí jQuery. Níže je uveden stručný přehled některých nejčastěji používaných metod událostí.
Chcete-li obrázky animovat nebo vyblednout, když uživatel posouvá obrazovku dolů, použijte metodu scroll()., Chcete-li ukončit nabídku pomocí klávesy ESC, použijte metodu keydown(). Chcete-li vytvořit rozbalovací nabídku akordeon, použijte metodu click().
porozumění událostem je nezbytné pro vytváření dynamického obsahu webových stránek pomocí jQuery.
jQuery efekty
jQuery efekty pracují ruku v ruce s událostmi tím, že vám umožní přidat animace a jinak manipulovat s prvky na stránce.
uděláme příklad, kde otevřeme a zavřeme vyskakovací překrytí., Zatímco bychom mohli použít dva ID-jeden k otevření překrytí a druhý k jeho uzavření – místo toho použijeme třídu k otevření a zavření překrytí stejnou funkcí.
Odstranit aktuální <button><p> tagy z uvnitř těla index.html soubor a přidejte následující do vašeho HTML dokumentu:
...<body><button class="trigger">Open</button><section class="overlay"> <button class="trigger">Close</button></section>...V style.css souboru, můžeme použít minimální množství CSS skrýt overlay display: none a centrum na obrazovku.,
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray;}v scripts.js soubor, budeme používat toggle() metoda, který přepíná CSS display majetku mezi none block skrytí a zobrazení překrytí po kliknutí.
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); });});Refresh index.html. Nyní budete moci přepínat viditelnost modálu kliknutím na tlačítka., Můžete změnit toggle() fadeToggle() nebo slideToggle() vidět několik dalších vestavěný jQuery efekty.
níže je stručný přehled některých nejčastěji používaných metod účinku.
-
toggle()– Přepnout: přepne viditelnost prvku nebo prvků.show()ahide()Jsou související jednosměrné efekty. -
fadeToggle()– Fade Toggle: přepne viditelnost a oživí neprůhlednost prvku nebo prvků.,fadeIn()afadeOut()Jsou související jednosměrné efekty. -
slideToggle()– Slide Toggle přepíná viditelnost prvku nebo prvků s posuvným efektem.slideDown()aslideUp()Jsou související jednosměrné efekty. -
animate()– Animate provádí vlastní animační efekty na CSS vlastnosti prvku.,
použijeme jQuery události naslouchat na interakce s uživatelem, například klepnutím na tlačítko, a používáme jQuery efekty, dále manipulovat s prvky jednou, že akce se koná.
Závěr
V této příručce, jsme se naučili, jak vybrat a manipulovat s prvky s jQuery, a jak se události a efekty pracovat společně, aby se interaktivní webové zážitek pro uživatele.
odtud byste měli mít hlubší pochopení schopností jQuery a být na cestě k psaní vlastního kódu.