Selektory jQuery
Selektory jQuery jsou jednou z nejdůležitějších součástí knihovny jQuery.
Selektory 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 mnoho dalšího. Vychází ze stávajících selektorů CSS a navíc má některé vlastní selektory.
Všechny selektory v jQuery začínají znakem dolaru a závorkami: $().
Selektor prvku
Selektor prvku jQuery vybírá prvky na základě názvu prvku.
Všechny prvky na stránce můžete vybrat <p>takto:
$("p")
Příklad
Když uživatel klikne na tlačítko, všechny <p>prvky se skryjí:
Příklad
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Volič #id
Selektor jQuery používá atribut id značky HTML k nalezení konkrétního prvku.#id
ID by mělo být na stránce jedinečné, takže když chcete najít jeden jedinečný prvek, měli byste použít selektor #id.
Chcete-li najít prvek s konkrétním id, napište znak hash následovaný id prvku HTML:
$("#test")
Příklad
Když uživatel klikne na tlačítko, prvek s id="test" bude skrytý:
Příklad
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Selektor .class
Selektor jQuery .classnajde prvky s konkrétní třídou.
Chcete-li najít prvky s konkrétní třídou, napište znak tečky následovaný názvem třídy:
$(".test")
Příklad
Když uživatel klikne na tlačítko, prvky s class="test" se skryjí:
Příklad
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Další příklady selektorů jQuery
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | |
| $(this) | Selects the current HTML element | |
| $("p.intro") | Selects all <p> elements with class="intro" | |
| $("p:first") | Selects the first <p> element | |
| $("ul li:first") | Selects the first <li> element of the first <ul> | |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | |
| $("[href]") | Selects all elements with an href attribute | |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | |
| $("tr:even") | Selects all even <tr> elements | |
| $("tr:odd") | Selects all odd <tr> elements |
Použijte náš jQuery Selector Tester k předvedení různých selektorů.
Úplnou referenci všech selektorů jQuery naleznete v naší Referenční příručce selektorů jQuery .
Funkce v samostatném souboru
Pokud váš web obsahuje mnoho stránek a chcete, aby se vaše funkce jQuery snadno udržovaly, můžete funkce jQuery umístit do samostatného souboru .js.
Když v tomto tutoriálu předvedeme jQuery, funkce se přidají přímo do <head>
sekce. Někdy je však vhodnější umístit je do samostatného souboru, jako je tento (k odkazu na soubor .js použijte atribut src):
Příklad
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>