JQuery Практические упражнения, практика, решение - часть I

jQuery Практические упражнения [50 упражнений с решением]

1. Проверьте, загружен ли jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

2. Прокрутите до верхней части страницы с помощью jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

3. Отключите меню правой кнопки мыши на html-странице, используя jquery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

4. Отключить / включить кнопку отправки формы. Перейти к редактору
Отключите кнопку отправки, пока посетитель не установит флажок.
Смотрите пример выходных данных здесь .

Нажмите меня, чтобы увидеть решение

5. Исправить поврежденные изображения автоматически. Перейти к редактору
Скройте следующий сломанный тег img в разделе body.
Пример данных :

 <Тело>
<a href="https://kodesource.top"> <img src = "// kodesource.top/image/w3resourcelogo.gif" alt = "w3resource logo" width = "150" height = "78" /> < / а>
</ Body>

Нажмите меня, чтобы увидеть решение

6. Моргайте текст с помощью jQuery. Перейти к редактору
Смотрите пример выходных данных здесь .

Нажмите меня, чтобы увидеть решение

7. Создайте табличный эффект «Полосы зебры». Перейти к редактору
Смотрите пример выходных данных здесь .

Нажмите меня, чтобы увидеть решение

8. Распечатайте страницу, используя jQuery. Перейти к редактору
Смотрите пример выходных данных здесь .
Нажмите меня, чтобы увидеть решение

9. Ограничить ввод символов в текстовой области, включая количество. Перейти к редактору
Смотрите пример выходных данных здесь .
Нажмите меня, чтобы увидеть решение

10. Сделайте первое слово жирным шрифтом из всех элементов. Перейти к редактору
Смотрите пример выходных данных здесь .
Нажмите меня, чтобы увидеть решение

11. Создайте div, используя jQuery с тегом style. Перейти к редактору
Нажмите меня, чтобы увидеть решение

12. Переместите один элемент DIV внутрь другого, используя jQuery. Перейти к редактору

 Переместить следующее 
<div id = "source">
...
</ DIV>
к 
<div id = "destination">
...
</ DIV>

Нажмите меня, чтобы увидеть решение

13. Выберите значения из объекта JSON, используя jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

14. Добавьте элементы списка в неупорядоченный элемент списка. Перейти к редактору
Нажмите меня, чтобы увидеть решение

15. Удалите все параметры в окне выбора, а затем добавьте один параметр и выберите его. Перейти к редактору

Нажмите меня, чтобы увидеть решение

16. Подчеркните все слова текста, используя jQuery. Перейти к редактору

Нажмите меня, чтобы увидеть решение

17. Как получить значение текстового поля с помощью jQuery? Перейти к редактору

Нажмите меня, чтобы увидеть решение

18. Удалите все CSS-классы, используя jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

19. Удалите стиль, добавленный с помощью функции .css (), используя jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

20. Различайте левый и правый щелчок мышью с помощью jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

21. Проверьте, является ли объект объектом jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

22. Как определить, нажал ли пользователь «Enter Key» с помощью jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

23. Подсчитайте количество строк и столбцов в таблице, используя jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

24. Как получить текст textarea с помощью jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

25. Доступ к полям ввода формы с помощью jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

26. Найдите абсолютную позицию элемента, используя jQuery. Перейти к редактору

Нажмите меня, чтобы увидеть решение

27. Преобразуйте объект jQuery в строку. Перейти к редактору
Вы можете увидеть форму вывода здесь
Нажмите меня, чтобы увидеть решение

28. Как определить, что содержимое текстового поля изменилось с помощью jQuery? Перейти к редактору
Нажмите меня, чтобы увидеть решение

29. Удалите определенное значение из массива, используя jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

30. Изменить текст кнопки с помощью jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

31. Добавьте параметры в раскрывающийся список с помощью jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

32. Установите background-image используя свойство jQuery CSS. Перейти к редактору
Нажмите меня, чтобы увидеть решение

33. Удалите все строки таблицы, кроме первой, используя jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

34. Как получить выбранное значение и текущий выбранный текст из выпадающего списка, используя jQuery? Перейти к редактору
Нажмите меня, чтобы увидеть решение

35. Отключите ссылку, используя jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

36. Измените класс CSS с помощью jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

37. Добавьте CSS-класс, используя jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

38. Подсчитайте дочерние элементы, используя jQuery. Перейти к редактору
Примечание. Подсчитайте количество элементов «p» из следующего:

 <Тело>
<div id = "selected">
<Р> Красный </ p>
<Р> Белый </ p>
<Р> Зеленый </ р>
<Р> Черный </ p>
<Р> синий </ p>
<Р> Orange </ p>
</ DIV>
</ Body> 

Нажмите меня, чтобы увидеть решение

39. Ограничить ввод числа только для текстовых полей, включая десятичные точки. Перейти к редактору
Нажмите меня, чтобы увидеть решение

40. Найдите загруженную версию jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

41. Удалите определенную строку таблицы, используя jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

42. Установите значение во входном тексте, используя jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

43. Установите значение в диапазоне, используя jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

44. Найдите класс нажатого элемента. Перейти к редактору
Нажмите меня, чтобы увидеть решение

45. Установите атрибут href во время выполнения, используя jquery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

46. Удалите отключенный атрибут, используя jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

47. Найдите общую ширину элемента (включая ширину, отступы и границы) в jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

48. Измените параметры выбора, используя jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

49. Доступ к данным HTML-формы с помощью jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

50. Добавьте атрибут, используя jQuery. Перейти к редактору
Нажмите меня, чтобы увидеть решение

Еще не все !

Не отправляйте решение вышеупомянутых упражнений здесь, если вы хотите внести вклад, перейдите на соответствующую страницу упражнения.

См. Pen- common-jquery-core-упражнение от w3resource ( @ w3resource ) в CodePen .