jQuery *

Перевод отличной статейки. Думаю, будет полезна как новичкам, которые только приступили к использованию jQuery, так и тем, кто уже какое-то время с ним работает. А кого-то, возможно, заставит глянуть эту чудесную библиотечку. Многие советы имеют отношение не только к jQuery, но и к JavaScript в целом. Лично для меня была весьма и весьма познавательной, посему и захотелось донести это «до масс». Перевод не дословный, но передающий смысл и максимально адаптированный к русскому языку.

Далее все написано от имени автора оригинальной статьи.

Введение

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

Я не эксперт в jQuery. И даже не претендую, поэтому, если встретите ошибки, смело поправляйте меня и вносите предложения по улучшению (поправлять и присылать поправки нужно автору статьи, а не перевода — зам. пер.).

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

Содержание

1. Загружайте фреймворк с Google Code
2. Используйте «шпаргалку» (cheat sheet)
3. Соединяйте все ваши скрипты и уменьшайте размер файла
4. Используйте возможности Firebug для ведения логов
5. Минимизируйте операции выборки в пользу кэширования
6. Сводите манипуляции с DOM-деревом к минимуму
7. Оборачивайте все в единый элемент, когда речь идет о любой вставке в DOM
8. Используйте «id» вместо классов, где это возможно
9. Задайте контекст своим селекторам
10. Используйте последовательности вызовов методов с умом
11. Научитесь правильно использовать анимацию
12. Научитесь назначать и делегировать события
13. Используйте классы для сохранения состояния
14. Еще лучше — используйте встроенный в jQuery метод data() для сохранения состояния
15. Пишите собственные селекторы
16. Подготавливайте HTML и модифицируйте его, когда страница загружена
17. Используйте «отложенную загрузку» (lazy loading) для определенного контента для выигрыша в общей скорости и преимуществ для SEO
18. Используйте служебные функции jQuery
19. Используйте «noconflict» для переименования глобального объекта «jquery», когда используете его с другими фреймворками
20. Как узнать что картинки загружены?
21. Всегда используйте последнюю версию
22. Как проверить, что элемент существует?
23. Добавляйте класс «JS» в элемент «html»
24. Возвращайте «false» для отмены поведения по-умолчанию
25. Короткая запись для события готовности документа

Последнее время мне всё чаще задают вопрос как выбрать тот или иной элемент в DOM'е, и данный пост будет сплошь посвящен селекторам в jQuery, возможно большинство из них Вы видели в различных источниках, но собрать их воедино все же стоит…

Как-то для личных целей мне понадобилось сделать ajax загрузку сразу нескольких файлов. Но хотелось сделать это красиво и удобно.
Для этой задачи я выбрал горячо мной любимый jquery и несколько плагинов к нему.

Несколько ранее я написал здесь статью о плагине positioning. Недавно возникла необходимость использовать некоторые другие функции.
Представляю вам улучшенную версию этого плагина:
— можно задавать сдвиг не только в пикселях, но и в процентах;
— в методе centering можно задавать центрирование только по горизонтали, только по вертикали, или одновременно и по горизонтали, и вертикали.

В плагине есть 2 метода
positioning(leftOffset, topOffset, scroll) — позиционирует элемент на странице

leftOffset — сдвиг по горизонтале
topOffset — сдвиг по вертикали
scroll — параметр, который задает позиционирование относительно «абсолютной» верхней левой точки браузера, или позицинирование относительно верхней левой точки уже проскролленной страницы.

centering(horisontalAlign, verticalAlign) — позиционирует элемент по центру страницы.

Пример можно посмотреть здесь
Внизу страницы есть 3 кнопки — кликая на них можно посмотреть плагин в действии

Тихо и незаметно вышел новый релиз одного из лучших JavaScript фреймворков — jQuery — версии 1.3.1

Это багфикс релиз, так что новой функциональности он не добавляет — только исправляет найденные баги в версии 1.3 (например: злобный баг с child-celectors).

Также стоит отметить, что разработчики наконец решили отказаться от packed версии, которая, хоть и весит меньше, но жутко тормозит…

Собственно все… Скачать счастье сие можно вот тут: жми меня!

Приятная новость для всех поклонников данного фреймворка. В день рождения библиотеки (которой сегодня исполняется уже три года) команда разработчиков объявила о выходе новой версии — 1.3!

Часто использую usersrcipt в greasemonkey, так же сильно люблю jQuery — использую его во всех проектах.
Нашел небольшой сниппет для использования jQuery в скриптах для Greasemonkey

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

Мне известны два способа решения этой проблемы:

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

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

Как известно, недавно вышла бета версия jQuery 1.3. Пока она сырая, тестируется, и в ней еще есть неприятные баги. Но знакомится с нововведениями стоит и я хотел бы кратко рассказать об одном из них.

Функция «live» представляет собой аналог функции bind, по синтаксису и сути они идентичны, но между ними есть одно огромное различие, которое лучше всего демонcтрирует следующий пример.

Попробовать демо. Пояснения под катом.

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

Загрузка

Копию jQuery 1.3b1 вы можете скачать отсюда
code.jquery.com/jquery-1.3b1.js

