Практика на отработку библиотеки jQuery
Все абзацы p
, внутри которых
есть тег b
, оберните
в тег div
.
Найдите все абзацы p
с классом
www
, поставьте им в начало текст
'!'
, затем добавьте к этим абзацам
еще и заголовки h1
-h6
и
покрасьте эти абзацы и заголовки в красный
цвет.
Найдите все абзацы p
и замените их
на тег div
с таким же содержимым.
Найдите все чекбоксы на странице и заблокируйте четные из найденных.
Поставьте всем
незаблокированным
чекбоксам
статус 'отмечен'
.
Дан элемент #test
. Поставьте его непосредственному
соседу сверху текст '!'
, а соседу
снизу - текст '?'
. Решите задачу одной
цепочкой.
Дан элемент #test
. Поставьте его непосредственным
соседям сверху и снизу текст элемента #test
.
Дан элемент #test
. Найдите среди его соседей сверху
ближайший абзац и поставьте ему текст элемента
#test
.
Найдите второй li
на странице,
добавьте ему класс www
, оберните
его внутри тегом i
, вставьте после
него li
с текстом 'привет'
.
Найдите десятый li
на странице,
найдите его родителя, получите непосредственного
соседа родителя сверху, оберните его в
<div class="www"></div>
.
Каждому абзацу p
, кроме абзацев
с классом www
, добавьте к конец его
порядковый номер.
Найдите все абзацы p
и поставьте
перед каждым абзацем его копию. Копию покрасьте
в красный цвет, а исходный абзац в зеленый.
Найдите абзацы p
, которые стоят
непосредственно под h2
и переместите каждый абзац так, чтобы он
встал непосредственно над h2
.
Найдите все пустые абзацы p
(без текста) и вставьте в них текст
непосредственного соседа сверху.
Родителю тега b
, если это
элемент с классом www
или абзац
p
, поставьте красный цвет и
размер
текста в 30px
.
Всем пустым абзацам p
поставьте
текст ближайшего к ним сверху тега h2
.
Даны инпуты с числами. Сделайте так, чтобы в инпутах стали квадраты этих чисел.
Дан элемент #test
. Поставьте ему в начало текст
непосредственного соседа сверху, а в конец
- текст непосредственного соседа снизу.
Дан элемент #test
. Найдите его второго соседа
сверху и его второго соседа снизу. Сделайте
так, чтобы найденные элементы обменялись
текстом (сосед сверху возьмет текст соседа
снизу и наоборот).
Дан элемент div
. Выберите
из него всех непосредственных потомков, которые
не являются заголовками и покрасьте их в
красный цвет.
Найдите все абзацы p
, покрасьте
их в красный цвет. Затем выберите среди найденных
абзацев абзацы с классом www
и поставьте
им текст '!'
.
Найдите все абзацы p
с классом
www
, покрасьте их в красный цвет.
Затем выберите среди найденных абзацев первый
и поставьте ему текст '!'
, затем выберите
последний и ему поставьте текст '?'
.
Решите задачу одной цепочкой.
Найдите все абзацы p
, поставьте
каждому из них в конец тот же текст, который
стоит внутри него (то есть текст в абзаце
станет написан два раза).
Найдите все абзацы p
, поставьте
каждому из них в конец его порядковый номер
в наборе.
Даны абзацы с числами. Поставьте каждому из них в конец число, которое в нем хранится, умноженное на его порядковый номер в наборе.
По нажатию на абзац p
удалите
его непосредственных соседей сверху и снизу.
По нажатию на абзац p
удалите
всех его соседей сверху до первого заголовка
h1
-h6
(то есть элементы, стоящие
выше этого заголовка и сам заголовок
удалять не надо).
По нажатию на абзац p
удалите
его ближайшего нижнего соседа с
классом www
.
По нажатию на абзац p
удалите
его пятого соседа снизу.
По нажатию на абзац p
удалите
его пятого соседа снизу, если это не
h2
.
По нажатию на абзац p
удалите
его пятого соседа снизу, если этот сосед
не имеет внутри себя тега b
.
По нажатию на абзац p
удалите
его пятого соседа снизу, если этот сосед
не стоит непосредственно после h2
.
Дан элемент #test
. Поменяйте этот
элемент местами с его непосредственным
соседом снизу.
Дан элемент #test
. После его
непосредственного соседа снизу вставьте
копию нашего элемента.
Дан элемент #test
. Поменяйте этот
элемент местами с его ближайшим соседом
снизу с классом www
.
Найдите все абзацы p
, которые
внутри одного родителя лежат между одним
и другим h2
.
Оберните каждый абзац p
снаружи
и внутри в div
.
Найдите все абзацы p
, у
которых непосредственный родитель не div
и оберните каждый из них в <div class="www"></div>
.
Найдите все абзацы p
. Удалите
их родителя (сделайте ему unwrap
),
если этот родитель не div
с классом
www
. Затем для те абзацы, у которых
был удален родитель, оберните в div
с классом zzz
.
Найдите всех родителей элемента #test
и создайте массив из CSS классов этих родителей.
Найдите все абзацы p
, у которых есть
атрибут class
, и каждый из них
оберните в div
с теми же классами,
как у найденного абзаца, а классы каждого
абзаца удалите вместе с атрибутом class
.
Найдите все абзацы p
из
#test
, поставьте им в конец текст
'!'
, затем исключите из найденных
абзацы с классом www
и оставшимся
поставьте красный цвет.
Найдите все li
на странице,
затем перед предпоследним из найденных вставьте
еще один li
с текстом 'пункт'
.
Найдите все li
на странице,
затем выберите среди найденных второй, третий
и четвертый с конца и поставьте им текст
'!'
.
Найдите ol
с #test
и переставьте все li
в нем в обратном порядке.
Дан элемент #test
. Найдите всех его
соседей сверху и всех его соседей снизу и
поменяйте их местами (то есть все, что стоит
до элемента, должно стать после него и наоборот).
Получите все li
с классом
www
, сделайте им красный цвет, затем
найдите среди найденных те li
,
у которых есть класс bbb
и удалите
их. Решите все одной цепочкой.
Получите все li
на странице. Четные
из полученных сделайте пустыми, а
нечетные удалите.
Найдите все теги div
и удвойте
им высоту.
Найдите сумму высот всех div
на странице.
Для элемента #test
найдите ближайшего
родителя с классом www
, в конец этого
родителя добавьте абзац с текстом '!'
.
По нажатию на элемент #test
найдите его
ближайшего родителя с классом www
, внутри
этого родителя найдите все абзацы и покрасьте их
в красный цвет.
Покрасьте первые 10
li
на странице в красный цвет.
Покрасьте с 5
-той по 10
-ю li
на странице в красный цвет.
Найдите последние 10
li
на странице, покрасьте их в красный
цвет. Затем из найденных найдите четные li
и оберните их внутри в тег b
.
На странице даны чекбоксы. Подсчитайте, сколько из них отмечены.
Дано 5
чекбоксов.
Сделайте так, чтобы после того, как пользователь
отметил два из них, все чекбоксы
заблокировались.
Сделайте так, чтобы все отмеченные чекбоксы сменили свое состояние на неотмеченное и наоборот.
Дан инпут.
Переместите содержимое атрибута value
в атрибут
placeholder
,
а сам атрибут value
удалите совсем.
Дана ссылка.
Если атрибут href
начинается на http://
,
добавьте ссылке атрибут target="_blank"
.
Дан инпут, в который можно ввести число. Сделайте так, чтобы при вводе числа в этот инпут и потери фокуса на странице искался чекбокс с таким номером и становился отмеченным, а остальные чекбоксы становились неотмеченными.
Дан селект и радио кнопочки, количество радио равно количеству пунктов в селекте. Сделайте так, чтобы при выборе пункта в селекте автоматически становилась отмеченной соответствующая радио кнопочка (соответствие по номеру следования: первый пункт списка - первому радио и так далее).