Первый jQuery скрипт
Теперь, когда библиотека jQuery присоединена к документу, можно написать скрипт, который использует функционал jQuery. В листинге 5-2 содержится простой скрипт, который демонстрирует некоторые базовые возможности jQuery.
Листинг 5-2: Первый скрипт с jQuery
<!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 () {
$("img:odd").mouseenter(function (e) {
$(this).css("opacity", 0.5);
}).mouseout(function (e) {
$(this).css("opacity", 1.0);
});
});
</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>Это короткий скрипт, но он демонстрирует некоторые важные черты и характеристики jQuery. В этой главе я буду разбирать скрипт, строка за строкой, но вам понадобиться прочесть до конца эту часть книги, чтобы полностью понять весь функционал, который этот скрипт затрагивает. Для начала, на рисунке 5-1 показан результат выполнения скрипта.
Рисунок 5-1: Увеличение прозрачности рисунка
Скрипт меняет прозрачность рисунков для нарцисса, пиона и подснежника, когда на них наведена мышка. Эффект этого состоит в том, что рисунки выглядят немного светлее и более размытыми. Когда мышка покидает область рисунка, прозрачность возвращается к прежнему значению. Этот эффект не распространяется на рисунки для астры, розы и примулы.
