Меню
ГлавнаяИнтернет

Библиотека jquery основные возможности правила использования. Что такое jQuery? Добавление jQuery на страницы

jQuery - javascript библиотека, использование которой делает разработку на javascript кода намного быстрее и проще. В недалеком прошлом эта библиотека позволяла быстро разрабатывать скрипты. В настоящее время чистый javascript продвинулся настолько, что использование jQuery для многих проектов становится ненужным. Например: как обойтись без jQuery .

Подключение jQuery к вашему сайту

Можно скачать библиотеку jQuery с официального сайта и положить у себя на сайте, после этого подключить следующей командой:

Можно воспользоваться хостингом библиотек от гугла или яндекса , тогда соответственно вызов будет следующий: //или

Особенно актуально, если используете метрику или аналитику...

Возможности библиотеки jQuery

Формат запроса jQuery выглядит следующим образом:
$("селектор").действие("свойства действия");

Поиск элемента на странице (селекторы)
$("*") вернет все элементы на странице
$("div") вернет все div-элементы на странице
$(".someBlock") вернет все элементы с классом someBlock
$("#content") вернет элемент с идентификатором content
$(Object) привязать всю функциональность jQuery к уже существующим объектам DOM-элементов. Пример:
var el = document.getElementById("some_id"); $(el).css("margin", "5px");
$("#content2 div.someBlock") вернет div-элементы с классом someBlock, которые находятся внутри элемента с идентификатором content2
$("div:odd") вернет div-элементы, находящиеся на странице под нечетными номерами
$("div:hidden") вернет скрытые div-элементы
$("") вернет все элементы с атрибутом value, равным 5
$("div, span, p.lok").css("border", "1px solid red"); Данный оператор добавит рамку ко всем div-ам, span-ам, и абзацам, имеющим класс lok. Таким образом, через зяпятую можно указать любые селекторы.
Комбинированные селекторы

Селекторы, находящиеся в одном выражении, взаимодействуют между собой практически так же, как в правилах CSS

Селекторы по атрибутам
"" элементы, содержащие атрибут name
"" элементы, у которых значение атрибута name совпадает с value
"" элементы, у которых значение атрибута name не совпадает с value
"" элементы, у которых значение атрибута name начинается с value
"" элементы, у которых значение атрибута name заканчивается на value
"" элементы, у которых значение атрибута name содержит подстроку value
"" элементы, у которых значение атрибута name содержит слово value
"" элементы, у которых значение атрибута name имеют префикс value (равен value или имеет вид: "value-*")
"[..." элементы, соответствующие всем заданным условиям на атрибуты одновременно
Простые фильтры

Фильтры, с помощью которых можно уточнить результат других селекторов. По назначению и синтаксису они очень похожи на псевдоклассы в CSS

":focus" элемент, находящийся в фокусе
":first" первый найденный элемент
":last" последний найденный элемент
":eq()" элемент идущий под заданным номером среди выбранных
":not(selector)" все найденные элементы, кроме указанных в selector
":even" элементы с четными номерами позиций, в наборе выбранных элементов
":odd" элементы с нечетными номерами позиций, в наборе выбранных элементов
":gt()" элементы с индексом превышающим n
":lt()" элементы с индексом меньшим, чем n
":header" элементы, являющиеся заголовками (с тегами h1, h2 и.т.д.)
":animated" элементы, которые в данный момент задействованы в анимации
":hidden" невидимые элементы страницы
":visible" видимые элементы страницы
":lang(language)" элементы, в которых указаны языки содержимого
":root" элемент, который является корневым в документе
Фильтры по содержимому Фильтры дочерних элементов

Данные селекторы отфильтровывают элементы по их расположению в родительских элементах

