Обзор документа примера
Я начал эту книгу с очень простого примера документа, базовой страницы цветочного магазина. В дальнейших главах мы выбирали из документа элементы, изучали и меняли 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: Базовый документ примера
или RSS канал: 
