Назад Вперед Зміст

Приклади вибірок

Всі li, які містять текст 'пункт'.$('li:contains("пункт")').css('color', 'red');
Всі h2, всередині яких є тег i$('h2:has(i)').css('color', 'red');
Третю li. $('li:eq(3)').css('color', 'red');
парні li.$('li:odd').css('color', 'red');
Все li більше 10-ї (відлік з нуля в jQuery!).$('li:gt(9)').css('color', 'red');

ЛАБОРАТОРНА РОБОТА 11

Під час виконання лабораторної роботи використовуйте теорію 2_5

ВАРІАНТ 1

  1. Усі абзаци, всередині яких є b, оберніть у div тег.
  2. Знайдіть всі абзаци з класом .www, поставте їм на початок текст '!', потім додайте до цих абзаців ще й заголовки h1-h6 і пофарбуйте ці абзаци та заголовки у червоний колір. Показати підказку.
  3. Знайдіть усі абзаци та замініть їх на тег div з таким же вмістом. Показати підказку.
  4. Знайдіть усі чекбокси на сторінці та заблокуйте парні зі знайдених.

ВАРІАНТ 2

  1. Поставте всім незаблокованим чекбоксам статус відзначений.
  2. Даний елемент #test. Поставте його безпосередньому сусідові зверху текст "!", а сусіду знизу - текст "?". Розв'яжіть завдання одним ланцюжком.
  3. Даний елемент #test. Поставте його безпосереднім сусідам зверху та знизу текст елемента #test.
  4. Даний елемент #test. Знайдіть серед його сусідів зверху найближчий абзац та поставте йому текст елемента #test.

ВАРІАНТ 3

  1. Знайдіть другий li на сторінці, додайте йому клас .www, оберніть його всередині тегом i, вставте після нього li з текстом 'привіт'.
  2. Знайдіть десятий li на сторінці, знайдіть його батька, отримайте безпосереднього сусіда батька зверху, оберніть його в div class="www".
  3. Кожному абзацу p, крім абзаців із класом .www, додайте до кінця його порядковий номер.
  4. Знайдіть усі абзаци p і поставте перед кожним абзацом його копію. Копію пофарбуйте у червоний колір, а вихідний абзац у зелений.

ВАРІАНТ 4

  1. Знайдіть абзаци p, які стоять безпосередньо під h2 і перемістіть кожен абзац так, щоб він став безпосередньо над h2.
  2. Знайдіть всі порожні абзаци p (без тексту) і вставте текст безпосереднього сусіда зверху.
  3. Батькові тегу b, якщо це елемент з класом .www або абзац, поставте червоний колір і розмір тексту в 30px.
  4. Усім порожнім абзацам поставте текст найближчого до них зверху тега h2.

    ВАРІАНТ 5

  1. Дані inputи з числами. Зробіть те щоб в inputах стали квадрати цих чисел.
  2. Даний елемент #test. Поставте йому на початок текст безпосереднього сусіда згори, а кінець - текст безпосереднього сусіда знизу.
  3. Даний елемент #test. Знайдіть його другого сусіда згори та його другого сусіда знизу. Зробіть так, щоб знайдені елементи обмінялися текстом (сусід зверху візьме текст сусіда знизу та навпаки).

ВАРІАНТ 6

  1. Даний елемент div. Виберіть із нього всіх безпосередніх нащадків, які є заголовками і пофарбуйте їх у червоний колір.
  2. Знайдіть всі абзаци, пофарбуйте їх у червоний колір. Потім виберіть серед знайдених абзаців абзаци з класом www і поставте їм текст '!'. Показати підказку.
  3. Знайдіть всі абзаци з класом .www, пофарбуйте їх у червоний колір. Потім виберіть серед знайдених абзаців перший та поставте йому текст '!', потім виберіть останній і йому поставте текст '?'. Розв'яжіть завдання одним ланцюжком.
  4. Знайдіть усі абзаци, поставте кожному з них у кінець той самий текст, який стоїть усередині нього (тобто текст в абзаці буде написаний двічі).

ВАРІАНТ 7

  1. Знайдіть усі абзаци, поставте кожному з них на кінець його порядковий номер у наборі.
  2. Дані абзаци з числами. Поставте кожному з них у кінець число, яке зберігається, помножене на його порядковий номер у наборі.
  3. За натисканням на абзац видаліть його безпосередніх сусідів зверху та знизу.
  4. За натисканням на абзац видаліть усіх його сусідів зверху до першого заголовка h1-h6 (тобто елементи, що стоять вище заголовка і сам заголовок видаляти не треба).

ВАРІАНТ 8

  1. За натисканням на абзац видаліть його найближчого сусіднього сусіда з класом .www.
  2. Натиснувши на абзац, видаліть його п'ятого сусіда знизу.
  3. Якщо натиснути на абзац, видаліть його п'ятого сусіда знизу, якщо це не h2.
  4. За натисканням на абзац видаліть його п'ятого сусіда знизу, якщо цей сусід не має в собі тега b.

