JQuery вопрос о переменных и селекторах

Question

В последнее время я делаю это, чтобы повысить производительность (а иногда это помогает с ремонтопригодностью)

var objectToReference = $('div .complicated #selector ul:last');

Так что же на самом деле держит objectToReference? Иногда что-то укусило меня, поэтому я вернулся к использованию полного селектора, и это сработало.

Так что переменная содержит ссылку, указатель и т. Д. (Я не уверен, точное определение этих терминов)

Спасибо

Answer 1

Лучшая практика, которую многие люди используют при создании такой переменной, - именовать ее, начиная с $, чтобы указать, что это объект jquery. Таким образом, вы можете назвать переменную $ o, и вы можете напрямую вызывать другие функции цепочки jQuery после нее, без необходимости помещать $ () вокруг переменной.

$o.hide();

Хорошей идеей будет начать с окружающего элемента для области, которой вы манипулируете, чтобы избежать необходимости поиска по всему документу. Например, чтобы получить все ссылки в одном разделе документа (без необходимости поиска по всему документу):

var $o = $('#mysection');
var $links = $('a', $o); // equiv to $o.find('a')

Наконец, никогда не помешает передать объект jQuery обратно через jQuery:

$o === $($o)

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

function myFunc(e) {
    var $e = $(e);
}
// All of the following will work:
myFunc('#mysection');
myFunc(document.getElementById('mysection'));
myFunc($('#mysection a'));

Answer 2

Возвращаемое значение селектора jQuery представляет собой массив элементов jQuery. Если селектор не находит совпадений, то он содержит массив с 0 элементами.

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

Answer 3

Содержит ссылку на возвращенный объект jQuery. Любые изменения в объекте изменяют базовый элемент DOM и все другие ссылки на тот же элемент.

$('div .complicated #selector ul:last')

Ваша переменная objectToReference будет объектом jQuery, с которым вы можете выполнять операции jQuery. Кроме того, даже если вам это не нужно, вы также можете использовать objectToReference для создания нового объекта jQuery, который не должен налагать каких-либо ограничений производительности, поскольку он должен просто возвращать ссылку на себя, а не повторно искать этот элемент .

var objectToReference = $('div .complicated #selector ul:last');
var copyOfObject = $(objectToReference);

Возможно, вы столкнулись с проблемами, пытаясь сослаться на свойства DOM objectToReference. Если вы хотите получить базовый элемент DOM вашего objectToReference, возвращаемого селектором jQuery, вы можете сделать это:

var objectToReference = $('div .complicated #selector ul:last');
var domOfObject = objectToReference.get(0);

Или, при желании, вы можете сделать это, что делает то же самое в 1 строке:

var domObjectToReference= $('div .complicated #selector ul:last').get(0);

Опять же, вы можете использовать domObjectToReference в конструкторе jQuery для создания другой ссылки на этот объект:

var objectToReference2 = $(domObjectToReference);

Все эти примеры хранят ссылки на элемент DOM. Если вы измените значение одной из ссылок, все они будут изменены / обновлены.

Answer 4

Содержит коллекцию jQuery, которая является массивом. Возможно, вы попали в беду, если DOM изменился на вас.

---

Посмотрел немного дальше и обнаружил, что коллекция (которую вы можете рассматривать как массив) - это объект с массивоподобными свойствами.

http://www.learningjquery.com/2008/12/peeling-away-the-jquery-wrapper-and-finding-an-array

Имейте в виду, что массивы и объекты очень похожи в JavaScript. Для получения дополнительной информации см. Мой пост Kirk & Cheesecake .

Answer 5

Для тех, кто заинтересован, я опубликовал V2 справочника jQuery, если вы хотите посмотреть, что он здесь: http://www.skidoosh.co.uk/jquery/jquery-selectors-and-attribute-selectors-reference-and-examples-v2/ для jQuery 1.2 Я обновлю его для 1.3 через несколько дней.