»» В даній статті використовується вихідний код для прикладів. Збережіть цю сторінку для тестування наведених нижче прикладів.
У більшості випадків робота з jQuery здійснюється в два етапи, на підставі одного і того ж шаблону:
перший етап полягає у виборі за допомогою функції $ () початкового набору елементів сторінки, які відповідають певним критерієм відбору, які повертаються у вигляді містить їх об'єкта jQuery;
а другий - у виконанні над кожним елементом набору однієї або декількох операцій, що призводять до створення кінцевого набору.
У цій статті ми зосередимо свою увагу на першому з етапів. Будуть розглянуті методи jQuery, що дозволяють управляти обраним набором і коригувати його складу в точній відповідності з конкретними завданнями. Зазвичай виходять з якогось попередньо обраного набору елементів, впливаючи на який, домагаються того, щоб в ньому залишилися лише дійсно необхідні елементи.
Розширення набору обраних елементів
Метод add () дозволяє додати в існуючий об'єкт jQuery додаткові елементи. Різні варіанти виклику цього методу наведені в таблиці нижче:
Варіанти виклику методу add ()
add (селектор),
add (селектор, контекст)
Додає в поточний набір додаткові елементи, відповідні селектору, без урахування і з урахуванням контексту
Додає в поточний набір елемент або масив елементів HTMLElement
Додає в поточний набір вміст зазначеного об'єкта jQuery
Подібно до багатьох методів jQuery, метод add () повертає об'єкт jQuery, який можна використовувати для виклику інших методів, в тому числі і для наступних викликів методу add (). Приклад використання методу add () для розширення раніше знайденого набору наведено в нижче:
У цьому сценарії для додавання елементів в початковий набір використовуються три підходи: за допомогою іншого селектора, за допомогою об'єктів HTMLElement і за допомогою іншого об'єкта jQuery. Побудувавши потрібний набір об'єктів, ми викликаємо метод css (), встановлюючи для їх властивостей border значення, що забезпечують оточення написів рамками, промальованим товстими подвійними лініями, як показано на малюнку:
Звуження набору обраних елементів
Існує ряд методів, що дозволяють видаляти елементи з існуючого набору. Їх короткий опис наведено в таблиці нижче. Кожен з цих методів повертає новий об'єкт jQuery, що містить урізаний набір елементів. Об'єкт jQuery, для якого викликається метод, залишається незмінним:
Методи фільтрації елементів
Виключає з набору все елементи, індекси яких виходять за межі вказаного діапазону
Звуження набору до одного елемента
Найпростішими методами, за допомогою яких можна скоротити набір обраних елементів, є методи first (). last () і eq (). Ці три методи дозволяють вибрати конкретний елемент на підставі його позиції в наборі елементів, що містяться в об'єкті jQuery. Відповідний приклад наведено нижче:
Зверніть увагу, що метод eq () викликається двічі. Якщо аргумент має позитивне значення, відлік індексів починається з першого елемента в наборі, що міститься в об'єкті jQuery. У разі від'ємного значення аргументу індекси відраховуються в зворотному напрямку, починаючи з останнього елемента. Результат роботи сценарію наведено на малюнку:
Звуження набору до елементів, індекси яких належать до заданому діапазону
Якщо необхідно залишити в обраному наборі лише елементи, індекси яких належать до заданому діапазону, використовується метод slice (). Відповідний приклад наведено нижче:
В якості аргументів метод slice () приймає значення початкового та кінцевого індексів. Відлік індексів ведеться від нуля, причому елемент, якому відповідав би кінцевий індекс, в результуючий набір не включається. Тому аргументів 0 і 2 відповідає вибір перших двох елементів.
Якщо другий аргумент опущений, то вибір елементів триває до кінця існуючого набору. Отже, використання єдиного аргументу 4 для набору з шести елементів відповідає вибір останніх двох елементів (з індексами 4 і 5). Результат представлений на малюнку:
фільтрація елементів
Метод filter () дозволяє задати умову. Елементи, що не відповідають заданій умові, виключаються з набору. Можливі варіанти використання методу filter (), які відповідають різним способам завдання умови, описані в таблиці нижче:
Варіанти виклику методу filter ()
Додає попередній обраний набір до поточного
Метод end () можна використовувати для повернення попередньо вибраного набору, що дозволяє вибрати деякі елементи, розширити або звузити його, виконати деякі операції, а потім повернутися до початкового набору, як показано в прикладі нижче:
У цьому сценарії ми починаємо з того, що вибираємо всі елементи label в документі. Далі ми звужуємо вибірку, викликаючи метод first () (для отримання першого підходящого елемента), а потім встановлюємо значення CSS-властивості border за допомогою методу css ().
Наступним викликається метод end () для повернення попередньо вибраного набору (в результаті чого вам знову надаються всі елементи label, а не тільки перший), а потім знову викликається метод css (), на цей раз для установки значення властивості font-size. Результат виконання сценарію показаний на малюнку:
Метод andSelf () додає вміст попередньо вибраного набору, що знаходиться в стеку, до поточного набору. Приклад використання методу andSelf () наведено нижче:
У цьому прикладі спочатку вибираються всі елементи div з класом dcell, а потім - все елементи img, які є їх дочірніми елементами, для чого використовується метод children (). Після цього викликається метод andSelf (), який об'єднує попередню вибірку (елемент div) з поточної (елементи img) в одному об'єкті jQuery. Нарешті для створення рамок навколо обраних елементів викликається метод css (). Результат виконання сценарію показаний на малюнку:
