Úvod > Blog > Články > Programování > JQuery I >

JQuery I

23.03.2020 Programování #jquery #javascript #elearning

Úvodní kapitola k výukovému kurzu JQuery pro distanční vzdělávání.

Účelem jQuery je usnadnit používání JavaScriptu na vašem webu.

Co byste již měli vědět

Než začnete studovat jQuery, měli byste mít základní znalosti:

  • HTML
  • CSS
  • JavaScript

Co je jQuery?

jQuery je jednoduchá knihovna JavaScript.

Účelem jQuery je usnadnit používání JavaScriptu na vašem webu.

jQuery zjednodušuje běžné úkolů, které vyžadují mnoho řádků kódu JavaScript, a zabalí je do metod, které můžete volat pomocí jediné řádky kódu.

jQuery také zjednodušuje mnoho složitých věcí z JavaScriptu, jako jsou volání AJAX a manipulace s DOM.

Knihovna jQuery obsahuje následující funkce:

  • Manipulace s HTML / DOM
  • Manipulace s CSS
  • Metody události HTML
  • Efekty a animace
  • AJAX
  • Utility

Proč jQuery?

Existuje spousta dalších knihoven JavaScriptu, ale jQuery je pravděpodobně nejoblíbenější a také nejrozšířenější.

Mnoho z největších společností na webu používá jQuery, například:

  • Google
  • Microsoft
  • IBM
  • Netflix

01. jQuery Začínáme

Přidání jQuery na vaše webové stránky

Existuje několik způsobů, jak začít používat jQuery na vašem webu. Můžeš:

  • Stáhněte si knihovnu jQuery z webu jQuery.com
  • Zahrňte jQuery z CDN, jako je Google

Stahování jQuery

Ke stažení jsou k dispozici dvě verze jQuery:

  • Produkční verze - to je pro váš web, protože byl zhuštěn a komprimován
  • Vývojová verze - to je pro testování a vývoj (nekomprimovaný a čitelný kód)

Obě verze lze stáhnout z jQuery.com .

Knihovna jQuery je jediný soubor JavaScript a odkazujete na něj pomocí  < script >značky HTML (všimněte si, že < script >značka by měla být uvnitř < head >sekce):

<head>
<script src="jquery-3.4.1.min.js"></script>
</head>

jQuery CDN

Pokud si nepřejete stahovat a hostovat jQuery sami, můžete jej připojit z CDN (Network Delivery Network).

JQuery hostuje společnost Google i Microsoft.

Chcete-li používat jQuery od společnosti Google nebo Microsoft, použijte jednu z následujících možností:

Google CDN

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

Microsoft CDN

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</head>

02. Syntaxe jQuery

Syntaxe jQuery je šitá na míru pro výběr elementů HTML a provedení dané akce na elementech.

Základní syntaxe je: $ ( selektor ). akce ()

  • Znak $ pro definování / přístup k jQuery
  • A ( selektor ) k "dotazu (nebo najít)" HTML elementů
  • Akce jQuery (), která se má provést na prvku (prvcích)

Příklady:

$ (this).hide() - skryje aktuální prvek.

$ ("p").hide() - skryje všechny elementy

.

$ (".test").hide() - skryje všechny prvky s class = "test".

$ ("#test").hide() - skryje prvek s id = "test".

Událost vykonaná po načtení dokumentu

Všechny metody jQuery v uvedených příkladech jsou uvnitř události document(ready):

$(document).ready(function(){

  // jQuery methods go here...

});

Tím se zabrání spuštění jakéhokoli kódu jQuery před dokončením načítání dokumentu (ready).

Před zahájením práce s dokumentem je dobré počkat, až bude dokument plně načten a připraven. To také umožňuje mít kód JavaScript před tělem dokumentu v hlavičce (head).

Zde je několik příkladů akcí, které mohou selhat, pokud jsou metody spuštěny před úplným načtením dokumentu:

  • Pokouší se pracovat s prvke, který ještě nebyl vytvořen.
  • Pokus o získání velikosti obrázku, který ještě není načten.
$(function(){

  // jQuery methods go here...

});

Používejte vámi preferovanou metodu.

03. jQuery Selektory

Selektory jQuery jsou jednou z nejdůležitějších částí knihovny jQuery.

Selektory jQuery vám umožňují vybrat a manipulovat s prvky HTML.

Selektory jQuery se používají k „vyhledání“ (nebo výběru) prvků HTML na základě jejich názvu, id, tříd, typů, atributů, hodnot atributů a mnohem více. Je založen na existujících selektorech CSS a navíc má vlastní selektory.

Všechny selektory v jQuery začínají znakem dolaru a závorkami: $ ().

Element Selector

