Jaka jest różnica między „$ (this)” a „this”?

Obecnie pracuję nad tym samouczkiem: Pierwsze kroki z jQuery

Dla dwóch poniższych przykładów:

$("#orderedlist").find("li").each(function (i) {
    $(this).append(" BAM! " + i);
});
$("#reset").click(function () {
    $("form").each(function () {
        this.reset();
    });
});

Zauważ, że w pierwszym przykładzie dodaliśmy $(this)tekst do każdego lielementu. W drugim przykładzie używamy thisbezpośrednio podczas resetowania formularza.

$(this)wydaje się być używany znacznie częściej niż this.

Domyślam się, że w pierwszym przykładzie $()jest przekształcenie każdego lielementu w obiekt jQuery, który rozumie append()funkcję, podczas gdy w drugim przykładzie reset()można wywołać bezpośrednio w formularzu.

Zasadniczo potrzebujemy $()specjalnych funkcji tylko dla jQuery.

Czy to jest poprawne?

Tak, potrzebujesz tylko $()podczas korzystania z jQuery. Jeśli potrzebujesz pomocy jQuery w robieniu DOM, pamiętaj o tym.

$(this)[0] === this

Zasadniczo za każdym razem, gdy odzyskujesz zestaw elementów, jQuery zamienia go w obiekt jQuery . Jeśli wiesz, że masz tylko jeden wynik, będzie to pierwszy element.

$("#myDiv")[0] === document.getElementById("myDiv");

I tak dalej...

$() jest funkcją konstruktora jQuery.

this jest odniesieniem do elementu DOM wywołania.

Więc w zasadzie, w $(this), jesteś po prostu przechodzącą thisw $()jako parametr tak, że można wywołać metody i funkcje jQuery.

Tak, potrzebujesz $(this)funkcji jQuery, ale jeśli chcesz uzyskać dostęp do podstawowych metod javascript dla elementu, który nie używa jQuery, możesz po prostu użyć this.

Podczas korzystania jQueryzaleca się $(this)zwykle używać . Ale jeśli znasz (powinieneś nauczyć się i znać) różnicę, czasami jest to wygodniejsze i szybsze w użyciu this. Na przykład:

$(".myCheckboxes").change(function(){ 
    if(this.checked) 
       alert("checked"); 
});

jest łatwiejsze i czystsze niż

$(".myCheckboxes").change(function(){ 
      if($(this).is(":checked")) 
         alert("checked"); 
});

thisjest elementem, $(this)jest obiektem jQuery zbudowanym z tego elementu

$(".class").each(function(){
 //the iterations current html element 
 //the classic JavaScript API is exposed here (such as .innerHTML and .appendChild)
 var HTMLElement = this;

 //the current HTML element is passed to the jQuery constructor
 //the jQuery API is exposed here (such as .html() and .append())
 var jQueryObject = $(this);
});

Głębsze spojrzenie

this^MDN jest zawarty w kontekście wykonania

Zakres odnosi się do bieżącego kontekstu wykonania ^ECMA . Aby zrozumieć this, ważne jest zrozumienie, w jaki sposób konteksty wykonania działają w JavaScript.

wiążą to konteksty wykonania

Kiedy kontrola wchodzi w kontekst wykonywania (wykonywany jest kod w tym zakresie), środowisko zmiennych jest konfigurowane (środowiska leksykalne i zmienne - zasadniczo tworzy to obszar do wprowadzania zmiennych, które były już dostępne, oraz obszar dla zmiennych lokalnych, które mają być przechowywane) i thisnastąpi wiązanie .

jQuery wiąże to

Konteksty wykonania tworzą logiczny stos. W rezultacie konteksty głębiej na stosie mają dostęp do poprzednich zmiennych, ale ich powiązania mogły zostać zmienione. Za każdym razem, gdy jQuery wywołuje funkcję zwrotną, zmienia to powiązanie za pomocą apply^MDN .

callback.apply( obj[ i ] )//where obj[i] is the current element

Wynikiem wywołania applyjest to, że wewnątrz funkcji wywołania zwrotnego jQuery thisodnosi się do bieżącego elementu używanego przez funkcję wywołania zwrotnego.

Na przykład, w .each, pozwala na często używana funkcja wywołania zwrotnego .each(function(index,element){/*scope*/}). W tym zakresie this == elementjest to prawda.

Wywołania zwrotne jQuery używają funkcji Apply do wiązania funkcji wywoływanej z bieżącym elementem. Ten element pochodzi z tablicy elementów obiektu jQuery. Każdy zbudowany obiekt jQuery zawiera tablicę elementów, które pasują do selektora ^{jQuery API,} który został użyty do utworzenia instancji obiektu jQuery.

$(selector)wywołuje funkcję jQuery (pamiętaj, że $jest to odwołanie do jQuerycode:) window.jQuery = window.$ = jQuery;. Wewnętrznie funkcja jQuery tworzy obiekt funkcji. Chociaż może nie być to od razu oczywiste, korzystanie z $()wewnętrznych zastosowań new jQuery(). Częścią tego obiektu jQuery jest znalezienie wszystkich dopasowań selektora. Konstruktor akceptuje również ciągi i elementy HTML . Gdy przekazujesz thisdo konstruktora jQuery, przekazujesz bieżący element do zbudowania obiektu jQuery . Obiekt jQuery zawiera następnie tablicową strukturę elementów DOM pasujących do selektora (lub tylko pojedynczy element w przypadku this).

Po zbudowaniu obiektu jQuery interfejs API jQuery jest teraz widoczny. Wywołanie funkcji API jQuery spowoduje iterację wewnętrzną tej struktury podobnej do tablicy. Dla każdego elementu w tablicy wywołuje funkcję wywołania zwrotnego dla interfejsu API, wiążąc wywołania zwrotne thisz bieżącym elementem. To wywołanie można zobaczyć we fragmencie kodu powyżej, w którym objznajduje się struktura podobna do tablicy, i ijest iteratorem stosowanym do pozycji w tablicy bieżącego elementu.

Tak, używając $(this), włączyłeś funkcję jQuery dla obiektu. Wystarczy użyć this, ma tylko ogólną funkcjonalność Javascript.

thisodwołuje się do obiektu javascript i $(this)służy do enkapsulacji za pomocą jQuery.

Przykład =>

// Getting Name and modify css property of dom object through jQuery
var name = $(this).attr('name');
$(this).css('background-color','white')

// Getting form object and its data and work on..
this = document.getElementsByName("new_photo")[0]
formData = new FormData(this)

// Calling blur method on find input field with help of both as below
$(this).find('input[type=text]')[0].blur()

//Above is equivalent to
this = $(this).find('input[type=text]')[0]
this.blur()

//Find value of a text field with id "index-number"
this = document.getElementById("index-number");
this.value

or 

this = $('#index-number');
$(this).val(); // Equivalent to $('#index-number').val()
$(this).css('color','#000000')