":first-child" элементы, расположенные первыми в своих родительских элементах
":last-child" элементы, расположенные последними в своих родительских элементах
":nth-child()" элементы, расположенные определенным образом в родительских элементах (четные, нечетные, идущие под заданным номером)
":nth-child-last()"
":only-child" элементы, являющиеся единственными потомками в своих родительских элементах
":only-of-type" элементы, являющиеся единственными, удовлетворяющими селектору, потомками в своих родительских элементах
":first-of-type" те из выбранных элементов, которые первыми встречаются в своих родительских элементах
":last-of-type" те из выбранных элементов, которые последними встречаются в своих родительских элементах
":nth-first-of-type()" те из выбранных элементов, которые в определенную очередь встречаются в своих родительских элементах
":nth-last-of-type()"
Фильтры элементов форм
":button" элементы с тегом button или типом button
":radio" элементы, являющиеся переключателями
":checkbox" элементы, являющиеся флажками
":text" элементы, являющиеся текстовыми полями
":password" элементы, являющиеся полями ввода пароля
":file" элементы, являющиеся полями загрузки файлов
":submit" элементы, являющиеся кнопками отправки формы
":reset" элементы, являющиеся кнопками очистки формы
":image" элементы, являющиеся изображениями для отправки формы (input типа image)
":input" элементы, являющиеся элементами формы (с тегами input, textarea или button)
":selected" выбранные элементы (со статусом selected). Это могут быть элементы типа .
":focus" элементы формы, находящиеся в фокусе.
":checked" выбранные элементы (со статусом checked). Это могут быть элементы типа или .
":enabled" активные элементы формы (со статусом enabled)
":disabled" неактивные элементы формы (со статусом disabled)
Перемещение по дереву элементов
.parent() вернет родительские элементы всех выбранных элементов.
.parents() Находит всех предков у выбранных элементов, т.е. не только прямых родителей, но и прародителей, прапрародителей и так далее, до начало дерева DOM.
.parentsUntil() Находит предков, как и.parents(), но прекращает поиск перед элементом, удовлетворяющим заданному селектору.
.offsetParent() Возвращает ближайшего предка c позиционированием, отличным от static (позиционирование по умолчанию).
.children() вернет дочерние элементы всех выбранных элементов.
.next() вернет элемент, лежащий сразу после выбранных элементов.
.nextAll() Находит элементы, которые лежат после каждого из выбранных элементов.
.nextUntil() Находит элементы, которые лежат после каждого из выбранных, но не дальше элемента, удовлетворяющего заданному селектору.
.prev() вернет элементы, лежащие перед выбранных элементов.
.prevAll() Находит элементы, которые лежат перед каждым из выбранных элементов.
.prevUntil() Находит элементы, которые лежат перед каждым из выбранных, но не дальше элемента, соответствующего заданному селектору.
.siblings() Находит все соседние элементы (под соседними понимаются элементы с общим родителем).
.eq(i) вернет элемент, с индексом i в наборе. Методы jQuery для него доступны.
.get(i) вернет DOM-объект выбранных элементов, с индексом i. Методы jQuery для него не доступны.
.get() вернет массив DOM-объеков всех выбранных элементов
.size() вернет размер набора (количествово выбранных элементов).
.each(func) выполнить func для каждого эллемента.
.map() Вызывает заданную функцию для каждого элемента набора, и в итоге создает новый набор, составленный из значений, возвращенных этой функцией.
.closest() Находит ближайший, соответствующий заданному селектору элемент, из числа следующих: сам выбранный элемент, его родитель, его прародитель, и так далее, до начало дерева DOM.
.find() Находит элементы по заданному селектору, внутри выбранных элементов.
.filter() Фильтрует набор выбранных элементов с помощью заданного селектора или функции.
.first() Возвращает первый элемент в наборе.
.has() Фильтрует набор выбранных элементов, оставляя те, которые имеют потомков, соответствующих селектору.
.is() Проверяет, содержится ли в наборе, хотя бы один элемент удовлетворяющий заданному селектору.
.last() Возвращает последний элемент в наборе.
.not() Возвращает элементы, не соответствующие заданным условиям.
.slice() Возвращает элементы с индексами из определенной области (например от 0 до 5).
.add() Добавляет заданные элементы в набор.
.andSelf() Добавляет элементы из предыдущего набора, к текущему (речь идет об одной цепочке методов).
.contents() Находит все дочерние элементы у выбранных элементов. В результат, помимо элементов, включается и текст.
.end() Возвращает предыдущий набор элементов в текущей цепочке методов.
Манипуляция с найденными элементами
.hide() Скрыть элемент.
.hide("slow") - скрыть элемент медленно. «slow», «normal», «fast» или число миллисекунд. Вторым параметром может быть задана Функция, которая запускается после окончания анимационных эффектов. Выполняется единожды для каждого элемента.
.show() Отобразить элемент.
.show("slow") - скрыть элемент медленно.
.css("height") возвратит значение высоты у элемента с идентификатором bigIt.
.css("width", "20px") установит новое значение ширины
.attr("class") возвратит значение класса элемента
.attr("class", "box") установит новое значение атрибута class у элемента
.html("Новое") изменит все html-содержимое элемента на заданное в методе html
.text() возвратит текст, находящийся внутри элемента
.empty() очистить от содержимого элементы
.offset()
.position() 		позволят узнать или изменить позицию выбранного элемента.
.width()
.height() 		позволят узнать или изменить размеры выбранного элемента.
.animate(properties, , , ) анимация.
properties - список CSS-свойств, участвующих в анимации и их конечных значений. Задаются объектом, в формате {ключ:значение}, например:{opacity: 50, width: 100, height: 200}.
duration - продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением "fast" или "slow" (200 и 600 миллисекунд).
easing - изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). Задается строковым значением: "linear" и "swing" (для равномерной анимации и анимации с ускорением).
callback - функция, которая будет вызвана после завершения анимации.
Пример. Пусть у нас есть элемент div с каким-нибудь текстом. Мы хотим плавно скрыть этот элемент, заменить текст, и плавно сделать элемент видимым: $("#mydiv").animate({height: "hide"}, 300).text("Новый текст").animate({height: "show"}, 300); значения "hide", "show" означают исчезновение и появление элемента, за счет параметра, к которому они применены.
События Базовые
.on(events, , , handler) Универсальный метод для установки обработчиков событий на выбранные элементы страницы.
events: blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error selector - селектор по которому будут фильтроваться элементы, лежащие внутри уже найденных. В итоге, обработчик будет срабатывать только в том случае, если событие «поднялось» от одного из отфильтрованных элементов.
data - данные, передаваемые обработчику событий. В обработчике будут доступны в переменной event.data.
handler - функция, которая будет установлена в качестве обработчика.
Например: ("#foo").on("click", function(){alert("Вы нажали на элемент "foo"");}); Обработчик для всех элементов li: $("ul").on("click", "li", function(event){})
.off() Удаляет обработчики, установленные с помощь.on().
.bind() Устанавливает обработчик события на выбранные элементы страницы. начиная с jQuery-1.7, данный метод считается устаревшим
.live() Устанавливает обработчик события на выбранные элементы страницы. Обработчик сработает и на элементах, появившихся после его установки.
.delegate() Устанавливает обработчик события на выбранные элементы страницы. Элементы выбираются с помощью уточняющего селектора. Обработчик будет действовать и на элементах, появившихся после его установки.
.one() Устанавливает обработчик события на выбранные элементы страницы, который сработает только по одному разу, на каждом из элементов.
.unbind() Удаляет обработчик событий у выбранных элементов.
.die() Удаляет обработчик событий, который был установлен с помощью live().
.undelegate() Удаляет обработчик событий, который был установлен с помощью delegate().
.trigger() Выполняет указанное событие и запускает его обработчик.
.triggerHandler() Запускает обработчик указанного события, без его выполнения.
jQuery.proxy() По заданной функции, создает другую, внутри которой переменная this будет равна заданному значению.
event Объект, содержащий данные о текущем событии. Передается всем обработчикам событий.
События мыши
.click() Устанавливает обработчик "клика" мышью по элементу, либо, запускает это событие.
.dblclick() Устанавливает обработчик двойного "клика" мышью по элементу, либо, запускает это событие.
.hover() Устанавливает обработчик двух событий: появления/исчезновения курсора над элементом.
.mousedown() Устанавливает обработчик нажатия кнопки мыши, либо, запускает это событие.
.mouseup() Устанавливает обработчик поднятия кнопки мыши, либо, запускает это событие.
.mouseenter() Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие. Появление этого события, отработано лучше, чем стандартного mouseover.
.mouseleave() Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие. Появление этого события, отработано лучше, чем стандартного mouseout.
.mousemove() Устанавливает обработчик движения курсора в области элемента, либо, запускает это событие.
.mouseout() Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие.
.mouseover() Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие.
.toggle() Поочередно выполняет одну из двух или более заданных функций, в ответ на "клик" по элементу.
События клавиатуры События формы События загрузки страницы События браузера Ajax загрузка страниц $.post(url, , , ) $.get(url, , , ) url - url-адрес, по которому будет отправлен запрос. data - данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: {fName1:value1, fName2:value2, ...}. callback() - пользовательская функция, которая будет вызвана после ответа сервера. dataType - ожидаемый тип данных, которые пришлет сервер в ответ на запрос (подробности тут). // На сервер будет отправлен запрос страницы http://hostname/ajaxtest.php и указаны два параметра. // После получения ответа от сервера будет вызвана функция onAjaxSuccess, которая выведет // на экран сообщение с данными, присланными сервером. $.get("/ajaxtest.php",{param1: "param1", param2: 2},onAjaxSuccess); function onAjaxSuccess(data) {// Здесь мы получаем данные, отправленные сервером и выводим их на экран. alert(data); } Полезные функции load() запрашивает html-текст и автоматически вставляет его в выбранные элементы, $.getScript(url [,fn_success]) делает запрос javascript-файла и автоматически его выполняет. $.getScript("test.js", function(){alert("Скрипт выполнен.");}); $.browser поможет узнать тип браузера. $.support поможет узнать конкретные особенности браузера. .scrollTop() и.scrollLeft() позволят работать с прокруткой.

