Minulý týden jsem mluvil o tom, jak je jQuery důležité pro každého moderního webového vývojáře a proč je úžasný. Tento týden si myslím, že je načase, abychom si zašpinili ruce nějakým kódem a naučili se, jak jQuery skutečně využívat v našich projektech.

Řeknu to teď - abyste mohli používat jQuery, nemusíte se učit Javascript. Je pravděpodobně nejlepší, když si představíte jQuery jako evoluci Javascriptu - lepší způsob, jak to udělat - než jednoduše knihovnu, která přidává funkce. Jakýkoli požadovaný JavaScript bude vyzvednut na cestě. Předpokládá se však, že jako webový vývojář máte docela dobrou znalost HTML a CSS (a pokud ne, zde je užitečný bezplatný průvodce xHTML!).

Objektový model dokumentu

jQuery je o procházení a manipulaci s ROZSUDEK - D pomník NEBO bjekt M odel. DOM je hierarchická stromová reprezentace stránky, vytvořená prohlížeči po přečtení celého kódu HTML. V jQuery použijeme terminologii jako rodič , děti , a sourozenci poměrně často, takže byste měli mít představu o tom, co to znamená ve vztahu k DOM.

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

jQuery code codes here`

$ ('volič').metoda();

To je vše, v názvu tam nahoře. To je základní struktura jednoho kusu kódu jQuery pro manipulaci s DOM. Snadné, že?

Thevoličřekne jQuery, aby našel věci, které odpovídají tomuto pravidlu, a je stejný jako voliče CSS (a pak některé další nahoře). Stejně jako v CSS byste tedy stylovali všechny odkazy pomocí

a { }

Totéž by bylo provedeno v jQuery jako

$('a')

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

Chcete -li například najít všechny odkazy se třídou 'findme', použijte:

$('a.findme')

Typ prvku nemusíte zadávat pokaždé - ale pokud to uděláte, jednoduše to pravidlo zpřesní. Mohl jsi právě říct

$('.findme')

který by odpovídal všemu se třídou Najdi mě , ať už to byl odkaz nebo ne.

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

hodinky Apple série 6 vs 3

$('#something')

V zásadě, pokud to dokážete v CSS, pak to udělá i jQuery. Ve skutečnosti můžete také použít poměrně složité pseudo selektory ve stylu CSS3 jako: první

$('body p:first')

Což by popadlo odstavec stránky. Najdete zde také prvky s určitými atributy. Zvažte tento příklad; chceme na stránce najít všechny odkazy, na které směřují interně makeuseof a nějakým způsobem je zvýraznit. Jak bychom je mohli najít:

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

Není to skvělé? Myslím, že ano.

Váš další přístav volání by měl být jQuery API dokumentace pro voliče . Je to obrovský seznam všech různých druhů selektorů, které jsou k dispozici k použití, a nikdo by nečekal, že se je všechny naučíte.

Další část rovnice jemetoda- co s těmi věcmi dělat, až je všechny najdete - ale to necháme na další lekci. Pokud však chcete nyní začít zkoušet různé voliče, navrhuji, abyste se drželi následující metody css. To vyžaduje dva parametry - CSS název vlastnosti , a nový hodnota přiřadit k této vlastnosti. Chcete -li dát všem odkazům červenou barvu pozadí, postupujte takto:

$('a').css('background-color','red');

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

Doufám, že vám tento návod byl užitečný; Snažil jsem se to udělat co nejjednodušší a nejsrozumitelnější. Neváhejte se zeptat na jakékoli otázky nebo zanechat zpětnou vazbu, ale mějte na paměti, že rozhodně nejsem elitní ninja jQuery.

Podíl Podíl tweet E-mailem 5 tipů, jak přeplnit své počítače VirtualBox Linux

Jste unaveni špatným výkonem, který nabízejí virtuální stroje? Zde je to, co byste měli udělat, abyste zvýšili výkon svého VirtualBoxu.

Číst dále Související témata

Webová kultura
Vývoj webu
JavaScript
Programování
jQuery

O autorovi James Bruce(707 článků zveřejněno)

James má bakalářský titul v oboru umělé inteligence a je certifikován společností CompTIA A+ a Network+. Když není zaneprázdněn jako editor recenzí hardwaru, rád si hraje s LEGO, VR a deskovými hrami. Před nástupem do MakeUseOf byl osvětlovacím technikem, učitelem angličtiny a technikem datového centra.

Více od Jamese Bruce

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru