základy jquery.

Domov

knihovna jQuery Abych stručně popsal, co dělá knihovna jQuery , pak to bude znít docela obyčejně: tuto knihovnu

umožňuje měnit obsah HTML dokumentů manipulací s objekty modelu vytvořenými prohlížeči při zpracování HTML kódu (tzv. DOM manipulace). Pravděpodobně jste již manipulovali s objekty DOM (Document Object Model). objektový model document) pomocí jiných knihoven JavaScriptu nebo vestavěných API funkce (Application Programming Interface - aplikační programovací rozhraní), které jsou podporovány většinou moderní prohlížeče

. Mnohem lépe však funguje knihovna jQuery. Díky tomu je manipulace s objekty DOM zábavná a občas téměř zábavná. Na práci s jQuery je něco tak elegantního a přesvědčivého, že úkoly, které by normálně vyžadovaly hodně nudy rutinní operace , se najednou stane extrémně jednoduchým, takže jakmile začnete používat jQuery, nebudete jej moci přestat používat. Pokud jde o mě osobně, používám jQuery ve svých softwarových projektech.:

následující důvody Nástroje jQuery

neobvykle expresivní. Tato knihovna vám umožňuje dosáhnout mnohem více s mnohem menším množstvím kódu než pomocí programovacích rozhraní DOM prohlížeče. Metody jQuery se vztahují na celé skupiny prvků. Standardní přístup výběru-opakování-úprav DOM již není vyžadován. Důsledkem toho je pokles počtu pro smyčky

v kódu, což znamená snížení pravděpodobnosti výskytu chyb v něm. Knihovna jQuery zpracovává rozdíly v implementaci DOM v různé prohlížeče (problémy napříč prohlížeči). Nemělo by mě například trápit pomyšlení na zvláštnosti podpory toho či onoho prostředku, kterým je notoricky známý Internetový prohlížeč

Průzkumník (IE). Stačí do jQuery zformulovat svá přání a knihovna samostatně zajistí kompatibilitu s konkrétním prohlížečem. Knihovna jQuery je open source. Pokud mi principy fungování nějakého nástroje nejsou zcela jasné nebo se získaný výsledek neshoduje s očekávaným, mohu přejít přímo do kódu JavaScriptové knihovny a v případě potřeby provést příslušné změny.

Je zde také zahrnuta knihovna uživatelského rozhraní jQuery – jedná se o sadu nástroje, který je navržen tak, aby vytvořil univerzální uživatelská rozhraní a lze jej použít na jakémkoli zařízení.

Popis knihovny jQuery:

• 1. Základy jQuery, práce s modelem DOM
  • Vkládání podřízených, sesterských a rodičovských prvků

Jistě jste již slyšeli o úžasné Javascriptové knihovně s názvem jQuery. Co přesně je jQuery?

Jak usnadnit webovým vývojářům život? kde začít? Psaní provádí jQuery Javascript zajímavý a jednodušší. S touto knihovnou lze mnoho poměrně složitých aspektů Javascriptu snadno implementovat do jakékoli aplikace.

Dnešní lekce vám řekne, jak začít s jQuery a jak napsat svůj první skript.

Co je jQuery?

jQuery je velmi lehká Javascriptová knihovna (někteří tomu říkají framework), která odstraňuje bolesti hlavy při psaní kódu Javascript. Má toho hodně výkonné schopnosti, jako například: sledování DOM, přidávání krásné efekty a animace prvků, super jednoduché techniky a metody Ajaxu. Na hlavní stránce webu jQuery je podle mého názoru nejpřesnější popis:

jQuery je rychlá a stručná knihovna, která zjednodušuje zpracování událostí, animaci a interakci Ajax pro více rychlý web rozvoj. jQuery je navržen tak, aby změnil způsob psaní JavaScriptu.

Jaké jsou výhody jQuery?

Pojďme se rychle podívat na některé výhody a vlastnosti tohoto rámce:

Množství kódu (potřebného ke spuštění skriptu) je ve srovnání s JavaScriptem výrazně sníženo, což zase znamená méně stráveného času a čitelnější kód. Zbytek článku se podívá na některé příklady.

Mnohem snazší pochopit kód (na rozdíl od JavaScriptu). V našem světě platí, že čím dříve dokončíte proces programování, tím více času můžete věnovat jiným cílům.

Velmi pohodlná dokumentace a aktivní komunita, vždy připravená pomoci v případě potřeby.

Používání Ajaxu je mnohem jednodušší. K vytvoření jednoduchého požadavku Ajaxu potřebujete pouze 5 řádků kódu (někdy i méně).

Obrovské množství pluginů, se kterými můžete dělat téměř cokoliv.

jQuery je zábava :)

jak začít?

Nejprve musíte navštívit domovskou stránku oficiální stránky jQuery a stáhněte si nejnovější verzi tohoto rámce. Po stažení je potřeba tento soubor nahrát na váš hosting a do záhlaví dokumentu napsat odkaz na tento soubor.

Případně můžete využít pomoci skvělého Google a dát odkaz na jejich server, kde se vždy nacházejí nejnovější verze jakékoli rámce. Potřebný odkaz lze nalézt.

Je dokument připraven?

Abychom dokončili naši první skript jQuery, musíme celý náš skript vložit do funkce. Tato funkce se provede, když bude DOM zcela připraven (když je „dokument připraven“ - doslovný překlad z angličtiny). Všimněte si, že je to velmi podobné oblíbené události 'onload', ale není to totéž. Podívejme se na příklad:

$(document).ready(function())( //Kód zde ));

Výše říkáme jQuery, aby provedl jakýkoli kód uvnitř funkce, přičemž DOM je zcela připraven. To má své výhody, i když to mnohým nemusí být jasné. V první řadě pomocí tuto techniku, zcela oddělujeme Javascript od HTML. Za druhé, nemusíme čekat plné zatížení stačí načíst DOM.

Pro líné kodéry nebo pro ty, kteří počítají každý znak, můžete výše uvedený kód dále zkrátit:

$(funkce())( //Kód zde ));

Váš první skript jQuery

Už víme, jak na knihovnu odkazovat. Trochu rozumíme i funkci document.ready. Nyní je čas napsat jednoduchý scénář.

Pojďme to udělat co nejjednodušší. Pro tento příklad, uděláme stránku s textem a citátem na konci. Cenu chceme zobrazit pouze v případě, že uživatel klikne na tlačítko. Podívejte se níže na kód potřebný k tomu:

$(document).ready(function())(
var myQuote = $("#my_quote");
myQuote.hide();
$(".button").click(function())(
myQuote.show(500);
});
});

Podívejme se blíže na celý kód.

Jak bylo uvedeno výše, veškerý kód, který se má provést, jsme umístili do funkce $document.ready().

ID naší nabídky (my_quote) přiřadíme proměnné myQuote. Nyní máme přístup k nabídce s id my_quote.

To je vše. Když stisknete tlačítko na 0,5 sekundy, zobrazí se nabídka. Velmi snadné, že?

Pokračování....

Děkuji za pozornost! Vše nejlepší!

jQuery - JavaScript knihovna, obsahující hotové funkce jazyk JavaScript, jsou všechny operace jQuery prováděny z kódu JavaScript.

Knihovna jQuery manipuluje s prvky HTML, řídí jejich chování a používá DOM ke změně struktury webové stránky. Přitom originál HTML soubory a CSS se nemění, změny se provádějí pouze na zobrazení stránky pro uživatele.

Pro výběr prvků použijte CSS selektory. Výběr se provádí pomocí funkce $(). Při volání funkce $() vrátí novou instanci Objekt JQuery, který obaluje nula nebo více prvků DOM a umožňuje vám s nimi různými způsoby interagovat.

Provádění různých scénářů je možné až po načtení struktury dokumentu, kdy prohlížeč převede html kód stránky na strom DOM. Proces zatěžování je řízen konstrukcí

JQuery(dokument).ready(funkce() ( ... ));

Nejprve je instance dokumentu zabalena do funkce jQuery() a poté do připravená metoda() , které je předána funkce() (...) , která se provede po načtení dokumentu.

V praxi je zkrácená forma tohoto zápisu obvykle jQuery(function() (...)); , nebo $(funkce() (...)); .