— знают что я люблю jQuery. Когда-то я любил нативный JavaScript и писал все на нем, но потом понял что в этом нет особого смысла почти всегда.

Но обо всем по порядку.

Что такое jQuery?

Это JavaScript-фреймворк. Ничего страшного в этом слове нет. Можете считать, что это набор полезных функций, которые позволяют удобно делать то, что обычно требуется делать при помощи JavaScript.

Первый довод за использование jQuery — кроссбраузерность. Реально, вы знаете сколько разных синтаксисов у JS? Туча! Чего стоят хотя бы способы работы с Ajax. Во всех браузерах работа эта организована по-разному. С jQuery все единообразно.

Второй довод , кстати, тоже касается Ajax. С jQuery использовать его становится очень просто. Достаточно написать одну строку кода. Вообще, многие задачи, которые решаются на JavaScript небольшими функциями на jQuery решаются одной строкой. А если мы говорим о визуальных эффектах, так там вообще.

В общем, аякс на jQuery сделан очень просто и понятно. Это две функции get() и post() для разных методов отправки данных соответственно.

Третий довод — прозиводительность. Я использую jQuery и никуда не хочу с него слезать. Существует множество других фреймворков, которые делают примерно то же самое. Но jQuery самый быстрый из них.

Четвертый довод — общедоступность и распространение. На данный момент jQuery используют Яндекс и Google. И брать ее можно с их серверов. Например, вот JavaScript-хостинг Яндекса . Для того, чтобы подключить jQuery на любую вашу страницу достаточно просто вставить строку:

Все. Теперь jQuery у вас подключена. Можно пользоваться.

Пятый довод — это наличие не большого, а просто огромного количества плагинов для jQuery. Хотите фотогалерею? Тыщи их! Хотите возможность делать диалоговые окна? Тултипы? Балуны? Экранные лупы? Клавиатуры? Пользовательские интерфейсы? Что? Что вам надо? Я уверен, jQuery это умеет — надо лишь найти плагин.

Что, я еще не убедил вас?

А как на счет большого сообщества (в том числе — русскоязычного) и внятнейшей документации с примерами ?

В общем, если мне нужно на сайте написать что-то большее чем alert — я использую jQuery. Конечно, не всегда оно нужно — надо головой соображать все-таки. Но попробовав раз, слезть реально трудно.

Спонсор этого поста — рекламное агенство Паровоз, которое предлагает купить рекламные стенды . Это будет вам интересно если вы из Нижнего Новгорода. Не забывайте, что стенды считаются одним из наиболее эффективных носителей для размещения рекламы.

Еще решил ради прикола зарегиться на блоговаре. Вот код подтверждения:. Посмотрим что из этого выйдет. Если вы тоже там — знайте — я выращиваю трафку.

Вначале познакомимся с тем, что же такое jQuery?

Итак, jQuery- это JavaScript-библиотека, обеспечивающая кроссбраузерную поддержку приложений (работает в Internet Explorer 6.0+, Mozilla Firefox 2+, Safari 3.0+, Opera 9.0+ и Chrome).

Автор библиотеки Джон Резиг (John Resig) впервые представил свое творение в январе 2006 года на компьютерной конференции в Нью-Йорке, а в августе того же года была выпущена первая стабильная версия библиотеки.

За прошедшие годы библиотека претерпела множество изменений и на текущий день содержит функционал, полезный для максимально широкого круга задач. Она имеет небольшой размер (например, размер минимизированной версии- 55,9 Кбайт, а сжатой версии- 19 Кбайт) и не засоряет глобальное пространство имен тривиальными идентификаторами.

Потрясающие возможности механизма селекторов, позволяющие легко получить доступ к любому элементу объектной модели документа, сделали библиотеку jQuery очень популярной.
Судите сами. Чтобы получить ссылку на DOM-элемент с помощью Javascript, обычно используется метод getElementByld (). Например, изменим HTML-код элемента с идентификатором divl.

Document.getElementByld (“divl”).innerHTML = "Новый текст";

Код на jQuery, выполняющий то же самое действие, будет в два раза короче.

$("#divl").html("Новый текст");

Конечно, ради одной этой строки не имеет смысла подключать целую библиотеку. Но все дело в том, что функционал селекторов далеко не ограничивается одним идентификатором. Возможности селекторов можно сравнить разве что с регулярными выражениями языка Perl. В качестве примера изменим цвет текста во всех элементах А, в параметре href которых содержится ссылка на HTML-документ, причем элемент А должен быть расположен внутри элемента DIV, имеющего стилевой класс clsl.

$("div.clsl a").css("color", "red");

Попробуйте выполнить аналогичную операцию с помощью JavaScript. Для этого понадобится далеко не одна строка кода.

Еще одной отличительной особенностью библиотеки jQuery является возможность составлять цепочки из вызовов методов, так как большинство методов jQuery возвращает объект, с которым можно производить дальнейшие манипуляции.

$("#message") // Получили ссылку на элемент с id=message
.html("Сообщение") // Изменили текст внутри элемента
.parent() // Получили ссылку на родительский элемент
.ess("background-color", "#fff4dd") // Задали цвет фона
.width(300) // Ширина
.height(200) // Высота
// Плавно отобразили элемент за счет изменения прозрачности
.fadeln(3000);

Библиотека jQuery не оставила без внимания и технологию AJAX, позволяющую обмениваться данными с сервером без перезагрузки веб-страницы. В главе 10 мы изучим базовые свойства и методы объекта XMLHttpRequest, а в главе 11 рассмотрим очень удобный интерфейс доступа к AJAX, предоставляемый библиотекой jQuery.

Благодаря своей универсальности библиотека jQuery будет полезна практически любому разработчику. Она подходит новичку, так как позволяет забыть о проблеме с кроссбраузерностью приложения (вышел новый веб-браузер- сменил версию библиотеки и все опять работает). Библиотека идеальна для профессионалов, так как позволяет сократить код минимум в три раза. А это в свою очередь позволит написать очень сложный код с минимальными усилиями и потерей времени.

Желаю приятного прочтения и надеюсь, что эта книга станет верным спутником в вашей повседневной деятельности и в лучшую сторону изменит ваш стиль программирования на JavaScript.

Основы jQuery

В этой книге предполагается, что все обсуждаемые файлы сохраняются в кодировке UTF-8. Поэтому, прежде чем изучать возможности библиотеки jQuery, рассмотрим, чем отличается UTF-8 от других кодировок и как правильно сохранить файл в этой кодировке.

Все символы, которые мы видим на экране монитора, внутри компьютера хранятся в виде чисел. Каждому символу соответствует определенное число (код символа). Для ответа на вопрос, как должен выглядеть символ, представленный определенным кодом, предназначены таблицы соответствий, которые называются кодировками. Кодировки могут быть одно- и многобайтовыми.

В однобайтовых кодировках символ кодируется одним байтом. Первые 7 бит позволяют закодировать 128 символов, соответствующих кодировке ASCII. В число этих символов входят цифры, буквы латинского алфавита, знаки препинания и некоторые служебные символы (например, перенос строки, табуляция и т.д.).
Коды этих символов одинаковы практически во всех однобайтовых кодировках. Восьмой бит предназначен для кодирования символов национальных алфавитов. Таким образом, однобайтовые кодировки позволяют закодировать всего 256 символов. Для кодирования букв русского языка разработано пять кодировок - windows-1251 (ср1251), ср866, iso8859-5, koi8-r и mac-cyrillic. Сложность заключается в том, что код одной и той же русской буквы в этих кодировках может быть разным. Из-за этого возникает множество проблем.

В кодировке UTF-8 один символ может кодироваться несколькими байтами. Первые 128 символов соответствуют кодировке ASCII и кодируются всего одним байтом. Остальные символы кодируются переменным количеством байтов - от двух до шести (на практике- до четырех).

Буквы русского алфавита и некоторых других европейских языков кодируются двумя байтами. Иными словами кодировка UTF-8 позволяет закодировать символы всех существующих алфавитов и способна заменить все кодировки сразу. Сайт может быть на русском или на любом другом языке, а кодировка будет одна и та же. Этой кодировкой мы и будем пользоваться.

При сохранении файлов в кодировке UTF-8 следует учитывать, что использовать приложение Блокнот для этого нельзя, так как при сохранении в начало файла будут вставлены служебные символы, называемые сокращенно ВОМ (Byte Order Mark, метка порядка байтов). Для кодировки UTF-8 эти символы являются необязательными и не позволят нам в дальнейшем, например, установить заголовки ответа сервера. Для работы с кодировкой UTF-8 необходимо установить на компьютер программу Notepad++.

Скачать программу можно абсолютно бесплатно с веб-страницы http: //notepad-plus. sourceforge.net/ru/site.htm. Из двух вариантов (zip-архив и инсталлятор) сове-тую выбрать именно инсталлятор, так как в этом случае при установке можно будет вы-брать язык интерфейса программы. Процедура установки Notepad++ предельно проста и в комментариях не нуждается. При создании нового документа в меню Кодировки следует установить флажок «Кодировать в UTF-8 (без ВОМ)».

Тот факт, что мы будем использовать кодировку UTF-8, отнюдь не означает, что библиотека jQuery может работать только с этой кодировкой. В своих проектах вы можете использовать любую другую кодировку. Однако следует учитывать, что запросы AJAX по умолчанию выполняются в кодировке UTF-8. При использовании других кодировок придется выполнять перекодирование.

Подключение библиотеки jQuery

Прежде чем использовать библиотеку jQuery, ее необходимо вначале скачать с сайта http://jquery.com/, разместить на своем сервере, а затем подключить к HTML-документу. Подключение производится с помощью тега script, в параметре src которого указывается абсолютный или относительный путь к библиотеке.

Сам тег script должен быть размещен в разделе HEAD HTML-документа.

Библиотеку jQuery можно загрузить и с сайта http://ajax.googleapis.com/. В этом случае подключение будет выглядеть так.

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

Определение готовности документа

Обычно большинство действий производится над элементами HTML-документа. По этой причине выполнять скрипты необходимо только после полной загрузки документа. Без библиотеки jQuery для этой цели обычно используется событие onload объекта window.

window.onload = function() {
alert("Документ полностью загружен");
}

Однако это событие возникает только после полной загрузки самого HTML-документа, а также всех других элементов, например изображений. Загрузка изображений (или баннеров с другого домена) может занимать определенное время, в течение которого выполнение скриптов как бы подвисает.

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

jQuery(document).ready(function() {

});

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


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

Если в качестве параметра функции j Query () указать ссылку на функцию, то она также будет выполнена сразу после формирования структуры документа.

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

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

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

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

Рассмотрим последовательность событий на примере. Для этого создадим HTML-документ и объявим несколько методов ready (), а также обработаем событие onload (листинг 1.1).

