JQuery Практические упражнения, практика, решение - Фундаментальный-II

jQuery Fundamental - I упражнения [50 упражнений с решением]

jQuery Fundamental - II упражнения [44 упражнения с решением]

51. Проверьте состояние блокировки списка обратных вызовов. Перейти к редактору

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

52. Удалите один обратный вызов или набор обратных вызовов из списка обратных вызовов. Перейти к редактору

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

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

Вы можете увидеть выход отсюда

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

54. Находит все флажки ввода. Перейти к редактору

Вы можете увидеть выход отсюда

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

55. Находит все элементы, которые отмечены или выбраны. Перейти к редактору

Вы можете увидеть выход отсюда

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

56. Находит проверенный радиовход. Перейти к редактору

Вы можете увидеть выход отсюда

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

57. Граница вокруг всех элементов списка, которые являются дочерними для указанного класса неупорядоченного списка. Перейти к редактору

Вы можете увидеть выход отсюда

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

58. Используя jQuery, найдите всех потомков каждого подразделения. Перейти к редактору

 <p> Это абзац. </ p> 
<div> <p> Это абзац внутри подразделения. </ p> </ div>
<p> Вот еще один абзац. </ p> 
<div> Это элемент <span> span </ span> внутри подразделения. </ div>

Вы можете увидеть выход отсюда

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

59. Используя jQuery, найдите всех детей с указанным классом каждого подразделения. Перейти к редактору

 <Тело>
<DIV>
  <span> Это промежуток внутри подразделения. </ span>
  <p class = "test"> Это абзац с указанным классом внутри подразделения. </ p>
  <div class = "test"> Это разделение с указанным классом. </ div>
  <p> Это еще один абзац внутри подразделения </ p>
</ DIV>
</ Body>

Вы можете увидеть выход отсюда

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

60. Найдите все текстовые узлы внутри абзаца и оберните их курсивом. Перейти к редактору

 <Тело>
<p> <a href="/jquery-exercises/"> jQuery </a> Упражнения, практика и решение </ p>
<p> <a href="/javascript-exercises/"> JavaScript </a> Упражнения, практика и решение </ p>  
</ Body>

Вы можете увидеть выход отсюда

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

61. Отображать сообщение, когда событие contextmenu запускается для элементов абзаца. Перейти к редактору

 <Тело>
  <p> Щелкните правой кнопкой мыши здесь. </ p>
  <p> Опять щелкните правой кнопкой мыши здесь. </ p>  
</ Body>

Вы можете увидеть выход отсюда

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

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

Вы можете увидеть выход отсюда

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

63. Получить цвет фона кликабельного деления. Перейти к редактору

Вы можете увидеть выход отсюда

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

64. Получите стили (ширина, высота, цвет текста и цвет фона) кликаемого деления. Перейти к редактору

 <Тело>
 <p id = "result"> & nbsp; </ p>
 <div id = "box1"> A </ div>
 <div id = "box2"> B </ div>
 <div id = "box3"> C </ div>
 

Вы можете увидеть выход отсюда

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

65. Измените цвет любого абзаца на красный при наведении курсора мыши. Перейти к редактору

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

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

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

67. Нажмите на слово в абзаце и выделите его. Перейти к редактору

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

68. Измените шрифт веса и цвета абзацев на mouseenter и mouseleave. Перейти к редактору

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

69. Увеличивайте размер деления при нажатии на него. Перейти к редактору

Вы можете увидеть выход отсюда

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

70. Получить сохраненное значение из элемента деления. Перейти к редактору

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

71. Вывести сообщение для события dblclick во всех абзацах на странице. Перейти к редактору

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

72. Дважды щелкните, чтобы переключить цвет фона абзаца. Перейти к редактору

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

73. Разрешить отложенный объект, когда пользователь нажимает кнопку, вызывая ряд функций обратного вызова. Перейти к редактору

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

74. Анимируйте сокрытие и показ двух div, задерживая первый, прежде чем показывать его. Перейти к редактору

Вы можете увидеть выход отсюда

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

75. Нажмите на абзац и добавьте еще один абзац. Перейти к редактору

Вы можете увидеть выход отсюда

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

76. Завершите пользовательскую функцию очереди, используя dequeue, которая позволяет очереди продолжать движение. Перейти к редактору

Примечание. Метод .dequeue () используется для выполнения следующей функции в очереди для соответствующих элементов. Когда вызывается .dequeue (), следующая функция в очереди удаляется из очереди, а затем выполняется. Эта функция должна в свою очередь (прямо или косвенно) вызывать .dequeue (), чтобы последовательность могла продолжаться.

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

77. Найдите все входные данные, которые являются потомками формы, и пометьте их пунктирной красной рамкой . Перейти к редактору

Примечание. Селектор потомков («потомок предка») выбирает все элементы, являющиеся потомками данного предка. Потомок элемента может быть потомком, внуком, правнуком и т. Д. Этого элемента.

 <Тело>
