Введение в jQuery: освоение основных аспектов

Введение

Добро пожаловать в документацию по jQuery! В этом практикуме вы познакомитесь с jQuery.

Начало работы с jQuery может быть простым или сложным, в зависимости от вашего опыта в JavaScript, HTML, CSS и программировании в целом.

Одно важное обстоятельство, с которым необходимо ознакомиться, заключается в том, что jQuery - это просто библиотека JavaScript. Все возможности jQuery доступны через JavaScript, поэтому хорошее знание JavaScript необходимо для понимания, структурирования и отладки кода. Хотя регулярная работа с jQuery может, с течением времени, повысить вашу компетентность в JavaScript, может быть трудно начать писать код на jQuery без знания встроенных конструкций и синтаксиса JavaScript. Поэтому, если вы совсем не знакомы с JavaScript, мы рекомендуем ознакомиться с руководством по основам JavaScript на сайте Mozilla Developer Network (MDN).

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 86%. Он получил 100% положительных отзывов от учащихся.

Как работает jQuery

В ВМ уже предоставлен файл index.html.

Этот файл будет автоматически сгенерирован во время инициализации среды. Если он не генерируется автоматически, создайте файл и функцию, как показано на изображении выше. Код функции выглядит так:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo</title>
  </head>
  <body>
    <p>jQuery</p>
    <script src="jquery.min.js"></script>
    <script>
      // Ваш код здесь.
    </script>
  </body>
</html>

Атрибут src в элементе <script> должен ссылаться на копию jQuery. Скачайте копию jQuery со страницы Загрузка jQuery и сохраните файл jquery.min.js в том же каталоге, что и ваш HTML-файл.

Примечание: Когда вы загружаете jQuery, имя файла может содержать номер версии, например, jquery-x.y.z.js. Убедитесь, что вы переименуете этот файл в jquery.js или обновите атрибут src элемента <script> для соответствия имени файла.

Запуск кода при готовности документа

Чтобы убедиться, что их код выполняется после того, как браузер загрузит документ, многие программисты JavaScript заключают свой код в функцию onload:

window.onload = function () {
  alert("welcome");
};

К сожалению, код не выполняется, пока не будут загружены все изображения, включая баннерные объявления. Чтобы запускать код сразу, как документ готов к манипуляциям, у jQuery есть инструкция, известная как событие готовности:

$(document).ready(function () {
  // Ваш код здесь.
});

Примечание: Библиотека jQuery экспортирует свои методы и свойства через два свойства объекта window, называемых jQuery и $. $ - это просто псевдоним для jQuery, и его часто используют, потому что он короче и быстрее для написания.

Например, внутри события готовности вы можете добавить обработчик клика для ссылки:

$(document).ready(function () {
  $("button").click(function () {
    $("p").text("Hello jQuery!");
  });
});

Скопируйте вышеприведенный код jQuery в ваш HTML-файл, где написано // Ваш код здесь. Затем сохраните ваш HTML-файл и обновите тестовую страницу в вашем браузере.

Полный пример

Следующий пример иллюстрирует код обработки клика, обсужденный выше, встраиваемый непосредственно в HTML-элемент <body>. Обратите внимание, что на практике обычно лучше размещать свой код в отдельном JS-файле и загружать его на страницу с помощью атрибута src элемента <script>.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo</title>
  </head>
  <body>
    <button>click me</button>
    <p>Hello World</p>
    <script src="jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("button").click(function () {
          $("p").text("Hello jQuery!");
        });
      });
    </script>
  </body>
</html>

Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практикум по работе с jQuery. Чтобы узнать больше о jQuery API, обратитесь к официальной документации jQuery.