Pro ukládání informací při práci s knihovnou jQuery používáme JavaScript proměnné. Proměnné mohou ukládat prvky. Názvy proměnných určených k uložení vrácených prvků začínají znakem $, například:

$h = $(".seznam").parent().parent().detach();

Slouží k uložení více položek JavaScriptová pole:

$k = 15;

Pravidla pro práci s knihovnou jQuery 1. Jak přidat jQuery na webovou stránku

Existují dva způsoby, jak přidat knihovnu jQuery na svou webovou stránku:

Použijte verzi souboru jQuery hostovaného na zdroje Google, Microsoft nebo jQuery.com.
Tato metoda využívá Content Distribution Network (CDN, content distribution network), tzn. soubor jQuery umístěné na jiné webové stránce, které na žádost uživatele odešle tento soubor do jeho počítače. Zjevné výhody tato metoda— snížení zátěže vašeho vlastního webového serveru a zrychlení stahování souborů díky rozsáhlé síti serverů distributora.

Chcete-li použít tuto metodu, musíte následovat jeden z odkazů:



Po přechodu na zdrojový web stačí zkopírovat odkaz na soubor jQuery a přidat jej na svou webovou stránku mezi značky .... Ve výsledku byste měli získat např.

Stáhnout nejnovější verzi jQuery knihovny z oficiálních stránek. Chcete-li to provést, musíte přejít na stránku jQuery.com a vybrat verzi knihovny, o kterou máte zájem. Ke stažení jsou k dispozici dvě verze souboru jQuery – minifikovaná a nekomprimovaná. Velikost nekomprimovaný soubor asi 300 KB, obsahuje komentáře, takže se nejlépe hodí pro účely vývoje a ladění kódu.
Minimalizovaná verze souboru váží asi 100Kb, byly odstraněny všechny komentáře a zbytečné mezery, což urychluje stahování souboru prohlížečem.

Chcete-li stáhnout, musíte následovat odkaz a v okně, které se otevře, klikněte na klikněte pravým tlačítkem myši a vyberte „Uložit jako...“. Poté vložte soubor do požadovanou složku(obvykle se k tomu používá složka "scripts") a přidejte ji na svou stránku:

2. Pravidla přidání jQuery na stránku

Umístěte odkazy na soubor jQuery do souboru .
Umístěte odkazy na soubor jQuery za odkazy na CSS styly, protože knihovna jQuery často manipuluje se styly prvků webových stránek.
Další značky... umístěte pouze za odkaz na soubor jQuery, pokud daný skript používá knihovnu jQuery.

3. Jak vytvořit nový html prvek

Prázdný prvek HTML, například blok, můžete vytvořit několika způsoby:

1) pomocí krátká forma položky $("")
2) pomocí instrukce $("")
3) pomocí instrukce $("")

Všechny tři metody fungují, ale přesto se doporučuje zahrnout otevírací a uzavírací značky, aby to bylo vidět tento prvek může obsahovat další prvky.

Při vytváření nového prvku můžete předat druhý parametr metodě $() ve formě objektu JavaScript, který určuje další atributyživel:

$("", (zdroj: "obrázky/květina.jpg", název: "Růže_v_zahradě", klikni: function() (...) )).appendTo("tělo");

Tím vznikne prvek S dané atributy a je součástí stromu DOM.

Jak jsem již psal, začal jsem číst knihu „jQuery in Action“ (autoři Bear Bibeault a Yehuda Katz). V této sérii článků (a plánuji ji dotáhnout až do konce) budu postovat nejvíce zajímavé body z každé kapitoly této knihy. To budou hlavní myšlenky, příklady nebo obojí :-)

Kapitola 1: Úvod do jQuery. Proč potřebujete (potřebujete, potřebujete) jQuery - pro usnadnění práce webového programátora. S pomocí této knihovny je pro nás (webové programátory) snazší zvýšit funkčnost našich stránek s minimální monotónní prací jQuery Základy jQuery je ve své podstatě zaměřeno na práci s prvky HTML stránky. Klíčové body: 1.1. Obal. V CSS vybrat např. všechny odkazy uvnitř odstavce

Napsali jsme:

jQuery k tomu používá následující výraz:

JQuery (selektor)

Jedna věc, kterou je třeba poznamenat, je, že $() je alias funkce jQuery(). Vrací speciální objekt JavaScriptu obsahující pole prvků DOM odpovídajících selektoru.

Nebo tento příklad: použijte efekt zeslabení na všechny prvky třídy notLongForThisWorld. Kód bude následující:

$(“div.notLongForThisWorld”).fadeOut();

A pokud chceme k těmto prvkům kromě efektu přidat i odstraněnou třídu, napíšeme toto:

$(“div.notLongForThisWorld”).fadeOut().addClass(“odstraněno”);

Tento řetězec může pokračovat do nekonečna.

Ale to je jen malá část schopností jQuery pracovat se selektory. Ještě pár:

$("body > div");

Selektor vybere prvky, které jsou potomky

$(“body > div:has(a)”);

Totéž, ale nyní vybereme ty, které obsahují odkazy.

Nebojte se, že právě teď něčemu nerozumíte. Na selektory se podíváme podrobněji v kapitole 2. Jediný závěr, který musíme vyvodit, je, že jQuery je skutečně výkonný.

1.2. Funkce. Funkce jQuery jsou v podstatě metody funkcí jQuery. V knize jim ale budeme říkat funkce. A ne metodami.

$.trim(someString);

Zde jsme použili funkci trim(). Funkce jQuery budou podrobněji popsány v kapitole 6.

$ je jmenný prostor.

1.3. Document ready handler (v angličtině je to jasné, ale jak se to řekne rusky... Podstata je níže :-)).

Normální kód JavaScript při použití metody onload začne fungovat, když je stránka zcela načtena prohlížečem uživatele. Spolu s obrázky a dalšími věcmi. Aby jQuery fungovalo, stačí načíst DOM.

1.4. Práce s DOM. Prvky DOM můžete vytvořit jednoduše předáním $() funkci. Například:

$(“

Ahoj!

”) ;

Nebo tento příklad:

$(“

Ahoj!

“).insertAfter(“#followMe”);

Jak jsi to uhodl

Ahoj!

se objeví za prvkem s id=”followMe” .

1.5. rozšíření jQuery. jQuery má mnoho užitečných funkcí, ale samozřejmě nemůže vyhovět potřebám všech uživatelů. V tomto případě lze knihovnu vždy rozšířit o vlastní funkce.

Podívejme se na příklad:

$.fn.disable = function() (
return this.each(function() (
if(typeof this.disabled != “undefined”) this.disabled = true;
});
}

$.fn.disabled znamená, že rozšiřujeme obal $ o zakázanou funkci.

Pak můžeme použít naši novou funkci:

$(“form#myForm input.special”).disable().addClass(“moreSpecial”);

Kromě jeho funkcí můžete k jQuery připojit pluginy. Budou zmíněny dále v kapitole 9.

1.6. Použití jQuery s jinými knihovnami. Možná si myslíte, že používání prefixů jQuery a zejména $ , které také používá knihovna Prototype, může způsobit problémy. No, pokud první ještě neexistuje, pak druhý určitě ano.

jQuery.noConflict();

Tím uvolníte hodnotu $ do jQuery pro jinou knihovnu.

Jak se vám celkově líbí příspěvek? Rád bych slyšel váš názor, zda má cenu pokračovat, protože je to moje první zkušenost s tímto typem překladatelských příspěvků a to ještě ve zkrácené podobě.

Rád bych také poznamenal, že nejsem odborníkem na jQuery. Začal jsem to chápat společně s vámi při čtení této knihy. Doufám, že nám vše vyjde! Navíc pokud jsem udělal nějaké nepřesnosti nebo něco špatně pochopil, omlouvám se, rád vše opravím.

Zároveň vkládám články.

1. září 2008 v 07:11 jQuery v akci. Kapitola 1: Úvod do jQuery.

• jQuery

Jak, začal jsem číst knihu „jQuery v akci“ (autoři Bear Bibeault a Yehuda Katz). V této sérii článků (a plánuji ji dokončit) zveřejním nejzajímavější momenty z každé kapitoly této knihy. To budou hlavní myšlenky, příklady nebo obojí :-)

Kapitola 1: Úvod do jQuery. Proč potřebujete (potřebujete, potřebujete) jQuery - pro usnadnění práce webového programátora. S pomocí této knihovny je pro nás (webové programátory) snazší zvýšit funkčnost našich stránek s minimální monotónní prací jQuery Základy jQuery je ve své podstatě zaměřeno na práci HTML prvky stránky. Klíčové body: 1.1. Obal. V CSS vybrat např. všechny odkazy uvnitř odstavce

Napsali jsme:

jQuery k tomu používá následující výraz:

JQuery (selektor)

Zde je třeba poznamenat, že $() je alias k funkce jQuery(). Vrací se speciální JavaScript objekt, obsahující pole prvků DOM odpovídajících selektoru.

Nebo tento příklad: použijte efekt zeslabení na všechny prvky třídy notLongForThisWorld. Kód bude následující:

$(“div.notLongForThisWorld”).fadeOut();

A pokud chceme k těmto prvkům kromě efektu přidat i odstraněnou třídu, napíšeme toto:

$(“div.notLongForThisWorld”).fadeOut().addClass(“odstraněno”);

Tento řetězec může pokračovat do nekonečna.

Ale to je jen malá část schopností jQuery pracovat se selektory. Ještě pár:

$("body > div");

Selektor vybere prvky, které jsou potomky

$(“body > div:has(a)”);

Totéž, ale nyní vybereme ty, které obsahují odkazy.

Nebojte se, že právě teď něčemu nerozumíte. Na selektory se podíváme podrobněji v kapitole 2. Jediný závěr, který musíme vyvodit, je, že jQuery je skutečně výkonný.

1.2. Funkce. Funkce jQuery jsou v podstatě metody funkcí jQuery. V knize jim ale budeme říkat funkce. A ne metodami.

$.trim(someString);

Zde jsme použili funkci trim(). Více funkcí jQuery bude popsána v kapitole 6.

$ je jmenný prostor.

1.3. Document ready handler (v angličtině je to jasné, ale jak se to řekne rusky... Podstata je níže :-)).