UPD: добавлены некоторые подробности из источников вне перевода

Вышла первая бета JavaScript-фреймворка jQuery версии 1.3. Выложена исключительно для тестирования.

Основные изменения, которые могут повлиять на старый код:
— Новый механизм выбора по селектору.
— Операции с DOM.
— .offset ()
— Пространства имён.
— При вызове события оно применяется вверх по дереву DOM.

Пробуем и сообщаем о багах

// Официальный анонс

Думаю, многие из вас видели плагин для wordpress. Симпатичный шарик привлек мое внимание и мне захотелось его поковырять...
Разочарованию не было предела ― он оказался на флэше(против флэша ничего не имею). Ладно, флэш так флэш нагуглил исходники, распаковал архивчик, а там… А там море файлов с кодом, файлы для настройки с парой десятков опций, несимпатичный фалик для вывода всего этого, для генерации xml'ки.
С этим я мириться уже никак не хотел и решил написать тоже самое, но на javascript. Привык я работать с jQuery поэтому решил сделать в качестве плагина для него.

На прилавках книжного магазина books.ru появился перевод замечательной книги Бера Биба и Иегуда Каца «jQuery in Action».

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

Решился потренироваться в написании jQuery плагинов, и вот предлагаю на суд общественности мой первый плагин…

Обзор плагина SimpleModal, его глюков, избавление от глючности, позиционирование по центру экрана и прочие удобства. Вообще я публиковал статью в своем блоге:«SimpleModal — простые модальные окна», но подумал что и хабраюзерам может быть интересно про это узнать. А так же советую взглянуть на более новую статью «Модальные окна на jQuery blockUI». Не все же с лайтбоксами играться.

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

При разработаке одного проекта возникла проблема позиционирования дива посередине страницы независимо от ширины дива и от того, есть ли скролл на странице.
Если страница влезается на экран — можна делать через сss (position:absolute; left i top), но и тут надо учитывать в каждом варианте ширину дива.
Если же на странице появляется скроллинг — тогда есть некоторые проблемы.
Так как последним временем (и в том проекте тоже) пользуюсь Javascript-фреймворком jQuery — решил оформить в виде плагина.
Так появился плагин positioning.

Плагин имеет 2 методы:
positioning(leftOffset, topOffset, scroll) — позиционирует элемент на странице

leftOffset — сдвиг по горизонтале
topOffset — сдвиг по вертикали
scroll — параметр, который задает позиционирование относительно «абсолютной» верхней левой точки браузера, или позицинирование относительно верхней левой точки уже проскролленной страницы.

Вызов centering() — позиционирует элемент точно по центру страницы.

Плагін тестировал в FF 3.0, IE6.0+, Safari 3.1, Opera 9.6
Пример можно посмотреть здесь
yablog.org.ua/jquery/index.html
Внизу страницы есть 3 кнопки — кликая на них можно посмотреть плагин в действии

Сегодня с удивлением обнаружил, что популярный в народе jQuery-плагин для показа сообщений jGrowl версии 1.1.1 не работает в IE7. Вернее, сами сообщения отображается, но где-то внизу. В других браузерах подобная проблема не наблюдается.

Честно потратил около часа: игрался с блоками div.ie6 в исходном css-файле (да, если кто не в курсе — для IE там отдельные стили. No comments), изучал сам плагин на предмет глючности.
Потом поизучал эту тему в гугле и обнаружил следующее.

В плагине есть такая строка:
if ($.browser.msie && parseInt($.browser.version) < 7) $(this.element).addClass('ie6');

Перед ней надо вставить следующий хак и всё заработает:
if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 6 && window[«XMLHttpRequest»] ) {
jQuery.browser.version = «7.0»
}

Правда, закругленные углы в IE 7 и Опере 9.5 не показываются, но это уже другая история. Буду рад, если кому-то помог.

Написал разработчику (был, кстати, не первым). Будем надеяться, что в следующей версии пофиксит.
На сайте самого плагина всё работает и без фикса, что удивительно. Версия там тоже 1.1.1, если я не ошибаюсь.

Очень часто приходится видеть варианты элемента управления «аккордеон» на различных сайтах. В этой заметке я хотел бы предложить свой вариант, который кроме того, что обладает некоторыми оригинальными свойствами, еще и весит в minified-виде всего 618 байт. Заодно, я покажу как быстро написать простейший плагин для jQuery.

Забегая в перед скажу, что плагин тестировался в Firefox 3.0.3, Internet Explorer 7 и 8b2, Opera 9.52 и Chrome 0.3.154.9. Во всех других браузерах работоспособность гарантируется настолько насколько в них работает jQuery.

Для любопытных приведу пример того, что будет в итоге (ссылки и кнопки в примере не работают).

С удивлением обнаружил, что до сих пор не коснулся темы выбора цвета. Спешу исправить это недоразумение и расскажу о еще одном плагине к библиотеке jQuery — ColorPicker. Сразу хочу предупредить, плагин использует png-файлы, и в нашем любимом IE6 это аукается небольшими проблемами.
Как обычно, сначала демонстрация примеров, а уже потом будем разбираться, как это использовать.

Пример: x3k.name/habrahabr/jquery.colorpicker.html