Использование JQuery на веб-сайтах | Статья в журнале «Молодой ученый»

Отправьте статью сегодня! Журнал выйдет 28 декабря, печатный экземпляр отправим 1 января.

Опубликовать статью в журнале

Авторы: ,

Рубрика: Информационные технологии

Опубликовано в Молодой учёный №13 (117) июль-1 2016 г.

Дата публикации: 28.06.2016

Статья просмотрена: 114 раз

Библиографическое описание:

Хаятов, Х. У. Использование JQuery на веб-сайтах / Х. У. Хаятов, П. Ш. Сирожов. — Текст : непосредственный // Молодой ученый. — 2016. — № 13 (117). — С. 360-361. — URL: https://moluch.ru/archive/117/32128/ (дата обращения: 17.12.2024).



В наши дни всемирная паутина представляет собой динамическую сред, и ее пользователи предъявляют высокие требования, как к оформлению, так и к функциональности сайтов. Для создания интересных интерактивных сайтов разработчики используют библиотеки JavaScript, такие как JQuery, чтобы автоматизировать решение наиболее типичных задач и упростить решение более сложных. Одной из причин высокой популярности библиотеки JQuery является ее способность помогать при решении весьма широкого круга задач.

На первый взгляд, кажется, что сложно выбрать, с чего начать, потому что библиотека JQuery реализует весьма широкие функциональные возможности. Тем не менее, она имеет согласованную и симметричную архитектуру; большая часть концепций заимствована из HTML и каскадных таблиц стилей (Cascading Style Sheets, CSS). Архитектура библиотеки быстро осваивается дизайнерами даже с малым опытом программирования, поскольку многие web-разработчики, как правило, имеют больший опыт работы с указанными технологиями, чем с JavaScript [1].

Загрузка JQuery. Откроем сайт JQuery, и загрузим копию библиотеки, которую мы будем использовать. Для этого, Запустим браузер и введем в нем адрес http://www.jquery.com. Найдем раздел «Grab the Latest Version» и установим флажок рядом со строкой «Production». Щелкнем на кнопке «Download JQuery». Открывается следующая страница, которое мы можем сохранить библиотеку JQuery для дальнейшего использование [2].

Подключение библиотеки JQuery. Прежде чем использовать библиотеку JQuery, ее необходимо вначале скачать с сайта. Мы уже посмотрели это. Подключить к HTML-

Документу производится с помощью тега

Сам тег

Если посетитель ранее заходил на другой сайт, на котором библиотека JQuery также подгружалась с сайта https://code.jquery.com/, то веб-браузер не будет повторно загружать библиотеку и использует данные, сохраненные в кэше. Таким образом, скорость работы вашего сайта может увеличиться. В этом и заключается преимущество данного метода. Однако если сайт https://code.jquery.com/будет не доступен, то возможны проблемы. В таких случаях мы можем использовать копию библиотеки своих папкам.

В этом случае подключение будет выглядеть так.

Библиотека JQuery избавляет нас от потери времени и предоставляет возможность выполнения скриптов сразу после формирования структуры документа, не дожидаясь загрузки других элементов. Обработать это событие можно с помощью метода ready().

jQuery(document).ready(function() {

alert("Документ доступен для выполнения скриптов"); });

Функция jQuery() имеет псевдоним $(). Используя этот псевдоним, можно обработать событие следующим образом.

$(document).ready(function() { alert(«Документ доступен для выполнения скриптов»); });

Этот код можно еще сократить.

$(function() { alert(«Документ доступен для выполнения скриптов»); });

Необходимо также заметить, что в программе может быть несколько вызовов методов ready(). В этом случае выполнение методов происходит в порядке их объявления внутри программы [1–7].

В JQuery есть несколько возможности обращение элемента страниц. С помощью селектора.

На примере изменение фонового цвета. $(«Селектор»).css(«backgroundColor», «red»);

На примере изменение значение в HTML. $(«Селектор»).html(«HTML Текст»);

На примере изменение значение. $(«Селектор»).text(«Текст»);

Селектор может быть тег HTML, идентификатором, классом и т. д.

Посмотрим следующий пример на JQuery.

Пример на jQuery

$(document).ready(init);

function init() {

$('p').html("Абзац текста");

$("#Брат").text("Абзац текста с id=Брат");

$(".Сестра").html("Абзац текста с class=Сестра");

$(".Сестра").css("backgroundColor", "yellow"); }

Абзац текста

Абзац текста с id=Брат

Абзац текста с class=Сестра

Рис. 1. Результат примера JQuery

Литература:

  1. Чаффер Дж., Шведберг К. Изучаем JQuery 1.3. Эффективная веб-разработка на JavaScript. — Пер. с англ. — СПб.: Символ-Плюс, 2010. — 448 с., ил.
  2. Бибо Б, Кац И. Подробное руководство по продвинутому JavaScript. — Пер. с англ. — СПб.: Символ-Плюс, 2009. — 384 с., ил.
  3. Каслдайн Э., Шарки К. Изучаем JQuery. 2-е изд. –СПб.: Питер, 2012. — 400 с.: ил.
  4. Бенедетти Р., Крэнли Р. Изучаем работу с JQuery. — СПб.: Питер, 2012. — 528 с.: ил.
  5. AdamFreeman — JQuery для профессионалов. — Пер. с англ. — М.: ООО “И. Д. Вильямс”. 2013. — 960 с.: ил.
  6. Прохоренок Н. А. JQuery. Новый стиль программирования на JavaScript.: — М.: ООО “И. Д. Вильямс”. 2010. — 272 с.: ил.
Основные термины (генерируются автоматически): HTML, абзац текста, библиотека, CSS, HEAD, копия библиотеки, сайт.


Задать вопрос