Выборка элементов
Одним из важных функциональностей jQuery является выборка элементов. Чтобы что-то делать с элементами, манипулировать ими, применять к ним методы jQuery, нам надо сначала их получить. Библиотека предоставляет нам удобный способ выбора элементов, основанный на селекторах. Нам достаточно передать в функцию jQuery селектор и мы можем получить нужный нам элемент, который соответствует данному селектору. Например, если необходимо получить все эелементы img , то мы можем использовать следующее выражение: $(«img») . В данном случае «img» будет выступать в качестве селектора.
Рассмотрим основные селекторы jQuery, которые используются для выборки элементов.
Базовые селекторы jQuery
Выборка всех элементов страницы
Например, выражение $(«*»).css(‘background-color’, ‘red’) окрасит все элементы страницы и саму страницу в красный цвет
Выборка всех элементов с данным именем тега
$(«img») выбирает все элементы img
$(«input») выбирает все элементы input
Выборка элемента с данным значением атрибута id
$(«#btn1») выбирает элемент, у которого значение id равно btn1 (например, )
Выборка всех элементов с данным значением атрибута class
$(«.redStyle») выбирает элементы, у которого значение class равно redStyle (например, )
Выборка всех элементов, которые соответствуют указанным селекторам
Например, у нас есть такой код:
то селектор $(«.apple, .orange») выберет элементы, выделенные жирным
Конкретизация выбора
Мы можем использовать сразу несколько селекторов, чтобы более детально настроить выборку элементов. Например, у нас есть такая веб-страница:
Мир jQuery Словарь
Слово | Перевод |
table | таблица |
apple | яблоко |
В данном случае мы используем селектор #tab, то есть выбираем нашу таблицу, которая имеет Выражение css(‘background-color’, ‘silver’) устанавливает цвет элемента — в данном случае серебряный.
Запустив данную страничку в веб-браузере мы получим следующую картину:
Но мы также можем использовать набор селекторов, чтобы более детально произвести действие. Например, нам надо, чтобы была закрашена только первая строка, которая имеет атрибут . Тогда мы можем использовать следующий селектор: $(«#tab .tabhead») . В этом случае селектор выберет элемент с , который находится в элементе с .
При этом мы можем для сужения выборки использовать множество различных селекторов, например: $(«div#menu a.redStyle») . К примеру данный селектор может найти например такой элемент:
В данном случае мы применили иерархический селектор, который подразумевает, что элемент по второму селектору должен находиться в элементе по первому селектору. Но кроме того, мы можем также применить еще ряд иерархических селекторов:
Выборка всех элементов, которые соответстуют второму селектору и являются дочерними для элементов первого селектора
Например, чтобы получить элемент ссылки в предыдущем примере мы можем использовать селектор $(«#menu > a»)
Выборка элементов с селектором ‘селектор2’, которые располагаются непосредственно за элементами ‘селектор1’. Причем оба элемента должны находиться на одном уровне
Например, у нас есть следующий блок ссылок:
1.html 2.html 3.html 4.html 5.html 6.html
Тогда селектор $(«.closed + .open») выберет те ссылки, которые выделены жирным, так как эти элементы с атрибутом идут непосредственно за элементами с атрибутом .
Выборка элементов с селектором ‘селектор2’, которые располагаются на одном уровне с элементами с селектором ‘селектор1’.
Например, у нас есть следующий блок ссылок:
1.html 2.html 3.html 4.html 5.html 6.html
Тогда селектор $(«.closed ~ .open») выберет те ссылки, которые выделены жирным, так как эти элементы с атрибутом находятся на одном уровне с элементами с атрибутом .
Селекторы атрибутов
Чтобы сузить поиск кроме базовых и иерархических селекторов, рассмотренных выше, мы можем применять селекторы атрибутов. В данном случае jQuery будет возвращать элементы в зависимости от значений и определения указанных атрибутов.
Выборка всех элементов с атрибутом attr
Например, выражение $(«a[class]») выберет все элементы ссылок, которые имеют атрибут class
Выборка всех элементов, у которых значение атрибута attr равно value
Например, выражение $(«a[class=’redStyle’]») выберет все элементы ссылок, которые имеют атрибут class=»redStyle»
Выборка всех элементов, у которых значение атрибута attr начинается со строки value
Например, выражение $(«a[class^=’red’]») выбрать элементы ссылок, которые имеют атрибут class=»redStyle» , так как слово ‘redStyle’ начинается на ‘red’.
Выборка всех элементов, у которых значение атрибута attr оканчивается на строку value
Например, выражение $(«a[class$=’Style’]») выбрать элементы ссылок, которые имеют атрибут class=»redStyle» , так как слово ‘redStyle’ оканчивается на ‘Style’.
Выборка всех элементов, у которых атрибут attr имеет список значений, разделенных пробелом, и одно из этих значений равно value
Например, выражение $(«a[class~=’redStyle’]») выбрать элементы ссылок, которые могут иметь следующее значение атрибута class=»redStyle closed» .
Выборка всех элементов, у которых значение атрибута attr имеет имеет подстроку value
Например, выражение $(«a[class*=’Style’]») выбрать элементы ссылок, которые могут иметь следующее значение атрибута class=»redStyle1″ .
Выборка всех элементов, у которых значение атрибута attr представляет либо значение value, либо список значений, разделенных дефисами, и первое значение в этом списке равно value
Например, выражение $(«a[class|=’red’]») выбрать элементы ссылок, которые могут иметь следующее значение атрибута class=»red-freeStyle-closed» .
Контекст селекторов
Выше мы использовали такую запись для выборки элемента: $(селектор). Данное выражение просматривало все дерево DOM на соответствие элемента селектору. Однако мы можем ограничить поиск, применив контекст поиска. Контекст представляет собой селектор, в рамках которого наждо производить выборку элементов. Например, у нас есть такая веб-страница:
Мир jQuery Ссылка 1
Ссылка 2
Ссылка 3
На странице у нас три ссылки, у всех у них определен один и тот же класс, но две из них находятся в элементе div и именно их мы хотим получить. Тогда мы используем выражение $(«.open», «div#menu») — здесь второй параметр-селектор будет являться контекстом выборки. А результатом в данном случае будет следующая страница:
Важно не путать это выражение с выборкой по множеству селекторов, например, $(«.open, div#menu «) — это разные выражения, которые будут давать разный результат.
Обращение к элементу массива jQuery
Получаю такой объект возвращаемый виджетом: Мне нужно обратиться к определенным элементам вложенного внутрь массива, в частности adress->place . Знаю что в jQuery можно перебирать массивы как и объекты через .each , но мне не надо перебирать его весь, мне надо обратиться к конкретному элементу. Как например в PHP:
$arr['item']['subitem']; Как можно это сделать в jQuery? На learn.javascript был, там нашел только информацию о переборе объектов и массивов, то есть тот же .each .
Отслеживать
11.5k 4 4 золотых знака 22 22 серебряных знака 38 38 бронзовых знаков
Работа с 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(), ей передается один и тот же набор аргументов. Возможные варианты вызова этой функции перечислены в таблице ниже:
| Вариант вызова | Описание |
|---|---|
| $(функция) | Позволяет указать функцию, которая должна быть выполнена по завершении построения 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 перечислены в таблице ниже:
| Селектор | Описание |
|---|---|
| :animated | Выбирает все анимируемые в данный момент элементы |
| :contains(текст) | Выбирает все элементы, содержащие указанный текст |
| :eq(n) | Выбирает элемент с индексом n (индексы отсчитываются от нуля) |
| :even | Выбирает все четные элементы (индексы отсчитываются от единицы) |
| :first | Выбирает первый из подходящих элементов |
| :gt(n) | Выбирает все элементы, индекс которых превышает n (индексы отсчитываются от нуля) |
| :has(селектор) | Выбирает элементы, которые содержат хотя бы один элемент, соответствующий указанному селектору |
| :last | Выбирает последний из подходящих элементов |
| :lt(n) | Выбирает все элементы, индекс которых меньше n (индексы отсчитываются от нуля) |
| :odd | Выбирает все нечетные элементы (индексы отсчитываются от единицы) |
| :text | Выбирает все текстовые элементы |
Я назвал эти селекторы наиболее полезными, поскольку они определяют функциональность, обеспечить которую с помощью селекторов CSS было бы нелегко.
В jQuery определены также селекторы, позволяющие выбирать элементы в соответствии с их типом:
Расширенные селекторы типов, определенные в jQuery
Сужение области поиска с помощью контекста
По умолчанию 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 показаны в таблице ниже:
| Свойство/метод | Описание | Тип возвращаемого значения |
|---|---|---|
| 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.
Выбор элементов в jQuery
Строительство полнофункциональных сайтов и веб-приложений невозможно без манипулирования элементами DOM из которых состоят страницы. Но, прежде чем ими манипулировать, их необходимо сначала получить.
К счастью, библиотека jQuery обеспечивает достаточно мощный способ выбора элементов, основанный на селекторах. Заключается он в том, что для получения набора элементов достаточно просто передать селектор в функцию jQuery:
JavaScript
// selector – это селектор jQuery('selector'); // или с помощью псевдонима $ $('selector')Селектор – это шаблон для поиска элементов. Синтаксис селекторов в jQuery соответствует синтаксису CSS, который дополнен некоторыми нестандартными методами.
В качестве результата данная функция возвращает набор найденных элементов в формате объекта jQuery.
JavaScript
// $elements – переменная, в которой находится объект jQuery, содержащий все найденные элементы var $elements = $('selector')Узнать количество выбранных элементов можно с помощью свойства length :
JavaScript
// $anchors - переменная, содержащая все найденные элементы на странице var $anchors = $('a'); // количество найденных элементов var length = $anchors.length;Если length возвращает 0, то значит, что объект jQuery «пустой», т.е. он не содержит искомых элементов (они не были найдены).
При этом функция jQuery(‘selector’) и «родные» JavaScript-методы для поиска элементов ( querySelector , querySelectorAll и др.) возвращают совсем разные вещи.
«Родные» методы возвращают DOM-элемент или HTML-коллекцию элементов, а функция jQuery — объект jQuery.
Это означает, что вы не можете напрямую применить какие-либо «родные» свойства и методы JavaScript для работы с элементами к объекту jQuery. И наоборот, применить свойства и методы jQuery непосредственно к DOM-элементам.
Например, с помощью jQuery получим элемент и изменим ему цвет фона:
JavaScript
// выберем элемент var $body = $('body'); // установим цвета фону элемента с помощью jQuery-метода css $body.css('background-color', '#eee');На чистом JavaScript эти действия записываются так:
JavaScript
// выберем элемента var bodyElem = document.querySelector('body'); // установим стили элементу, используя нативные свойства JavaScript bodyElem.style.backgroundColor = '#eee';Но, чтобы применить родные свойства и методы JavaScript к элементу, обёрнутому в объект jQuery, необходимо в этом случае обратиться непосредственно к этому элементу:
JavaScript
var $body = $('body'); // получим сам элемент var bodyElem = $body[0]; if (bodyElem) { // установим стили на чистом JavaScript bodyElem.style.backgroundColor = '#eee'; }Также, если вы хотите использовать свойства и методы jQuery для DOM-элементов их следует обернуть в объект jQuery. Выполняется это следующим образом:
JavaScript
var bodyElem = document.querySelector('body'); // обернём $bodyElem в объект jQuery var $body = $(bodyElem); // установим стили с помощью jQuery-метода css $body.css('background-color', '#eee');Базовые селекторы
Основные CSS селекторы, которые используются для выборки элементов в jQuery:
- $(‘.class’) – по классу;
- $(‘#id’) – по id;
- $(‘tag’) – по тегу;
- $(‘*’) – все элементы;
- $(‘selector1,selector2. ‘) – по группе селекторов (выбирает все элементы, соответствующие хотя бы одному из указанных селекторов);
- $(‘selector1selector2. ‘) – по комбинации селекторов (выбирает элементы, которые должны соответствовать всем указанным селекторам).
Примеры
1. Найдём все элементы с классом btn :
JavaScript
var elements = $('.btn');2. Выберем элемент с id=»carousel» :
JavaScript
var element = $('#carousel');3. Выполним поиск всех элементов с тегом :
JavaScript
var elements = $('a');4. Выберем все элементы на странице:
JavaScript
var elements = $('*');5. Выполним поиск элементов с классом nav или menu :
JavaScript
var elements = $('.nav,.menu');6. Найдём элементы с тегом и классом menu :
JavaScript
// nav - селектор для выбора элементов по тегу // .menu - селектор для выбора элементов с классом menu var navs = $('nav.menu');Селекторы атрибутов
CSS селекторы для идентификации элементов по их атрибутам::
- [attr] – по атрибуту независимо от его значения;
- [attr=value] – по атрибуту со значением, точно равным заданному;
- [attr^=value] – по атрибуту со значением, начинающимся точно с заданной строки;
- [attr|=value] – по атрибуту со значением, равным заданной строке или начинающимся с этой строки, за которой следует дефис (-);
- [attr$=value] – по атрибуту со значением, оканчивающимся точно на заданную строку (при сравнении учитывается регистр);
- [attr*=value] – по атрибуту со значением, содержащим заданную подстроку;
- [attr~=value] – по атрибуту со значением, содержащим заданное слово, отделённое пробелами;
- [attr!=value] – выбирает элементы, которые не содержат указанного атрибута, либо имеют указанный атрибут, но не с заданным значением.
Значение атрибута в выражении селектора должно быть заключено в кавычки. Осуществляется это одним из следующих способов:
- $(‘a[rel=»nofollow»]’) — двойные кавычки внутри одинарных кавычек;
- $(«[rel=’nofollow’]») — одинарные кавычки внутри двойных кавычек;
- $(‘a[rel=\’nofollow\’]’) — экранированные одинарные кавычки внутри одинарных кавычек;
- $(«a[rel=\»nofollow\»]») — экранированные двойные кавычки внутри двойных кавычек;
Селектор [attr!=»value»] не является стандартным CSS селектором. Это расширение jQuery. При его использовании снижается производительность, поэтому в выборке не рекомендуется его использовать. Вместо него предпочтительнее использовать следующую конструкцию:
JavaScript
$('selector').not('[attr="value"]')Примеры
1. Выберем изображения с атрибутом alt :
2. Найдём элементы с атрибутом type=»button» :
3. Выполним поиск с классом btn и атрибутом href начинающимся со строки « http: ».
. . . 4. Выполним поиск всех с атрибутом data-name , имеющим значение, равное alert или начинающимся с alert , за которым следует дефис:
. .
. . 5. Найдём все элементы с атрибутом href , имеющие значения точно оканчивающиеся на строку « .zip »:
. . . 6. Найдём все элементы с атрибутом href , содержащим подстроку « youtube »:
. . . 7. Выполним поиск с атрибутом data-target , значение которого содержит « btn », отделённое от других пробелами:
. . . . . . . . .
. . . Селекторы отношений
В документы каждый элемент связан определёнными отношениями с другими элементами.
В CSS имеется 4 селектора отношений ( A и B – это селекторы):
- A>B – выбирает элементы B , расположенные непосредственно в A ;
- A B – выбирает элементы B , расположенные в A ;
- A+B – выбирает элементы B , каждый из которых расположен сразу же после A (при этом данные элементы должны являться детьми одного родителя, т.е. находиться на одном уровне вложенности);
- A~B – выбирает все элементы B , каждые из которых расположены после A (при этом данные элементы должны являться детьми одного родителя, т.е. находиться на одном уровне вложенности).
Примеры
1. Найдём все
, расположенные в :
.
.
.
.
3. Найдём все элементы .warning , расположенные сразу же после элементов .danger :
. . . . . 4. Выберем все , которые находятся сразу же за . При этом и должны располагаться на одном уровне вложенности, т.е. иметь одного родителя:
JavaScript
var $elements = $('label + input');5. Найти все , расположенные после .prev внутри одного родителя:
JavaScript
var $elements = $('.prev~div');Управление контекстом
По умолчанию поиск элементов осуществляется во всём документе. Но при необходимости вы можете его ограничить, определив контекст поиска.
Контекст представляет собой элемент, в рамках которого следует производить выборку элементов.
Контекст передаётся во второй аргумент функции jQuery. Задавать его можно с помощью селектора, DOM-элемента или набора jQuery.
Например, найдём элементы с классом active в контексте элемента с id=»#list» :
JavaScript
// #list – контекст var active = $('.active', '#list');Задачи
- $(‘#list’) — 1;
- $(‘.active’) — 3;
- $(‘li’) — 2, 3, 4;
- $(‘ul,li,p’) — 1, 2, 3, 4, 5;