ВАРІАНТ 9

  1. Натиснувши на абзац, видаліть його п'ятого сусіда знизу, якщо цей сусід не стоїть безпосередньо після h2.
  2. Даний елемент #test. Поміняйте цей елемент подекуди з його безпосереднім сусідом знизу.
  3. Даний елемент #test. Після безпосереднього сусіда знизу вставте копію нашого елемента.
  4. Даний елемент #test. Поміняйте цей елемент місцями з найближчим сусідом знизу з класом .www.

ВАРІАНТ 10

  1. Знайдіть усі абзаци, які всередині одного з батьків лежать між одним і іншим h2.
  2. Оберніть кожен абзац зовні та всередині в div.
  3. Знайдіть усі абзаци , у яких безпосередній батько не div і оберніть кожен з них у div class="www".
  4. Знайдіть усі абзаци . Видаліть їх з батька (зробіть йому unwrap), якщо цей батько не
    з класом .www. Потім для тих абзаців, у яких був видалений батько, оберніть у div із класом .zzz.

ВАРІАНТ 11

  1. Знайдіть всіх батьків елемента #test і створіть масив із CSS класів цих батьків.
  2. Знайдіть всі абзаци , які мають атрибут class, і кожен з них оберніть у div з тими ж класами, як у знайденого абзацу, а класи кожного абзацу видаліть разом з атрибутом class.
  3. Знайдіть всі абзаци з #test, поставте їм у кінець текст '!', потім виключіть із знайдених абзаци з класом .www і залиште поставте червоний колір.
  4. Знайдіть усі li на сторінці, потім перед передостаннім зі знайдених вставте ще один li з текстом 'пункт'.

ВАРІАНТ 12

  1. Знайдіть все li на сторінці, потім виберіть серед знайдених другий, третій та четвертий з кінця та поставте їм текст '!'.
  2. Знайдіть ol з #test і переставте все li у ньому у зворотному порядку. Показати підказку.
  3. Даний елемент #text. Знайдіть всіх його сусідів згори та всіх його сусідів знизу і поміняйте їх місцями (тобто все, що стоїть до елемента, має стати після нього і навпаки).
  4. Отримайте всі li з класом .www, зробіть їм червоний колір, потім знайдіть серед знайдених ті li, які мають клас .bbb і видаліть їх. Вирішіть все одним ланцюжком.

ВАРІАНТ 13

  1. Отримати всі li на сторінці. парні з отриманих зробіть порожніми, а непарні видаліть.
  2. Знайдіть усі теги div і подвайте їм висоту.
  3. Знайдіть суму висот всіх div на сторінці.
  4. Для елемента #test знайдіть найближчого батька з класом .www, до кінця цього батька додайте абзац з текстом '!'.

ВАРІАНТ 14

  1. За натисканням на елемент #test знайдіть його найближчого батька з класом .www, всередині цього батька знайдіть усі абзаци та пофарбуйте їх у червоний колір.
  2. Пофарбуйте перші 10 li на сторінці червоного кольору.
  3. Пофарбуйте з 5 по 10 li на сторінці в червоний колір.
  4. Знайдіть останні 10 li на сторінці, пофарбуйте їх у червоний колір. Потім зі знайдених знайдіть парні li та оберніть їх усередині тег b.

ВАРІАНТ 15

  1. На сторінці дано чекбокси. Підрахуйте, скільки з них зазначено.
  2. Дано 5 чекбоксів. Зробіть так, щоб після того, як користувач відзначив два з них, усі чекбокси заблокувалися.
  3. Зробіть так, щоб усі зазначені чекбокси змінили свій стан на невідзначений і навпаки.
  4. Дан inputи. Перемістіть вміст атрибуту value в атрибут placeholder, а сам атрибут value видаліть зовсім.

ВАРІАНТ 16

  1. Дане посилання. Якщо атрибут href починається на http://, додайте на посилання атрибут target="_blank".
  2. Даний вхід, до якого можна ввести число. Зробіть так, щоб при введенні числа в цей input і втрати фокусу на сторінці шукався чекбокс з таким номером і став відзначеним, а інші чекбокс ставали невідзначеними.
  3. Даний селект і радіо кнопочки, кількість радіо дорівнює кількості пунктів у селекті. Зробіть так, щоб при виборі пункту в селекті автоматично ставала відміченою відповідна кнопка радіо (відповідність за номером слідування: перший пункт списку - першому радіо і так далі).
  4. На сторінці кнопка та дев'ять пронумерованих чекбоксів, при натисканні на кнопку видається сума чисел вибраних чекбоксів і кнопка переміщається на кількість позицій, що дорівнює цій сумі.

ВАРІАНТ 17

  1. На сторінці кнопка та 10 радіокнопок з іменами, вибрати радіокнопку - при натисканні на кнопку вибране ім'я поміщається на кнопку та кнопка переміщається на кількість позицій, що дорівнює номеру радіокнопки.
  2. На сторінці кнопка та 10 текстових полів, заповнити поля словами - при натисканні на кнопку на сторінці відобразити пропозицію з цих слів.
  3. На сторінці кнопка, при натисканні на неї колір тла змінюється на зелений.
  4. На сторінці кнопка та список кольорів, вибрати колір зі списку - при натисканні на кнопку колір фону змінюється на вибраний

Назад Вперед Зміст