События jQuery - Упражнения, Практика, Решение
События jQuery [24 упражнения с решением]
[ Внизу страницы доступен редактор для написания и выполнения сценариев. ] 1. Присоедините событие щелчка и двойного щелчка к элементу <p>. Перейти к редактору
Пример данных :
HTML:
<Тело> <p> Нажми меня! </ p> </ Body>
Для одного клика добавьте следующий абзац:
<p> Это событие клика </ p>
Для двойного щелчка добавьте следующий абзац:
<p> Это событие двойного щелчка </ p>
Нажмите меня, чтобы увидеть решение
2. Присоедините функцию к событию размытия. Событие размытия происходит, когда следующее поле <input> Field1 теряет фокус. Перейти к редактору
Пример данных :
<Тело> <Форма> <input id = "field1" type = "text" value = "Field 1"> <input id = "field2" type = "text" value = "Field 2"> </ Форма> </ Body>
Нажмите меня, чтобы увидеть решение
3. Добавьте элемент <p> с текстовым сообщением при изменении поля <input>. Перейти к редактору
Пример данных :
<Тело> <form name = 'demo_form'> Имя: <input type = "text" name = "fname"> <br> Фамилия: <input type = "text" name = "lname"> <br> <input type = "submit" value = "Submit"> </ Форма> </ Body>
Нажмите меня, чтобы увидеть решение
4. Скрыть все заголовки на странице, когда они нажаты. Перейти к редактору
Пример данных :
<Тело> <H1> Заголовок-1 </ h1> <H2> Заголовок-2 </ h2> <H3> Заголовок-3 </ h3 >> </ Body>
Нажмите меня, чтобы увидеть решение
5. Дважды щелкните по абзацу, чтобы переключить цвет фона. Перейти к редактору
Пример данных :
HTML-код:
<Тело>
<p> Дважды щелкните здесь, чтобы изменить цвет фона. </ p> </ Body>
Код CSS:
п {
фон: синий;
белый цвет;
}
p.dbl {
фон: желтый;
черный цвет;
} Нажмите меня, чтобы увидеть решение
6. Нажмите заголовок, чтобы добавить еще один Перейти в редактор
Пример данных :
<h1> Нажмите меня, чтобы добавить еще один! </ h1>
Нажмите меня, чтобы увидеть решение
7. Напишите код jQuery для поиска данных, переданных методом on () для каждого элемента <p>. Перейти к редактору
Нажмите меня, чтобы увидеть решение
8. Измените цвет фона элемента <div> следующего кода при нажатии кнопки. Перейти к редактору
Пример данных :
<Тело> <div style = "background-color: yellow"> <p> Нажмите кнопку, чтобы изменить цвет фона этого абзаца. </ p> <button> Нажми меня! </ button> </ DIV> </ Body>
Нажмите меня, чтобы увидеть решение
9. Найдите положение указателя мыши относительно левого и верхнего краев документа. Перейдите в редактор.
Нажмите меня, чтобы увидеть решение
10. Запретить людям писать в первом текстовом поле (идентификатор пользователя). Перейти к редактору
Пример данных :
<Тело> <p> Идентификатор пользователя: <input type = "text" id = 'field1'> </ p> <p> Пароль: <input type = "password" id = 'field2'> </ Body>
Нажмите меня, чтобы увидеть решение
11. Отмените действие по умолчанию (щелчок) первого URL. Перейти к редактору
Пример данных :
<div style = "background-color: yellow"> <p> Нажмите кнопку, чтобы изменить цвет фона этого абзаца. </ p> <button> Нажми меня! </ button> </ DIV>
Нажмите меня, чтобы увидеть решение
12. Верните предыдущие значения пользовательских событий. Перейти к редактору
Пример данных :
<Тело> <button> Показать событие.result </ button> <Р> </ р> </ Body>
Нажмите меня, чтобы увидеть решение
13. Покажите имя тега при нажатии. Перейти к редактору
Пример данных :
<Тело> <H1> Заголовок1 </ h1> <H2> Заголовок 2 </ h2> <Р> Пункт </ р> Кнопка <> Кнопка </ кнопка> <div id = "log"> </ div> </ Body>
Нажмите меня, чтобы увидеть решение
14. Подсчитайте количество миллисекунд между двумя событиями щелчка в абзаце. Перейти к редактору
Пример данных :
<Тело> <H1> Заголовок1 </ h1> <H2> Заголовок 2 </ h2> <Р> Пункт </ р> Кнопка <> Кнопка </ кнопка> <div id = "log"> </ div> </ Body>
Нажмите меня, чтобы увидеть решение
15. Отобразите тип события при нажатии всех элементов h1. Перейти к редактору
Пример данных :
<Тело> <h1> Это header1 </ h1> <h1> Это еще один header1 </ h1> <h2> Это header2 </ h2> <h2> Это header3 </ h2> </ Body>
Нажмите меня, чтобы увидеть решение
16. Отобразите клавишу клавиатуры, которая была нажата в текстовом поле :. Перейти к редактору
Пример данных :
<body> Введите ваше имя: <input type = "text"> <DIV> </ DIV> </ Body>
Нажмите меня, чтобы увидеть решение
17. Прикрепите функцию к событию фокуса. Событие focus происходит (выводит сообщение относительно текстового поля), когда поле <input> получает фокус. Перейти к редактору
Пример данных :
<Тело> <p> <input type = "text"> <span> Введите свое имя </ span> </ p> <p> <input type = "text"> <span> Введите свою фамилию </ span> </ p> </ Body>
Нажмите меня, чтобы увидеть решение
18. Установите фокус на первое поле ввода. Перейти к редактору
Пример данных :
<Тело> <p> Имя: <input type = "text" id = 'field1'> </ p> <p> Фамилия: <input type = "password" id = 'field2'> </ p> </ Body>
Нажмите меня, чтобы увидеть решение
19. Проверьте, имеет ли вход фокус? Перейти к редактору
HTML-код:
<Тело>
<div id = "content">
<input tabIndex = "1">
<select tabIndex = "3">
<опция> выбрать меню </ опция>
</ Выберите>
<p tabIndex = "3">
Параграф
</ DIV>
</ DIV>
</ Body>
Код CSS для сфокусированного цвета:
<Стиль>
.focused {
фон: зеленый;
}
</ Стиль> Нажмите меня, чтобы увидеть решение
20. Установите цвет фона элемента, когда элемент (или любые элементы внутри него) получает фокус или теряет фокус. Перейти к редактору
HTML-код:
<Тело> <DIV> Имя: <input type = "text"> <br> Фамилия: <input type = "text"> </ DIV> </ Body>
CSS код для цвета фона ::
<Стиль>
.focusedin {
фон: зеленый;
}
.focusedout {
фон: синий;
}
</ Стиль> Нажмите меня, чтобы увидеть решение
21. Отобразите имя тега выбранного элемента. Перейти к редактору
HTML-код:
<Тело> <Р> </ р> <h2> Это заголовок 2 </ h2> <DIV> Имя: <input type = "text"> <br> Фамилия: <input type = "text"> </ DIV>
</ Body>
Нажмите меня, чтобы увидеть решение
22. Подсчитайте количество конкретных элементов. Перейти к редактору
HTML-код:
<Тело> <UL> <li> Список - 1 </ li> <li> Список - 2 </ li> <li> Список - 3 </ li> </ UL> <button> Показать количество элементов li в консоли </ button> </ Body>
Нажмите меня, чтобы увидеть решение
23. Показывать тексты при запуске событий mouseup и mousedown. Перейти к редактору
Нажмите меня, чтобы увидеть решение
24. Отображение ширины окна во время (или после) изменения его размера. Перейти к редактору
HTML-код:
<Тело> <p> Нажмите кнопку мыши и отпустите здесь. </ p> </ Body>
Нажмите меня, чтобы увидеть решение
Еще не все !
Не отправляйте решение вышеупомянутых упражнений здесь, если вы хотите внести вклад, перейдите на соответствующую страницу упражнения.
Демонстрация в реальном времени:
См. Pen- common-jquery-core-упражнение от w3resource ( @ w3resource ) в CodePen .
Каков уровень сложности этого упражнения?
Новый контент: Composer: менеджер зависимостей для PHP , R программирования