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 que no primeiro exemplo, usamos $(this)para acrescentar algum texto dentro de cada lielemento. No segundo exemplo, usamos thisdiretamente ao redefinir o formulário.

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

Meu palpite é que no primeiro exemplo, $()está convertendo cada lielemento em um objeto jQuery que entende a append()função, enquanto que no segundo exemplo reset()pode ser chamado diretamente no formulário.

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

Isso está correto?

Sim, você só precisa $()quando estiver usando o jQuery. Se você quiser a ajuda do jQuery para fazer as coisas do DOM, lembre-se disso.

$(this)[0] === this

Basicamente, toda vez que você recupera um conjunto de elementos, o jQuery o transforma em um objeto jQuery . Se você sabe que possui apenas um resultado, ele estará no primeiro elemento.

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

E assim por diante...

$() é a função do construtor jQuery.

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

Então, basicamente, $(this)você está apenas passando o thisin $()como um parâmetro para poder chamar métodos e funções do jQuery.

Sim, você precisa $(this)das funções do jQuery, mas quando quiser acessar os métodos javascript básicos do elemento que não usa o jQuery, basta usar this.

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

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

é mais fácil e mais puro do que

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

thisé o elemento, $(this)é o objeto 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 refere-se ao atual ^{ECMA do} contexto de execução . Para entender this, é importante entender como os contextos de execução operam em JavaScript.

contextos de execução vinculam isso

Quando o controle entra em um contexto de execução (o código está sendo executado nesse escopo), o ambiente para variáveis ​​é configurado (ambientes lexicais e variáveis ​​- essencialmente, isso configura uma área para entrada de variáveis ​​que já estavam acessíveis e uma área para variáveis ​​locais a serem armazenada) e a ligação de thisocorre.

O jQuery liga isso

Os contextos de execução formam uma pilha lógica. O resultado é que contextos mais profundos na pilha têm acesso a variáveis ​​anteriores, mas suas ligações podem ter sido alteradas. Toda vez que o jQuery chama uma função de retorno de chamada, ele altera essa ligação usando o apply^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, thisrefere-se ao elemento atual que está sendo usado pela função de retorno de chamada.

Por exemplo, em .each, a função de retorno de chamada normalmente usada permite .each(function(index,element){/*scope*/}). Nesse escopo, this == elementé verdade.

Os retornos de chamada do jQuery usam a função apply para vincular a função que está sendo chamada com o elemento atual. Este elemento vem da matriz de elementos do objeto jQuery. Cada objeto jQuery construído contém uma matriz de elementos que correspondem à ^{API jQuery} do seletor usada para instanciar o objeto jQuery.

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

Depois que o objeto jQuery é construído, a API do jQuery agora é exposta. Quando uma função API jQuery é chamada, ela itera internamente sobre essa estrutura semelhante a uma matriz. Para cada item da matriz, ele chama a função de retorno de chamada para a API, vinculando os retornos de chamada thisao elemento atual. Essa chamada pode ser vista no snippet de código acima, onde objestá a estrutura semelhante à matriz e ié o iterador usado para a posição na matriz do elemento atual.

Sim, usando $(this), você ativou a funcionalidade jQuery para o objeto. Apenas usando this, ele possui apenas funcionalidade Javascript genérica.

thisreferencie um objeto 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')