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.
<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, как показано ниже —
<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-файл следующим образом:
<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.