jQuery: Jaka jest różnica między "$ (this)" a "this"?

Question

Obecnie pracuję za tym tutorialu: Getting Started with jQuery

dla dwóch poniższych przykładach:

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

ogłoszone w pierwszym przykładzie, używamy $(this) dołączyć tekst wewnątrz każdego elementu li. W drugim przykładzie używamy this bezpośrednio podczas resetowania formularza.

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

Domyślam w pierwszym przykładzie $() jest przekształcanie każdego elementu li do obiektu jQuery które rozumie się funkcję append(), podczas gdy w drugim przykładzie reset() może być wywołana bezpośrednio z formy.

Zasadniczo potrzebujemy $() dla specjalnych funkcji tylko jQuery.

Czy to prawda?

Answer 1

Tak, potrzebujesz tylko $(), gdy używasz jQuery. Jeśli chcesz, aby jQuery robił DOM, pamiętaj o tym.

$(this)[0] === this 

W zasadzie za każdym razem można dostać zestaw elementów kopii jQuery zamienia ją w jQuery object. Jeśli wiesz, że masz tylko jeden wynik, to będzie to pierwszy element.

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

I tak dalej ...

Answer 2

Tak, za pomocą $(this), włączono funkcjonalność jQuery dla obiektu. Po prostu przy użyciu this, ma tylko ogólną funkcjonalność Javascript.

Answer 3

Tak, potrzebujesz $(this) dla funkcji jQuery, ale gdy chcesz uzyskać dostęp do podstawowych metod javascript dla elementu, które nie używają jQuery, możesz po prostu użyć this.

Answer 4

$() to funkcja konstruktora jQuery.

this jest odniesieniem do elementu DOM wywołania.

Zasadniczo w $(this) po prostu przekazujesz this w $() jako parametr, aby można było wywoływać metody i funkcje jQuery.

Answer 5

Podczas korzystania z jQuery zaleca się zwykle używanie $(this). Ale jeśli wiesz (powinieneś się uczyć i wiedzieć) różnicę, czasami wygodniej i szybciej jest używać tylko this.Na przykład:

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

jest łatwiejsza i czystsza niż

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

Answer 6

ten odniesienia javascript obiektów i $ (this) używane do hermetyzacji 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') 

Answer 7

this jest element $(this) obiektem jQuery wykonane 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); 
}); 

uzyskać dokładne

this^MDN jest zawarta w ramach wykonania

zakres odnosi się do obecnego Execution Context^ECMA. Aby zrozumieć this, ważne jest zrozumienie sposobu działania kontekstów wykonawczych w JavaScript.

konteksty wykonanie wiążą ten

Kiedy kontrola wchodzi do kontekstu wykonania (kod jest wykonywany w tym zakresie) środowisko dla zmiennych są setup (leksykalne i zmiennych środowiskach - w zasadzie to ustawia obszar zmiennych do enter, które były już dostępne, oraz obszar dla zmiennych lokalnych, które mają być przechowywane) i występuje wiązanie z this.

jQuery wiąże ten

Execution konteksty tworzą logiczną stos. W rezultacie konteksty znajdujące się 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ą, korzystając z apply^MDN .

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

Wynikiem wywoływania apply jest wewnątrz jQuery funkcji połączenia zwrotnego, this odnosi się do aktualnego elementu wykorzystywane przez funkcję wywołania zwrotnego.

Na przykład w .each, powszechnie używana funkcja wywołania zwrotnego pozwala na .each(function(index,element){/*scope*/}). W tym zakresie prawdą jest this == element.

Połączenia 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 skonstruowany obiekt jQuery zawiera tablicę elementów, które pasują do obiektu, który został użyty do utworzenia instancji obiektu jQuery.

wywołuje funkcję jQuery (pamiętaj, że $ jest odniesieniem do jQuery, kod: window.jQuery = window.$ = jQuery;). Wewnętrznie funkcja jQuery tworzy instancję obiektu funkcji. Tak więc, choć może nie być to oczywiste, użycie $() wewnętrznie używa new jQuery(). Częścią konstrukcji tego obiektu jQuery jest znalezienie wszystkich dopasowań selektora. Konstruktor zaakceptuje również ciągi html i elementy. Po przekazaniu this do konstruktora jQuery, przekazujesz bieżący element dla obiektu jQuery, który ma być zbudowany z. Obiekt jQuery zawiera następnie strukturę tablicową elementów DOM zgodnych z selektorem (lub po prostu pojedynczy element w przypadku this).

Po skonstruowaniu obiektu jQuery, interfejs API jQuery zostaje ujawniony. Kiedy wywoływana jest funkcja api jQuery, wewnętrznie iteruje ona nad tą strukturą podobną do tablicy. Dla każdej pozycji w tablicy wywołuje funkcję wywołania zwrotnego dla interfejsu API, wiążąc wywołanie zwrotne z bieżącym elementem. Wywołanie to można zobaczyć w fragmencie kodu powyżej, gdzie obj jest strukturą podobną do tablicy, a i jest iteratorem używanym dla pozycji w tablicy bieżącego elementu.