jQuery Core - упражнения, практика, решение

Последнее обновление 21 сентября 2018 11:13:25 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

jQuery Core [9 упражнений с решением]

[ Внизу страницы доступен редактор для написания и выполнения сценариев. ]

1. Найдите все элементы h1, которые являются дочерними элементами элемента div, и примените к ним фон. Перейти к редактору
Пример данных :

 <Тело>
<H1> ABC </ h1> 
 <DIV>
  <H1> Div-1 </ h1>
  <H1> Div-2 </ h1>
  </ DIV>
  <H1> хуг </ h1>
 </ Body>

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

2. Установите цвет фона страницы на красный. Перейти к редактору
Нажмите меня, чтобы увидеть решение

3. Скрыть все элементы ввода в форме. Перейти к редактору
Тестовые данные :

 <Тело>
  <form name = 'demo_form'>
  Имя: <input type = "text" name = "fname"> <br>
  Фамилия: <input type = "text" name = "lname"> <br>
  <input type = "submit" value = "Submit">
  </ Форма>
  </ Body>

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

4. Найдите текстовое значение тега конкретного параметра для выбранного параметра. Перейти к редактору
Пример данных :

 <Тело>
 <select id = "myselect">
    <option value = "1"> Option-1 </ option>
	<option value = "2"> Option-2 </ option>
	<option value = "3"> Option-3 </ option>
	</ Выберите> 
 </ Body>

Ожидаемый результат:
"Вариант-2"

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

5. Установите / снимите флажок ввода или переключатель? Перейти к редактору
Пример данных :

 <Тело>
  <form action = "">
 <input type = "radio" name = "sex" value = "male" selected> Male <br>
 <input type = "radio" name = "sex" value = "female"> Женский
 </ Форма>
 </ Body>

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

6. Напишите код jQuery для динамического добавления элемента div (и всего его содержимого) к элементу body. Перейти к редактору
Вставьте следующее в HTML тег <body> :

 <div> <h1> JQuery Core </ h1> </ div>

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

7. Напишите код jQuery, чтобы получить один элемент из выбора. Перейти к редактору
Пример данных :

 <Тело>
<Щ>
<li> Учебник по HTML </ li>
<li> Учебное пособие по Mongodb </ li>
<li> Python Tutorial </ li>
</ Body>

Пример вывода : "Учебное пособие по Mongodb"

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

8. Напишите код jQuery для добавления тега <b> в начале элемента списка, содержащего индекс элемента списка. Перейти к редактору
Пример данных :

 <Тело>
<Щ>
<li> Учебник по HTML </ li>
<li> Учебное пособие по Mongodb </ li>
<li> Python Tutorial </ li>
</ Body>

Пример вывода :

0: Html Tutorial
1: учебник Mongodb
2: Учебник по Python

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

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

 <a href="kodesource.top/sqlite/" id='tut'> Учебник по SQLite </a>

Измените гиперссылку на -> kodesource.top/mysql/mysql-tutorials.php
текст -> учебник по MySQL

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

Еще не все !

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

Демонстрация в реальном времени:

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