Библиотека jQuery

Если вкратце охарактеризовать то, что делает библиотека jQuery, то это прозвучит довольно обыденно: данная библиотека позволяет изменять содержимое HTML-документов путем манипулирования объектами модели, создаваемой браузерами в процессе обработки HTML-кода (так называемые DOM-манипуляции).

Вам, наверное, уже приходилось манипулировать объектами DOM (Document Object Model - объектная модель документа) с помощью других библиотек JavaScript или встроенных функций API (Application Programming Interface - интерфейс программирования приложений) , которые поддерживаются большинством современных браузеров. Однако библиотека jQuery работает намного лучше. Она превращает манипулирование объектами DOM в увлекательное занятие, временами напоминающее настоящее развлечение.

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

Средства jQuery необычайно выразительны. Эта библиотека позволяет добиться гораздо большего при намного меньшем объеме кода, чем в случае использования программных DOM-интерфейсов браузеров.

Методы jQuery применимы к целым группам элементов. Предлагаемый в DOM-модели стандартный подход, основанный на шаблонной цепочке действий "выбрать-повторить-изменить", больше не требуется. Следствием этого является уменьшение количества циклов for в коде, а значит, и снижение вероятности появления в нем ошибок.

Библиотека jQuery справляется с различиями в реализации DOM в различных браузерах (проблемы кросс-браузерности). Например, меня не должна беспокоить мысль об особенностях поддержки того или иного средства, чем печально славится браузер Internet Explorer (IE). Достаточно всего лишь сформулировать jQuery свои пожелания, и библиотека самостоятельно обеспечит совместимость с конкретным браузером.

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

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

Описание библиотеки jQuery:

• 1. Основы jQuery, работа с DOM-моделью
  • Вставка дочерних, сестринских и родительских элементов

Наверняка, Вы слышали о прекрасной библиотеке Javascript под названием jQuery. Что же такое на самом деле jQuery?

Как облегчить жизнь веб-разработчика? С чего начать? jQuery делает написание Javascript интересным и более простым. С помощью этой библиотеки многие достаточно сложные аспекты Javascript можно легко внедрить в любые приложения.

Сегодняшний наш урок расскажет о том, как начать работу с jQuery и как написать свой первый скрипт.

Что же такое jQuery?

jQuery очень легкая библиотека Javascript (некоторые называют ее фреймворком), которая избавляет от головной боли при написании Javascript кода. У нее много очень мощных возможностей, как например: отслеживание DOM, добавление красивых эффектов и анимаций к элементам, супер простые Ajax техники и методы. На главной странице сайта jQuery наиболее точное, на мой взгляд, описание:

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

Какие преимущества jQuery?

Давайте коротко пройдемся по некоторым преимуществам и свойствам данного фреймворка:

Существенно уменьшается количество кода (необходимого для работы скрипта) по сравнению с JavaScript, что в свою очередь означает меньше временных затрат и более читабельный код. Далее в статье будут рассмотрены некоторые примеры.

Намного проще понять код (в отличии от JavaScript). В нашем мире, чем скорее Вы закончите процесс программирования, тем больше времени сможете уделить другим целям.

Очень удобная документация и активное комьюнити, готовое всегда оказать помощь при необходимости.

Использование Ajax становится намного проще. Вам потребуется всего 5 строк кода (иногда меньше) для создания простого Ajax запроса.

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

С jQuery весело:)

Как начать?

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

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

Готов ли документ?

Для выполнения нашего первого jQuery скрипта, нам необходимо поместить весь наш скрипт в функцию. Эта функция будет выполнена при полной готовности DOM (когда "документ будет готов" - дословный перевод с англ.). Заметьте, что это очень похоже на популярное событие ‘onload’, но не является тем же самым. Давайте взглянем на пример:

