Главная страница   /   5.2. Первый jQuery скрипт (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

5.2. Первый 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: Увеличение прозрачности рисунка

Скрипт меняет прозрачность рисунков для нарцисса, пиона и подснежника, когда на них наведена мышка. Эффект этого состоит в том, что рисунки выглядят немного светлее и более размытыми. Когда мышка покидает область рисунка, прозрачность возвращается к прежнему значению. Этот эффект не распространяется на рисунки для астры, розы и примулы.