Qual é a diferença entre ‘$ (this)’ e ‘this’?

No momento, estou trabalhando neste tutorial: Introdução ao jQuery

Para os dois exemplos abaixo:

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

Observe no primeiro exemplo, usamos $(this) para acrescentar algum texto dentro de cada elemento li . No segundo exemplo, usamos this diretamente ao redefinir o formulário.

$(this) parece ser usado com muito mais freqüência do que this .

Meu palpite é no primeiro exemplo, $() está convertendo cada elemento li em um object jQuery que entende a function append() enquanto no segundo exemplo reset() pode ser chamado diretamente no formulário.

Basicamente, precisamos de $() para funções especiais somente do jQuery.

Isso está correto?

Sim, você só precisa de $ () quando estiver usando o jQuery. Se você quiser que a ajuda do jQuery faça as coisas do DOM, tenha isso em mente.

 $(this)[0] === this 

Basicamente, toda vez que você obtém um conjunto de elementos, o jQuery o transforma em um object jQuery . Se você sabe que tem apenas um resultado, ele estará no primeiro elemento.

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

E assim por diante…

$() é a function construtora do jQuery.

this é uma referência ao elemento DOM da chamada.

Então, basicamente, em $(this) , você está apenas passando this em $() como um parâmetro para que você possa chamar methods e funções jQuery.

Sim, você precisa de $(this) para funções jQuery, mas quando você quer acessar methods javascript básicos do elemento que não usa jQuery, você pode simplesmente usar this .

Ao usar o jQuery , é aconselhável usar $(this) normalmente. Mas se você sabe (você deve aprender e saber) a diferença, às vezes é mais conveniente e rápido usar apenas this . Por exemplo:

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

é mais fácil e mais pura do que

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

this é o elemento, $(this) é o object jQuery construído com esse elemento

 $(".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); }); 

Um olhar mais profundo

this MDN está contido em um contexto de execução

O escopo se refere ao contexto de execução atual ECMA . Para entender this , é importante entender como os contextos de execução operam em JavaScript.

contextos de execução ligam isso

Quando o controle entra em um contexto de execução (o código está sendo executado nesse escopo) o ambiente para variables ​​é configurado (Ambientes Lexicais e Variáveis ​​- essencialmente isso configura uma área para as variables ​​entrarem que já eram acessíveis e uma área para as variables ​​locais a serem armazenado), e a binding this ocorre.

jQuery liga isso

Os contextos de execução formam uma pilha lógica. O resultado é que contextos mais profundos na pilha têm access a variables ​​anteriores, mas suas ligações podem ter sido alteradas. Toda vez que o jQuery chama uma function de retorno de chamada, ela altera a binding usando o MDN .

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

O resultado da chamada apply é que dentro das funções de retorno de chamada do jQuery, this se refere ao elemento atual sendo usado pela function de retorno de chamada.

Por exemplo, em .each , a function de callback comumente usada permite .each(function(index,element){/*scope*/}) . Nesse escopo, this == element é verdadeiro.

Os retornos de chamada do jQuery usam a function apply para ligar a function que está sendo chamada com o elemento atual. Este elemento vem da matriz de elementos do object jQuery. Cada object jQuery construído contém uma matriz de elementos que correspondem ao seletor da API jQuery que foi usada para instanciar o object jQuery.

$(selector) chama a function jQuery (lembre-se que $ é uma referência a jQuery , code: window.jQuery = window.$ = jQuery; ). Internamente, a function jQuery instancia um object de function. Então, embora possa não ser imediatamente óbvio, usar $() internamente usa o new jQuery() . Parte da construção deste object jQuery é encontrar todas as correspondências do seletor. O construtor também aceitará strings e elementos html. Quando você passa this para o construtor jQuery, você está passando o elemento atual para um object jQuery para ser construído . O object jQuery, em seguida, contém uma estrutura de matriz dos elementos DOM que correspondem ao seletor (ou apenas o único elemento no caso this ).

Depois que o object jQuery é construído, a API do jQuery é agora exposta. Quando uma function api jQuery é chamada, iterará internamente sobre essa estrutura de matriz. Para cada item na matriz, ele chama a function de retorno de chamada para a API, ligando o retorno de chamada ao elemento atual. Essa chamada pode ser vista no snippet de código acima, em que obj é a estrutura do tipo array, e i é o iterador usado para a posição na matriz do elemento atual.

Sim, usando $(this) , você ativou a funcionalidade do jQuery para o object. Apenas usando this , ele só tem funcionalidade Javascript genérica.

essa referência é um object javascript e $ (this) usado para encapsular com jQuery.

Exemplo =>

 // 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')