Листинг 1.1.
Последовательность обработки событий



Последовательность обработки событий



window.onload = function() {
alert("Событие onload");
}
$(document).ready(function() {
alert("Метод ready(). Вызов 1");
});
$(document).ready(function() {
alert("Метод ready(). Вызов 2");
});
$(function() {
alert("Вызов функции $()");
});



Пример последовательности обработки событий

При выполнении этого примера будет иметь место следующая последовательность событий.

Метод ready(). Вызов 1
Метод ready(). Вызов 2
Вызов функции $()
Событие onload

Как видно из примера, событие onload возникает самым последним, а методы ready () и функция $ () выполняются в порядке их объявления в программе.

Обработка конфликтных ситуаций

Как вы уже знаете, функция jQuery () имеет псевдоним $ (). В некоторых других библиотеках (например, в Prototype) также объявлена функция $ (). Если использовать такие библиотеки одновременно, то возникнет конфликт имен. Библиотека jQuery позволяет избежать этого конфликта. Для этого необходимо вначале подключить конфликтную библиотеку, а затем библиотеку jQuery. Сразу после подключения следует вызвать функцию noConflict().jQuery.noConflict();

В этом случае библиотека jQuery освободит функцию $ () для использования другой библиотекой.

Если результат выполнения функции noConflict() присвоить какой-либо переменной, то ее имя можно использовать вместо функции $ () (листинг 1.2).

Листинг 1.2.
Обработка ситуации конфликта имен



Обработка конфликтных ситуаций


function $() {
alert("Функция $() из другой библиотеки");
}



var jq = jQuery.noConflict();





$(); // Вызов функции из другой библиотеки
jq("#div1").html("Пример использования библиотеки jQuery");


В этом примере мы присвоили результат выполнения функции noConflict () переменной jq.

Теперь можно использовать это имя в качестве названия функции,

jq("#divl").html("Пример использования библиотеки jQuery");

Если результат нигде не сохранять, то обращение выглядит следующим образом.

jQuery("#divl") .html("Пример использования библиотеки jQuery");

Использовать функцию $ () в данном случае уже нельзя/так как будет вызвана функция из другой библиотеки. Если же необходимо использовать функцию $ () применительно к библиотеке jQuery, то можно поступить следующим образом.

(function($) {

})(jQuery);

Этим способом обычно пользуются при создании расширений (плагинов). Можно также воспользоваться следующим кодом.

jQuery(function($) {
$("#divl").html("Пример использования библиотеки jQuery");
});

Форматы функции $()

Основную функциональность библиотеки jQuery выполняет функция jQuery (), которая имеет псевдоним $ (). Это единственные идентификаторы, которые доступны в глобальной области видимости. Все остальные функции находятся в области имен библиотеки jQuery. Функция $ () поддерживает несколько форматов:

$();
$();
$();
$([, ]).

Если в качестве параметра указать функцию, то она будет выполнена сразу после формирования структуры документа.

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

Второй формат функции позволяет указать элемент объектной модели документа. В качестве примера зададим цвет фона для всего документа после загрузки:

$(document).ready(function() {
$(document.body).ess("background-color", "silver");
});

Третий формат функции позволяет создавать новые элементы, которые затем можно будет вставить в определенное место в HTML-документе. Рассмотрим это на примере (листинг 1.3).

Листинг 1.3.
HTML-текст в качестве параметра функции $()



HTML-текст в качестве параметра функции $()



$(document).ready(function() {
$("Вставленный текст").appendTo("#div1");
});



Строка 1
Строка 2

Обратите внимание на следующую строку.

$ (">Вставленный Teкст") . appendTo ("#divl") ;

Здесь мы в функции $ () формируем HTML-текст, а затем с помощью метода appendTo () вставляем его после элемента, имеющего идентификатор divl (id="divl").

При выполнении получим в окне веб-браузера следующий результат.

Строка 1
Вставленный текст
Строка 2

Четвертый формат функции $ () является наиболее часто используемым. Он позволяет получить ссылку на элемент или коллекцию элементов по указанному селектору. В качестве этого параметра указываются селекторы, которые являются частью стандарта CSS, а также некоторые специальные селекторы. Вторым параметром функции $ () может быть указан контекст. Например, ссылка на XML-документ, полученный с сервера в результате AJAX-запроса. Если параметр не указан, то контекстом является текущий документ.

Используя jQuery Вы сможете создавать скрипты намного быстрее и эффективнее.

Что такое jQuery?

jQuery - это библиотека, которая значительно упрощает и ускоряет написание JavaScript кода.

Девиз jQuery "write less, do more" (пиши меньше, делай больше) отражает ее главное предназначение.

jQuery позволяет создавать анимацию, обработчики событий, значительно облегчает выбор элементов в DOM и создание AJAX запросов.

Данная библиотека работает со всеми браузерами (IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome ). Это значит, что Вам больше не нужно будет беспокоиться о кроссбраузерной совместимости JavaScript кода.

