Путаница над простым объявлением переменной jQuery "$ variable" vs javascript "var"

У меня есть эта простая реализация призрачного текста:

Код HTML:

<div id="searchPanel">
     <form method="get" id="searchBox" action="somePage.php">
     <input class="ghText" type="text" name="query" value="search here"/>
     </form>
</div>

Код jQuery:

$(document).ready(function(){
        $txtField = "#searchPanel form input.ghText";
        var value = $($txtField).val();
        $($txtField).focus(function(){
            if($(this).val() == value)
                $(this).val("").removeClass("ghText");
        });
        $($txtField).blur(function(){
            if($(this).val()==""){
                $(this).val(value).addClass("ghText");
            }
        });
});

Приведенный выше пример не будет работать. Когда пользователь фокусирует курсор на строке поиска, класс "ghText" по какой-то причине не удаляется.

Однако теперь, если я изменил значение "var" (переменная инициализация) и "значение" с помощью "$ value", как в:

$value = $($txtField).val(); 
$(this).val($value).removeClass("ghText");
$(this).val($value).addClass("ghText");

все работает отлично.

Я могу просто заснуть и не слишком беспокоюсь об этом... но мне очень любопытно, почему что-то подобное может случиться?

это из-за того, что "this" не ссылается на правый объект, или это потому, что я попытался сохранить объект jQuery в переменной, отличной от jQuery, или это о чем-то еще. Кто-нибудь может указать мне, что было не так? Я всегда думал, что "var x" совпадает с "$ x"..?

Ответы

Ответ 1

Кажется, вы смущены переменными JavaScript. Нет такой вещи, как "переменные jQuery" и "переменные без jQuery". Некоторые конкретные случаи:

Переменная, объявленная с помощью var, отличается от переменной без нее. "var x" - это локальная переменная, поэтому она не будет использовать значение с другими функциями, которые также имеют переменную, называемую "x". Это почти всегда хорошо, поэтому вы должны почти всегда объявлять переменные с помощью "var".
$in jQuery является своего рода специальным. Это не так уж и важно; это просто, что jQuery объявила переменную под названием "$", которая выполняет некоторые причудливые операции.
Нет ничего особенного в переменных, начинающихся с "$". Другими словами, "$ x" - это просто имя переменной. Это переменная "x", и это не "переменная jQuery". Это просто переменная JavaScript, называемая "$ x". (Это отличается от PHP, где $- фактически специальный синтаксис переменной.)

Таким образом, вы можете просто назвать это "значение" вместо "$ value".

Возможно, факт, что вы удалили "var", изменили ситуацию, превратив ее в глобальную переменную.

Что касается "this", да, это сложный аспект JavaScript и может вызвать вашу проблему. Значение "this" внутри внутренних функций "фокус" и "размытие", вероятно, будет отличаться от значения "this" снаружи. Я не уверен точно, что "this" относится к обработчику событий, но это не будет тот же объект. Итак, что вы, вероятно, захотите сделать, это присваивать переменной "this" переменной во внешней функции, а затем ссылаться на эту переменную внутри вместо "this".

Ответ 2

При сохранении выбора jQuery в переменной его обычной практикой следует добавить $ перед именем переменной следующим образом:

var $banner = $('#banner');

Не обязательно включать знак доллара - var banner = $(‘#banner’) - будет работать так же хорошо. Однако знак доллара напоминает вам, что переменная содержит выбор jQuery, а не только любое старое значение, например число или строку.

Ответ 3

@mgiuca полностью прав насчет переменных Javascript - предшествующее им "$" - это просто соглашение об именах, которое наиболее часто используется для идентификации объектов jQuery. Я добавляю это, потому что вы говорите

потому что я попытался сохранить объект jQuery в переменной non-jQuery

но это неправильно. $txtField - это строка, которую вы используете для выбора объекта. Если вы хотите сохранить сам объект, вы должны сделать $txtField = $(#searchPanel form input.ghText), а затем использовать его таким образом $txtField.val().

Сказав, что ваш код работает отлично для меня неизменным. Я настроил демонстрацию, которая работает в Chrome, - это вырезанная версия вашего кода?

Ответ 4

В дополнение к @mgiuca ответ здесь немного более продуманный подход к вашей проблеме, который также показывает некоторые из jQuery:

$(document).ready(function () { 
  // define two helper functions
  var removeDefault = function () {
    if( $(this).val() == $(this).data("defaultValue") ) {
      $(this).val("").removeClass("ghText");
    }
  };
  var setDefault = function () {
    if( $(this).val() == "" ) {
      $(this).val( $(this).data("defaultValue") ).addClass("ghText");
    }
  };
  // the following works on all input elements
  $("#searchPanel form input.ghText").each(function () {
    $(this)
    .data("defaultValue", $(this).val())
    .focus(removeDefault)
    .blur(setDefault);
  });
});

Примечание

использование .data() для привязки значения к определенному элементу.
использование .each() для применения одного и того же поведения к любому количеству элементов
ссылки на функции использования для .focus() и .blur() - jQuery всегда будет устанавливать this самостоятельно
Посмотрите, как он работает здесь http://jsfiddle.net/xsXxn/

Ответ 5

Итак, $x - переменная jQuery в конце концов:)... Ну, во всяком случае, вот один экземпляр, когда $или not $сделал большую разницу в моем коде:

... load ( "whatever.php", {par1: var1, par2: var2})

не работал, по крайней мере внутри назначения $(obj).attr(), если не используется переменная $var1, $var2. Это сработало:

$(obj).attr( "onClick", $( "# wherever" ). load ( "whatever.php", {par1: $var1, par2: $var2})...