JQuery Практические упражнения, практика, решение - Фундаментальный-I
jQuery Fundamental - I упражнения [50 упражнений с решением]
[ Внизу страницы доступен редактор для написания и выполнения сценариев. ] 1. Используя jQuery, найдите все текстовые поля и создайте рамку. Затем добавляет все абзацы к объекту jQuery, чтобы установить их границы красным цветом. Перейти к редактору
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
2. Установите красный цвет фона следующих элементов с помощью jQuery. Перейти к редактору
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. Зарегистрируйте обработчик, который будет вызываться при завершении Ajax-запросов. Перейти к редактору
Примечание. Настройте базовый запрос загрузки Ajax, прикрепите обработчик событий к документу. Теперь сделайте Ajax-запрос, используя любой метод jQuery.
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
12. Зарегистрируйте обработчик, который будет вызываться, когда Ajax запрашивает завершение с ошибкой. Перейти к редактору
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
13. Присоедините функцию, которая должна быть выполнена перед отправкой Ajax-запроса. Перейти к редактору
Примечание. Настройте базовый запрос загрузки Ajax, прикрепите обработчик событий к документу. Теперь сделайте Ajax-запрос, используя любой метод jQuery.
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
14. Зарегистрируйте обработчик, который будет вызываться при запуске первого запроса Ajax. Перейти к редактору
Примечание. Настройте базовый запрос загрузки Ajax, прикрепите обработчик событий к документу. Теперь сделайте Ajax-запрос, используя любой метод jQuery.
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
15. Зарегистрируйте обработчик, который будет вызываться после завершения всех запросов Ajax. Перейти к редактору
Примечание. Настройте базовый запрос загрузки Ajax, прикрепите обработчик событий к документу. Теперь сделайте Ajax-запрос, используя любой метод jQuery.
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
16. Присоедините функцию, которая будет выполняться всякий раз, когда Ajax-запрос завершается успешно. Перейти к редактору
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
17. С помощью jQuery подсчитайте каждый элемент (включая заголовок, тело и т. Д.) В документе. Перейти к редактору
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
18. С помощью jQuery подсчитайте все элементы внутри подразделения. Перейти к редактору
<Тело> <div id = "iddiv"> <span> Это промежуток </ span> <p> Это абзац </ p> <button id = "button1"> Нажмите, чтобы увидеть эффект </ button> </ DIV> </ Body>
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
19. Используя jQuery, нажмите кнопку, чтобы анимировать элемент абзаца с рядом различных свойств. Перейти к редактору
<Тело> <p id = "pid"> jQuery </ p> <button id = "button1"> Нажмите, чтобы увидеть анимацию </ button> </ Body>
п {
цвет фона: # B0E0E6;
ширина: 70 пикселей;
граница: 1px сплошной красный;
}
Анимационные свойства:
ширина: "70%",
непрозрачность: 0,4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
20. Использование jQuery анимирует левое свойство div с относительным значением. Перейти к редактору
<Тело> <button id = "left"> << / button> <button id = "right" >> </ button> <div class = "block"> </ div> </ Body>
div {
положение: абсолютное;
цвет фона: # B0E0E6;
слева: 40 пикселей;
ширина: 80 пикселей;
высота: 80 пикселей;
поле: 5px;
}
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
21. Использование 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;
}
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
22. Используя 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;
}
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
23. Использование jQuery добавляет некоторый текст ко всем абзацам. Перейти к редактору
<Тело> <div id = "div1"> </ div> <div id = "div2"> </ div> <div id = "div3"> </ div> <button id = "button1"> Нажмите, чтобы увидеть эффект </ button> </ Body>
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
24. Использование jQuery добавляет объект jQuery ко всем абзацам. Перейти к редактору
<Тело> <strong> Упражнения </ strong> <Р> JavaScript </ p> <Р> JQuery </ р> <button id = "button1"> Нажмите, чтобы увидеть изменения </ button> </ Body>
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
25. Использование jQuery добавляет элемент ко всем абзацам. Перейти к редактору
<Тело> <Р> JavaScript </ p> <Р> JQuery </ р> <button id = "button1"> Нажмите, чтобы увидеть изменения </ button> </ Body>
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
26. С помощью jQuery добавьте все промежутки к элементу с указанным идентификатором. Перейти к редактору
<Тело> <span> Упражнения </ span> <p id = "myid"> jQuery </ p> <button id = "button1"> Нажмите, чтобы увидеть эффект </ button> </ Body>
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
27. Используя jQuery, отображайте отмеченный атрибут и свойство флажка по мере его изменения. Перейти к редактору
<Тело> <input id = "check1" type = "checkbox" флажок = "флажок"> <label for = "check1"> Check me </ label> </ Body>
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
28. Найти атрибут заголовка первого выделенного на странице. Перейти к редактору.
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
29. Используя jQuery, найдите все ссылки с атрибутом hreflang de. Перейти к редактору
<Тело> <p> Упражнения jQuery, практика, <em title = "Реальная жизнь jQuery или все."> Решение </ em>. </ p> <p id = "id1"> </ p> <button id = "button1"> Нажмите, чтобы увидеть эффект </ button> </ Body>
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
30. Используя 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>
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
31. Используя 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>
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
32. Использование 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>
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
33. Находит все входные данные со значением «Красный» и изменяет текст следующего диапазона брата. Перейти к редактору
<Тело> <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>
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
34. Находит все входные данные, которые не имеют названия «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>
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
35. Находит все входные данные с именем атрибута, которое начинается с 'P', и помещает в них текст. Перейти к редактору
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
36. Вставляет HTML перед всеми абзацами, используя JQuery. Перейти к редактору
<Тело> <p> Учебник по PHP </ p> <p> Python Tutorial </ p> <p> Учебник по Java </ p> <button id = "button1"> Нажмите, чтобы увидеть эффект </ button> </ Body>
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
37. Вставляет элемент DOM перед всеми абзацами, используя jQuery. Перейти к редактору
<Тело> <p> Учебник по PHP </ p> <p> Python Tutorial </ p> <p> Учебник по Java </ p> <button id = "button1"> Нажмите, чтобы увидеть эффект </ button> </ Body>
Нажмите меня, чтобы увидеть решение
38. Вставляет объект jQuery перед всеми абзацами. Перейти к редактору
Примечание. Здесь объект похож на массив элементов DOM.
<Тело> <p> Учебник по PHP </ p> <b> w3resource </ b> <button id = "button1"> Нажмите, чтобы увидеть эффект </ button> </ Body>
Нажмите меня, чтобы увидеть решение
39. Продемонстрируйте, как обрабатывать щелчок и двойной щелчок по абзацу. Перейти к редактору
Примечание. Поскольку координаты являются относительными к окну, то в данном случае это относится к демонстрационному фрейму.
<Тело> <p> Нажмите или дважды щелкните здесь. </ p> <p id = "result"> </ p> </ Body>
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
40. Показать сообщение, когда фокус удален с элемента. Перейти к редактору
Примечание. Установите и удалите фокус из поля 1.
<Тело>
<Форма>
<FIELDSET>
<textarea lines = "4" cols = "50">
На w3resource.com вы узнаете, как сделать сайт. Мы предлагаем бесплатные учебные пособия по всем технологиям веб-разработки.
</ TextArea>
<input type = "button" value = "Кнопка ввода">
</ FIELDSET>
</ Форма>
<Р> </ р>
<button id = "button1"> Нажмите, чтобы увидеть эффект </ button>
</ Body>
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
41. Найдите все кнопки и отметьте их с помощью jQuery. Перейти к редактору
<Тело>
<Форма>
<FIELDSET>
<textarea lines = "4" cols = "50">
На w3resource.com вы узнаете, как сделать сайт. Мы предлагаем бесплатные учебные пособия по всем технологиям веб-разработки.
</ TextArea>
<input type = "button" value = "Кнопка ввода">
</ FIELDSET>
</ Форма>
<Р> </ р>
<button id = "button1"> Нажмите, чтобы увидеть эффект </ button>
</ Body>
Вы можете увидеть выход отсюда
Нажмите меня, чтобы увидеть решение
42. Используя jQuery, добавьте обратный вызов или коллекцию обратных вызовов в список обратных вызовов. Перейти к редактору
Нажмите меня, чтобы увидеть решение
43. Отключить список обратных вызовов от выполнения каких-либо действий. Перейти к редактору
Нажмите меня, чтобы увидеть решение
44. Проверьте, не отключен ли список обратных вызовов. Перейти к редактору
Нажмите меня, чтобы увидеть решение
45. Используя jQuery, удалите все обратные вызовы из списка. Перейти к редактору
Нажмите меня, чтобы увидеть решение
46. Вызвать все обратные вызовы с заданными аргументами. Перейти к редактору
Нажмите меня, чтобы увидеть решение
47. Используя jQuery, проверьте, не были ли уже вызваны обратные вызовы хотя бы один раз. Перейти к редактору
Нажмите меня, чтобы увидеть решение
48. Запустите список обратных вызовов с определенным контекстом и массивом аргументов. Перейти к редактору
Нажмите меня, чтобы увидеть решение
49. Проверьте, содержит ли список обратного вызова определенный обратный вызов. Перейти к редактору
Нажмите меня, чтобы увидеть решение
50. Заблокируйте список обратных вызовов в его текущем состоянии. Перейти к редактору
Нажмите меня, чтобы увидеть решение
Еще не все !
Не отправляйте решение вышеупомянутых упражнений здесь, если вы хотите внести вклад, перейдите на соответствующую страницу упражнения.
См. Pen- common-jquery-core-упражнение от w3resource ( @ w3resource ) в CodePen .
Новый контент: Composer: менеджер зависимостей для PHP , R программирования