ЗАДАНИЕ №2
ПО WEB ПРОГРАММИРОВАНИЮ
Работа с библиотеками JQuery и селекторами
Как выполнить ЗАДАНИЕ!!!
БУДЕТЕ ВЫБИРАТЬ ВАРИАНТЫ ПО СПИСКУ LMS
ЗАДАНИЯ
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
28 И8
27 И 7
26 И 6
25 И 5
24 И 4
23 И 3
22 И 2
21 И 1
20 И 11
19 И 9
18 И 8
17 И 7
16 И 6
15 И 5
14 И 4
13 И 3
12 И 2
11 И 1
ДОП. ЗАДАНИЯ
1
1
1
2
2
2
3
3
3
3
4
4
4
4
5
5
5
5
Задания:
1. Используя jQuery, найдите все текстовые поля и создайте рамку. Затем
добавляет все абзацы к объекту jQuery, чтобы установить их границы
красным цветом.
2. Установите красный цвет фона следующих элементов с помощью jQuery.
3. Создайте элемент абзаца с некоторым текстом и добавьте его в конец тела
документа с помощью jQuery.
4. Используя jQuery, добавьте предыдущий набор элементов в стеке к
текущему набору.
5. Используя jQuery, добавьте класс "w3r_font_color" к последнему элементу
абзаца.
<Р> PHP </ p>
<Р> Java </ p>
<Р> Python </ p>
п{
поле: 8px;
размер шрифта: 16 пикселей;
}
.w3r_font_color {
красный цвет;
}
.w3r_background {
фон: желтый;
}
6. Используя jQuery, добавьте класс "w3r_font_color" и w3r_background к
последнему элементу абзаца.
<Р> PHP </ p>
<Р> Java </ p>
<Р> Python </ p>
п{
поле: 8px;
размер шрифта: 16 пикселей;
}
.w3r_font_color {
цвет синий;
}
.w3r_background {
фон: оранжевый;
}
7. Используя jQuery, добавьте новый класс к элементу, который уже имеет
класс.
<p class = "w3r_bg_orange"> Лучший способ научиться чему-либо - это
практические вопросы и упражнения. </ p>
п{
фон: белый;
}
.w3r_bg_orange {
фон: оранжевый;
}
.w3r_bg_red {
красный цвет;
}
8. Используя jQuery, вставьте HTML после всех абзацев.
9. Используя jQuery, вставьте элемент DOM после всех абзацев.
10. Вставьте объект jQuery после всех абзацев.
11. С помощью jQuery подсчитайте все элементы внутри подразделения.
<Тело>
<div id = "iddiv">
<span> Это промежуток </ span>
<p> Это абзац </ p>
<button id = "button1"> Нажмите, чтобы увидеть эффект </ button>
</ DIV>
</ Body>
12. Используя jQuery, нажмите кнопку, чтобы анимировать элемент абзаца с
рядом различных свойств.
<Тело>
<p id = "pid"> jQuery </ p>
<button id = "button1"> Нажмите, чтобы увидеть анимацию </ button>
</ Body>
п{
цвет фона: # B0E0E6;
ширина: 70 пикселей;
граница: 1px сплошной красный;
}
Анимационные свойства:
ширина: "70%",
непрозрачность: 0,4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
13. Использование jQuery анимирует левое свойство div с относительным
значением.
<Тело>
<button id = "left"> << / button>
<button id = "right" >> </ button>
<div class = "block"> </ div>
</ Body>
div {
положение: абсолютное;
цвет фона: # B0E0E6;
слева: 40 пикселей;
ширина: 80 пикселей;
высота: 80 пикселей;
поле: 5px;
}
14. Использование jQuery анимирует свойство left первого div и
синхронизирует остальные div.
Примечание. Используйте функцию шага, чтобы установить их левые
свойства на каждом этапе анимации.
<Тело>
<p> <button id = "run"> Нажмите, чтобы запустить </ button> </ p>
<div class = "block"> </ div>
<div class = "block"> </ div>
<div class = "block"> </ div>
<div class = "block"> </ div>
</ Body>
div {
положение: относительное;
цвет фона: # B0E0E6;
ширина: 45 пикселей;
высота: 45 пикселей;
плыть налево;
поле: 5px;
}
15. Используя jQuery, измените цвет любого div, который является
анимированным.
<Тело>
<div id = "div1"> </ div>
<div id = "div2"> </ div>
<div id = "div3"> </ div>
<button id = "button1"> Нажмите, чтобы увидеть эффект </ button>
</ Body>
div {
фон: # B0E0E6;
граница: 1px solid # e30ae8;
ширина: 20 пикселей;
высота: 30 пикселей;
поле: 0 5px;
плыть налево;
}
div.colored {
фон: # 000000;
}
16. Использование jQuery добавляет некоторый текст ко всем абзацам.
<Тело>
<div id = "div1"> </ div>
<div id = "div2"> </ div>
<div id = "div3"> </ div>
<button id = "button1"> Нажмите, чтобы увидеть эффект </ button>
</ Body>
17. Использование jQuery добавляет объект jQuery ко всем абзацам.
<Тело>
<strong> Упражнения </ strong>
<Р> JavaScript </ p>
<Р> JQuery </ р>
<button id = "button1"> Нажмите, чтобы увидеть изменения </ button>
</ Body>
18. Использование jQuery добавляет элемент ко всем абзацам.
<Тело>
<Р> JavaScript </ p>
<Р> JQuery </ р>
<button id = "button1"> Нажмите, чтобы увидеть изменения </ button>
</ Body>
19. С помощью jQuery добавьте все промежутки к элементу с указанным
идентификатором. Перейти к редактору
<Тело>
<span> Упражнения </ span>
<p id = "myid"> jQuery </ p>
<button id = "button1"> Нажмите, чтобы увидеть эффект </ button>
</ Body>
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
20. Используя jQuery, отображайте отмеченный атрибут и свойство флажка
по мере его изменения.
<Тело>
<input id = "check1" type = "checkbox" флажок = "флажок">
<label for = "check1"> Check me </ label>
</ Body>
21. Найти атрибут заголовка первого выделенного на странице.
22. Используя jQuery, найдите все ссылки с атрибутом hreflang de.
<Тело>
<p> Упражнения jQuery, практика, <em title = "Реальная жизнь jQuery или
все."> Решение </ em>. </ p>
<p id = "id1"> </ p>
<button id = "button1"> Нажмите, чтобы увидеть эффект </ button>
</ Body>
23. Используя jQuery, найдите все подразделения с атрибутом имени,
который содержит «учебник» и устанавливает желтый цвет фона.
<Тело>
<div name = "tutorial-php">
<Р> PHP </ p>
</ DIV>
<div name = "java-article" <p> Java </ p>
</ DIV>
<div name = "Python-учебник-и-упражнения">
<Р> Python </ p>
</ DIV>
<button id = "button1"> Нажмите, чтобы увидеть эффект </ button>
</ Body>
24. Используя jQuery, найдите все подразделения с атрибутом имени,
который содержит слово «учебник» и устанавливает желтый цвет фона.
<Тело>
<div name = "tutorial-php">
<Р> PHP </ p>
</ DIV>
<div name = "Java-учебник" <p> Java </ p>
</ DIV>
<div name = "Python-учебник-и-упражнения">
<Р> Python </ p>
</ DIV>
<button id = "button1"> Нажмите, чтобы увидеть эффект </ button>
</ Body>
24. Использование jQuery находит все подразделения с именем атрибута,
оканчивающимся на «учебник», и устанавливает желтый цвет фона.
<Тело>
<div name = "tutorial-php">
<Р> PHP </ p>
</ DIV>
<div name = "JAVAtutorial" <p> Java </ p>
</ DIV>
<div name = "Python-Tutorial">
<Р> Python </ p>
</ DIV>
<button id = "button1"> Нажмите, чтобы увидеть эффект </ button>
</ Body>
25. Находит все входные данные со значением «Красный» и изменяет текст
следующего диапазона брата.
<Тело>
<DIV>
<Метка>
<input type = "radio" name = "color" value = "Red">
<SPAN> имя </ SPAN>
</ Метка>
</ DIV>
<DIV>
<Метка>
<input type = "radio" name = "color" value = "Green">
<SPAN> значение </ SPAN>
</ Метка>
</ DIV>
<DIV>
<Метка>
<input type = "radio" name = "color" value = "Black">
<SPAN> значение </ SPAN>
</ Метка>
</ DIV>
<button id = "button1"> Нажмите, чтобы увидеть эффект </ button>
</ Body>
26. Находит все входные данные, которые не имеют названия «color», и
добавляет текст к диапазону рядом с ним.
<Тело>
<DIV>
<input type = "radio" name = "color" value = "Red">
<SPAN> Красный </ SPAN>
</ DIV>
<DIV>
<input type = "radio" value = "Cold Fusion">
<SPAN> Sky </ SPAN>
</ DIV>
<DIV>
<input type = "radio" name = "accept" value = "Злые планы">
<SPAN> море </ SPAN>
</ DIV>
<button id = "button1"> Нажмите, чтобы увидеть эффект </ button>
</ Body>
27. Находит все входные данные с именем атрибута, которое начинается с 'P',
и помещает в них текст.
28. Вставляет HTML перед всеми абзацами, используя JQuery.
<Тело>
<p> Учебник по PHP </ p>
<p> Python Tutorial </ p>
<p> Учебник по Java </ p>
<button id = "button1"> Нажмите, чтобы увидеть эффект </ button>
</ Body>
Доплнительные Задания
Задание 1 Реализуйте подпункты перечисленные ниже путем добавления на
страницу соответствующего jQuery UI кода:
1. Сделайте элемент с id=el1 перетаскиваемым и растягиваемым.
2. Сделайте список с id=sort1 сортируемым и затем расставьте элементы этого
списка в правильном порядке.
3. Сделайте элементы с id=el2 и id=el3 перетаскиваемыми. После этого сделайте
так, чтобы первая область (c id=drop1) принимала оба элемента, а вторая (c id=drop2)
только элемент с id=el3. После того, как элемент будет перетащен в принимающую его
область перетаскиваемый элемент должен стать невидимым, а цвет фона области должен
изменится на зеленый.
Задание 2 Выполните подпункты перечисленные ниже:
1. Исправьте ошибки в группировке элементов в задании для того, чтобы виджет
accordion был отображен корректно.
2. Создайте на основе приведенных в задании данных виджет accordion.
3. Создайте виджет autocomplete, который будет производить поиск по списку
приведенных в задании стран. Сделайте так, чтобы виджет начинал поиск только если
длина ввода пользователя превышает 3 символа.
4. Оформите как кнопки элементы с id=el1, id=el2, id=el3.
Задание 3 Выполните подпункты перечисленные ниже:
1. Создайте на основе приведенных в задании данных виджет tabs.
2. Создайте диалоговые окна на основе приведенного в задании описания и
привяжите их вызовы к кнопкам:
Задание 4 Выполните подпункты перечисленные ниже:
1. После нажатия на кнопки с id but1, but2 и but3 к элементам c id container1 и
container2 должны примениться эффекты описанные в задании.
2. Создайте анимацию по условиям описанным в задании:
2.1. После нажатия на кнопку с id=but1 к элементу с id=container1 должен
примениться
эффект
"Подпрыгивание",
а
к
элементу
с
id=container2
эффект
"Пульсирование".
2.2. После нажатия на кнопку с id=but2 элемент с id=container1 должен исчезнуть с
эффектом "Взрыв", а элемент с id=container2 с эффектом "Рассеивание".
2.3. После нажатия на кпопку с id=but3 элемент с id=container1 должен появится с
эффектом "Выскальзывание", а элемент с id=container2 с эффектом "Падение".
Задание 5
1 Используя библиотеки JQuery, разместите на страницах сайта слайдер и
галерею (слайдер и галерею выбрать самостоятельно).
2 Подключите библиотеку jQuery UI для разрабатываемого сайта и выберите
необходимую тему оформления.