<Форма>
  <label for = "name"> Дочерний элемент формы </ label>
  <input name = "name" id = "name">
  <FIELDSET>
    <label for = "newsletter"> Внук формы, потомок набора полей: </ label>
    <input name = "newsletter" id = "newsletter">
  </ FIELDSET>
</ Форма>
Брат или сестра в форме: <input name = "none">
</ Body>

Вы можете увидеть выход отсюда

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

78. Удалить все параграфы из DOM. Перейти к редактору

Примечание: .detach () используется для удаления набора соответствующих элементов из DOM.

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

79. Найдите все элементы, которые отключены. Перейти к редактору

 <Тело>
<Форма>
Имя: <input type = "text" name = "fname"> <br>
Фамилия: <input type = "text" name = "lname" отключена> <br>
</ Форма>
</ Body>

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

80. Переберите три абзаца и установите их цветное свойство красным. Перейти к редактору

 <Тело>
<p> Нажмите здесь </ p>
<p> перебирать </ p>
<p> эти абзацы. </ p>
</ Body>

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

81. Находит каждый элемент абзаца. Перейти к редактору

 <Тело>
<Р> PARAGRAPH1 </ р>
<Р> PARAGRAPH1 </ р>
<DIV> Division1 </ DIV>
</ Body>

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

82. Удаляет все дочерние узлы из всех абзацев. Перейти к редактору

 <Тело>
<p> jQuery <b> Упражнения </ b>. </ p>
<p> JavaScript-упражнения </ p>?
<button> Нажмите, чтобы удалить все дочерние узлы вышеупомянутых абзацев </ button>
</ Body>

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

83. Находит все пустые элементы. Перейти к редактору

Примечание: не иметь дочерних элементов или текста.

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

84. Найти все входные элементы, которые включены. Перейти к редактору

 <Форма>
Имя: <input type = "text" name = "fname"> <br>
Фамилия: <input type = "text" name = "lname" отключена> <br>
</ Форма>

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

85. Выбирает все абзацы и находит элементы span внутри них и возвращает выбор обратно к абзацам. Перейти к редактору

 <Тело>
<Р> <SPAN> w3resource </ SPAN> .com </ р>
<button id = "button1"> Нажмите, чтобы увидеть эффект </ button> 
</ Body>

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

86. Установите красный цвет фона 4-го деления, добавив соответствующий класс. Перейти к редактору

 <Тело>
<DIV> </ DIV>
<DIV> </ DIV>
<DIV> </ DIV>
<DIV> </ DIV>
<DIV> </ DIV>
<DIV> </ DIV>
<button id = "button1"> Нажмите, чтобы увидеть эффект </ button>
</ Body>

 div {
ширина: 20 пикселей;
высота: 20 пикселей;
поле: 5px;
плыть налево;
граница: 2px сплошной зеленый;
}
.red {
фон: красный;
}

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

87. Найдите шестую ячейку (второй ряд и третий столбец) таблицы 3х3. Перейти к редактору

 <Тело>
  <table border = "1">
  <TR> <TD> Ячейка-1 </ TD> <TD> Ячейка-2 </ TD> <TD> Ячейка-3 </ TD> </ TR>
  <TR> <TD> Cell-4 </ TD> <TD> Cell-5 </ TD> <TD> Ячейка-6 </ TD> </ TR>
  <TR> <TD> Ячейка-7 </ TD> <TD> Ячейка-8 </ TD> <TD> Ячейка-9 </ TD> </ TR>
  </ Table>
  </ Body>
  

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

88. Находит четные строки таблицы, соответствующие первой, третьей и т. Д. (Индекс 0, 2, 4 и т. Д.). Перейти к редактору

 <Тело>
<table border = "1"> 
<tr> <td> R1C1 Index-0 </ td> <td> R1C2 Index-0 </ td> </ tr> 
<tr> <td> R2C1 Index-0 </ td> <td> R2C2 Index-1 </ td> </ tr> 
<tr> <td> R3C1 Index-0 </ td> <td> R3C2 Index-2 </ td> </ tr> 
<tr> <td> R4C1 Index-0 </ td> <td> R4C2 Index-3 </ td> </ tr> 
<tr> <td> R5C1 Index-0 </ td> <td> R5C2 Index-4 </ td> </ tr> 
л; / таблица> 
<button id = "button1"> Нажмите, чтобы увидеть эффект </ button>  
</ Body> 
  

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

89. Проверьте, была ли нажата клавиша META при возникновении события. Перейти к редактору

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

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

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

91. Отобразите положение мыши относительно левого и верхнего краев документа (в этом фрейме). Перейти к редактору

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

92. Отмените действие по умолчанию (навигация) щелчка. Перейти к редактору

 <Тело>
<a href="/"> Якоря, на которые нажали, не переведут браузер на новый URL-адрес </a>
<p id = "log"> </ p>
</ Body>

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

93. Показать предыдущее значение обработчика (последнее возвращенное значение, вызванное этим событием обработчиком события, который был.). Перейти к редактору

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

94. При наведении курсора на якорь предупреждайте вводимый тип элемента. Перейти к редактору

 <Тело>
<a href="/"> Посетите w3resource </a>
</ Body>

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

Еще не все !

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

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