Obyčejný JavaScript kód při použití metody onload začne fungovat po úplném načtení stránky prohlížečem uživatele. Spolu s obrázky a dalšími věcmi. Pro jQuery funguje Stačí načíst DOM.

1.4. Práce s DOM. Vytvořit prvky DOM můžete funkci jednoduše předat $(). Například:

$(“

Ahoj!

”) ;

Nebo tento příklad:

$(“

Ahoj!

“).insertAfter(“#followMe”);

Jak jsi to uhodl

Ahoj!

se objeví za prvkem s id=”followMe” .

1.5. rozšíření jQuery. jQuery toho má hodně užitečné funkce, ale samozřejmě nemůže vyhovět potřebám všech uživatelů. V tomto případě lze knihovnu vždy rozšířit o vlastní funkce.

Podívejme se na příklad:

$.fn.disable = function() (
return this.each(function() (
if(typeof this.disabled != “undefined”) this.disabled = true;
});
}

$.fn.disabled znamená, že rozšiřujeme obal $ o zakázanou funkci.

Pak už můžeme používat naše nová funkce:

$(“form#myForm input.special”).disable().addClass(“moreSpecial”);

Kromě jeho funkcí můžete k jQuery připojit pluginy. Budou zmíněny dále v kapitole 9.

1.6. Použití jQuery s jinými knihovnami. Možná si myslíte, že používání prefixů jQuery a zejména $ , které také používá knihovna Prototype, může způsobit problémy. No, pokud první ještě neexistuje, pak druhý určitě ano.

jQuery.noConflict();

Tím uvolníte hodnotu $ do jQuery pro jinou knihovnu.

Jak se vám celkově líbí příspěvek? Rád bych slyšel váš názor, zda má cenu pokračovat, protože je to moje první zkušenost s tímto typem překladatelských příspěvků a to ještě ve zkrácené podobě.

Rád bych také poznamenal, že nejsem odborníkem na jQuery. Začal jsem to chápat společně s vámi při čtení této knihy. Doufám, že nám vše vyjde! Navíc pokud jsem udělal nějaké nepřesnosti nebo něco špatně pochopil, omlouvám se, rád vše opravím.

Zároveň vkládám články.