Почему я должен использовать $(это)?

Ответ 1

• $() - это функция jQuery constructor
• this является ссылкой на DOM element of invocation

Итак, вы превращаете DOM reference в jQuery object

В вашем примере вы также можете использовать

listItems.each(function(index, element){
   $(element).css({
   });
});

.., так как .each() будет передавать оба элемента index + в обратном вызове.

Ответ 2

this - это собственный элемент DOM. $(this) - объект jQuery, который позволяет вам вызывать на нем функции, такие как .css().

Ответ 3

Я знаю, что немного опоздал на эту тему, но я просто хотел узнать, что избыточная упаковка объектов DOM является одним из наиболее часто совершаемых преступлений против jQuery. Уход за контентом jQuery-экземпляра может иметь потрясающие эффекты с точки зрения производительности, и так легко сделать, что у вас нет оправдания.

Обычно, когда у людей есть объект DOM (на него ссылаются как this или element), они будут пытаться обернуть его каждый раз, когда им нужен доступ к методу jQuery:

jQuery(this).css('a', 'b');

Проблема заключается в том, что вы делаете это несколько раз:

jQuery(this).css('a', 'b');
jQuery(this).find('span').attr(...);
jQuery(this)....

Каждый раз, когда вызывается jQuery(), создается новый экземпляр jQuery. Такая операция стоит дорого и ее следует избегать, если это вообще возможно - особенно в циклах!

Чтобы этого избежать, для одного вы могли бы использовать цепочку со всеми методами, которые возвращают экземпляр jQuery $(this).css(a,b).attr(a,b)...). В остальное время вы должны иметь локально объявленную переменную, которая ссылается на экземпляр jQuery, а затем просто использовать это:

var self = jQuery(this);
self.css(...);
self.attr(...);

Если вы делаете это в функции обратного вызова .each(), на каждой отдельной итерации создается новый объект jQuery. Вы можете избежать этого, имея один универсальный объект jQuery, который вы постоянно мутируете, а затем вы можете запускать методы jQuery из этого единственного экземпляра:

Посмотрите на это:

jQuery.single = function(a){
    return function(b){
        a[0] = b;
        return a
    }
}(jQuery([1]));

Теперь посмотрим на это:

$('a').each(function(i){
    $.single(this).append('Anchor number ' + i);
});

Используется только один объект jQuery. Вы можете сделать это еще быстрее, избегая разрешения идентификатора:

$_ = $.single;
$('a').each(function(i){
    $_(this).append('Anchor number ' + i);
});

Пища для размышлений. Подробнее здесь: http://james.padolsey.com/javascript/76-bytes-for-faster-jquery/

Ответ 4

this обычно является объектом DOM по умолчанию, что означает, что он имеет только методы для обычных объектов DOM.

Если вы хотите вызвать функцию, специфичную для библиотеки (например, функцию jQuery .css), вам сначала нужно преобразовать ее в полный объект jQuery, что по умолчанию означает $(), если вы передадите ему DOM объект.

(Вы также можете передать другие вещи в $(), например строку HTML (для создания нового объекта DOM, завернутого jQuery) или селектор CSS (чтобы получить набор объектов jQuery, соответствующих объектам DOM, соответствующим селектор).

Ответ 5

Если вы используете Firefox, попробуйте console.log($ (this)) и console.log(this), чтобы увидеть разницу.