Оператор 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-дерево.

Похожие посты

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…

Руководство по удалению элементов и атрибутов в jQuery

jQuery предоставляет несколько методов, таких как empty(), remove(), unwrap()и т. д. для удаления существующих элементов HTML или содержимого из документа. jQuery-метод empty() jQuery-метод empty() удаляет из DOM все дочерние элементы, а также текстовое содержимое в выбранных элементах. Следующий пример удалит все содержимое внутри элементов с классом .container по нажатию кнопки. Согласно спецификации DOM W3C (World…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.