close

A jQuery alapvető szintaxisa – Kiválasztás, manipuláció és effektusok

A jQuery alapvető szintaxisa magában foglalja a szelektor(CSS-stílusú választó) és a kiválasztott elemek manipulálására szolgáló módszerek használatát. Íme néhány példa a jQuery alapvető szintaxisára:

 

Elemek kiválasztása

  • Elemek kiválasztása HTML címke neve alapján: $("tagname") Példa: $("p") kijelöli az összes <p> elemet az oldalon.

  • Elemek kiválasztása CSS-osztály szerint: $(".classname") Példa: $(".myClass") kijelöli az összes "myClass" osztályú elemet.

  • Elemek kiválasztása azonosító alapján: $("#idname") Példa: $("#myElement") kiválasztja a "myElement" azonosítójú elemet.

  • Elemek kiválasztása attribútum szerint: $("[attribute='value']") Példa: $("[data-type='button']") olyan elemeket jelöl ki, amelyek attribútuma data-type "button"-ra van állítva.

  • Kiválasztások kombinálása: $("tagname.classname"), $("#idname .classname"), ...

 

A kiválasztott elemek manipulálása

  • Egy elem tartalmának megváltoztatása: .html(), .text() Példa: $("#myElement").html("New content") beállítja a "myElement" azonosítójú elem HTML tartalmát.

  • Elemattribútumok módosítása: .attr(), .prop() Példa: $("img").attr("src", "newimage.jpg") megváltoztatja az src összes elem attribútumait <img>.

  • Egy elem CSS-osztályainak manipulálása: .addClass(), .removeClass(), .toggleClass() Példa: $("#myElement").addClass("highlight") hozzáadja a "highlight" osztályt a "myElement" azonosítójú elemhez.

  • Elemek elrejtése/megjelenítése: .hide(), .show(), .toggle() Példa: $(".myClass").hide() elrejti az összes "myClass" osztályú elemet.

  • Események kezelése a következő elemeken: .click(), .hover(), .submit(), ... Példa: $("button").click(function() { ... }) kattintási eseménykezelőt regisztrál

 

Elemgyűjteményekkel való munka

  • Gyűjteményen keresztüli iteráció: .each() Példa: az oldal $("li").each(function() { ... }) minden eleme felett iterál. <li>

  • Gyűjtemény szűrése: .filter(), .not() Példa: $("div").filter(".myClass") kiszűri az <div> elemeket, és kiválasztja azokat, amelyek a "myClass" osztályúak.

  • Elemek beszúrása egy gyűjteménybe: .append(), .prepend(), .after(), .before() Példa: $("#myElement").append("<p>New paragraph</p>") egy új <p> elemet fűz a "myElement" azonosítójú elemhez.

 

Hatások és animációk

  • FadeIn/fadeOut effektusok végrehajtása: .fadeIn(), .fadeOut() Példa: $("#myElement").fadeIn(1000) elhalványul a "myElement" azonosítójú elemben 1 másodpercen keresztül.

  • slideUp/slideDown effektusok végrehajtása: .slideUp(), .slideDown() Példa: $(".myClass").slideUp(500) felcsúsztatja az összes "myClass" osztályú elemet 0,5 másodpercen keresztül.

  • Egyéni animációk végrehajtása: .animate() Példa: $("#myElement").animate({ left: '250px', opacity: '0.5' }) animálja a „myElement” azonosítójú elemet a bal helyzetének és átlátszatlanságának megváltoztatásával.

 

Ezek a példák bemutatják, hogyan lehet a jQuery alapvető szintaxisának különböző aspektusait használni elemek kiválasztására, tulajdonságaik manipulálására, valamint effektusok vagy animációk alkalmazására. A jQuery módszerek és funkciók gazdag készletét kínálja a webfejlesztési feladatok egyszerűsítésére és javítására.