Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы JavaScript

Урок 15. jQuery: мэппинг, append и appenTo. Обход DOM с использованием jQuery.


Мэппинг (отображение) при помощи jQuery

В предыдущих уроках мы рассматривали задачу построения второго массива по первому, посмотрим на код получения массива полей ввода из коллекции массивоподобного объекта самих полей ввода:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8" />
			<title>Мэппинг (отображение)</title>
		</head>
		<body>
		
		<button>"Инпуты"</button>
		<li><input value="11"></li>
		<li><input value="23"></li>
		<li><input value="17"></li>
		<li><input value="34"></li>
		<li><input value="45"></li>
		
		<script>
		document.querySelector('button').addEventListener('click', function(ev){
			var is = document.querySelectorAll('input');
			var vals = Array.prototype.map.call(is, function(x){
				return +x.value;
			})
			
			ev.target.textContent = vals;
		});
		</script>
		
		</body>
	</html>
Показать в браузере (откроется в новой вкладке)

При нажатии на кнопку "Инпуты" надпись на ней изменится на значения полей ввода. Рассмотрим теперь как эту же задачу можно осуществить с помощью jQuery:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8" />
			<title>Мэппинг (отображение) через jQuery</title>
			<script src="/library/jquery-3.0.0.min.js"></script>
		</head>
		<body>
		
		<button>"Инпуты"</button>
		<li><input value="11"></li>
		<li><input value="23"></li>
		<li><input value="17"></li>
		<li><input value="34"></li>
		<li><input value="45"></li>
		
		<script>
		$('button').on('click', function(){
			var vals = $('input').map(function(){
				return +$(this).val()
			}).get();
			
			$(this).text( vals);
		});
		</script>
		
		</body>
	</html>

Обращаю ваше внимание на то, что в этом случае к документу должен быть подключён файл jQuery (строка 6 в коде).

jQuery: append и appendTo

Рассмотрим некоторые правила выборки и вставки элементов DOM с помощью jQuery:

Значение Описание Пример
$('селектор') выбирает элементы $('h1'), $('myDiv')
$('<тег>...</тег>') создаёт элементы (куски виртуального DOM) $('h1'), $('myDiv')

После того, как элемент создан, он должен быть добавлен к общему DOM при помощи append и appendTo:

x = $('<тег>...</тег>');

$('селектор').append(x);
/* или */
x.appendTo($('селектор'));

append и appendTo делают одно и то же (добавляют указанный фрагмент DOM к общему дереву DOM), но возвращают разное:

куда.append(что)
возвращает куда

что.appendTo(куда)
возвращает что

Рассмотрим пример:
<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>append и appendTo</title>
			<script src="/library/jquery-3.0.0.min.js"></script>
		</head>
		<body>
		
		<div>Раздел в body</div>
		
		<script>
			x = $('<p>Параграф, созданный скриптом</p>');
			$('div').append(x);
		</script>
		
		</body>
	</html>

Результат отображения:


Обход DOM с использованием jQuery

Рассмотрим такую задачу: у нас есть сырая таблица с данными и нам нужно извлечь их оттуда да придать таблице более привлекательный вид. Начнём с html-кода таблицы:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Таблица с данными</title>
		</head>
		<body>
		
		<table id="tab">
		
			<tr>
				<th>Валюта</th><th>Покупка</th><th>Продажа</th>
			</tr>
			
			<tr>
				<td>Доллар США</td><td>68.17</td><td>70.55</td>
			</tr>
			
			<tr>
				<td>Евро</td><td>76.14</td><td>77.25</td>
			</tr>
			
			<tr>
				<td>Франк</td><td>69.33</td><td>72.50</td>
			</tr>
			
		</table>
		
		</body>
	</html>

Пока что это выглядит так:


Используем теперь jQuery, передавая туда нужные правила CSS:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Таблица с данными</title>
			<script src="/library/jquery-3.0.0.min.js"></script>
		</head>
		<body>
		
		<table id="tab">
		
			<tr>
				<th>Валюта</th><th>Покупка</th><th>Продажа</th>
			</tr>
			
			<tr>
				<td>Доллар США</td><td>68.17</td><td>70.55</td>
			</tr>
			
			<tr>
				<td>Евро</td><td>76.14</td><td>77.25</td>
			</tr>
			
			<tr>
				<td>Франк</td><td>69.33</td><td>72.50</td>
			</tr>
			
		</table>
		
		<script>
			$(function(){
				$('table').css( {'border-style' : 'double', 'border-width' : '5px'} );
				$('tr:nth-child(odd)').css( {'background' : '#ccc'} );
				
				/* Далее создаём массив объектов */
				
				var rates = [], rate;
				$('tr:not(:first-child)').each(function(el){
					rate = {};
					rate.name = $(this).children(':first').text();
					rate.name = $(this).children('nth-child(2)').text();
					$(this).children.first().css( {'font-style' : 'italic'} );
					rate.buy = $(this).children(':last').text();
					rates.push(rate);
					
				});
			});
		</script>
		
		</body>
	</html>

И вот вам результат - код готовой красивой таблицы:


Рассмотрим теперь обратную задачу: имеется массив данных и по нему нужно построить html-код таблицы:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>jQuery: построение таблицы по массиву</title>
			<script src="/library/jquery-3.0.0.min.js"></script>
		</head>
		<body>
		
		<script>
			/* Исходный массив */
			var rates = [{
				"name" : "Доллар США",
				"sell" : "70.55",
				"buy" : "68.17"
			}, {
				"name" : "Евро",
				"sell" : "77.25",
				"buy" : "76.14"
			}, {
				"name" : "Франк",
				"sell" : "72.50",
				"buy" : "69.33"
			}];
			
			/* Строим по нему таблицу */
			$(function(){
				var t = $('<table id="tab"><tr><th>Валюта</th><th>Покупка</th><th>Продажа</th></table>'), tr;
					
				$(rates).each(function(i,v){
					tr = $('<tr>');
					tr.append($('<td>' + v.name + '</td>'))
					  .append($('<td>' + v.buy + '</td>'))
					  .append($('<td>' + v.sell + '</td>'));
					t.append(tr).css( {'border-style' : 'double', 'border-width' : '5px'} );
				});
				
				/* С помощью .after указываем, что созданная таблица должна
				быть следующим потомком body */
				$('body').after(t);
				$('#tab tr:nth-child(odd)').css( {'background' : '#ccc'} );
				$('#tab tr:not(:first-child)').each(function(){
					$(this).find('td').first().css( {'font-style' : 'italic'} );
				});
			});
		</script>
		
		</body>
	</html>

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля