this - jeden z klíčových pojmů v rámci používání knihovny jQuery. Toto je ukazatel aktuálního objektu, který je ve funkci zpětného volání. Správné použití this umožňuje efektivnější a pohodlnější práci s prvky na stránce.
V rámci využití jQuery, this představuje odkaz na aktuální položku ze sady výsledků vzorku. Pokud například odkazujeme na prvek pomocí selektoru $(".some-element"), když je pro tuto položku spuštěna obslužná rutina události, uvnitř funkce zpětného volání this bude poukazovat právě na tento prvek.
this v jQuery se obvykle používá v technikách zpracování událostí, jako jsou click(), hover() atd. umožňuje přistupovat k aktuálnímu prvku přímo uvnitř funkce zpětného volání a provádět s ním různé operace: změnit styly, použít animace, přijímat nebo měnit hodnoty atributů atd.
Je důležité si uvědomit, že jQuery používá speciální syntaxi pro práci s this uvnitř anonymních funkcí. Pro přístup k aktuálnímu prvku by měla být použita funkce $(this) nebo $(event.target). To je způsobeno zvláštnostmi fungování událostí a kontextem výkonu funkcí zpětného volání.
V jQuery to rozebereme
Klíčové slovo this v jQuery odkazuje na aktuální prvek, na který byla událost připojena. Jinými slovy, označuje prvek, na kterém se událost stala, a umožňuje nám provádět určité akce přesně s tímto prvkem.
Když použijeme $(this) uvnitř obslužného programu události, obrátíme se právě na tento prvek. Můžeme například změnit text tlačítka, přiřadit nové třídy, spustit animace a další.
Při použití this uvnitř funkce zpětného volání již nenaznačuje aktuální prvek, protože funkce zpětného volání je v jiném kontextu provádění. Místo toho poukazuje na kontext funkce, ve které byla vyvolána.
Abychom to uložili do funkce zpětného volání, můžeme použít proměnnou self nebo that. To nám umožňuje oslovit this uvnitř funkce zpětného volání a použít jeho hodnotu služebního objektu jQuery.
Koncept this v jQuery
V jQuery koncept this hraje důležitou roli při určování aktuálního kontextu provádění kódu. This odkazuje na položku, na kterou se vztahuje metoda nebo obslužná rutina událostí.
Když je na položce vyvolána metoda nebo funkce, uvnitř kódu bude this odkazovat na tuto položku.
Následující kód například umožňuje najít všechny položky p na stránce a nastavit jim červenou barvu textu:
$("p").css("color", "red");Zde, uvnitř metody CSS, this odkazuje na každý nalezený prvek p.
Koncept this se také často používá ve zpracovatelích událostí. Například následující kód přiřadí obslužnou rutinu kliknutí ke každé položce button:
$("button").click(function() );V tomto případě se uvnitř funkce obslužného programu this odkazuje na konkrétní položku button, na kterém se událost stala.
Použití konceptu this v jQuery usnadňuje práci se současným prvkem a aplikuje na něj správné operace nebo obslužné rutiny událostí.
Pochopení kontextu v this
Například při použití metody $('selector').click, this bude ukazovat na prvek, na který se metoda vztahuje. Tímto způsobem je možné manipulovat s tímto konkrétním prvkem změnou jeho stylů, textu nebo přidáním nových prvků.
Kontext this může se lišit v závislosti na způsobu volání funkce nebo metody. Například při použití šipkových funkcí (arrow functions) namísto běžných funkcí bude kontextem globální objekt Window, nikoli prvek, na který se metoda vztahuje.
Při práci s jQuery je proto důležité vzít v úvahu kontext this a být pozorní při používání šipkových funkcí nebo předávání funkcí jako argumentů.
Jak funguje this ve funkcích jQuery
Klíčové slovo this ve funkcích jQuery hraje důležitou roli a pomáhá interagovat s prvky stránky.
Když je funkce vyvolána v jQuery, hodnota this je prvek DOM, se kterým dochází k interakci.
V případě použití metod jQuery, např. click (),.hover () nebo .each (), this bude představovat aktuální prvek, na který je metoda aplikována.
Použití this tedy umožňuje odkazovat na vlastnosti a metody prvku, se kterými se v současné době pracuje.
$(".btn").click(function() );V tomto příkladu, když kliknete na tlačítko, hodnota this bude odkazovat na toto konkrétní tlačítko a metoda .text () vrátí text umístěný uvnitř tlačítka.
Použití this umožňuje snadnější přístup k prvkům stránky a mnohem snazší práci s nimi.
Použití this ve zpracovatelích událostí
Když pracujeme s jQuery, velmi často musíme zvládnout události, jako je kliknutí, najetí kurzorem, změna hodnoty vstupního pole atd. K tomu přidáváme obslužné rutiny událostí k prvkům stránky. V rámci obslužné rutiny události můžeme použít klíčové slovo this k odkazu na aktuální prvek, na kterém se událost stala.
Použití this vám umožňuje přistupovat k aktuálnímu prvku, se kterým uživatel komunikuje. Pokud například na stránce máme více tlačítek , můžeme přidat obslužnou rutinu události pro každé tlačítko a pomocí this získat odkaz na konkrétní tlačítko, na které uživatel klikl.
Příklad použití this V obsluze kliknutí na tlačítko:
$("button").click(function() );V tomto příkladu se kliknutím na libovolné tlačítko na stránce změní její text na"Clicked". Použití this nám umožňuje získat odkaz na aktuální tlačítko a změnit jeho vlastnosti.
Také, pokud používáme funkci jako obslužnou rutinu události a tuto funkci přenášíme dovnitř .on () nebo .trigger () metod, můžeme také použít this pro přístup k aktuálnímu prvku.
$("button").on("click", function() );V tomto příkladu přidáme obslužnou rutinu události "click" pro všechna tlačítka na stránce. Uvnitř obslužné rutiny můžeme pomocí this odkazovat na aktuální tlačítko a změnit jeho text.
Použití this ve zpracovatelích událostí je velmi pohodlný způsob, jak pracovat s prvky, na které uživatel interaguje. Umožňuje nám snadno přistupovat ke konkrétnímu prvku a provádět s ním potřebné operace.
Příklady použití this v jQuery
- Odkaz na aktuální položku při kliknutí:
$(document).ready(function() <$('button').click(function() <$(this).hide(); // скрыть текущую кнопку при клике>);>);
$(document).ready(function() <$('p').click(function() <$(this).toggleClass('highlight'); // переключение класса у текущего абзаца при клике>);>);
$(document).ready(function() <$('div').click(function() <$(this).addClass('highlight'); // добавление класса "highlight" текущему div при клике>).mouseenter(function() <$(this).css('background-color', 'yellow'); // изменение цвета фона текущего div при наведении курсора>).mouseleave(function() <$(this).css('background-color', 'white'); // изменение цвета фона текущего div при уходе курсора>);>);
Jak je vidět z těchto příkladů, použití klíčového slova this umožňuje odkazovat na aktuální prvek uvnitř obslužného programu událostí nebo metod jQuery, díky čemuž je práce s DOM pohodlnější a flexibilnější.
Nejlepší postupy práce s this v jQuery
1. Použití propojení kontextu pomocí $.proxy()
Pokud chcete, aby this odkazoval na konkrétní objekt uvnitř obslužné rutiny událostí nebo funkce jQuery, můžete použít metodu $.proxy() . Umožňuje vám jasně propojit kontext uvedením objektu, který bude použit jako hodnota this . Například:
var obj = >;$("button").click($.proxy(obj.showAlert, obj));2. Použití střeleckých funkcí
Funkce šipky jsou zavedeny ve standardu ECMAScript 6 a nabízejí pohodlnou syntaxi pro definování funkcí. Automaticky také zachycují hodnotu this z okolního kontextu. To je užitečné zejména u zpracovatelů událostí. Příklad použití funkce šipky:
$("button").click(() => );3. Použití proměnné pro ukládání kontextu
Namísto použití this přímo v rámci funkcí jQuery je možné vytvořit proměnnou, která uloží odkaz na kontext, a použít tuto proměnnou místo this . Díky tomu je váš kód jasnější a zabraňuje možným chybám. Zde je příklad:
var context = this;$("button").click(function() );Dodržováním těchto nejlepších postupů budete moci správně používat this v jQuery a vyhnout se chybám spojeným s nesprávnou definicí kontextu. To vám pomůže napsat srozumitelnější a spolehlivější kód.