Определение и применение
jQuery метод .eq() позволяет выбрать элемент с конкретным индексом из набора выбранных элементов. Если элемент не может быть найден в указанном индексе, то метод в любом случае конструирует новый объект jQuery, но уже с пустым набором и свойством длины ( length ) равным нулю.
Обращаю Ваше внимание, что ноль соответствует первому элементу в наборе, а -1 последнему.
jQuery синтаксис:
Добавлен в версии jQuery
Значения параметров
| Параметр | Описание |
|---|---|
| index / indexFromEnd | Определяет индекс элемента в наборе, который будет выбран. Ноль соответствует первому элементу в наборе. При указании положительного значения поиск осуществляется сначала колекции (1 соответствует второму элементу), а при отрицательном с конца (-1 соответствует последнему элементу). |
Пример использования
Основное отличие метода .eq() от селектора :eq() заключается в том, что селектор работает только с числовыми значениями, а метод .eq() может принимать переменные, которые содержат числовые значения, что в некоторых ситуациях может здорово выручить.
Результат нашего примера:
Отличие селектора :eq() от метода eq() jQuery перемещения
Изучаем Java
Вы здесь: Главная >> Jquery-учебник >> Получаем в jQuery доступ к элементу по индексу
Обучающие курсы:
Получаем в jQuery доступ к элементу по индексу
Как получить в jQuery доступ к элементу по индексу
Большинство же методов библиотеки jQuery позволяет изменить какое-либо свойство сразу всех элементов коллекции. Например, выведем во всех тегах текст «Добрый день!»
Это, конечно, удобно. Но иногда необходимо получить доступ к какому-либо отдельному элементу коллекции. Прежде чем обратиться к конкретному элементу, следует с помощью свойства length узнать количество элементов в коллекции,
Кроме того, можно воспользоваться методом size ().
Теперь, когда мы знаем количество элементов, можно приступить к перебору всех элементов коллекции.
Получить доступ к элементу можно, указав его индекс в квадратных скобках. Нумерация начинается с нуля. В качестве примера выведем текст «Добрый день!» только во втором теге р.
Обратите внимание на тот факт, что доступ по индексу возвращает ссылку на DOM-элемент. Поэтому изменить содержимое можно с помощью свойства innerHTML объекта document. Применить метод jQuery text () можно только после нахождения элемента.
Вместо квадратных скобок можно использовать метод get (). Метод имеет следующий формат.
Если индекс элемента не указан, то возвращается массив DOM-элементов,
Указание параметра позволяет получить доступ к конкретному элементу. Нумерация элементов начинается с 0. В качестве примера во всех тегах р выведем индекс текущего абзаца.
Все рассмотренные способы позволяли получить доступ к конкретному DOM-элементу. Если необходимо получить доступ к элементу коллекции jQuery, то следует использовать метод eq (). Нумерация элементов начинается с 0. Переделаем наш предыдущий пример и используем метод jQuery html () вместо свойства innerHTML объекта document,
Метод slice () позволяет получить срез коллекции. Возвращает новую коллекцию элементов. Имеет следующий формат.
Следует учитывать, что нумерация позиций начинается с 0, а конечная позиция не попадает в диапазон возвращаемых значений. Выделим первую ссылку в коллекции.
А теперь выделим только вторую и третью ссылки.
Если второй параметр не указан, то будут возвращены элементы от начальной позиции до конца коллекции. Выделим все ссылки, начиная с третьей.
В случае указания отрицательного значения позиции будут отсчитываться с конца коллекции. Выделим две последние ссылки.
Пронумеруем все ссылки в документе с помощью метода slice ().
При щелчке на абзаце выведем его индекс.
Метод each () позволяет перебрать все элементы коллекции без использования циклов. Имеет следующий синтаксис,
В параметре Функция обратного вызова указывается ссылка на функцию следующего формата.
Все параметры являются необязательными. Если в параметре Индекс указать переменную, то на каждой итерации в нее будет передаваться текущий индекс элемента в коллекции. Нумерация начинается с 0. Выведем индекс элемента во всех тегах div.
Если в параметре Элемент DOM указать переменную, то на каждой итерации в нее будет передаваться ссылка на текущий элемент DOM. Эту переменную можно использовать вместо указателя this.
Если внутри функции вернуть значение false, то выполнение метода each () будет остановлено. При индексе, равном двум, прервем выполнение метода.
Во всех этих примерах мы использовали анонимную функцию. Если необходимо вызвать обычную функцию, то ее имя указывается в качестве параметра метода each () без скобок.
В качестве примера использования метода each () получим URL-адреса всех ссылок в документе (листинг 3.1).
Листинг 3.1.
Получение URL-адресов всех ссылок
jQuery для начинающих
jQuery — это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение — лучше всего начинать с наглядных примеров, и они далее…
Как же все-таки работает jQuery?
Ну для начала Вам понадобиться сам фреймворк, его вы сможете скачать с домашней страницы проекта, затем проинициализировать:
А основные моменты Вам поможет понять следующая диаграмма:
Как получить элемент с помощью jQuery?
Выдвижная панель
Начнем с простенького примера — слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. пример)
Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между «active» и «btn-slide»), а панелька с будет выдвигаться/прятаться. (класс «active» изменяет позицию фонового изображения, см. CSS файл во вложении).
Магические исчезновения
Этот пример покажет как можно красиво и легко убирать растворять элементы (см. пример):
, и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=hide:
Связанная анимация
— уменьшаем его прозрачность до 0.1, наращиваем позицию left еще на 400px, со скоростью 1200 (milliseconds)
Line 3: затем медленно изменяем следующие параметры: opacity=0.4, top=160px, height=20, width=20; скорость анимации указывается вторым параметром: «slow», «normal», «fast» или в миллисекундах
Line 4: затем opacity=1, left=0, height=100, width=100, скорость — «slow»
Line 5: затем opacity=1, left=0, height=100, width=100, скорость — «slow»
Line 6: затем top=0, скорость — «fast»
Line 7: затем slideUp (с дефолтной скоростью анимации — «normal»)
Line 8: затем slideDown, скорость — «slow»
Line 9: возвращаем false для того чтобы браузер не перешел по ссылке
Гармошка #1
внутри
, для следующего в нём элемента
будет применен эффект slideToggle, затем для всех остальных элементов
будет применен эффект slideUp. Следующие действие изменяет класс заголовка на «active», затем ищем все остальные заголовки
и убираем у них класс «active»
Гармошка #2
Этот пример схож с предыдущим, лишь отличается тем, что мы указываем открытую по умолчанию панельку. (см. пример)
В CSS у нас указано для всех элементов
Анимация для события hover #1
Данный пример поможет создать Вам очень красивую анимацию для события hover (надеюсь, Вы знаете что это?), (см. пример):
Когда Вы наводите мышкой на элемент меню (mouseover), происходит поиск следующего элемента , и анимируется его прозрачность и расположение:
Анимация для события hover #2
Кликабельные блоки
Складывающиеся панельки
— вызывает метод slideToggle для следующего элемента
Имитация Backend’a WordPress’a
(цвет изменяется на красный), и изменяет параметр «opacity» на «hide»
Галерея изображений
По клику на изображения в
Стилизируем ссылки
Так же Вы можете посмотреть все примеры или скачать jQuery tutorial for beginners.
Так же много полезных ссылок по jQuery найдете на следующей странице: http://blog.termit.name/jquery/
Может кому пригодиться еще библиотека jQuery-PHP
Выбор элементов в jQuery
В этой статье рассмотрим одну из наиболее мощных и часто используемых возможностей функции jQuery: выбор элементов DOM посредством селектора.
Введение
Строительство полнофункциональных сайтов и веб-приложений невозможно без манипулирования элементами DOM из которых состоят страницы. Но, прежде чем ими манипулировать, их необходимо сначала получить.
К счастью, библиотека jQuery обеспечивает достаточно мощный способ выбора элементов, основанный на селекторах. Заключается он в том, что для получения набора элементов достаточно просто передать селектор в функцию jQuery:
Селектор – это шаблон для поиска элементов. Синтаксис селекторов в jQuery соответствует синтаксису CSS, который дополнен некоторыми нестандартными методами.
В качестве результата данная функция возвращает набор найденных элементов в формате объекта jQuery.
Узнать количество выбранных элементов можно с помощью свойства length :
Если length возвращает 0, то значит, что объект jQuery «пустой», т.е. он не содержит искомых элементов (они не были найдены).
Это означает, что вы не можете напрямую применить какие-либо «родные» свойства и методы JavaScript для работы с элементами к объекту jQuery. И наоборот, применить свойства и методы jQuery непосредственно к DOM-элементам.
Например, с помощью jQuery получим элемент и изменим ему цвет фона:
На чистом JavaScript эти действия записываются так:
Но, чтобы применить родные свойства и методы JavaScript к элементу, обёрнутому в объект jQuery, необходимо в этом случае обратиться непосредственно к этому элементу:
Также, если вы хотите использовать свойства и методы jQuery для DOM-элементов их следует обернуть в объект jQuery. Выполняется это следующим образом:
Базовые селекторы
Основные CSS селекторы, которые используются для выборки элементов в jQuery:
Примеры
1. Найдём все элементы с классом btn :
2. Выберем элемент с id=»carousel» :
3. Выполним поиск всех элементов с тегом :
4. Выберем все элементы на странице:
5. Выполним поиск элементов с классом nav или menu :
6. Найдём элементы с тегом и классом menu :
Селекторы атрибутов
CSS селекторы для идентификации элементов по их атрибутам::
Значение атрибута в выражении селектора должно быть заключено в кавычки. Осуществляется это одним из следующих способов:
Селектор [attr!=»value»] не является стандартным CSS селектором. Это расширение jQuery. При его использовании снижается производительность, поэтому в выборке не рекомендуется его использовать. Вместо него предпочтительнее использовать следующую конструкцию:
Примеры
1. Выберем изображения с атрибутом alt :
2. Найдём элементы с атрибутом type=»button» :
3. Выполним поиск с классом btn и атрибутом href начинающимся со строки « http: ».
4. Выполним поиск всех
Селекторы отношений
В документы каждый элемент связан определёнными отношениями с другими элементами.
В CSS имеется 4 селектора отношений ( A и B – это селекторы):
Примеры
Управление контекстом
По умолчанию поиск элементов осуществляется во всём документе. Но при необходимости вы можете его ограничить, определив контекст поиска.
Контекст представляет собой элемент, в рамках которого следует производить выборку элементов.
Контекст передаётся во второй аргумент функции jQuery. Задавать его можно с помощью селектора, DOM-элемента или набора jQuery.
Например, найдём элементы с классом active в контексте элемента с id=»#list» :
Задачи
Навигация по элементам в jQuery
В этой статье рассмотрим методы jQuery для поиска в DOM-дереве необходимых элементов, связанных с элементами текущего набора определёнными отношениями.
find() – выбор потомков
Указать искомые элементы можно посредством селектора, ссылки на DOM-элементы или набора jQuery. В качестве результата этот метод возвращает новый объект jQuery, состоящий из найденных элементов.
children() – выбор дочерних элементов
children() в отличие от find() выполняет поиск элементов только среди детей каждого элемента текущего набора (т.е. не опускается ниже одного уровня по DOM-дереву).
Для выбора всех дочерних элементов для каждого элемента текущего набора children() необходимо вызвать без аргументов:
Если необходимо выбрать не все, а только определённые, то можно использовать селектор.
Например, выберем не все элементы, а только
closest() – выбор ближайшего предка
Если более точно, то closest() выбирает для каждого элемента текущего набора первый элемент, соответствующий указанному (поиск начинается с самого элемента, а потом вверх по предкам).
Для указания искомый элементов можно использовать селектор, ссылку на DOM-элементы и набор jQuery.
Например, выбрать
- в качестве ближайшего предка для элементов текущего набора:
next() – выбор следующего элемента
При этом следующий элемент по отношению к исходному должен являться сиблингом (или другими словами находиться с ним на одном уровне вложенности). В качестве результата next() возвращает новый объект jQuery, состоящий из найденных элементов.
Если необходимо выбрать не конкретный элемент, а просто следующий, то в этом случае вызывать next() необходимо без аргументов:
prev() – выбор предыдущего элемента
siblings() – выбор сиблингов
При этом, если нужно выбрать не все, а только определённые сиблинги, то можно указать соответствующий селектор. В качестве результата siblings() возвращает новый набор jQuery, состоящий из найденных элементов.
parent() – получение родителя
При необходимости в parent() мы можем передать селектор и тем самым указать, что нам нужны только элементы соответствующие ему.
При необходимости можно выбрать не всех предков, а только тех, которые соответствует указанному селектору.
Ограничить подъём по дереву DOM при получении предков можно посредством parentsUntil() :
Например, получим предков являющимися
offsetParent() – получение ближайшего позиционированного предка
Этот метод может использоваться в операциях расчета смещений для выполнения анимации и размещения объектов на странице.
Например, найдём offsetParent для элемента с классом active :
В jQuery метод children() используется, когда нужно получить все дочерние узлы (элементы, текстовые узлы и комментарии) для каждого элемента текущего набора.
Этот метод не принимает никаких аргументов.
