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

$() Jest funkcją konstruktora jQuery.

this jest odniesieniem do elementu DOM wywołania.

Więc zasadniczo, w $(this), po prostu przekazujesz this in $() jako parametr, aby móc wywoływać metody i funkcje jQuery.

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

Podczas stosowania jQuery zaleca się zwykle stosowanie $(this). Ale jeśli znasz (powinieneś nauczyć się i poznać) różnicę, czasami wygodniej i szybciej jest użyć just 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"); 
});

this jest 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 Execution Context^ECMA. Aby zrozumieć this, ważne jest zrozumienie sposobu działania kontekstów wykonawczych w JavaScript.

konteksty realizacji to

Gdy control wchodzi w kontekst wykonania (kod jest wykonywany w tym zakresie), środowisko dla zmiennych jest ustawiane (środowiska leksykalne i zmienne - zasadniczo ustawia obszar do wprowadzania zmiennych, które były już dostępne, oraz obszar do przechowywania zmiennych lokalnych), i następuje powiązanie this.

jQuery wiąże to

Konteksty wykonawcze tworzą stos logiczny. Rezultatem jest to, że konteksty głębiej w 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 zwrotnych jQuery, this odnosi się do bieżącego elementu używanego przez funkcję zwrotną.

Na przykład, w .each, powszechnie stosowana funkcja callback pozwala na .each(function(index,element){/*scope*/}). W tym zakresie, this == element to prawda.

Wywołania zwrotne JQuery używają funkcji apply, aby powiązać wywołaną funkcję z bieżącym elementem. Ten element pochodzi z tablicy elementów obiektu jQuery. Każdy skonstruowany obiekt jQuery zawiera tablicę elementów, które pasują do selektor ^{jQuery API} to było używane do tworzenia instancji obiektu jQuery.

$(selector) wywołuje funkcję jQuery (pamiętaj, że $ jest odniesieniem do jQuery, kod: window.jQuery = window.$ = jQuery;). Wewnętrznie, funkcja jQuery tworzy instancję obiektu function. Tak więc, choć może to nie być od razu oczywiste, użycie $() wewnętrznie używa new jQuery(). Częścią konstrukcji tego obiektu jQuery jest znalezienie wszystkich dopasowań selektora. Konstruktor będzie również akceptował ciągi html i elementy . kiedy przekazujesz this do konstruktora jQuery, przekazujesz bieżący element dla obiektu jQuery, który ma być zbudowany z. Obiekt jQuery zawiera następnie strukturę podobną do tablicy DOM elementy pasujące do selektora (lub tylko pojedynczy element w przypadku this).

Po zbudowaniu obiektu jQuery, interfejs API jQuery jest teraz odsłonięty. Gdy wywołana jest funkcja jQuery api, będzie ona wewnętrznie iteracyjna nad tą strukturą podobną do tablicy. Dla każdego elementu w tablicy, wywołuje funkcję wywołania zwrotnego dla api, wiążąc wywołanie zwrotne this z bieżącym elementem. Wywołanie to można zobaczyć w powyższym fragmencie kodu, gdzie obj jest strukturą podobną do tablicy, a i jest iterator służy do określenia pozycji w tablicy bieżącego elementu.

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

this odwołuje się do obiektu javascript i $(this) używanego do enkapsulacji z 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')