Základní syntaxe jQuery zahrnuje použití selektoru(selektor ve stylu CSS) a metod pro manipulaci s vybranými prvky. Zde je několik základních příkladů syntaxe jQuery:
Výběr prvků
-
Vybrat prvky podle názvu značky HTML:
$("tagname")Příklad:$("p")vybere všechny<p>prvky na stránce. -
Výběr prvků podle třídy CSS:
$(".classname")Příklad:$(".myClass")vybere všechny prvky s třídou "myClass". -
Vybrat prvky podle ID:
$("#idname")Příklad:$("#myElement")vybere prvek s ID "myElement". -
Vybrat prvky podle atributu:
$("[attribute='value']")Příklad:$("[data-type='button']")vybere prvky s atributemdata-typenastaveným na "tlačítko". -
Kombinace výběrů:
$("tagname.classname"),$("#idname .classname"), ...
Manipulace s vybranými prvky
-
Změna obsahu prvku:
.html(),.text()Příklad:$("#myElement").html("New content")nastaví obsah HTML prvku s ID "myElement". -
Úprava atributů prvku:
.attr(),.prop()Příklad:$("img").attr("src", "newimage.jpg")změnísrcatribut všech<img>prvků. -
Manipulace s třídami CSS prvku:
.addClass(),.removeClass(),.toggleClass()Příklad:$("#myElement").addClass("highlight")přidá třídu "highlight" k prvku s ID "myElement". -
Skrytí/zobrazení prvků:
.hide(),.show(),.toggle()Příklad:$(".myClass").hide()skryje všechny prvky s třídou "myClass". -
Zpracování událostí na prvcích:
.click(),.hover(),.submit(), ... Příklad:$("button").click(function() { ... })registruje obsluhu události kliknutí
Práce s kolekcemi prvků
-
Iterace kolekcí:
.each()Příklad:$("li").each(function() { ... })iteruje přes každý<li>prvek na stránce. -
Filtrování kolekce:
.filter(),.not()Příklad:$("div").filter(".myClass")filtruje<div>prvky a vybírá ty s třídou "myClass". -
Vkládání prvků do kolekce:
.append(),.prepend(),.after(),.before()Příklad:$("#myElement").append("<p>New paragraph</p>")připojí nový<p>prvek k prvku s ID "myElement".
Efekty a animace
-
Provádění efektů fadeIn/fadeOut:
.fadeIn(),.fadeOut()Příklad:$("#myElement").fadeIn(1000)slábne v prvku s ID "myElement" po dobu 1 sekundy. -
Provádění efektů slideUp/slideDown:
.slideUp(),.slideDown()Příklad:$(".myClass").slideUp(500)posune nahoru všechny prvky s třídou "myClass" po dobu 0,5 sekundy. -
Provádění vlastních animací:
.animate()Příklad:$("#myElement").animate({ left: '250px', opacity: '0.5' })animuje prvek s ID "myElement" změnou jeho levé polohy a krytí.
Tyto příklady ukazují, jak používat různé aspekty základní syntaxe jQuery k výběru prvků, manipulaci s jejich vlastnostmi a aplikaci efektů nebo animací. jQuery nabízí bohatou sadu metod a funkcí pro zjednodušení a vylepšení úloh vývoje webu.