Введение в jQuery - JQuery - Web-программирование - Каталог статей

Главная » Статьи » Web-программирование » JQuery

Введение в jQuery

Для чего нужно (нужна, нужен) jQuery - чтобы облегчить работу веб-программиста.
С помощью этой библиотеки нам (веб-программистам) проще повысить функциональность наших страниц с минимальным выполнением монотонной работы.

В своей основе jQuery ориентировано на работу с элементами HTML страниц.

Wrapper

В CSS для выбора, например, всех ссылок <a> внутри абзаца  мы писали:

Code (CSS)

p a{}

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

Code

$(selector) или jQuery(selector)

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

Code

$('p a')

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

Code

$('div.notLongForThisWorld').fadeOut();

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

Code

$('div.notLongForThisWorld').fadeOut().addClass('removed');

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

Code

$('body > div'); 
// Селектор выбирает элементы <div>, дочерние к <body>
$('body > div: has(a)');
// То же, но уже выбираем <div>, содержащие в себе ссылки.
$('a[href$=pdf]');
// Выбираем ссылки на PDF файлы.

Функции

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

Code

$.trim(someString);

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

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

The document ready handler

(на английском-то понятно, а как это по-русски сказать... Суть ниже ヅ ).

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

Работа с DOM

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

Code

$('Привет!');

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

Code

$('Привет!').insertAfter('#followMe');

Как вы догадались, Привет! появится после элемента с id='followMe'.

Расширение jQuery.

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

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

Code

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

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

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

Code

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

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

Использование jQuery с другими библиотеками.

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

Авторы jQuery предвидели такой момент и при совместном использовании нескольких библиотек рекомендуют использовать функцию noConflict() сразу после подключения других библиотек:

Code

jQuery.noConflict();

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

Автор: Неймеш Роман

Категория: JQuery | Добавил: likbezz (15.05.2010)

Просмотров: 5898 | Теги: веб-программист, Script, DOM, функции, JavaScript, jQuery, библиотеки, селектор, функциональность

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]