Путать в различных сценариях использования объекта jQuery и переменной JavaScript

Question

Я запутался в различиях между этими двумя блоками кода:

$("#someButton").click(function() {
    var button = this;
    $(button).attr('disabled', 'disabled');
}

$("#someButton").click(function() {
    var button = $(this);
    $(button).attr('disabled', 'disabled');
}

Обратите внимание на разницу в том, что хранит переменная кнопки.Какой смысл хранить $(this) в переменной button вместо просто this?В конце концов, я все еще использую $(button).jQueryMethod() для управления им, а не button.jQueryMethod().

Answer 1

Разница не так существенна в вашем примере, поскольку вы используете обернутый объект JQuery только один раз.Эта проблема становится более актуальной, если вам нужно многократно использовать объект JQuery.

$("#someButton").click(function() {
    var button = this;
    $(button).attr('disabled', 'disabled');
    $(button).someJQueryMethod();
    ...
    $(button).someOtherJQueryMethod();
}

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

$("#someButton").click(function() {
    var $button = $(this);
    $button.attr('disabled', 'disabled');
    $button.someJQueryMethod();
    ...
    $button.someOtherJQueryMethod();
}

Таким образом, вызов $() вызывается только один раз.Это становится особенно актуальным, если ссылка находится внутри цикла.

Answer 2

В примере 1 кнопка является обычным объектом DOM, потому что при обратных вызовах this просто указывает на обычный объект DOM, а не на объект jQuery. Это хорошо, если вы не планируете выполнять какие-либо дополнительные операции jQuery на this. Однако вы отключаете кнопку в следующей строке, используя вызов jQuery для .attr(). Я бы использовал второй блок, написанный так:

$("#someButton").click(function() {
    $(this).attr('disabled', 'disabled');
}

Таким образом, вы можете исключить дополнительную переменную, которую вы, похоже, не используете, а также удалить дополнительную операцию запроса для $(button)

Answer 3

$("#someButton").click(function() {
    var button = $(this);
    $(button).attr('disabled', 'disabled');
}

является избыточным

, потому что вы делаете JQuery Дважды!.

$("#someButton").click(function() {
    var button = $(this);
   button .attr('disabled', 'disabled');
}

Answer 4

Во втором случае вы можете сделать это:

button.attr('disabled', 'disabled');

Переменные jQuery принято называть префиксом:

var $button = $(this);

$button.attr('disabled', 'disabled');

Answer 5

Вам нужно будет использовать $(this), если вы хотите использовать jQuery API для элемента.В вашем примере вы просто пытаетесь получить элемент, поэтому оба подхода будут работать.

просто получая элемент, поэтому оба метода будут работать.

Когда использовать $(this):

var button = $(this).css({ "border" : "1px solid red" });

Когда вы можете просто использовать this:

var button = this.style.border = "1px solid red";