Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;).

В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery.

<script>
    $(document).ready(function(){
        // Некоторый код, который будет выполнен ...
        alert("Hello World!");
    });
</script>

Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю.

Объяснение кода

Давайте разберем приведенный выше пример подробнее.

Тег <script> — поскольку jQuery просто библиотека JavaScript, код jQuery можно разместить внутри элемента <script>. Однако, если вы хотите поместить его во внешний JavaScript-файл, что является предпочтительным, вы должны удалите эту часть.
$(document).ready(hиler); — эту часть называют событием готовности, где обработчик — это, по сути, функция, которая передается методу ready() для безопасного выполнения, как только документ готов к работе, т.е. когда иерархия DOM полностью построена.

Метод jQuery ready() обычно используется с анонимной функцией. Таким образом, приведенный выше пример также может быть записан в сокращенной записи, например:

<script>
    $(function(){
        // Некоторый код, который будет выполнен ...
        alert("Hello World!");
    });
</script>

Вы можете использовать любой синтаксис, который вам нравится, так как оба синтаксиса равнозначны. Однако событие ready() документа легче понять при чтении кода.

Кроме того, внутри функции обработчика событий вы можете писать операторы jQuery для выполнения любых действий в соответствии с базовым синтаксисом, например: $(selector).action();

Где $(selector) в основном выбирает элементы HTML из дерева DOM, чтобы ими можно было манипулировать, а action() применяет некоторые действия к выбранным элементам, например, изменяет значение свойства CSS или устанавливает содержимое элемента. Давайте рассмотрим другой пример, который устанавливает текст абзаца после того, как DOM готов:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Document Ready Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").text("Hello World!");
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
</body>
</html>

В выражении вышеприведенного примера мы выбираем все элементы <p> в документе по селектору, а методом text() устанавливаем текстовое содержимое абзаца на «Hello World!».

Текст абзаца в приведенном выше примере заменяется автоматически, когда документ готов. Но что, если мы хотим, чтобы пользователь выполнил какое-то действие перед выполнением кода, чтобы заменить текст абзаца. Давайте рассмотрим еще один пример:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Click Handler Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").text("Hello World!");
            });            
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
    <button type="button">Заменить текст</button>
</body>
</html>

В приведенном выше примере текст абзаца заменяется только при возникновении события щелчка на кнопке «Заменить текст».

Теперь, когда у вас есть общее представление о том, как работает jQuery, в следующих главах вы узнаете о терминах, которые мы подробно обсудили здесь.

Вы должны поместить код jQuery в событие ready() документа, чтобы ваш код выполнялся, когда документ готов к работе, т.е. сформировано DOM-дерево.