---
title: jQuery для продолжающих (с плагинами)
date: 2008-04-28T10:00
tags: [javascript]
---
[jQuery](http://docs.jquery.com/) - библиотека о которой в последнее время говорит практически [каждый web-разработчик](http://anton.shevchuk.name/javascript/jquery-for-beginners/), верстальщик и дизайнер. Написанная с учётом CSS, она упрощает доступ к одному или нескольким DOM-элементам. Если вы ещё используете prototype, то можно использовать режим совместимости (правда не факт что у вас будут работать плагины). Стандартно доступ происходит благодаря функции $ или JQuery. Элементу можно добавить (_.addClass_) или отнять (_.removeClass_) CSS-класс. Если это input-элемент, то запись и чтение происходит в аттрибуты элемента (_.attr_) и напрямую к значению (_.val)_ . Внутренние элементы можно задать как через (_.html_). Ajax очень просто вызывается функцией _$.post (url, val, callback)_
Кроме минимализма, ускоренности и CSS-селекторов библиотека мало чем по функциональности отличается от prototype, mootools. Она не расширяет родные JS-объекты, как это делает protype и существует в своём пространстве переменных, поэтому не конфликтует с другими библиотеками
### Примеры
1. Допустим надо сделать массовое удаление из списка (как в почте), для этого генерируется огромный список checkbox'ов, а что-бы их все их массово выделить можно создать глобальный checkbox``
2. Часто встаёт вопрос оповещения пользователей об удачном добавлении, ошибке или просто информации. Для этого можно использовать три CSS-класса, при этом элементы можно прятать по прошествии какого-то времени. Для этого используется конструкция, запускающаяся сразу после создания DOM-дерева (а не всего документа)`$(document).ready(function() { setTimeout(function() {$('.error').fadeOut('slow');}, 20000);});`
3. Работа с select'ами очень проста (даже с multiple=true), например если надо двумя кнопками перекидывать элементы двух списков, то поможет [такой код](http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html):`$().ready(function() { $('#add').click(function() { return !$('#select1 option:selected').remove().appendTo('#select2'); }); $('#remove').click(function() { return !$('#select2 option:selected').remove().appendTo('#select1'); }); $('#save').click(function(){ $('#select1 option').attr('selected',true); $('#select2 option').attr('selected',true);}); //при сохранении формы выделяем все эелементы });`
4. Выделить в select'е нужный элемент можно без цикла:
`$("#mySelect option[value='3']").attr('selected', 'selected');`
5. Проверить число отмеченных checkbox'ов очень просто:`if (!$('.check_one:checked').length)`
6. Каждому элементу можно подключать (bind-ить) обработчики событий, даже несколько за раз…`$('#someinput').bind('keyup change keydown', function() { alert ("one of three events is called!");});`
7. Изменить направление формы в зависимости от select'а можно явно (но лучше выносить все обработчики в отдельный файл)
`