Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;).
В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует самое основное утверждение jQuery.
<script type="text/javascript"> $(document).ready(function(){ // Некий код, который нужно выполнить после загрузки структуры документа... alert("Hello World!"); }); </script>
В приведенном выше примере просто отображается предупреждение «Hello World!» пользователю.
Давайте рассмотрим этот пример подробнее.
Метод 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.