Когда использовать $ (this) и не медленнее ли это? - PullRequest
Новая
       25

Когда использовать $ (this) и не медленнее ли это?

1 голос
/ 06 июля 2011

В jQuery мы можем делать как ... 

$('.button').click( function() {

    $(this).hide();

} );

Но мы, конечно, тоже можем поступить так: 

$('.button').click( function() {

    $('.button').hide();

} );

В чем преимущества использования этого ? Разве это не медленнее?

Я думаю, что ответ на этот вопрос будет что-то вроде ...

Бывают ситуации, когда единственным способом является использование this .

Тогда покажи мне пример этой ситуации! :)

Что мне следует использовать основной (если оба будут работать)?

Ответы [ 5 ]

10 голосов
/ 06 июля 2011

  • Вы должны использовать this, если все, что вы хотите сделать, это получить доступ к свойствам DOM (которые реализованы во всех браузерах, они есть).

    Например: this.href (<a>), this.src (<img>), this.id (все элементы (если установлены)) и т. Д. Это быстрый способ, поскольку вы не выполняете вызов функции в jQuery.

  • Вы должны использовать $(this), если хотите применить функции jQuery к элементу DOM.

  • Вам следует избегать , используя $(selector), если у вас уже есть ссылка на этот элемент. Поиск DOM снова медленнее.

В строке 92 исходного кода вы можете увидеть , что при передаче элемента HTML ничего особенного не происходит.

Также обратите внимание, что $(this).hide() и $('.button').hide(); не эквивалентны. Первый будет скрывать только выбранный элемент, а второй - все элементы .button.

4 голосов
/ 06 июля 2011

this относится к фактическому нажатому элементу, где $('.button').hide(); скрывает все элементы с классом button.

Они не работают одинаково, и даже если бы они работали, this на самом деле был бы быстрее, поскольку $('.button') должен снова найти элемент из всего документа.

2 голосов
/ 06 июля 2011

Использование $(this) медленнее, чем использование this напрямую, но не медленнее (в общем случае), чем повторное попадание в DOM с помощью $('.button') внутри вашего обработчика.

Разница в ключах междуво-вторых, this всегда будет одним элементом.$('.button') может быть любым количеством элементов.То, что вы используете, зависит от того, что вы хотите скрыть.

Так что, если вы хотите работать с нажатой кнопкой только : 

// Fastest if using DOM methods / properties
this.SOME_DOM_METHOD();

// Fastest if using some jQuery method that can take a DOM element
jQuery.method_that_takes_an_element(this, additional, args);

// Fastest if using a jQuery method that cannot take a DOM element
jQuery(this).SOME_JQUERY_METHOD();

Если вы хотите работать с всеми элементами с классом button: 

// Fastest if no new .button elements will be created
var buttons = $('.button');
buttons.click(function() {
    buttons.hide();
});

// Slow but I think necessary if new .button elements will be created
$('.some_container').delegate('.button', 'click', function() {
    $('.button').hide();
});
1 голос
/ 06 июля 2011

this указывает на уже существующий объект, вам не нужно вычислять выражение и снова находить элемент , что занимает больше времени и памяти.

1 голос
/ 06 июля 2011

в первом случае вы скрываете только один текущий элемент.во втором случае вы просто скрываете все с помощью кнопки класса

...