Библиотека jQuery: назначение, подключение к html-странице, синтаксис команд jQuery, виды селекторов, обработка событий с использованием jQuery.
jQuery - это javascript-библиотека, обеспечивающая поддержку основных современных web-браузеров и позволяющая значительно расширить возможности, предоставляемые языком javascript при разработке web-страниц. Для подключения jQuery к HTML-странице, вам необходимо выполнить следующие действия: 1. Скачайте библиотеку jQuery с официального сайта jQuery и разместите ее в каком-нибудь каталоге своего сайта. 2. Подключите jQuery при помощи следующего кода:
<script type=” text/javascript” scr=’http:/……’>
где в параметре src укажите абсолютный (можно указать и относительный) путь к библиотеке jQuery. Обратите внимание, что строка с кодом подключения jQuery должна обязательно находиться в разделе HEAD.
Стандартный синтаксис jQuery команд:
$(селектор).метод();
Знак $ сообщает, что символы идущие после него являются jQuery кодом;
Селектор позволяет выбрать элемент на странице;
Метод задает действие, которое необходимо совершить над выбранным элементом. Методы в jQuery разделяются на следующие группы:
Методы для манипулирования DOM;
Методы для оформления элементов;
Методы для создания AJAX запросов;
Методы для создания эффектов;
Методы для привязки обработчиков событий.
Некоторые JavaScript библиотеки тоже используют $ для обозначения своего кода. Для того, чтобы избежать конфликта имен между ними в jQuery предусмотрена команда noConflict(). С помощью команды noConflict() Вы можете заменить знак $ на любой другой.
С помощью селекторов Вы можете выбирать элементы на странице для применения к ним определенных действий. Ниже располагается таблица с различными примерами использования селекторов для выбора желаемых элементов:
Пример |
Результат |
$("p") |
Будут выбраны все элементы p, которые находятся на странице. |
$(".par") |
Будут выбраны все элементы на странице с class="par". |
$("#par") |
Будет выбран первый элемент на странице с id="par". |
$(this) |
Позволяет выбрать текущий HTML элемент. Щелкните на $(this) слева, чтобы посмотреть пример использования данного селектора в онлайн редакторе. |
$("p.par") |
Будут выбраны все элементы p на странице с class="par". |
$("p#par") |
Будут выбраны все элементы p на странице с id="par". |
$(".par,.header,#heat") |
Будут выбраны все элементы на странице со значениями атрибутов class="par", class="header" и id='heat'. |
$("[src]") |
Будут выбраны все элементы на странице, имеющие атрибут src. |
$("[src='значение']") |
Будут выбраны все элементы со значениям атрибута src="значение". |
$("[src$='.gif']") |
Будут выбраны все элементы со значениями атрибута src заканчивающимися на .gif. |
$("div#wrap .par1") |
Будут выбраны все элементы с class=par1, которые находятся внутри элементов div с id=wrap. |
$(":input") |
Будут выбраны все input элементы на странице. |
$(":тип") |
Будут выбраны все input элементы с <input type='тип' />. Например :button выберет все <input type='button' /> элементы, :text выберет все <input type='text' /> элементы и т.д. |
События — это своего рода извещения системы о том, что пользователь выполнил какое-либо действие или внутри самой системы возникло некоторое условие. События возникают в результате щелчка на элементе, перемещения мыши, нажатия клавиши клавиатуры, изменения размеров окна, окончания загрузки веб-страницы и т.д. Зная, какие события может генерировать тот или иной элемент веб-страницы, можно написать функцию для обработки этого события. Например, при отправке данных формы возникает событие onsubmit. При наступлении этого события можно проверить данные, введенные пользователем, и, если они не соответствуют ожидаемым, прервать отправку данных. "Основными" (условно конечно) методами являются ready, bind, one, trigger и triggerHandler, unbind.
ready(fn) - возвращает: jQuery Назначает функции, которые будут выполняться всякий раз, когда объектная модель документа (DOM) готова к использованию.
Пример:
$(document).ready(function(){
$("p:first")
.text("DOM загружена и готова к работе!");
});
// еще раз тоже самое
jQuery(document).ready(function(){
jQuery("p:last")
.text("Объектная модель документа готова!");
});
bind(type, [data], fn) - возвращает: jQuery Связывает обработчик с одним или более событиями (например click) для каждого элемента набора. Может также связывать пользовательские события. Возможные события: blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error. Обработчик события принимает объект событие, что делает возможным предотвращение поведения по умолчанию. Чтобы предотвратить и поведение по умолчанию и "всплывание" события (т.е. передачу события от одного элемента другому), обработчик должен возвращать false.
Пример: $("p").bind("click", function(){
alert( $(this).text() );
});
Также можно связать некие пользовательские события.
$("p").bind("myCustomEvent", function(e,myName,myValue){
$(this).text(myName + ", hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent", [ "John" ]);
});
one(type, [data], fn) - возвращает: jQuery Связывает обработчик с одним или более событиями, которые будут выполнены только один раз, для каждого элемента в наборе. Обработчик исполняется только один раз для каждого элемента. В остальном действуют те же правила, описанные при применении bind(). Обработчик события принимает объект событие, что делает возможным предотвращение поведения по умолчанию. Чтобы предотвратить и поведение по умолчанию и "всплывание" события (т.е. передачу события от одного элемента другому), обработчик должен возвращать false. В большинстве случаев можно определить обработчики события как анонимные функции, как показано в следующем примере. Первый клик, который совершен на параграфе, выводит в alert текст этого параграфа.
$("p").one("click", function(){
alert( $(this).text() );
});
В случае, если это невозможно, следует передавать дополнительные данные во втором параметре [data]. В следующем примере связываем "одноразовый" клик с каждым элементом div.
var n = 0;
$("div").one("click", function(){
var index = $("div").index(this);
$(this).css({ borderStyle:"inset", cursor:"auto" });
$("p").text("DIV с индексом #" + index + " кликнут." +
" Всего " + ++n + " кликов.");
});
trigger(type, [data]) - возвращает: jQuery Вызывает событие (переданное в type) для каждого элемента набора. Однако это также вызовет выполнение браузером действий по умолчанию для этого события. Например, передавая 'submit' в функцию trigger() Вы заставите браузер отправить форму. Действия браузера по умолчанию можно предотвратить, возвращая false для одной из функций, связанных с событием. Чтобы отправить первую форму без использования функции submit(), надо проделать следующее:
$("form:first").trigger("submit");
Чтобы передать произвольные данные событию:
$("p").click( function (event, a, b) {
// при обычном клике по параграфу,
// a и b остаются неопределенными
// при клике вызванном через trigger(),
// a ссылается на "foo", b ссылается на "bar".
} ).trigger("click", ["foo", "bar"]);
triggerHandler(type, [data]) - возвращает: jQuery Это особенный метод вызова всех связанных с элементом обработчиков событий БЕЗ выполнения браузером действий по умолчанию. Событие вызывается только для первого элемента, включенного в набор. Если набор элементов пуст, этот метод вернет 'undefined'. Испытайте следующий пример. Если Вы вызываете trigger(), то получаете соответствующее сообщение и можете заметить как браузер ТОЖЕ совершил действие по умолчанию - передал фокус элементу input. Попробуйте теперь (убрав фокус с элемента input) вызвать triggerHandler() - сообщение Вы также получите, но действия браузера по умолчанию не произойдет.
$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("<span>Focused!</span>").appendTo("body")
.fadeOut(1000);
});
unbind([type], [data]) - возвращает: jQuery Это метод - противоположность bind, он удаляет все события связанные с элементом для каждого элемента набора. Можно также удалить пользовательские события, зарегистрированные в bind(). Если передан аргумент type - удалены будут все события этого типа. Посмотрите внимательнее следующий пример. Нажатие на кнопку Bind, делает цветную кнопку "рабочей". Если же нажать кнопку Unbind, цветная кнопка больше не работает...
function aClick() {
$("div").show().fadeOut("slow");
}
$("#bind").click(function () {
$("#theone").click(aClick).text("Can Click!");
});
$("#unbind").click(function () {
$("#theone").unbind('click', aClick)
.text("Does nothing...");
});