Why does 'selector' return value differ from 'this'

Question

Inside an event handler, why does $(this) return something else than $('.selector')?

Example:

$('.container').click(function () {
    console.log($(this));
    console.log($('.container'));
});

jsFiddle

When you look in the console the results are different.

Answer 1

this is always the element on which the event originated, in other words which of the .container elements you clicked exactly.

e.g.:

<div class="container">container1</div>
<span class="container">container2</span>

as Jonathan Lonowski notes, $(".container") selects both .container elements but this is the one you clicked, either the span or the div.

Also, $(this) just wraps that element into a JQuery object, the this keyword itself is native javascript.