Selektor elementu jQuery vybere elementy na základě názvu elementu.

Na stránce můžete vybrat všechny tyto < p >prvky:

$("p")

Příklad

Když uživatel klikne na tlačítko, všechny < p >prvky budou skryté:

Selektor #id

Selektor jQuery používá k nalezení konkrétního prvku atribut id značky HTML.#id

ID by mělo být na stránce jedinečné, takže pokud chcete najít jeden jedinečný prvek, měli byste použít selektor #id.

Chcete-li najít prvek se specifickým id, napište hash znak, za nímž následuje id prvku HTML:

$("#test")

Příklad

Když uživatel klikne na tlačítko, prvek s id = "test" bude skrytý:

Výběr pomocí třídy

.class Selektor jQuery najde prvky se specifickou třídou.

Chcete-li najít prvky s konkrétní třídou, napište znak tečky a za ním název třídy:

$(".test")

Příklad

Když uživatel klikne na tlačítko, prvky s class = "test" budou skryty:

Další příklady elektorů v jQuery

Syntax Popis
$ ("*") Vybere všechny elementy
$ (this) Vybere aktuální element
$ ("p.intro") Vybere všechny < p > elemty s třídou class="intro"
$ ("p:first") Vybere první element odstavce < p > 
$ ("ul li:first") Vybere první prvek < li > element z prvního < ul >
$ ("ul li:first-child") Vybere první provek < li > element z každého < ul >
$ ("[href]") Vybere všechny elementy obsahující atribut href
$ ("a[target='_blank']") Vybere všechny < a > elementy s atributem target jehož hodnota je "_blank"
$ ("a[target!='_blank']") Vybere všechny < a > elementy s atributem target jehož hodnota se nerovná "_blank"
$ (":button") Vybere všechny < button > elementy a < input > elementy s type="button"
$ ("tr:even") Vybere všechny even < tr > elementy
$ ("tr:odd") Vybere všechny odd < tr > elementy

Funkce v samostatném souboru

Pokud váš web obsahuje mnoho stránek a chcete, aby vaše funkce jQuery byly snadno udržovatelné, můžete své funkce jQuery umístit do samostatného souboru .js.

Přestože na této stránce je jQuery kód fkládán přímo do < head > sekce. Někdy je však vhodnější umístit je do samostatného souboru:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>

04. Metody jQuery EVENT

V jQuery metoda EVEN umožňuje reagovat na události přímo v HTML.

Co jsou události?

Všechny různé akce návštěvníků, na které může webová stránka reagovat, se nazývají události.

Událost představuje přesný okamžik, kdy se něco stane.

Příklady:

  • pohybem myši nad prvkem
  • výběr přepínače
  • kliknutím na prvek

Zde jsou některé běžné DOM události:

Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

Syntaxe jQuery pro metody událostí

V jQuery má většina událostí DOM ekvivalentní metodu jQuery.

Chcete-li přiřadit událost click ke všem odstavcům na stránce, můžete to udělat:

$("p").click();

Dalším krokem je definování toho, co by se mělo stát při spuštění události. Musíte předat funkci události:

$("p").click(function(){
  // action goes here!!
});

Příklad

Obvykle používané metody událostí jQuery

$ (dokument) .ready ()

Tato $ (document).ready() metoda nám umožňuje provést funkci, když je dokument plně načten.

Událost click ()

Následující příklad říká: Když dojde ke spuštění události kliknutí na < p > prvek; skryj aktuální < p > prvek:

Událost dblclick ()

Funkce se spustí poklepáním na prvek HTML.

Událost mouseenter ()

Funkce se spustí, když ukazatel myši vstoupí do prvku HTML:

Událost mouseleave ()

Funkce se spustí, když ukazatel myši opustí do prvku HTML:

Událost mousedown ()

Funkce je vykonávána, když je stisknuto levé, střední nebo pravé tlačítko myši, zatímco myš je nad elementem HTML:

Událost mouseup ()

Funkce je vykonána, když je uvolněno levé, střední nebo pravé tlačítko myši, zatímco myš je nad elementem HTML:

Událost hover ()

První funkce se provede, když myš vstoupí do prvku HTML, a druhá funkce se provede, když myš opustí prvek HTML. Metoda přebírá dvě funkce, a je kombinace z mouseenter()a mouseleave() metod.:

Událost focus ()

Funkce je spuštěna, když je pole formuláře aktivováno:

Metoda blur ()

Funkce je vykonána, když pole formuláře ztratí fokus:

Metoda on ()

Způsob váže jeden nebo více obsluhy událostí pro vybrané prvky.

Lze připojit k < p > prvku více obsluhy událostí :

#jquery #javascript #elearning