Minulý týden jsem hovořil o tom, jak je jQuery důležitý pro vytváření interaktivního webu: Úvod do interaktivního jQuery pro vytváření interaktivního webu: Úvod do jQuery jQuery je skriptovací knihovna na straně klienta, kterou používá téměř každý moderní web - díky tomu jsou webové stránky interaktivní. Není to jediná knihovna Javascript, ale je to nejrozvinutější, nejpodporovanější a nejpoužívanější ... pro každého moderního webového vývojáře a proč je to úžasné. Tento týden si myslím, že je čas, abychom si zašpinili ruce nějakým kódem a naučili se, jak ve svých projektech skutečně využívat jQuery..

Teď to řeknu - nemusíte se učit Javascript, abyste mohli používat jQuery. Je to asi nejlepší, pokud si myslíte, že jQuery je vývoj Javascriptu - lepší způsob, jak to udělat - než jednoduše knihovna, která přidává funkčnost. Jakýkoli Javascript, který potřebujete, bude na cestě vyzvednut. Předpokládá se však, že jako webový vývojář máte velmi dobré znalosti HTML a CSS (a zde je užitečný bezplatný průvodce xHTML, pokud ne!).

Objektový model dokumentu

jQuery je především o přechodu a manipulaci DOM - Doceán Óbjekt Model. DOM je hierarchická stromová reprezentace stránky vytvořená prohlížeči po přečtení celého kódu HTML. V jQuery budeme používat terminologii jako rodič, děti, a sourozenci docela často, takže byste měli mít představu o tom, co to znamená ve vztahu k DOM.

Tento jednoduchý diagram od w3schools vysvětluje pojmy docela dobře. Měli byste být schopni vidět, že rodič prvku je, zatímco prvek má okamžitý charakter

sourozenec.

Začínáme: Přidání jQuery

Nejnovější verze jQuery je při komprimaci asi 91 kB, takže přidává přibližně stejnou hmotnost stránky jako malá fotografie nebo snímek obrazovky. Nejjednodušší způsob, jak do projektu zahrnout jQuery, je vložit odkaz na nejnovější hostovanou verzi do sekce záhlaví vašeho webu:

Nezapomeňte však, že pokud používáte WordPress, může to způsobit problémy, protože již má vlastní kopii knihovny jQuery. Pluginy mohou vyžadovat toto načtení a WordPress inteligentně načte jQuery pouze jednou bez ohledu na to, kolik pluginů o to požádalo.

Pokud do řádku přidáte následující řádek function.php motivový soubor, přidáte další žádost o jeho zahrnutí. WordPress bude vědět, že se vždy načte, pokud je vaše téma aktivní.

wp_enqueue_script ("jquery");

Druhou věcí, kterou je třeba mít na paměti, je, že když je jQuery přidán pomocí standardní metody, bude načten jako $. Všechno, co děláte s jQuery, bude předcházet tento $, jako například:

$ .ajax

nebo

$ ("# header")

Pokud se však jQuery načte pomocí WordPress, vše se provede pomocí proměnné jQuery namísto $, takže například:

jQuery ("# ​​header")

Ačkoli to není velký problém při psaní vlastního kódu, znamená to, že řezání a vkládání úryvků jQuery, které najdete na webu, bude třeba přeložit, aby bylo možné použít jQuery místo $ - to je vše.

Jedním ze způsobů, jak to obejít, je zabalit kód $ -style, který se vám líbí:

(funkce ($) // vložte zde kód $) (jQuery);

To trvá jQuery proměnnou a předá ji do anonymní funkce jako $. Příště vysvětlím anonymní funkce - prozatím se naučíme základní strukturu trochu kódu jQuery.

Chcete-li přidat svůj kód na stránku HTML nebo PHP, uzavřete vše do značek, například:

 // jQuery kódové kódy zde 

$ ('selector'). method ();

To je ono, v názvu tam nahoře. To je základní struktura jednoho kusu kódu jQuery pro manipulaci s DOM. Snadno, správně?

Selektor řekne jQuery, aby našel věci, které odpovídají tomuto pravidlu,a je to stejné jako u CSS selektorů (a pak o něco více nahoře). Stejně jako v CSS byste stylovali všechny odkazy

a 

To samé by se stalo v jQuery jako

$ ('a')

To lze provést pro všechny prvky HTML - div, h1, span - cokoli. Můžete také použít třídy a ID CSS, aby byly konkrétnější.

Například najít všechny odkazy na třídu “Najdi mě”, byste použili:

$ ('a.findme')

Nemusíte specifikovat typ prvku pokaždé - ale pokud to uděláte, jednoduše to pravidlo zpřesní. Mohl jsi to prostě říct

$ ('. findme')

což by se hodilo ke třídě Najdi mě, zda to byl odkaz.

Chcete-li použít pojmenovaný prvek ID, použijte # místo toho podepsat. Klíčovým rozdílem je, že selektor ID vždy vybere pouze jeden objekt, zatímco selektor třídy může najít více než jeden.

$ ('# něco')

V podstatě, pokud to můžete udělat v CSS, pak jQuery to také udělá. Ve skutečnosti můžete také použít některé docela složité pseudoelektory CSS3 jako: první

$ ('body p: first')

Který by chytil odstavec na stránce. Naleznete také prvky s určitými atributy. Zvažte tento příklad; chceme najít všechny odkazy na stránce, na které odkazuje interně makeuseof a nějak je zvýraznit. Zde je, jak je můžeme najít:

$ ('a [href * = "makeuseof"]') ')

Není to v pohodě? No, myslím, že je.

Dalším příchozím portem by měla být dokumentace k rozhraní jQuery API pro selektory. Je to obrovský seznam všech různých druhů selektorů, které lze použít, a nikdo by neočekával, že se je všechny naučíte.

Další část rovnice je metoda - co dělat s těmi věcmi, jakmile je všechny najdete - ale necháme to na další lekci. Pokud však chcete začít s vyzkoušením různých selektorů, doporučujeme vám dodržet následující metodu css. To vyžaduje dva parametry - CSS název vlastnosti, a nový hodnota přiřadit k této vlastnosti. Chcete-li tedy všem odkazům dát červenou barvu pozadí, měli byste provést následující kroky:

$ ('a'). css ('barva pozadí', 'červená');

Prostě jednoduché! I když to nemusí být prakticky použitelné, umožní vám snadno vidět všechny prvky umístěné pomocí vašich selektorů. Nyní jděte a vyberte - DOM vás očekává.

Doufám, že tento tutoriál pro vás byl užitečný; Snažil jsem se, aby bylo co nejjednodušší a nejsrozumitelnější. Neváhejte se zeptat na jakékoli otázky, které máte, nebo nechte zpětnou vazbu, ale uvědomte si, že rozhodně nejsem elitní jQuery ninja.