Федеральное агентство связи
Уральский технический институт связи и информатики (филиал) ФГБОУ ВО "Сибирский государственный университет телекоммуникаций и информатики" в г. Екатеринбурге (УрТИСИ СибГУТИ)
КАФЕДРА
Информационных систем и технологий
(ИСТ)
ОТЧЕТ
по дисциплине: «Разработка программных модулей. »
Jquery
Выполнила: |
студентки гр.181 Изюрова В.Н |
Проверил: |
преподаватель Тупицын К.М |
Екатеринбург, 2022
Введение.
Современное программирование веб-сайтов, уже давно базируется на таком языке как JavaScript, поэтому без его использования почти неможножно представить ни одно написание сайта. Но сейчас, программисты чаще всего используют не сам javascript, а его фреймворки и библиотеки, одной из каких как раз является JQquery. При этом, он является не только самой популярной, но так же является ещё и самой часто используемой библиотекой javascript. Множество крупных сайтов написаны именно с помощью использования именно этой библиотеки.
Но на самом деле определение Jquery как библиотеки не совсем справедливо. На самом деле под этим названием скрыта целая экосистема библиотек, что базируются на библиотеке jquery.ui, что предназначена для создания визуальных интерфейсов.
Преимущества работы с Jquery:
Упрощение работы с кодом: jQuery предлагает простой элегантный синтаксис для манипулирования элементами на веб-странице.
Расширяемость: весь код jQuery открыт для просмотра и изменения, и в случае, если что-то в библиотеке не устраивает, ее можно модифицировать. А также можно создавать плагины jQuery.
Кроссбраузерность: jQuery имеет поддержку большинства известных браузеров, в том числе таких. Как IE 7,8. (Хотя в силу того, что браузеры IE 6-8 постепенно становятся достоянием истории, а также чтобы уменьшить размер библиотеки в последней версии была прекращена поддержка IE 6-8).
Сама библиотека имеет 2 варианта:
Compressed, что так же имеет название Monified. Это минимизированая версия, которая имеет ту же функциональность, что и обычная библиотека, но отличается отсутствием необязательных символов (пробелов, комментариев и т.д) поэтому в названии имеют суффикс min. Например: jquery-1.10.1.min.js
Так как она производительнее, благодаря меньшему объёму, её часто рекомендуют для реального производства.
Uncompressed. Обычная библиотека Jquery, что чаще всего используется именно для того, чтобы понять логику кода. К реальному производству не рекомендуется из-за своего объёма.
Библиотека jquery подключается также, как и другие файлы javascript. Например:
<!DOCTYPE html>
<html>
<head>
<title>Мир jQuery</title>
<script src=”jquery-1.10.1.min.js”></script>
</head>
<body>
</body>
</html>
Простой сайт, взятый с метонита, на котором можно рассмотреть функции Jquery:
<!DOCTYPE html>
<html>
<head>
<title>Тест списаный с метонита</title>
<script src=”jquery-1.10.1.min.js”></script>
</head>
<body bgcolor=”silver”>
<h2>Тест jQuery на сайте с метонита</h2>
<button id=”btn1” onclick=”alert(‘Jquery’);”>jQuery </button>
<button id=”btn2” onclick=”alert(‘Мир JavaScript’); “>JavaScript</button>
<script type=”text/javascript”>
$(function(){
$(“#btn1”).click(function(){
$(this).css(‘background-color’, ‘black’);
alert(‘Мир jQuery’);
});
});
</script>
</body>
</html>
В самом низу файла указывается function, что и определяет, что именно мы хотим от jquery.
Выражение $(function(){}); - это краткое определение функции jquery. Её принято прописывать именно в конце документа, перед закрытием раздела body. Прописанная в примере функция включает весь код на языке javascript, что будет выполняться при загрузке страницы.
Смысл использования заключается в том, что мы получаем элементы кнопки в выражении $(«#btn1») , затем добавляя к ним обработчик нажатия. Поэтому $(«#btn1»).click даст такой же результат, как и использование обработчика onclick в теле кнопки. При этом разметку самой кнопки не нужно никак менять. Это всё делается в функции jquery.
Конкретно в случае взятого примера, функция устанавливает цвет кнопки: $(this).css('background-color', 'black');. А так же выводит на экран сообщение.
Рисунок 1 – общий вид
Рисунок 2 - вывод окна
Выше библиотека была подключена через локальный диск. Но её необязательно загружать именно через неё и размещать библиотеку так же, рядом с другими ланными. Вместо загрузки с локального диска, можно использовать сети CDN(Content Delivery Networks), где библиотека будет находиться физически в какой-либо сети CDN, а нам лишь нужно будет указать на неё ссылку.
Пример подключения библиотеки Jquery через CDN:
<!DOCTYPE html>
<html>
<head>
<title>Мир jQuery</title>
<script src=”https://code.jquery.com/jquery-1.10.1.min.js”></script>
</head>
Другие сети CDN для загрузки Jquery:
Google CDN
Формат подключения:
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
Microsoft CDN
Формат подключения:
<script src=”https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js”></script>
Yandex CDN
Формат подключения:
<script src=”http://yandex.st/jquery/1.10.1/jquery.min.js”></script>
Ключевым моментом в использовании данной библиотеки являетя функция jQuery. Она запускается поле загрузки страницы. Как правило, эта функция содержит код, что манипулирует элементами веб-страницы, то в этом случае естественно надо, чтобы к моменту срабатывания функции jquery все эти элементы были загружены.
Формально описание функции jQuery: jQuery(объект). В данном случае в качестве объекта используется объект document, представляющий фактически всю структуру DOM веб-страницы. И к нему применяется обработчик ready, который и сигнализирует о том, что DOM-модель веб-страницы загружена. В качестве параметра обработчика используется безымянная функция обратного вызова, которая и срабатывает при загрузке веб-страницы.
То есть фактически мы говорим веб-браузеру, что после загрузки всей объектной модели веб-страницы, представленной объектом document, он должен выполнить весь код, который мы вкладываем в функцию jQuery.
Есть полный метод описания и два сокращённых.
Полный метод:
$(document).ready(function(){
// код функции.
});
Сокращённый метод 1:
$(function(){
//код функции.
});
Сокращённый метод 2:
jQuery(function(){
// код функции.
});
Все формы в любом случае будут равнозначны.