Для jQuery написано огромное количество плагинов, которые позволяют расширить ее возможности еще больше.

Пример использования jQuery

$(document).ready(function(){ $(":button").click(function(){ $(":button").hide(); $("#wrap1").addClass("add"); $("#wrap1").animate({height:280},2000); $("#wrap1").animate({width:400},2000); $("#wrap1").animate({padding:20},2000,function(){ $("#text1").hide(2000,function(){$("#text2").show(2000);}); }); }); });

Быстрый просмотр

Добавление jQuery на страницы

Для того, чтобы начать использовать jQuery необходимо:

  • Скачать ее с официального сайта . Существуют две версии jQuery: для использования в готовых приложениях (production) и для разработки (development). Версия для разработки содержит комментарии и структурированный код. В сокращенной версии нет комментариев и код в ней не структурирован зато она занимает меньше места и поэтому страницы с ней будут загружаться быстрее. После того, как Вы выберите подходящую версию нажмите на кнопку "Download (jQuery)"
  • Добавить ее на страницу . Для этого следующий код должен быть добавлен на страницу в секцию head:

    • Для тех кто по каким-либо причинам не может (или не хочет) скачивать jQuery предусмотрен альтернативный способ удаленного использования библиотеки предоставленный компанией Google.

    Для того, чтобы использовать jQuery удаленно просто добавьте на страницу в секцию head следующий код:

    Сделайте сами

    Обратите внимание: при выполнении этого и следующих упражнений рекомендуем Вам выключить отладчики (такие как Firebug), которые могут выдавать подсказки. В ходе выполнения заданий Вы сами должны находить и исправлять ошибки в учебных целях.

    Задание 1 на странице задан jQuery код, но он не работает потому, что к ней не подключен необходимый файл библиотеки jquery.js. Подключите jquery.js удаленно (воспользовавшись услугой Google), чтобы "починить" код.

    JavaScript и jQuery

    Что такое jQuery

    jQuery – это библиотека различных полезных программных сервисов для манипуляции элементами html разметки загруженной страницы. Написана она на . Прелесть ее не только в том, что она обладает достаточно серьезными возможностями, но и в том, что ее программный интерфейс прост до безобразия.

    Перед тем, как перейти к описанию jQuery, еще раз напомню, что такое объектная модель документа или DOM (Document Object Mode l). DOM – это иерархическая структура объектов в оперативной памяти, соответствующая структуре загруженной интернет страницы. DOM формируется браузером и предоставляет программный интерфейс для работы с элементами разметки, например, с использованием того же JavaScript. Средствами DOM вы можете искать, добавлять и удалять элементы документа, редактировать их атрибуты, менять стили и т.д. Другими словами, с помощью DOM и JavaScript создаются динамические интернет страницы, которые еще называют DHTML страницам (Dynamic HTML pages). Вернемся к библиотеке jQuery. С помощью программного интерфейса jQuery вы легко можете выбрать нужные вам элементы DOM и выполнить с ними любые действия из нижеприведенного списка:

    • Изменить ;
    • Отредактировать атрибутный состав;
    • Удалить;
    • Добавить потомков;
    • Переместить или обернуть другим элементом;
    • Выполнить копирование;
    • Привязать обработчик события;
    • Настроить визуальный эффект или анимацию;
    Безусловно, все это можно сделать средствами “голого” DOM и JavaScript, но зачем, если есть уже готовый и бесплатный набор инструментов. Не стоит забывать и про кроссбраузерность. Если вам необходимо, чтобы ваша страница работала одинаково под управлением всех популярных браузеров, то для этого необходимо приложить немало усилий, поскольку существует довольно большой список того, что различные браузеры реализуют по-разному. Если вы работаете через интерфейс jQuery, то об этой проблеме вы можете забыть. Естественно, что программы пишут люди, и в jQuery могут быть ошибки, но в этом случае вы можете рассчитывать на то, что проблему устранят в ближайшее время. Если вы знакомы с , имеете представление о том, что такое и JavaScript, то самое время освоить работу с jQuery. С появлением этой замечательной библиотеки возможности профессионалов и начинающих веб-дизайнеров несколько выровнялись, что, возможно, огорчает первых, но воодушевляет вторых. Может быть, я несколько и преувеличиваю, но то, что теперь каждый, не особо искушенный в тонкостях программирования на JavaScript имеет довольно серьезный арсенал для создания эффектных, быстрых и надежных DHTML страниц - неоспоримая заслуга jQuery. Подключение jQuery

    Для начала нужно скачать библиотеку. Сделать это можно на сайте авторов jQuery: http://jquery.com . Далее, необходимо ее просто подключить с помощью тега примерно так:

    Все, можно начинать с ней работать. Если желания скачивать нет, то можно указать ссылку прямо на последнюю версию библиотеки, расположенную на сервере разработчика: Ссылаться на последнюю версию с одной стороны хорошо, поскольку в ней постоянно устраняют какие-то ошибки и оптимизируют работу отдельных ее функций, но, с другой стороны, в новой версии могут появиться изменения, которых вы не ожидаете, и которые приведут к изменениям в работе вашего проекта.

    Программный интерфейс или синтаксис jQuery

    Я уже сказал, что синтаксис запросов jQuery достаточно прост. Именно запросов, поскольку программирование на JavaScript с использованием jQuery можно отнести к декларативному программированию , которое отличается от классического процедурного программирование тем, что вы описывает “что нужно сделать”, а не “как сделать”. В названии библиотеки отражена ее суть – язык запросов в контексте JavaScript. Все запросы на jQuery начинаются вызовом функции $ , аргументом которой является сам запрос. Итак, обобщенный синтаксис jQuery запроса выглядит примерно так:

    $(запрос )[{.фильтр (критерий )}].действие (аргументы ){ .действие (аргументы )} Запрос – это селектор или список селекторов, разделенных запятой. Синтаксис запроса совпадает с синтаксисом селекторов CSS стилей. Таким образом, запрос jQuery может начинаться примерно так:
    $(“div”) - выбор всех элементов div ;
    $(“div, p”) – выбор всех элементов div и элементов p ;
    $(“.class_name”) – выбор всех элементов класса class_name ;
    $(“#element_id”) – выбор элемента с идентификатором element_id ;
    $(*) – выбор вообще всех элементов;
    $(“.class_name span”) – выбор всех элементов span в рамках всех элементов класса class_name ;
    $(“#element_id > div”) – выбор всех элементов div , являющихся прямыми потомками (дочерними элементами) элемента с идентификатором element_id .
    $(“#element_id .class_name + div”) – выбор всех элементов, которые следуют сразу за элементами класса class_name в рамках элемента element_id .
    $(“#ul_id > li:first”) – выбор первого элемента li списка ul_id . Также, можно выбрать последний last элемент либо все четные even или нечетные odd элементы. Есть и другие варианты.
    $(“a”) – выбор всех ссылок со значением атрибута href , начинающегося на “http://ru.wikipedia.org” . Без символа “^” получим условие на полное совпадение значений, если вместо символа “^” поставим символ “$”, то получим ограничение на совпадение с конца, а символ * будет означать, что значение атрибута должно просто содержать указанный фрагмент.

    Фильтр – способ отфильтровать набор выбранных элементов по дополнительным критериям. Критерии – это те же селекторы. Есть две противоположные друг другу операции: filter и not . Если использовать операцию filter(критерий) , то выбранными останутся только те элементы, которые удовлетворяют аргументу - критерию, а если not , то останутся только те, что не удовлетворяют. Обычно, смысл имеет использовать операцию not , поскольку критерий операции filter обычно легко объединить с основным селектором функции $() . Вот пара примеров использования этих операций:
    $(“div”).not(“.class_name”) – исключаем все div класса class_name ;
    $(“td, th, div”).filter(“.class_name”) – отбираем элементы td , th , div класса class_name .

    Есть еще операция slice(from, to) , которая позволяет выделить последовательность элементов с индексами из промежутка [from - to ].

    Действие – это, собственно, само действие – некоторая операция над множеством выбранных элементов . Каждая операция возвращает некий результат: либо то же самое множество, если операция не связана с созданием новых или удалением выбранных элементов, либо уже отредактированное множество, либо набор вновь созданных элементов. Благодаря этому вы можете указать сразу несколько операций, разделенных точками. Приведенный ниже пример выполнит отбор всех элементов span , не относящихся к классу class_name и скопирует их в элемент с идентификатором target :
    $("span").not(".class_name").clone().appendTo("#target");

    Результат каждой операции – это массив элементов HTMLElement . Размер массива можно узнать с использованием свойства length или функции size() . Аргументами операций могут быть не только строковые параметры, но и результаты других запросов. Вот пример того, как результат одного запроса можно поместить внутрь элемента, который, в свою очередь, являются результатом другого запроса:
    $("span").not(".class_name").clone().appendTo($("span.class_name"))

    В качестве аргумента можно использовать не весь результат запроса, а отдельный его элемент:
    $("span.class_name").append($("span").not(".class_name"));

    Таким образом, аргументом операции может быть либо селектор в виде строки, либо результат другого запроса, либо любой экземпляр HTMLElement .

    Операции jQuery

    Ниже представлены сводные таблицы с операциями jQuery, их кратким описанием и ссылками на те примеры, которые демонстрируют их применение на практике.

    Свойства

    Возвращают или устанавливают значения различных свойств выбранных элементов. Если необходимо определить новое значение свойства, то его следует передать в качестве аргумента, например, $(“#element”).text(text_value) или $(#element”).html(html_value) :

    Наименование Описание Пример
    text() Текст. -
    offset() Смещение {left, top}. , функция перемещения шарика ball.move() : $("#ball").offset({left:$("#ball").offset().left + this.dx, top:$("#ball").offset().top + this.dy}); Данная функция вызывается по таймеру каждые 10 миллисекунд.
    width(), height() Ширина и высота. -
    html() html разметка внутри выбранных элементов.