Стандартный синтаксис jQuery

Стандартный синтаксис jQuery

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

    Источник

    Просмотров:

    Добавить комментарий