Pro jQuery

Pro jQuery

Адам Фриман

В книге много примеров?

В книге просто обилие примеров. Один из приятных аспектов jQuery заключается в том, что одна задача может быть выполнена несколькими различными способами, что позволит вам выработать собственный стиль jQuery. Чтобы продемонстрировать вам разные подходы в решении задач, я включил в книгу множество примеров. По сути, я включаю в каждую главу цельный HTML документ, на базе которого будут рассмотрены определенные свойства. Первым примером в каждой главе будет цельный рабочий HTML документ, как показано в листинге 1-1.

Листинг 1-1: Пример готового HTML документа.
<!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 () {

var labelElems = document.getElementsByTagName("label");
var jq = $("img[src*=daffodil]");

$("img:even").add("img[src*=primula]").add(jq)
.add(labelElems).css("border", "thick double red");
});
</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>

Этот листинг взят из пятой главы. Не вникайте сейчас в его суть, просто знайте, что первым примером в каждой главе будет цельный документ HTML, похожий на тот, который представлен в листинге. Практически все примеры основаны на одном и том же базовом документе HTML, который представляет собой обычный цветочный магазин. Это не самый захватывающий пример, но он законченный, рабочий и включает в себя все те атрибуты, которые нам будут интересны при изучении jQuery.

В последующих примерах я просто буду показывать вам те элементы, которые меняются. В основном это будет элемент script, где на данный момент работает ваш jQuery код. Вы сразу заметите эту часть листинга, потому что начинаться и заканчиваться она будет троеточием (…), как показано в листинге 1-2.

Листинг 1-2: Частичный листинг.
...
<script type="text/javascript">
$(document).ready(function () {

var jq = $("label");

// select and operate on the first element
jq.first().css("border", "thick double red");

// select and operate on the last element
jq.last().css("border", "thick double green");

// select and operate on an element by index
jq.eq(2).css("border", "thick double black");
jq.eq(-2).css("border", "thick double black");

});
</script>
...

Это второй листинг из главы 5. Вы видите, что здесь появился только элемент script,также я выделил определенные строки кода. Таким образом я привлекаю ваше внимание к определенной части примера, чтобы показать, какую возможность jQuery я использую. В частичном листинге, наподобие этого, показан только тот элемент, который был изменен во всем HTML документе, представленном в начале главы.

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

или RSS канал: Что новенького на smarly.net