Главная страница   /   11.1. Обзор документа примера (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

11.1. Обзор документа примера

Я начал эту книгу с очень простого примера документа, базовой страницы цветочного магазина. В дальнейших главах мы выбирали из документа элементы, изучали и меняли DOM, работали с событиями, применяли к элементам эффекты. Прежде чем мы начнем рефакторинг примера, давайте вернемся к тому, с чего мы начинали. В листинге 11-1 показан базовый документ.

Листинг 11-1: Базовый документ примера
<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<script src="jquery-1.7.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script type="text/javascript">
		$(document).ready(function () {
			// jQuery statements will go here
		});
	</script>
</head>
<body>
	<h1>Jacqui's Flower Shop</h1>
	<form method="post">
		<div id="oblock">
			<div class="dtable">
				<div id="row1" class="drow">
					<div class="dcell">
						<img src="astor.png" /><label for="astor">Astor:</label>
						<input name="astor" value="0" required />
					</div>
					<div class="dcell">
						<img src="daffodil.png" /><label for="daffodil">Daffodil:</label>
						<input name="daffodil" value="0" required />
					</div>
					<div class="dcell">
						<img src="rose.png" /><label for="rose">Rose:</label>
						<input name="rose" value="0" required />
					</div>
				</div>
				<div id="row2" class="drow">
					<div class="dcell">
						<img src="peony.png" /><label for="peony">Peony:</label>
						<input name="peony" value="0" required />
					</div>
					<div class="dcell">
						<img src="primula.png" /><label for="primula">Primula:</label>
						<input name="primula" value="0" required />
					</div>
					<div class="dcell">
						<img src="snowdrop.png" /><label for="snowdrop">Snowdrop:</label>
						<input name="snowdrop" value="0" required />
					</div>
				</div>
			</div>
		</div>
		<div id="buttonDiv">
			<button type="submit">Place Order</button></div>
	</form>
</body>
</html>

Я выделил элемент script, потому что именно тут мы проведем нашу работу. Сюда я вставил повсеместно используемый jQuery обработчик для события ready, и на этом все. Больше нет никаких JavaScript выражений. На рисунке 11-1 видно, как этот документ выглядит в браузере.

Рисунок 11-1: Базовый документ примера