JQuery HTML — это библиотека, предназначенная чтобы «писать меньше, а делать больше «. Это не язык программирования, а инструмент, используемый для того, чтобы упростить реализацию общих задач JavaScript .
JQuery имеет дополнительное преимущество — кроссбраузерную совместимость . Можете быть уверены, что ваш код будет интерпретироваться в любом современном браузере.
Сравнив написание простой программы «Hello, World! » с помощью JavaScript и jQuery , можно увидеть разницу между ними.
JavaScript
document.getElementById("demo").innerHTML = "Hello, World!";
JQuery
$("#demo").html("Hello, World!");
Этот короткий пример иллюстрирует, как с помощью jQuery можно получить тот же результат, что и с помощью стандартного JavaScript , но более кратко.
ЦелиДанное руководство не предполагает наличие базовых познаний в jQuery , оно охватывает следующие темы:
- Как установить jQuery в веб-проекте;
- Определение важных концепций веб-разработки, таких как API , DOM и CDN ;
- Общие селекторы, события и эффекты jQuery ;
- Примеры для проверки концепций, изученных в рамках этой статьи.
JQuery — это файл JavaScript , на который вы будете ссылаться в документе. Как подключить JQuery в HTML :
- Скачать локальную копию;
- Добавить ссылку на файл через сеть доставки контента (CDN ).
Примечание. Сеть доставки контента (CDN ) представляет собой систему из нескольких серверов, которые предоставляют пользователю веб-контент в зависимости от его географического положения. Когда вы добавляете ссылку на файл jQuery через CDN , он будет предоставлен пользователю быстрее и эффективнее, чем в случае его размещения на собственном сервере.
В наших примерах мы будем использовать ссылку на jQuery через CDN . Последнюю версию jQuery можно найти в Google . Если вместо этого вы хотите скачать библиотеку, можно получить копию jQuery на официальном сайте .
Создадим небольшой веб-проект. Он будет состоять из файла style.css , scripts.js и основного файла index.html .
Задайте основную HTML-разметку и сохраните ее в index.html .
Index.html
jQuery Demo
Index.html
jQuery Demo
Скрипт JavaScript (scripts.js ) должен подключаться в документе ниже библиотеки jQuery или он не будет работать.
Примечание. Если вы загрузили локальную копию jQuery, сохраните ее в папке js/ и подключите через ссылку js/jquery.min.js.
Библиотека jQuery добавлена в HTML , и у нас есть полный доступ к API jQuery .
Использование jQueryjQuery используется для соединения с элементами HTML в браузере через DOM .
Объектная модель документа (DOM ) — это метод, с помощью которого JavaScript (и jQuery ) взаимодействуют с HTML в браузере. Чтобы увидеть, что собой представляет DOM , в браузере кликните правой кнопкой мыши на текущей веб-странице и выберите пункт «Просмотреть код «. В результате откроется панель «Инструментов для разработчиков «. HTML-код , который вы увидите в ней, это и есть DOM .
Каждый элемент HTML считается узлом DOM — объектом, к которому может обратиться JavaScript . Эти объекты имеют древовидную структуру, в которой элемент является ближайшим к корню, а каждый — ветвью дерева. JavaScript может добавлять, удалять и изменять любые из этих элементов.
Если вы снова кликните правой кнопкой мыши и выберете пункт «Просмотреть исходный код », то увидите необработанный HTML . Сначала вы можете путаться в понятиях DOM и исходный HTML-код , но это разные вещи. Исходный код страницы точно соответствует тому, что написано в HTML-файле . Он статичен и неизменен, на него не действует JavaScript . В свою очередь DOM — динамичен и может меняться.
Внешний слой DOM , который обертывает весь узел , является объектом документа. Чтобы использовать на странице jQuery , нужно убедиться, что документ «готов ».
Создайте в папке js/ файл scripts.js и добавьте в него следующий код:
js/scripts.js
Весь код jQuery , вставленный в HTML , будет обернут в указанный выше код. Он будет работать только после того, как DOM будет готов для выполнения кода JavaScript . Даже не смотря на то, что в некоторых случаях JavaScript не загружается, пока элементы не будут отображены, включение этого блока считается лучшей практикой.
Чтобы запустить скрипт «Hello, World !» и вывести текст в браузере с помощью jQuery , сначала создадим пустой элемент абзаца, к которому применен идентификатор demo .
Index.html
... ...
JQuery вызывается и обозначается знаком доллара ($) . Мы обращаемся к DOM с помощью jQuery , используя синтаксис CSS , и применяем действие с помощью method :
$("selector").method();
Так как идентификатор в CSS обозначается символом (#) , мы получаем доступ к идентификатору demo с помощью селектора #demo . html() — метод, который изменяет HTML-разметку внутри элемента.
Теперь мы поместим программу «Hello, World! » внутрь оболочки jQuery ready() . Добавьте эту строку в существующую функцию в файле scripts.js :
js/scripts.js
$(document).ready(function() { $("#demo").html("Hello, World!"); });
После сохранения изменений можно открыть в браузере файл index.html . Если все работает правильно, то вы увидите надпись «Hello, World! »
Кликните правой кнопкой мыши по надписи «Hello, World! » и выберите пункт «Просмотреть код «. Теперь в DOM отображается
Hello, World!
. Если вы просмотрите исходный код страницы, то увидите только , исходный HTML-код, который мы написали. СелекторыСелекторы — это то, с помощью чего мы указываем jQuery HTML , с какими элементами мы хотим работать. Вы можете просмотреть полный список селекторов jQuery в официальной документации.
Чтобы получить доступ к селектору, используйте символ $ , за которым следуют круглые скобки () .
$("селектор")
Строки с двойными кавычками являются предпочтительными (согласно руководству jQuery ). Хотя часто используются и строки с одиночными кавычками.
Ниже приведен краткий обзор часто используемых селекторов.
- $(«*») — подстановочный знак : выбирает каждый элемент на странице;
- $(this) — текущий : выбирает текущий элемент, управляемый в данный момент внутри функции;
- $(«p»)
— тег
: выбирает все экземпляры тега
;
- $(«.example») — класс : выбирает все элементы, к которым применяется класс example ;
- $(«#example») — идентификатор : выбирает один экземпляр с уникальным идентификатором example ;
- $(«») — атрибут : выбирает все элементы, в атрибуте type которых задано значение text ;
- $(«p:first-of-type»)
— псевдоэлемент
: выбирает первый элемент
.
При подключении JQuery к HTML вы будете иметь дело с классами и идентификаторами. Классы используются, когда нужно выбрать несколько элементов, а идентификаторы — когда только один.
События jQueryВ примере «Hello, World! » код запускался, когда страница загружена и документ готов, поэтому в нем не требовалось вмешательство пользователя. В этом случае мы могли бы написать текст непосредственно в HTML , без jQuery . Но нужно будет использовать jQuery , если мы хотим, чтобы текст отображался на странице после клика мыши.
Вернитесь к файлу index.html и добавьте в него элемент . Мы будем использовать эту кнопку для отслеживания события клика.
index.html
... Click me
Мы используем метод click() для вызова функции, содержащей код «Hello, World! ».
js/scripts.js
$(document).ready(function() { $("#trigger").click(); });
Иидентификатор элемента — trigger , мы выбираем его с помощью $(«#trigger») . Добавив click() , мы отслеживаем событие клика. Далее мы вызываем функцию, которая содержит наш код внутри метода click() .
function() { $("#demo").html("Hello, World!"); }
Вот полный код JQuery HTML элемента.
js/scripts.js
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); }); });
Сохраните файл scripts.js и обновите в браузере index.html . Теперь, когда вы нажимаете кнопку, появляется текст «Hello, World! «.
Событие — это любое взаимодействие пользователя с браузером с помощью мыши или клавиатуры. В примере, который мы только что создали, используется событие клика. В официальной документации jQuery можно найти полный список методов событий jQuery . Ниже приведен перечень часто используемых событий.
- click() — клик : происходит при одиночном клике мыши;
- hover() — наведение курсора : происходит при наведении указателя мыши на элемент;
- submit() — отправка : происходит при отправке данных формы;
- scroll() — прокрутка : происходит при прокрутке страницы или элемента;
- keydown() — нажатие клавиши : происходит при нажатии на клавишу на клавиатуре.
Чтобы вывести элементы с помощью анимации или убрать их, когда пользователь прокручивает страницу, используется метод scroll() .
Чтобы выйти из меню с помощью клавиши ESC , используется метод keydown() . Чтобы создать выпадающее меню или с помощью JQuery добавить HTML в div , используется метод click() .
Эффекты jQueryЭффекты jQuery позволяют добавлять анимацию и образом управлять элементами на странице.
В следующем примере мы создадим всплывающее и скрывающееся окно. Мы могли бы использовать два идентификатора — один для открытия окна, а второй для его закрытия, но применим класс для открытия и закрытия окна с помощью той же функции.
Удалите существующие теги и
Из файла index.html и добавьте следующий код:
index.html
Open Close
В файле style.css мы будем использовать минимальное количество кода CSS , чтобы скрыть overlay с помощью display: none и расположить его по центру экрана.
css/style.css
Overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray; }
В файле scripts.js мы используем метод toggle() , который будет переключать значения свойства CSS display с none на block и наоборот, скрывая и выводя окно при нажатии мыши.
→ Примеры jQuery для начинающих
jQuery - javascript библиотека, состоящая из кроссбраузерных функций - оплеток для манипулирования элементами DOM (Document Object Model - Объектная модель документа). Главный ее принцип это автоматическое применение нужного механизма, в зависимости от браузера. К примеру, получение элемента html документа по ID, в разных браузерах происходит по разному. До появления jquery, я использовал такую функцию:
Function getObj(objID){ if (document.getElementById) {return document.getElementById(objID);} else if (document.all) {return document.all;} else if (document.layers) {return document.layers;} }
Чтобы это же действие совершить в jquery, достаточно сделать так:
$("#objID") или jQuery("#objID")
Обращение к функции $() равносильно jQuery() , так как первая является алиасом для второй. Если Вы не используете других библиотек, подобных jquery, то можете смело обращаться к пространству имен через $(). В противном случае лучше использовать непосредственное имя объекта - jQuery. Далее, считаем что нет других библиотек.
Начало работы с jQueryИтак, начинаем работу. Первым делом необходимо получить новейшую версию библиотеки jquery с официального сайта проекта http://jquery.com/ или скачать jquery здесь. В архиве и на официальном сайте лежат две версии: сжатая и девелоперская. На сайте лучше использовать сжатую, а если захочется поэкспериментировать воспользуйтесь второй. Первым делом подключаем библиотеку jquery в тело страницы:
После этого пространство имен javascript, определено таким образом, что обращение к функции $() занято jquery и получить любой элемент документа html в виде объекта, можно выражением $("#objID") . Где objID - ID объекта.
jQuery и CSSВ качестве первого примера рассмотрим работу jquery и CSS. Существует два основных способа манипулирования CSS с помощью jquery: изменение одного атрибута или сразу нескольких. Выполняются они через функцию css() . Выглядит в теории это примерно так:
$("#objID").css("display","block") $("#objID").css({ display:"block, margin:"10px", color:"#ffffff" })
Пример изменения одного атрибута CSSПример изменения одного атрибута удался!
Исходный код:
Пример изменения одного атрибута удался!
Пример изменения нескольких атрибутов CSSПример изменения нескольких атрибутов!
Исходный код:
function demo_css(){ $("#span2").css({ color:"#ffffff", padding:"5px", background:"#980000" }); } Пример изменения нескольких атрибутов!
Изменение текста и htmlДля изменения текста или html кода существуют функции text() и html() .
$("#objID").text("Тру ля ля") $("#objID").html("
Тру ля ля
Причем, если попытаетесь с помощью функции text() вставить html код, то получите его в исходном виде. Функция text() все экранирует.
Пример использования text()Исходный код:
function set_text(){ $("#span3").text("Спасибо!"); }
Пример использования html()Исходный код:
function set_html(){ $("#span4").html("Спасибо! Так гораздо лучше."); }
Управление атрибутами с помощью jQueryФункция attr() манипулирует любыми атрибутами элемента. С ее помощью можно добавить или изменить title, href, value, src и так далее.
Пример использования attr()Исходный код:
function plus_ten(){ var cur_value = $("#text").attr("value"); cur_value = parseInt(cur_value) + 10; $("#text").attr("value",cur_value); }
Обработчики событий в jQueryПолный список доступен по адресу http://api.jquery.com/category/events/. Приведу лишь несколько примеров. Самый распространенный обработчик события onclick. В jQuery можно перехватить через функцию click() .
Пример использования click()Исходный код:
$("#butt").click(function(){ alert("Решили проверить?"); });
Пример использования keyup()Введите что-нибудь:
Вы ввели:
Исходный код:
Введите что-нибудь:
Вы ввели:
$("#text2").keyup(function(){
if ($("#text2").val()){
$("#text2_target").css({background:"#980000"});
} else {
$("#text2_target").css({background:"#ffffff"});
}
$("#text2_target").text($("#text2").val());
});
Кликни по мне!
Исходный код:
div#log{
background:#1C93A5;
width:300px;
height:100px;
padding:10px;
color:#fff;
}
Кликни по мне!
$(document).ready(function() {
$("#log").bind("click", function(e) {
$("#coord").html("Координата X: "+ e.pageX + " Координата Y: " + e.pageY + "");
});
});
jQuery — библиотека JavaScript, содержащая в себе готовые функции языка JavaScript, все операции jQuery выполняются из кода JavaScript.
Библиотека jQuery производит манипуляции с html-элементами, управляя их поведением и используя DOM для изменения структуры веб-страницы. При этом исходные файлы HTML и CSS не меняются, изменения вносятся лишь в отображение страницы для пользователя.
Для выбора элементов используются селекторы CSS. Выбор осуществляется с помощью функции $() . При вызове функция $() возвращает новый экземпляр объекта JQuery, который оборачивает ноль или более элементов DOM и позволяет взаимодействовать с ними различными способами.
Выполнение различных сценариев возможно только после окончания загрузки структуры документа document , когда браузер преобразует html-код страницы в дерево DOM. Управление процессом загрузки обеспечивает конструкция
JQuery(document).ready(function() { ... });
Сначала производится обертывание экземпляра document в функцию jQuery() , после применяется метод ready() , которому передается функция function() {...} , исполняемая после загрузки документа.
На практике обычно используется сокращенная форма такой записи jQuery(function() {...}); , или $(function() {...}); .
Для хранения информации при работе с библиотекой jQuery используются переменные JavaScript. В переменных могут храниться элементы. Имена переменных, предназначенных для хранения возвращаемых элементов, начинаются со знака $ , например:
$h = $(".list").parent().parent().detach();
Для хранения нескольких элементов используются массивы JavaScript:
$k = 15;
Правила работы с библиотекой jQuery 1. Как добавить jQuery на веб-страницуДобавить библиотеку jQuery на свою веб-страницу можно двумя способами:
Использовать
версию файла jQuery, размещенную на ресурсах Google
, Microsoft
или jQuery.com
.
Данный метод использует «Сеть дистрибуции контента» (CDN, content distribution network),
т.е. файл jQuery расположен на другом веб-сайте, который при запросе пользователем отправляет данный файл на его компьютер. Очевидные преимущества данного способа — снижение нагрузки на собственный веб-сервер и ускорение загрузки файла в силу разветвленности сети серверов дистрибьютора.
Чтобы воспользоваться данным способом, необходимо перейти по одной из ссылок:
После перехода на сайт ресурса вам потребуется всего лишь скопировать ссылку на jQuery-файл и добавить её на свою веб-страницу между тегами .... В результате у вас должно получиться, например,
Загрузить
последнюю версию библиотеки jQuery с официального сайта. Для этого вам необходимо перейти по адресу jQuery.com и выбрать интересующую вас версию библиотеки. Для загрузки предлагается две версии jQuery-файла — минимизированный и несжатый. Размер несжатого файла около 300 Кб, он содержит комментарии, поэтому его лучше использовать с целью разработки и отладки кода.
Минимизированная версия файла весит около 100Кб, в ней удалены все комментарии и ненужные пробелы, что ускоряет загрузку файла браузером.
Для загрузки нужно перейти по ссылке, и в открывшемся окне щелкнуть правой кнопкой мыши и выбрать «Сохранить как …». После этого поместить файл в нужную папку (обычно для этого используется папка «scripts») и добавить его на вашу страницу:
2. Правила добавления jQuery на страницу
Размещайте
ссылки на jQuery-файл внутри тега .
Размещайте
ссылки на jQuery-файл после ссылок на стили CSS, так как зачастую библиотека jQuery производит манипуляции со стилями элементов веб-страницы.
Размещайте
другие теги ... только после ссылки на файл jQuery, если данный скрипт использует библиотеку jQuery.
Создать пустой html-элемент, например, блок, можно несколькими способами:
1) с помощью краткой формы записи $("")
2) с помощью инструкции $("")
3) с помощью инструкции $("")
Все три способа рабочие, но, тем не менее, рекомендуется включать открывающие и закрывающие теги, чтобы показать, что данный элемент может содержать другие элементы.
При создании нового элемента методу $() можно передать второй параметр в виде объекта JavaScript, определяющий дополнительные атрибуты элемента:
$("",
{src: "images/flower.jpg",
title: "Rose_in_garden",
click: function() {...}
}).appendTo("body");
Таким образом создается элемент с заданными атрибутами и включается в дерево DOM.