$(document).ready(function(){ //Code here });

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

Для ленивых кодеров, или для тех, у кого каждый символ на счету, можно еще сократить код выше:

$(function(){ //Code here });

Ваш первый скрипт jQuery

Мы уже знаем, как ссылаться на библиотеку. Также нам немного понятна функция document.ready. Теперь пришло время написать простейший скрипт.

Давайте сделаем его максимально простым. Для данного примера, давайте сделаем страницу с текстом и цитатой в конце. Мы хотим показывать цитату, только если пользователь нажмет на кнопку. Взгляните ниже на необходимый для этого код:

$(document).ready(function(){
var myQuote = $("#my_quote");
myQuote.hide();
$(".button").click(function(){
myQuote.show(500);
});
});

Давайте детально рассмотрим весь код.

Как говорилось выше, мы помещаем весь код к выполнению внутри функции $document.ready().

Мы присваеваем id нашей цитаты (my_quote) переменную myQuote. Теперь у нас есть доступ к цитате с id my_quote.

Вот и все. При нажатии на кнопку в течении 0.5 секунды будет показана цитата. Очень легко, не правда ли?

Продолжение следует....

Спасибо за внимание! Всего наилучшего!

Как я уже писал , я начал читать книгу «jQuery in Action» (авторы Bear Bibeault и Yehuda Katz). В данной серии статей (а я планирую довести дело до конца) я буду выкладывать самые интересные моменты из каждой главы этой книги. Это будут основные идеи, примеры или и то и другое вместе:-)

Глава 1. Введение в jQuery. Для чего нужно (нужна, нужен) jQuery – чтобы облегчить работу веб-программиста. С помощью этой библиотеки нам (веб-программистам) проще повысить функциональность наших страниц с минимальным выполнением монотонной работы.Основы jQuery В своей основе jQuery ориентировано на работу с элементами HTML страниц. Основные моменты.1.1. Wrapper. В CSS для выбора, например, всех ссылок внутри абзаца

Мы писали:

В jQuery для этого используется следующее выражение:

JQuery(selector)

Здесь следует отметить, что $() является алиасом к функции jQuery() . Она возвращает специальный объект JavaScript, содержащий массив элементов DOM, соответствующий селектору.

Или такой пример: применим эффект fade out для всех элементов класса notLongForThisWorld . Код будет следующим:

$(“div.notLongForThisWorld”).fadeOut();

А если мы захотим в добавок к эффекту добавить к этим элементам класс removed , то напишем так:

$(“div.notLongForThisWorld”).fadeOut().addClass(“removed”);

Такую цепочку можно продолжать бесконечно.

Но это только малая часть возможности jQuery по работе с селекторами. Еще пара:

$(“body > div”);

Селектор выбирает элементы , дочерние к

$(“body > div:has(a)”);

То же, но уже выбираем , содержащие в себе ссылки.

Не пугайтесь, что вам что-то сейчас непонятно. Более подробно на селекторах мы остановимся в главе 2. Единственный на сейчас вывод, который нужно сделать – jQuery на самом деле мощная штука.

1.2. Функции. По сути функции jQuery это методы функции jQuery. Но в книге мы их будем называть функцими. А не методами.

$.trim(someString);

Здесь мы использовали функцию trim() . Подробнее функции jQuery будут рассмотрены в 6-й главе.

$ это пространство имен.

1.3.The document ready handler (на английском-то понятно, а как это по-русски сказать… Суть ниже:-)).

Обычный код JavaScript при применении метода onload начинает работать, когда страничка полностью загрузилась браузером пользователя. Вместе с картинками и прочим. Для работы jQuery достаточно загрузки DOM.

1.4. Работа с DOM. Создавать элементы DOM можно просто передавая функции $() . Например:

$(“

Привет!

”) ;

Или такой пример:

$(“

Привет!

”).insertAfter(“#followMe”);

Как вы догадались,

Привет!

появится после элемента с id=”followMe” .

1.5. Расширение jQuery. В jQuery много полезных функций, но, конечно, она не может удовлетворить потребностям всех пользователей. В этом случае библиотеку всегда можно расширить своими собственными функциями.

Смотрим пример:

$.fn.disable = function() {
return this.each(function() {
if(typeof this.disabled != “undefined”) this.disabled = true;
});
}

$.fn.disabled означает, что мы расширяем враппер $ функцией disabled .

Затем мы можем уже использовать свою новую функцию:

$(“form#myForm input.special”).disable().addClass(“moreSpecial”);

Кроме своих функций к jQuery можно подключать плагины. О них еще будет упомянуто в главе 9.

1.6. Использование jQuery с другими библиотеками. Использование префиксов jQuery и, в частности, $ , который используется так же библиотекой Prototype, может создать проблем, подумаете вы. Ну, если первый еще нет, то второй точно.

JQuery.noConflict();

При этом значение $ будет освобождено jQuery для другой библиотеки.

Как вам в целом пост? Хотелось бы услышать ваше мнение, стоит ли продолжать, потому что это мой первый опыт в такого вида постах-переводах, да еще урезанного вида.

Еще хотелось отметить, что в jQuery я далеко не эксперт, разбираться начал вместе с вами с прочтения этой книги. Надеюсь, что все у нас получится! При этом если я допустил какие-то неточности, что-то не так понял - прошу прощения, я с радостью все исправлю.

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

Этой публикацией я решил открыть цикл статей для тех, кто хочет овладеть фреймворком jQuery. Как всегда я буду стараться быть кратким и приводить как можно больше примеров. Последующие статьи, в принципе, можно рассматривать как вольный перевод документации c http://docs.jquery.com .

Итак, вы решили освоить jQuery, с чего начать? С JavaScript вы, конечно же, уже знакомы, иначе не решили бы. Что еще полезно знать для лучшего понимания этого волшебного фреймворка:

• CSS селекторы (посмотреть можно )
• XPath (посмотреть можно )

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

CSS и XPath. Поэтому если эти понятия вам знакомы, то считайте, что вы уже на 50% знакомы с jQuery, а если нет — все в ваших руках.

Итак, для начала неплохо бы научиться получать любой нужный нам элемент на странице или группу элементов, отобранную по определенному признаку:

$("div") // все div"ы на странице $("div:first") // только первый div $("div:last") // только последний $("div:even") // все четные div"ы $("div.myclass") // div имеющий class="myclass" $("#mydiv") // элемент с id="mydiv", не обязательно div $("input:text") // все элементы input с type="text" $("input:checkbox:checked") // все чекбоксы с checked=true $("div", "#myid") // все div"ы, находящиеся в контейнере с id="myid" $("div.myclass img") // img, который находится в div"е с class="myclass" $("div.myclass, div.my2") // div"ы имеющие class="myclass" и class="my2"

Список можно продолжать долго, но для этого существует документация (благо у jQuery она превосходная, с примерами и бес лишней писанины), а мы сейчас пытаемся понять суть вопроса. Пытливый взор сразу обратил внимание на конструкцию $() в каждом примере. Что это? Это функция: имя — $ (разве запрещено?), а в круглых скобках — параметры. Теперь становится понятным, для чего нужны CSS и XPath — их конструкции и выступают в качестве параметров для выборки.

Функция $ — это фундамент jQuery, она так или иначе, вызывается всеми его методами. Если это функция, то она может что-то возвращать. А возвращает она как раз массив элементов, выбранных из документа на основе заданных параметров, т.о.

Var tmp = $("div"); // можно присвоить значение alert(tmp.length) // и посмотреть количество элементов массива

Элементами данного массива можно манипулировать:

$("div").not(".red") // все div"ы, кроме тех, у которых есть класс "red", // т.е. не только class="red", но и class="myclass red" $("span.green").add("span.gray") // в данном случае // идентично $("span.green, span.gray"), // но бывает, что без add не обойтись $("div").filter(".red, :first") // выбирает все дивы, а потом выбирает // из них первый и с классом red

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

$("div") //вернул все div"ы.not(".red") //отсек div"ы с классом red и вернул остальные.add("span.green") //добавил к выборке span"ы c классом green .addClass("myclass") //добавил класс myclass каждому элементу выборки.removeAttr("title") //удалил атрибут title у каждого элемента выборки (если был)

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

здесь текст

этот текст будет удален

а этот нет

del

$("#myid").click(function (){ $(this).parent().prev().prev().empty(); }); Думаю, названия методов в предыдущем примере говорят сами за себя, подробнее они будут рассмотрены в соответствующей статье.

Ну вот, пожалуй, и все основы — выбрать нужный элемент (или группу) и произвести над ним нужные действия (читай применить нужный метод). Просто, как все гениальное! Основываясь на двух этих простых вещах jQuery имеет свой гибкий механизм обработки событий и ajax взаимодействия с сервером, весомый набор визуальных эффектов и многое другое. Все это я постараюсь осветить в последующих публикациях.

1 сентября 2008 в 07:11 jQuery in Action. Глава 1. Введение в jQuery.

• jQuery

Как , я начал читать книгу «jQuery in Action» (авторы Bear Bibeault и Yehuda Katz). В данной серии статей (а я планирую довести дело до конца) я буду выкладывать самые интересные моменты из каждой главы этой книги. Это будут основные идеи, примеры или и то и другое вместе:-)

Глава 1. Введение в jQuery. Для чего нужно (нужна, нужен) jQuery – чтобы облегчить работу веб-программиста. С помощью этой библиотеки нам (веб-программистам) проще повысить функциональность наших страниц с минимальным выполнением монотонной работы.Основы jQuery В своей основе jQuery ориентировано на работу с элементами HTML страниц. Основные моменты.1.1. Wrapper. В CSS для выбора, например, всех ссылок внутри абзаца

Мы писали:

В jQuery для этого используется следующее выражение:

JQuery(selector)

Здесь следует отметить, что $() является алиасом к функции jQuery() . Она возвращает специальный объект JavaScript, содержащий массив элементов DOM, соответствующий селектору.

Или такой пример: применим эффект fade out для всех элементов класса notLongForThisWorld . Код будет следующим:

$(“div.notLongForThisWorld”).fadeOut();

А если мы захотим в добавок к эффекту добавить к этим элементам класс removed , то напишем так:

$(“div.notLongForThisWorld”).fadeOut().addClass(“removed”);

Такую цепочку можно продолжать бесконечно.

Но это только малая часть возможности jQuery по работе с селекторами. Еще пара:

$(“body > div”);

Селектор выбирает элементы , дочерние к

$(“body > div:has(a)”);

То же, но уже выбираем , содержащие в себе ссылки.

Не пугайтесь, что вам что-то сейчас непонятно. Более подробно на селекторах мы остановимся в главе 2. Единственный на сейчас вывод, который нужно сделать – jQuery на самом деле мощная штука.

1.2. Функции. По сути функции jQuery это методы функции jQuery. Но в книге мы их будем называть функцими. А не методами.

$.trim(someString);

Здесь мы использовали функцию trim() . Подробнее функции jQuery будут рассмотрены в 6-й главе.

$ это пространство имен.

1.3.The document ready handler (на английском-то понятно, а как это по-русски сказать… Суть ниже:-)).

Обычный код JavaScript при применении метода onload начинает работать, когда страничка полностью загрузилась браузером пользователя. Вместе с картинками и прочим. Для работы jQuery достаточно загрузки DOM.

1.4. Работа с DOM. Создавать элементы DOM можно просто передавая функции $() . Например:

$(“

Привет!

”) ;

Или такой пример:

$(“

Привет!

”).insertAfter(“#followMe”);

Как вы догадались,

Привет!

появится после элемента с id=”followMe” .

1.5. Расширение jQuery. В jQuery много полезных функций, но, конечно, она не может удовлетворить потребностям всех пользователей. В этом случае библиотеку всегда можно расширить своими собственными функциями.

Смотрим пример:

$.fn.disable = function() {
return this.each(function() {
if(typeof this.disabled != “undefined”) this.disabled = true;
});
}

$.fn.disabled означает, что мы расширяем враппер $ функцией disabled .

Затем мы можем уже использовать свою новую функцию:

$(“form#myForm input.special”).disable().addClass(“moreSpecial”);

Кроме своих функций к jQuery можно подключать плагины. О них еще будет упомянуто в главе 9.

1.6. Использование jQuery с другими библиотеками. Использование префиксов jQuery и, в частности, $ , который используется так же библиотекой Prototype, может создать проблем, подумаете вы. Ну, если первый еще нет, то второй точно.

JQuery.noConflict();

При этом значение $ будет освобождено jQuery для другой библиотеки.

Как вам в целом пост? Хотелось бы услышать ваше мнение, стоит ли продолжать, потому что это мой первый опыт в такого вида постах-переводах, да еще урезанного вида.

Еще хотелось отметить, что в jQuery я далеко не эксперт, разбираться начал вместе с вами с прочтения этой книги. Надеюсь, что все у нас получится! При этом если я допустил какие-то неточности, что-то не так понял - прошу прощения, я с радостью все исправлю.

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