Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;).
В jQuery знак доллара ($) - это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует самое основное утверждение jQuery.
<script type="text/javascript">
$(document).ready(function(){
// Некий код, который нужно выполнить после загрузки структуры документа...
alert("Hello World!");
});
</script>
В приведенном выше примере просто отображается предупреждение «Hello World!» пользователю.
Давайте рассмотрим этот пример подробнее.
- Элемент <script> - поскольку jQuery - это просто библиотека JavaScript, код jQuery можно разместить внутри элемента <script>. Однако, если вы хотите поместить его во внешний файл JavaScript, что является предпочтительным, вам нужно удалить эту часть.
- $(document).ready(обработчик); - Это утверждение обычно называется «событие ready». Где обработчик - это функция, которая передается методу ready() для безопасного выполнения, как только документ готов к манипулированию, т.е. когда иерархия DOM полностью построена.
Метод jQuery ready() обычно используется с анонимной функцией. Таким образом, приведенный выше пример также может быть записан в сокращенной записи, например:
<script type="text/javascript">
$(function(){
// Некий код, который нужно выполнить после загрузки структуры документа...
alert("Hello World!");
});
</script>
Кроме того, внутри функции обработчика событий вы можете написать операторы jQuery для выполнения любых действий в соответствии с базовым синтаксисом, например: $(selector).action();
Где $(selector) в основном выбирает элементы HTML из дерева DOM, чтобы им можно было манипулировать, а action() применяет некоторые действия к выбранным элементам, например, изменяет значение свойства CSS или устанавливает содержимое элемента и т. д.
Давайте рассмотрим другой пример, который устанавливает текст абзаца после того, как DOM готов:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").text("Документ загружен");
});
</script>
</head>
<body>
<p>Документ не загружен</p>
</body>
</html>
В операторе jQuery вышеприведенного примера тег p является селектором jQuery, который выбирает все абзацы, т.е. элементы <p> в документе, позже метод text() устанавливает текстовое содержимое абзаца на «Документ загружен».
Текст абзаца в приведенном выше примере заменяется автоматически, когда документ готов. Но что, если мы хотим, чтобы пользователь выполнил какое-то действие перед выполнением кода jQuery для замены текста абзаца? Давайте рассмотрим последний пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").text("Спасибо!");
});
});
</script>
</head>
<body>
<p>Хотите нажать кнопку?</p>
<button type="button">Кнопка</button>
</body>
</html>
В приведенном выше примере текст абзаца заменяется только при возникновении события клика на кнопке <button> когда пользователь нажимает эту кнопку.
Теперь у вас есть общее представление о том, как работает jQuery. В следующих уроках вы узнаете гораздо больше полезного об этой замечательной библиотеке JavaScript.
Оставить комментарий