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

Question

Можно создать дубликат:
jQuery $(this) vs this

В JQuery иногда я нахожу, что в функции я должен использовать $(this) потому this не будет работать:

var listItems = $('li'); 
listItems.each(function(index) { 
    $(this).css({ 

    }) 
}) 

Любые идеи по причине почему?

Answer 1

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

Так в основном, вы превращая DOM reference в jQuery object

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

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

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

Answer 2

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

Answer 3

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

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

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

Answer 4

Я знаю, что я немного опоздал на эту тему, но я просто хотел рассказать о том, что избыточная упаковка объектов 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/

Answer 5

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