Учебники

JQuery — Обзор

Ноябрь 20, 2018

jQuery — это быстрая и лаконичная библиотека JavaScript, созданная Джоном Резигом в 2006 году с красивым девизом: пиши меньше, делай больше . jQuery упрощает обход документов HTML, обработку событий, анимацию и взаимодействие Ajax для быстрой веб-разработки. jQuery — это инструментарий JavaScript, предназначенный для упрощения различных задач за счет написания меньшего количества кода. Вот список важных основных функций, поддерживаемых jQuery —

  • Манипулирование DOM — JQuery упростил выбор элементов DOM, согласование их и изменение их содержимого с помощью кросс-браузерного движка с открытым исходным кодом, называемого Sizzle .

  • Обработка событий — JQuery предлагает элегантный способ захвата широкого спектра событий, например, нажатия пользователем ссылки, без необходимости загромождать сам HTML-код обработчиками событий.

  • Поддержка AJAX — JQuery очень помогает вам в разработке адаптивного и многофункционального сайта с использованием технологии AJAX.

  • Анимации — JQuery поставляется с множеством встроенных анимационных эффектов, которые вы можете использовать на своих сайтах.

  • Легкий — jQuery — очень легкая библиотека — размером около 19 КБ (Minified и gzipped).

  • Кросс-браузерная поддержка — JQuery имеет кросс-браузерную поддержку и хорошо работает в IE 6.0+, FF 2.0+, Safari 3.0+, Chrome и Opera 9.0+.

  • Новейшая технология — JQuery поддерживает селекторы CSS3 и базовый синтаксис XPath.

Манипулирование DOM — JQuery упростил выбор элементов DOM, согласование их и изменение их содержимого с помощью кросс-браузерного движка с открытым исходным кодом, называемого Sizzle .

Обработка событий — JQuery предлагает элегантный способ захвата широкого спектра событий, например, нажатия пользователем ссылки, без необходимости загромождать сам HTML-код обработчиками событий.

Поддержка AJAX — JQuery очень помогает вам в разработке адаптивного и многофункционального сайта с использованием технологии AJAX.

Анимации — JQuery поставляется с множеством встроенных анимационных эффектов, которые вы можете использовать на своих сайтах.

Легкий — jQuery — очень легкая библиотека — размером около 19 КБ (Minified и gzipped).

Кросс-браузерная поддержка — JQuery имеет кросс-браузерную поддержку и хорошо работает в IE 6.0+, FF 2.0+, Safari 3.0+, Chrome и Opera 9.0+.

Новейшая технология — JQuery поддерживает селекторы CSS3 и базовый синтаксис XPath.

Как использовать jQuery?

Есть два способа использовать jQuery.

  • Локальная установка — вы можете загрузить библиотеку jQuery на свой локальный компьютер и включить ее в свой HTML-код.

  • Версия на основе CDN. Вы можете включить библиотеку jQuery в свой HTML-код непосредственно из сети доставки контента (CDN).

Локальная установка — вы можете загрузить библиотеку jQuery на свой локальный компьютер и включить ее в свой HTML-код.

Версия на основе CDN. Вы можете включить библиотеку jQuery в свой HTML-код непосредственно из сети доставки контента (CDN).

Локальная установка

  • Перейдите на https://jquery.com/download/, чтобы загрузить последнюю доступную версию.

  • Теперь поместите загруженный файл jquery-2.1.3.min.js в каталог вашего сайта, например, / jquery.

Перейдите на https://jquery.com/download/, чтобы загрузить последнюю доступную версию.

Теперь поместите загруженный файл jquery-2.1.3.min.js в каталог вашего сайта, например, / jquery.

пример

Теперь вы можете включить библиотеку jquery в ваш HTML-файл следующим образом: 

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

Это даст следующий результат —

CDN основанная версия

Вы можете включить библиотеку jQuery в свой HTML-код напрямую из сети доставки контента (CDN). Google и Microsoft обеспечивают доставку контента для последней версии.

В этом уроке мы используем версию библиотеки Google CDN.

пример

Теперь давайте перепишем приведенный выше пример, используя библиотеку jQuery из Google CDN.

Live Demo 

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

Это даст следующий результат —

Как вызвать функции библиотеки jQuery?

Как и почти все, что мы делаем, когда jQuery читает или манипулирует объектной моделью документа (DOM), мы должны убедиться, что мы начинаем добавлять события и т. Д., Как только DOM будет готов.

Если вы хотите, чтобы событие работало на вашей странице, вы должны вызывать его внутри функции $ (document) .ready (). Все в нем будет загружаться, как только DOM загружен и до загрузки содержимого страницы.

Для этого мы регистрируем готовое событие для документа следующим образом — 

$(document).ready(function() {
   // do stuff when DOM is ready
});

Чтобы вызвать любую библиотечную функцию jQuery, используйте теги HTML script, как показано ниже —

Live Demo 

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Это даст следующий результат —

Как использовать пользовательские сценарии?

Лучше написать наш собственный код в пользовательском файле JavaScript: custom.js , как показано ниже: 

/* Filename: custom.js */
$(document).ready(function() {

   $("div").click(function() {
      alert("Hello, world!");
   });
});

Теперь мы можем включить файл custom.js в наш HTML-файл следующим образом:

Live Demo 

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" src = "/jquery/custom.js">
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Это даст следующий результат —

Использование нескольких библиотек

Вы можете использовать несколько библиотек вместе, не конфликтуя друг с другом. Например, вы можете использовать библиотеки jQuery и MooTool javascript вместе. Вы можете проверить jQuery noConflict Метод для более подробной информации.

Что дальше ?

Не беспокойтесь слишком сильно, если вы не поняли приведенные выше примеры. Вы поймете их очень скоро в следующих главах.

В следующей главе мы попытаемся охватить несколько основных понятий, которые приходят из обычного JavaScript.

44
Share: