Что возвращает селектор jquery

Почему селектор jQuery возвращает объект?

Ребята, такой вопрос использую селектор $(«#qty»);
Но он возвращает не элемент, а какой-то объект, причем потом, когда я хочу что-то изменить у этого элемента, эти операции не работают.
Спасибо!

• Вопрос задан более трёх лет назад
• 1094 просмотра

Комментировать
Решения вопроса 1

Если вам нужно изменить элемент через нативный js, то получить этот элемент из объекта jQuery можно двумя способами:
1. var element = $(«#qty»).get(0); (можно использовать с отрицательными индексами)
2. var element = $(«#qty»)[0]; (немного быстрее, но без отрицательных индексов)

Вот только зачем вам получать элемент через jQuery и менять его свойства через ванильный js я не понимаю. Изучите документацию jQuery . Я уверен, вы найдете там интересующие вас методы работы с dom деревом.

UPD:
Я полагаю, что ваш обработчик клика выглядит как-то так

$('#some_btn').on('click', function () < console.log($("#qty").val()); >);

Так как вы грузите ajax-ом, то элемента #qty еще не существует. Вам необходим следующий обработчик клика:

$(document).on('click', '#some_btn', function(event) < var input = $("#qty"); console.log(input.val()); >);

Данный процесс называется event delegation, о нем можно прочитать здесь
Ответ написан более трёх лет назад
Нравится 1 9 комментариев

Konstantin Kudelko @Flawming Автор вопроса
я не меняю его через ванильный js. Я просто хочу взять значение инпута, .val() но оно не берется =/

Flawming: я понял, что вы грузите элемент через ajax. Вы пытаетесь взять его значение при загрузке страницы или после какого-то события?

Konstantin Kudelko @Flawming Автор вопроса
после клика на кнопку +, но если я даже вывожу в кансоли значение инпута он пишет undefined

Konstantin Kudelko @Flawming Автор вопроса
Игорь: поэтому мне кажется вся загвоздка в AJAX
Flawming: Я обновил ответ

Flawming: document ready дает понять, что скрипт должен исполнится после того, как отрендерилось dom дерево. Повесьте клик на кнопку по примеру в ответе и посмотрите результат

jQuery( «#id» )

Для поиска jQuery использует JavaScript функцию document.getElementById().

В документе должен быть только один элемент с заданным id. Если их несколько, то будет выбран только первый. Однако, данная практика плохая — документ должен быть валидным.

Примеры

Пример: выбрать элемент с и задать ему красную рамку.

     div   
id="notMe"
 
id="myDiv"
    

Пример: выбрать элемент с экранировав специальные символы.

     div   
id="myID.entry[0]"
 
id="myID.entry[1]"
 
id="myID.entry[2]"
    

Шпаргалка jQuery:

• Ajax
  • Global Ajax Event Handlers
    • .ajaxComplete()
      • :button
      • :checkbox
      • :checked
      • :disabled
      • :enabled
      • :file
      • :focus
      • :image
      • .serializeArray()
      • .serialize()
      • jQuery.param()
      • jQuery.ajax()
      • jQuery.ajaxSetup()
      • jQuery.ajaxPrefilter()
      • jQuery.ajaxTransport()
      • jQuery.get()
      • jQuery.post()
      • .load()
      • jQuery.getJSON()
      • jQuery.getScript()
      • .serialize()
      • .serializeArray()
      • jQuery.param()
      • .val()
      • .blur()
      • .change()
      • .focus()
      • .addClass()
      • .hasClass()
      • .removeClass()
      • .toggleClass()
      • .html()
      • .removeAttr()
      • .prop()
      • .removeProp()
      • .attr()
      • .val()
      • Collection Manipulation
        • jQuery.param()
        • .data()
        • .removeData()
        • Class Attribute
          • .addClass()
          • .hasClass()
          • .removeClass()
          • .toggleClass()
          • .clone()
          • .wrap()
          • .wrapAll()
          • .wrapInner()
          • .unwrap()
          • .append()
          • .appendTo()
          • .html()
          • .text()
          • .prepend()
          • .prependTo()
          • .after()
          • .before()
          • .insertAfter()
          • .insertBefore()
          • .unwrap()
          • .remove()
          • .empty()
          • .detach()
          • .replaceAll()
          • .replaceWith()
          • .removeProp()
          • .removeAttr()
          • .prop()
          • .attr()
          • .val()
          • .css()
          • .height()
          • .width()
          • .innerHeight()
          • .innerWidth()
          • .outerHeight()
          • .outerWidth()
          • .offset()
          • .position()
          • .scrollLeft()
          • .scrollTop()
          • .height()
          • .width()
          • .innerHeight()
          • .innerWidth()
          • .outerHeight()
          • .outerWidth()
          • jQuery.holdReady()
          • jQuery()
          • jQuery.noConflict()
          • jQuery.when()
          • .addClass()
          • .hasClass()
          • .removeClass()
          • .toggleClass()
          • .css()
          • .height()
          • .width()
          • .innerHeight()
          • .innerWidth()
          • .outerHeight()
          • .outerWidth()
          • .offset()
          • .position()
          • .scrollLeft()
          • .scrollTop()
          • .clearQueue()
          • .dequeue()
          • .data()
          • jQuery.hasData()
          • jQuery.removeData()
          • jQuery.dequeue()
          • .removeData()
          • jQuery.data()
          • .queue()
          • Custom
            • .clearQueue()
            • .dequeue()
            • .queue()
            • .clearQueue()
            • .dequeue()
            • jQuery.dequeue()
            • jQuery.data()
            • .queue()
            • jQuery.proxy()
            • callbacks.add()
            • callbacks.disable()
            • callbacks.disabled()
            • callbacks.empty()
            • callbacks.fire()
            • callbacks.fired()
            • callbacks.fireWith()
            • callbacks.has()
            • callbacks.lock()
            • callbacks.locked()
            • callbacks.remove()
            • jQuery.Callbacks()
            • deferred.always()
            • deferred.done()
            • deferred.fail()
            • deferred.notify()
            • deferred.notifyWith()
            • deferred.progress()
            • deferred.promise()
            • deferred.reject()
            • deferred.rejectWith()
            • deferred.resolve()
            • deferred.resolveWith()
            • deferred.state()
            • deferred.then()
            • Basics
              • Универсальный селектор (“*”)
              • jQuery( «.class» )
              • Селектор элементов (“element”)
              • Селектор ID (“#id”)
              • Множественный (“selector1, selector2, selectorN”)
              • Селектор по префиксу [name|=”value”]
              • Селектор содержащий значение [name*=»value»]
              • Селектор, содержащий слово [name~=»value»]
              • Селектор по атрибуту, на конце которого [name$=»value»]
              • Селектор по равенству [name=»value»]
              • Селектор по неравенству [name!=»value»]
              • Значение атрибута начинается с [name^=»value»]
              • Селектор по наличию атрибута [name]
              • Множественный селектор по атрибуту [name=»value»][name2=»value2″]
              • :animated Selector
              • :eq()
              • :even
              • :first
              • :focus
              • :gt()
              • :header
              • :lang()
              • :last
              • :lt()
              • :first-child
              • :first-of-type
              • :last-child
              • :last-of-type
              • :nth-child()
              • :nth-last-child()
              • :nth-last-of-type()
              • :nth-of-type()
              • :only-child
              • :only-of-type
              • :contains()
              • :empty
              • :has()
              • :parent
              • Browser Events
                • .resize()
                • .scroll()
                • .ready()
                • .bind()
                • .delegate()
                • jQuery.proxy()
                • .off()
                • .one()
                • .trigger()
                • .triggerHandler()
                • .unbind()
                • .undelegate()
                • event.currentTarget
                • event.data
                • event.delegateTarget
                • event.isDefaultPrevented()
                • event.isImmediatePropagationStopped()
                • event.isPropagationStopped()
                • event.metaKey
                • event.namespace
                • event.pageX
                • event.pageY
                • event.preventDefault()
                • event.relatedTarget
                • event.result
                • event.stopImmediatePropagation()
                • event.stopPropagation()
                • event.target
                • event.timeStamp
                • event.type
                • event.which
                • .blur()
                • .change()
                • .focus()
                • .focusin()

                Комплексный взгляд на селекторы jQuery

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

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

                Селекторы jQuery

                Основная цель этих селекторов – выбрать элементы на веб-странице, которые соответствуют определенным критериям. Критериями могут быть что угодно, например, их идентификатор, имя класса, атрибуты или комбинация любого или всех из них. Большинство селекторов в jQuery основаны на существующих селекторах CSS, но библиотека также имеет свои собственные селекторы.

                Основные селекторы

                Вы можете выбрать элементы на веб-странице, используя их идентификатор $(«#id») , их класс $(«.class») или имя тега $(«li») . Вы также можете использовать комбинацию этих селекторов, таких как $(«.class tag») или выбрать комбинированный результат из нескольких селекторов, таких как $(«selectorA, selectorB, selectorC») .

                JQuery также предлагает несколько других основных селекторов, которые я перечислил ниже:

                • Селектор заголовка – допустим, вы должны выбрать все заголовки, такие как , , в . В этом случае вы можете использовать либо многословный селектор $(«section h1, section h2, section h3») , либо гораздо более короткий селектор $(«section :header») . Оба будут выполнять одинаковую работу, а последний сравнительно легче читать. Селектор заголовка установил фон всех заголовков на желтый в этой демонстрации .
                • : target Selector – этот селектор возвращает элемент, id которого совпадает с идентификатором фрагмента или хэшем URI документа. Например, если URI «https://sitepoint.com/#hash». Затем селектор $(«h2:target») выберет элемент .
                • : animated Selector – этот селектор возвращает все элементы, у которых выполняется анимация при запуске селектора. Это означает, что любой элемент, анимация которого начинается после выполнения селектора, не будет возвращен. Также имейте в виду, что если вы используете пользовательскую сборку jQuery без модуля эффектов, этот селектор выдаст ошибку. В этой демонстрации только анимированная рамка становится оранжевой из-за селектора.

                Индексные селекторы

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

                Вот список всех селекторов на основе индекса:

                • : eq (n) Selector – этот селектор вернет элемент с индексом n . Начиная с версии 1.8, он принимает как положительные, так и отрицательные значения индекса. Когда задано отрицательное значение, отсчет происходит назад от последнего элемента.
                • : lt (n) Selector – этот селектор вернет все элементы с индексом меньше n . Он также принимает как положительные, так и отрицательные значения начиная с версии 1.8. Как и селектор :eq(n) , когда предоставляется отрицательное значение, отсчет происходит в обратном направлении от последнего элемента.
                • : gt (n) Selector – этот селектор похож на :lt(n) . Единственное отличие состоит в том, что он возвращает все элементы с индексом, большим или равным n .
                • : first Selector – возвращает первый соответствующий элемент DOM на веб-странице. Это эквивалентно :eq(0) и :lt(1) . Одно из различий между селектором :first и :first-child заключается в том, что :first-child может выбирать несколько элементов, каждый из которых является первым потомком своего родителя.
                • : last Selector – Этот аналогичен селектору :first , но возвращает последнего потомка.
                • : Even Selector – Это вернет все элементы с четным индексом. Поскольку индексирование в jQuery начинается с нуля, селекторы выбирают первый дочерний, третий дочерний и так далее. Это кажется нелогичным, но вот как это работает.
                • : odd Selector – Этот работает как селектор :even , но возвращает элементы с нечетными индексами.

                В следующем примере вы можете нажать на три кнопки :lt :gt и :eq и они будут случайным образом генерировать индекс и применять полученный селектор к списку:

                Как видите, использование :first и :last выбирает только первый и последний элементы на веб-странице, а не внутри каждого родителя.

                Дочерние селекторы

                jQuery позволяет выбирать дочерние элементы элемента на основе их индекса или типа. Дочерние селекторы CSS отличаются от селекторов jQuery в том смысле, что они не используют индексацию с нуля.

                Вот список всех дочерних селекторов:

                • : first-child – Этот селектор возвращает все элементы, которые являются первыми дочерними элементами их родителей.
                • : first-of-type – Этот выбирает все элементы, которые являются первыми в своем роде среди многих других.
                • : last-child – это выберет последнего потомка родителя. Так же, как :first-child , он может выбрать несколько элементов в случае многих родителей.
                • : last-of-type – выбирает всех потомков, которые являются последними в своем типе в родителе. В случае нескольких родителей, он может выбрать несколько элементов.
                • : nth-child () – Это немного сложно. Он может принимать различные значения в качестве параметра, такие как число, большее или равное 1, even и odd строки или уравнение, подобное 4n+1 .
                • : nth-last-child () – Этот селектор похож на предыдущий и принимает те же параметры. Разница лишь в том, что он начинает считать с последнего ребенка.
                • : nth-of-type () – этот селектор возвращает все элементы, которые являются n-ными дочерними элементами их родителей по отношению к их братьям и сестрам с одинаковыми именами.
                • : nth-last-of-type () – этот селектор функционирует так же, как селектор :nth-of-type() , но отсчет начинается с конца.
                • : only-child – Как следует из его названия, этот селектор возвращает все элементы, которые являются единственным потомком своего родителя. Если у родителя более одного ребенка, ничего не будет выбрано.
                • : only-of-type – этот селектор возвращает все элементы, у которых нет родных элементов одного типа.

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

                Следует отметить, что на этот раз границы добавляются к first и last дочернему div в каждом div отдельно.

                Селекторы атрибутов

                Вы также можете выбрать элементы на основе значения их атрибутов. При работе с этими селекторами следует помнить одну очень важную вещь: эти селекторы рассматривают несколько значений, разделенных пробелом, как одну строку. Например, $(«a[rel=’nofollow’]») не будет совпадать с $(«a[rel=’nofollow other’]») .

                Вот список всех селекторов на основе атрибутов:

                • $ («[Attribute | = ‘value’]») – «Атрибут содержит префикс выбора» возвращает все элементы с атрибутами, значение которых равно или начинается с данной строки, за которой следует дефис.
                • $ («[Attribute * = ‘value’]») – этот «атрибут содержит селектор» возвращает все элементы с атрибутами, значение которых содержит данную подстроку. Расположение значения не имеет значения. Пока это соответствует данному значению, селектор будет выбирать элемент.
                • $ («[Attribute ~ = ‘value’]») – этот селектор возвращает все элементы с атрибутами, значение которых содержит данное слово, разделенное пробелами.
                • \ $ («[Attribute $ = ‘value’]») – этот селектор возвращает все элементы с атрибутами, значение которых заканчивается данной строкой.

                Эта демонстрация показывает, как каждый из этих селекторов ведет себя с различными значениями атрибутов: http://codepen.io/brathi/pen/aZovZN

                • $ («[Attribute = ‘value’]») – этот селектор возвращает все элементы с атрибутами, значение которых в точности равно заданной строке.
                • («[Attribute ^ = ‘value’]») – этот селектор вернет все элементы с атрибутами, значение которых начинается именно с заданной строки.

                Эта демонстрация показывает три последних селектора в действии.

                Если вы просто хотите проверить, имеет ли элемент указанный атрибут и не заботится о его значении, вы можете использовать селектор $(«[attribute]») .

                Селекторы контента

                Эти селекторы основаны на содержании внутри элементов. В этой категории четыре селектора.

                • : содержит (текст) – этот селектор возвращает все элементы, которые имеют указанный текст. Текст может появляться либо непосредственно внутри элемента, либо внутри одного из его потомков. При выборе элементов с помощью этого селектора следует учитывать, что текст чувствителен к регистру.
                • : has (селектор) – Этот возвращает все элементы, которые имеют по крайней мере один элемент внутри них, который соответствует указанному селектору. Например, $(«section:has(h2)») выберет все разделы, которые имеют элемент h2 . h2 не должен быть прямым ребенком. Он может существовать где угодно среди потомков.

                Эта демонстрация иллюстрирует, как :contains(text) и :has(selector) работу в различных ситуациях:

                Демонстрация ясно показывает, как селектор :contains(text) заботится только о случае текста, который вы предоставляете. Пока текст и регистр совпадают идеально, селектор не заботится о том, что будет до или после текста.

                • : empty – возвращает все элементы, которые не имеют дочерних элементов, включая текстовые узлы.
                • : parent – этот селектор возвращает все элементы, которые имеют хотя бы один дочерний узел. Дочерний узел может быть элементом или текстовым узлом. В этом смысле, это обратный :empty селектор.

                Селектор иерархии

                Эти селекторы используют иерархию DOM в качестве критерия для выбора элементов, который объясняет название категории. Вот список всех таких селекторов:

                • $ («Потомок предка») – этот селектор возвращает все элементы-потомки данного родителя. Потомок может быть ребенком, внуком и тд.
                • $ («Parent> child») – этот селектор более специфичен, чем предыдущий, и возвращает только прямые потомки родителя.

                Эта демонстрация показывает все селекторы иерархии в действии.

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

                Селекторы форм

                jQuery предоставляет более короткую версию селекторов для большинства элементов ввода в форме. Они классифицируются как селекторы форм .

                Например, чтобы выбрать элемент кнопки или элементы с типом button, вы можете использовать более короткий селектор $(«:button») вместо более длинной версии $(«button, input[type=’button’]») . Аналогично, чтобы выбрать все элементы с типом radio, вы можете использовать селектор $(«:radio») вместо $(«[type=radio]») .

                Эта демонстрация иллюстрирует, как вы можете использовать все эти селекторы для подсчета элементов в форме.

                Вы также можете выбрать все элементы, которые включены или отключены с помощью селекторов $(«:enabled») и $(«:disabled») соответственно. Эти селекторы следует использовать только для элементов, которые поддерживают атрибут disabled, таких как , и и т. Д.

                Также имеется селектор $(«:checked») , который будет выбирать все элементы, которые либо отмечены, либо выбраны. Это относится к флажкам, переключателям и опциям select элементов. Если вы просто хотите получить параметры select элементов, вы должны использовать вместо этого $(«:selected») .

                Желтая рамка вокруг различных элементов в этой демонстрации предполагает, что они были выбраны нашими конкретными селекторами.

                Селекторы видимости

                Есть еще два важных селектора, о которых вы должны знать :: visible и : hidden . Как следует из названия, они возвращают все элементы, которые являются видимыми или скрытыми, соответственно.

                В jQuery элемент считается скрытым в четырех случаях:

                • его свойство display установлено в none ,
                • его width и height установлены на ноль,
                • любой из его предков скрыт, или
                • это элемент формы с type=»hidden» .

                Правило о высоте и ширине изменилось в jQuery 3, и это будет обсуждаться в следующем разделе.

                Так как элементы с непрозрачностью, установленной на 0, или видимостью, скрытой, по-прежнему занимают место, они считаются видимыми. Это означает, что $(«elem»).css( «visibility», «hidden» ).is( «:hidden» ) вернет false .

                Любой элемент с нулевой непрозрачностью будет по-прежнему считаться видимым, как видно из демонстрации ниже, где прозрачный div получает оранжевый цвет от селектора: :visible :

                Изменения в jQuery 3

                С выпуском jQuery 3 кое-что изменилось в отношении селекторов. Пользовательские селекторы, такие как :visible и :hidden , теперь в некоторых случаях работают в 17 раз быстрее .

                Кроме того, теперь элемент будет считаться видимым, если у него есть поле макета, возвращаемое методом getClientRects из DOM, независимо от того, getClientRects ли высота или ширина элемента нулю.

                Библиотека теперь также будет выдавать ошибки, если строка селектора содержит только хеш-символ. В предыдущих версиях $(«#») возвращал пустую коллекцию и find(«#») выдавал ошибку, но теперь они оба будут считаться недействительными.

                Кэширование возвращаемых элементов

                jQuery позволяет действительно легко выбрать любой элемент, используя сложные селекторы. Например, чтобы выбрать все ссылки с классом externalLink , вы можете просто использовать $(«a .externalLink») . Тем не менее, выбор таких элементов – задача, требующая высокой производительности, потому что jQuery должен повторно сканировать DOM для каждого такого вызова.

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

                В качестве примера:

                $("a .externalLink").click( function ()  $("a .externalLink").removeClass("marked"); $("a .externalLink").addClass("visited"); >); 

                можно записать как:

                var $linkExternal = $("a .externalLink"); $linkExternal.click( function ()  $linkExternal.removeClass("marked"); $linkExternal.addClass("visited"); >); 

                Таким образом, браузер должен сканировать документ только один раз, а не три раза. Даже если прирост производительности в этом случае может быть минимальным, при использовании большого количества селекторов улучшение будет значительным.

                Кстати, производительность селектора :visible также была улучшена за счет использования кэширования .

                Резюме

                В этом руководстве рассматриваются почти все селекторы jQuery, которые вы можете использовать в проекте. Я также попытался указать на тонкие различия, которые вы должны иметь в виду при использовании этих селекторов. Если у вас есть какие-либо вопросы, связанные с этой статьей, пожалуйста, дайте мне знать в комментариях!

                Работа с DOM-объектами

                

                Доступ к возможностям jQuery осуществляется с помощью функции библиотеки jQuery $(. ), которую мы будем называть просто функцией $(). Эта функция служит точкой входа в волшебный мир jQuery, а символ $ является удобным коротким псевдонимом пространства имен jQuery. Следующие два примера аналогичны (выводят сообщение после загрузки страницы):

                jQuery(document).ready(function(e) < alert('Привет') >); $(document).ready(function(e) < alert('Привет') >);

                Библиотека jQuery — не единственная библиотека JavaScript, в которой используется переменная $, что может привести к конфликтам имен, если в одном документе используется одновременно несколько библиотек. Чтобы не допустить возникновения проблем такого рода, можно передать контроль над переменной $ другим библиотекам, вызвав метод jQuery.noConflict(), как показано ниже (пример из предыдущей статьи):

                 jQuery.noConflict(); jQuery(document).ready(function(e) < jQuery("img:odd").mouseenter(function(e) < jQuery(this).css("opacity", 0.5); console.log('Вы навели мышь на элемент  '); >).mouseout(function(e) < jQuery(this).css("opacity", 1.0); console.log('Вы убрали мышь с элемента  '); >); >);

                Вы даже можете сами определить псевдоним для функции jQuery(). Это делается путем присваивания выбранной вами переменной результата вызова метода noConflict():

                 var jq = jQuery.noConflict(); jq(document).ready(function(e) < jq("img:odd").mouseenter(function(e) < jq(this).css("opacity", 0.5); console.log('Вы навели мышь на элемент  '); >).mouseout(function(e) < jq(this).css("opacity", 1.0); console.log('Вы убрали мышь с элемента  '); >); >);

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

                Варианты вызова основной функции jQuery()

                Вариант вызова	Описание
                $(функция)	Позволяет указать функцию, которая должна быть выполнена по завершении построения DOM
                $(селектор) $(селектор, контекст)	Осуществляет выбор группы элементов в документе с помощью селектора
                $(HTMLElement) $(HTMLElement[])	Создает объект jQuery из объекта или массива объектов HTMLElement
                $()	Создает пустой набор элементов
                $(HTML-код)	Создает новые элементы из фрагмента HTML-кода

                Ожидание готовности DOM-модели

                Библиотека jQuery предлагает свой способ регистрации события загрузки страницы. Соответствующий код представлен в примере ниже:

                $(document).ready(function(e) < // Выполняемый код >);

                В этом сценарии мы передаем переменную document функции $() в качестве аргумента и вызываем метод ready(), передавая ему функцию, которую хотим выполнить после окончания загрузки и готовности DOM к работе. Можете поместить этот элемент script в любое место документа, будучи уверенным в том, что jQuery не допустит преждевременного выполнения функции.

                Функция function(), передаваемая методу ready(), будет вызвана лишь после загрузки документа, но не раньше, чем завершится построение DOM.

                Часто совершают ошибку, опуская в этой магической формуле ключевое слово function, определяющее следующий за ним блок инструкций как анонимную функцию, и передавая методу ready() простую последовательность инструкций JavaScript. Это не сработает. Инструкции будут выполнены браузером сразу же после их синтаксического разбора, а не после того, как DOM-дерево будет готово к использованию. В этом позволяет убедиться следующий пример:

                 function countImgElements() < return $('img').length; >$(document).ready(function() < console.log("Вызвана функция ready. Счетчик картинок: " + countImgElements()); >); $(document).ready( console.log("Вызвана инструкция ready. Счетчик картинок: " + countImgElements()) );

                Здесь метод ready() вызывается дважды: первый раз — с использованием ключевого слова function, а второй — с передачей обычной инструкции JavaScript в качестве аргумента. В обоих случаях вызывается функция countImgElements(), возвращающая общее количество элементов img в DOM. Загрузив документ, вы получите в окне консоли следующий результат:

                

                Как видите, выполнение инструкции без ключевого слова function происходит при загрузке документа еще до того, как браузер обнаружит в нем элементы img и создаст соответствующие DOM-объекты.

                Использование альтернативной нотации

                При желании можете передать свою функцию в качестве параметра непосредственно $-функции jQuery. При таком способе записи вызова результат будет тем же, что и в случае вызова $(document).ready(). Описанный подход используется в примере ниже:

                $(function() < console.log($('img').length); >);

                Задержка срабатывания события ready

                Используя метод holdReady(), можно управлять моментом срабатывания события ready. Это может пригодиться в тех случаях, когда вы хотите использовать динамическую загрузку внешних ресурсов (эффективный, но пока что редко применяемый прием). Метод holdReady() следует вызывать дважды: до срабатывания события ready и когда DOM достигнет состояния готовности. Пример использования этой методики приведен в примере ниже:

                $.holdReady(true); $(document).ready(function() < console.log("Сработало событие ready"); $("img:odd").mouseenter(function(e) < $(this).css("opacity", 0.5); >).mouseout(function(e) < $(this).css("opacity", 1.0); >) >); setTimeout(function() < console.log("Отмена задержки"); $.holdReady(false); >, 5000);

                Первой инструкцией в этом сценарии является вызов метода holdReady(). В качестве аргумента ему передается значение true, указывающее на необходимость задержки срабатывания события ready. Далее мы определяем функцию, которая должна быть выполнена при срабатывании события ready (она содержит тот же набор инструкций, который использовался в предыдущей статье для изменения непрозрачности изображений, но оформленный в виде функции).

                Наконец, мы используем метод setTimeout() для вызова функции по истечении 5 секунд. Эта функция содержит вызов метода holdReady() с аргументом false, указывающим jQuery на необходимость освобождения события ready для его последующей обработки. Конечный результат состоит в том, что событие ready срабатывает с задержкой в 5 секунд. В сценарий включены также отладочные инструкции, которые после загрузки документа в браузер выводят на консоль следующую информацию:

                

                Метод holdReady() можно вызывать многократно, но количество вызовов с аргументом true должно совпадать с количеством вызовов с аргументом false, прежде чем будет запущено событие ready.

                Выбор элементов

                Одна из самых важных областей применения функциональности jQuery — это выбор элементов DOM. В качестве примера ниже показано, как осуществить выбор нечетных элементов img:

                var imgOdd = $('img:odd');

                Чтобы выбрать элементы, вы просто передаете селектор функции $(). Библиотека jQuery поддерживает все множество CSS-селекторов, а также некоторые дополнительные селекторы, которые обеспечивают удобные возможности детализированного управления процессом выбора элементов. В данном примере используется псевдоселектор :odd, который выбирает нечетные элементы, соответствующие основной части селектора (в данном случае это селектор img, который выбирает все элементы ).

                В случае использования селектора :odd отсчет элементов начинается с нуля, т.е. первый элемент является четным. Поначалу это может сбивать вас с толку. Наиболее полезные селекторы jQuery перечислены в таблице ниже:

                Расширенные селекторы jQuery

                Селектор	Описание
                :animated	Выбирает все анимируемые в данный момент элементы
                :contains(текст)	Выбирает все элементы, содержащие указанный текст
                :eq(n)	Выбирает элемент с индексом n (индексы отсчитываются от нуля)
                :even	Выбирает все четные элементы (индексы отсчитываются от единицы)
                :first	Выбирает первый из подходящих элементов
                :gt(n)	Выбирает все элементы, индекс которых превышает n (индексы отсчитываются от нуля)
                :has(селектор)	Выбирает элементы, которые содержат хотя бы один элемент, соответствующий указанному селектору
                :last	Выбирает последний из подходящих элементов
                :lt(n)	Выбирает все элементы, индекс которых меньше n (индексы отсчитываются от нуля)
                :odd	Выбирает все нечетные элементы (индексы отсчитываются от единицы)
                :text	Выбирает все текстовые элементы

                Я назвал эти селекторы наиболее полезными, поскольку они определяют функциональность, обеспечить которую с помощью селекторов CSS было бы нелегко.

                В jQuery определены также селекторы, позволяющие выбирать элементы в соответствии с их типом:

                Расширенные селекторы типов, определенные в jQuery

                Селектор Описание Соответствующий элемент html :button Выбирает все элементы типа button :checkbox Выбирает все элементы типа checkbox :file Выбирает все элементы типа file :header Выбирает все элементы заголовков , и т.д. :hidden Выбирает все скрытые элементы :image Выбирает все элементы input для изображений :input Выбирает все элементы input :parent Выбирает все элементы, являющиеся родительскими по отношению к другим элементам :password Выбирает все элементы, являющиеся паролями :radio Выбирает все элементы типа radio :reset Выбирает все элементы типа reset :selected Соответствует всем выбранным элементам

                 Option 

                Сужение области поиска с помощью контекста

                По умолчанию jQuery осуществляет поиск элементов в пределах всего DOM-дерева. Область поиска можно сузить, предоставив функции $() дополнительный аргумент. Это позволяет ограничить поиск определенным контекстом, который используется в качестве отправной точки при нахождении подходящих элементов. Соответствующий пример приведен ниже:

                $(document).ready(function(e) < $("img:odd", $('.drow')) .mouseenter(function(e) < . >).mouseout(function(e) < . >); >);

                В этом примере одно множество элементов, выбранных селектором jQuery, используется в качестве контекста для выбора другого множества. Сначала определяется контекст, которому соответствуют все элементы, имеющие класс drow. После этого набор выбранных элементов передается селектору img:odd в качестве контекста.

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

                Конечный результат состоит в том, что эффект изменения непрозрачности применяется к нечетным элементам img в каждом элементе div, принадлежащем классу drow. Этим условиям соответствуют изображения нарцисса и примулы. Если опустить контекст, то эффект будет применен к изображениям нарцисса, пиона и подснежника.

                Выбранный набор элементов

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

                Важные методы и свойства объекта jQuery показаны в таблице ниже:

                Базовые свойства и методы объекта jQuery

                Свойство/метод	Описание	Тип возвращаемого значения
                context	Возвращает набор элементов, используемых в качестве контекста поиска	HTMLElement
                each(функция)	Выполняет указанную функцию для каждого из выбранных элементов	jQuery
                get(индекс)	Получает объект HTMLElement с указанным индексом	HTMLElement
                index(HTMLElement)	Производит поиск указанного объекта HTMLElement среди набора выбранных элементов и возвращает его индекс, если находит его	number
                index(jQuery)	Аналогичен предыдущему методу, но возвращает индекс первого из элементов, содержащихся в указанном объекте jQuery	number
                index(селектор)	Возвращает индекс первого найденного элемента в объекте jQuery, вычисляемый относительно элементов соответствующих селектору	number
                length	Возвращает число элементов в объекте jQuery	number
                selector	Возвращает селектор	string
                size()	Возвращает количество элементов, содержащихся в объекте jQuery	number
                toArray()	Возвращает объекты HTMLElement, содержащиеся HTMLElement в объекте jQuery, в виде массива

                Определение селектора

                Свойство selector возвращает селектор, который описывает набор выбранных элементов, содержащийся в объекте jQuery. Если вы сужаете или расширяете набор выбираемых элементов, то свойство selector возвращает селектор, описывающий объединенный набор операций. Использование свойства selector продемонстрировано в примере ниже:

                var selector = $('img:odd', $('.drow')).selector; console.log("Селектор: " + selector); // Выведет: 'Селектор: .drow img:odd '

                Определение контекста

                Свойство context предоставляет подробную информацию о контексте, который использовался при создании объекта jQuery. Если в качестве контекста использовался единственный объект HTMLElement, то он и будет возвращен свойством context. Если же в качестве контекста использовалось несколько элементов (как в приведенном ранее примере) или он вообще отсутствовал, то свойство context возвратит значение undefined. Пример использования этого свойства представлен ниже:

                var jq1 = $("img:odd"); console.log("Без контекста: " + jq1.context.tagName); var jq2 = $("img:odd", $('.drow')); console.log("Несколько элементов контекста: " + jq2.context.tagName); var jq3 = $("img:odd", document.getElementById("oblock")); console.log("Единственный элемент контекста: " + jq3.context.tagName); 

                В этом сценарии демонстрируются три способа выбора элементов: без контекста, с контекстом в виде нескольких элементов и с контекстом в виде одного элемента. В окне консоли будет выведен следующий результат:

                

                Работа с DOM-объектами

                Библиотека jQuery не подменяет собой DOM-модель, а лишь намного облегчает работу с ней. Объекты HTMLElement можно использовать, как и прежде, но jQuery упрощает переход от объектов jQuery к объектам DOM и обратно. По моему мнению, та простота, с которой можно переходить от традиционной DOM-модели к объектам jQuery и обратно и которая позволяет поддерживать обратную совместимость со сценариями и библиотеками, не связанными с jQuery, является следствием элегантности построения самой библиотеки jQuery.

                Создание объектов jQuery из DOM-объектов

                Объекты jQuery можно создавать, передавая объект или массив объектов HTMLElement функции $() в качестве аргумента. Такой способ удобен при работе с JavaScript-кодом, не ориентированным на jQuery, или в ситуациях, когда jQuery открывает доступ к базовым DOM-объектам, например при обработке событий. Соответствующий пример приведен ниже:

                $(document).ready(function(e) < // Выбираем элементы из DOM стандартным методом JS объекта document var images = document.getElementsByTagName('img'); $(images).mouseenter(function(e) < $(this).css("opacity", 0.5); >).mouseout(function(e) < $(this).css("opacity", 1.0); >); >);

                В этом примере для выбора элементов img в документе вместо непосредственного использования селекторов jQuery применяется метод document.getElementsByTagName(). Результат работы этого метода (коллекция объектов HTMLElement) передается функции $(), возвращающей обычный объект jQuery, который можно использовать так же, как и в предыдущих примерах.

                В данном сценарии попутно демонстрируется создание объекта jQuery из одиночного объекта HTMLElement:

                $(this).css("opacity", 0.5);

                При обработке событий средствами jQuery переменная this ссылается на элемент HTMLElement, обрабатывающий событие.

                Работа с объектами jQuery как с массивами

                Объект jQuery может рассматриваться и как массив объектов HTMLElement. Это означает, что наряду с развитыми средствами, предлагаемыми библиотекой jQuery, по-прежнему можно использовать объекты DOM. Можете использовать свойство length или метод size() для определения числа элементов, которые входят в набор выбранных элементов, содержащийся в объекте jQuery, и получать доступ к отдельным DOM-объектам, используя индексную нотацию массивов (скобки [ и ]).

                Для извлечения объектов HTMLElement из объекта jQuery, рассматриваемого как массив, можно использовать метод toArray(). Лично я стараюсь работать только с объектами jQuery, но иногда, например в случае унаследованного кода, в котором возможности jQuery не используются, удобнее работать непосредственно с DOM-объектами.

                Пример перечисления содержимого объекта jQuery с целью доступа к содержащимся в нем элементам HTMLElement приведен ниже:

                var elems = $('img:odd'); for (var i = 0; i

                В этом примере функция $() используется для выбора нечетных элементов img и их просмотра в цикле с последующим выводом значений свойств tagName и src на консоль. Результат работы сценария выглядит следующим образом:

                

                Итерирование функции по DOM-объектам

                Метод each() позволяет определить функцию, которая будет выполнена для каждого из DOM-объектов, содержащихся в объекте jQuery. Соответствующий пример приведен ниже:

                 $('img:odd').each(function(index, element) < console.log("Элемент: " + element.tagName + " Ссылка: " + element.src); >);

                Библиотека jQuery передает указанной функции два аргумента. Первый из них — это индекс элемента в коллекции, а второй — собственно объект элемента. В данном примере мы выводим на консоль имя дескриптора и значение свойства src, получая при этом тот же результат, что и в предыдущем примере.

                Определение индекса элемента

                Метод index() позволяет находить индекс элемента в объекте jQuery. В качестве аргумента ему можно передать либо HTML-элемент, либо объект jQuery. В последнем случае метод возвращает индекс первого из содержащихся в указанном объекте jQuery элемента. Демонстрационный пример приведен ниже:

                var elems = $('body *'); // Найти индекс с использованием базового DOM API var index = elems.index(document.getElementById("oblock")); console.log("Индекс, найденный с использованием DOM-элемента: " + index); // Найти индекс с использованием другого объекта jQuery index = elems.index($('#oblock')); console.log("Индекс, найденный с использованием объекта jQuery: " + index);

                В этом примере сначала выполняется поиск элемента div по значению атрибута id. Для этого используется метод DOM getElementById(), который возвращает объект HTMLElement. Затем для нахождения индекса объекта, представляющего элемент div, вызывается метод index() объекта jQuery. Далее этот процесс повторяется с использованием объекта jQuery, получаемого посредством функции $(), и оба результата выводятся на консоль, как показано ниже:

                

                Метод get() дополняет метод index() в том смысле, что позволяет получить объект HTMLElement, который занимает в наборе элементов, содержащихся в объекте jQuery, позицию, определяемую указанным индексом. Результат получается тем же, что и при использовании индексной нотации массивов, описанной ранее. Соответствующий пример приведен ниже:

                var element = $('img:odd').get(1); console.log("Элемент: " + element.tagName + " Ссылка: " + element.src);

                В этом сценарии сначала выбираются нечетные элементы img, затем с помощью метода get() запрашивается объект HTMLElement с индексом 1, и, наконец, на консоль выводятся значения свойств tagName и src.

                Похожие публикации:

                1. Invisible recaptcha как работает
                2. Как отключить радио в колонках
                3. Как создать доменную модель
                4. Как создать сертификат