Закрепляем jQuery — 25 отличных советов

Действительно, отличные советы! Всё очень полезно и в одном месте.

Однозначно в копилку все, спасибо!

искал решение по JQuery, зашел на Хабр, а тут такая красота =)

Шикаррно.
Распечатал cheat sheet, например.

Спасибо… много интересного. в Избранное

Ни у кого нет распечатываемой шпаргалки для 1.3.1 версии?
А советами уже давно пользуюсь, читал статью в оригинале.

Я, что-то не понял 25-й пункт: «сэкономить несколько символов, если использовать функцию»? Странно, мне кажется что если «не использовать что-то» то можно сэкономить на этом!..

Да и в пункт 21, я бы добавил такое маленькое дополнение «см. также AJAX-библиотеки в Google».

Эммм… «неупорядоченный список»??? Вы хотели сказать «ненумерованный список» или «маркированный список»?

спасибо.

Про .noconflict(): стоит упомянуть, что с момента употребления этой функции объект $ возвращается в первоначально определенное состояние. То есть, по-русски, если сначала вы загрузили Prototype, a потом jQuery, jQuery.noconflict() снова сделает объект $ прототиповской функцией. Это не всегда может быть удобно для дополнительного «навешивания» скриптов, полагающихся на jQuery в форме $. Посему (и не только поэтому), свои jQ-скрипты стоит писать следующим образом:
// начинаем файл нашего скрипта
(function($) // анонимная функция-обертка с параметром
{
$(".mystuff").do(things) // наши jQuery-выкрутасы, за состояние $ можно не бояться
}
)(jQuery) // и вот почему :)
// заканчиваем файл нашего скрипта

Первой и последней строчками мы оборачиваем наш скрипт в анонимную функцию, принимающую параметр $. В последней строке мы вызываем только что созданную функцию и в качестве этого параметра передаем объект jQuery. В итоге .noconflict() нам не страшен (его и можно, кстати, употребить в первой строчке нашего скрипта, перед объявлением функции). Заодно работа скрипта внутри анонимной функции, вызываемой немедленно после создания, не оставит после себя мусора в виде локальных переменных — если их объявлять с ключевым словом var, они исчезнут из памяти сразу после исчезновения контекста функции (то есть в простейших случаях сразу после окончания ее работы, в случаях замыканий при обработке событий — после снятия обработчиков событий). Практическая польза кажется небольшой и неочевидной, пока вы используете только jQuery, но стоит взяться за большой проект с несколькими библиотеками… сэкономите на Солпадеине, вобщем.

Еще момент: вчера всплывала статья про jQuery, хотел откомментить там, но хабр коммент сожрал.

Итак: кэшируя jQ-объект в переменную, именуйте ее с помощью $ в начале. То есть:

$a = $('a')


«Лишний» байт на самом деле сугубо повысит читаемость/разбираемось вашего кода для сторонних программистов (или вы гарантируете, что через год поможете модифицировать скрипт?). Особенно важно в обработчиках событий:

$('#myid').bind('click', function(){ // когда делаем обработчик события
var $this = $(this) // оборачиваем DOM-объект, на котором всплыло событие, в jQuery
})

Не понадобится обертка вокруг this — всегда можно удалить одну строчку. Но лично у меня уже стало паттерном, руки сами набирают, пока голова думает над деталями обработки события.

И еще. Бывает, глубоко в цепочке из многих .find() вдруг оказывается позарез нужна текущая jQuery-выборка в виде переменной. Понятное дело, не разорвав красивой цепочки, такую переменную не родишь ниоткуда. Заново повторять выборку ради своих действий тоже накладно. Для такого дела я когда-то написал простенький плагин: plugins.jquery.com/project/jquery_apply. Посреди цепочки можно вызвать .apply(function(){}), где внутри функции текущая jQuery-выборка доступна в форме this.

Концентрация полезной информации — огромная, сам узнал правда только про расширяемые селекторы, но читать было очень приятно, спасибо. Одно несогласие:

23. Добавляйте класс «JS» в элемент «html»
— здесь будет явная проблема при открытии страницы, вы увидите много контента, а потом(в момент когда произойдет .ready() ) он спрячется. То есть пользователь увидит мерцающие блоки. К слову — подобный прием используется на главной странице mail.yandex.ru для скрытия боковых панелей — смотрится фигово, здесь лучше даже на таких монстров не ровняться.

зы: 24. return false; можно сократить до return !1;

Супер!!! Спасибо огромное.

А зачем текст серым делать?

Спасибо, полезный сборник.

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

1. Загружайте фреймворк с Google Code

Я бы советовал с осторожностью отнестись к этой рекомендации. В большинстве случаев, да, все описанные плюсы будут иметь место. В меньшинстве — вы огребёте кучу проблем с юзерами, у которых по какой-то странной причине будет плохая связь с заграницей или конкретно с гуглом, с юзерами у которых из-за каких-то дебильных настроек дебильного софта не будут в принципе подгружаться данные с других доменов… Таких юзеров будут доли процента, но на хорошо посещаемом ресурсе это выльется в постоянную головную боль для поддержки.

3. Соединяйте все ваши скрипты и уменьшайте размер файла

Рекомендуется использовать Packer. Однако сами авторы jQuery начиная с версии 1.3 перестали выкладывать packed-версию, потому что потери времени на распаковку packed-скрипта заметно превышают выигрыш от уменьшения размера, плюс имеют проблемы с совместимостью. Подробности тут: blog.jquery.com/2009/01/21/jquery-131-released/. Их рекомендация — JSMin + gzip.

12. Научитесь назначать и делегировать события

В статье описывается версия 1.2.6. Начиная с версии 1.3 в jQuery появился специальный механизм для этого: docs.jquery.com/Events/live

надо еще заметить что при такой google.load("jquery", "1.2.6") загрузке $(document).ready не будт работать

просьба сделать хабракат. А пока почитаю.

итак, статья имеет пару плохих советов.

В совете 6 корректный код должен выглядеть так:

var myList = $('.myList');
var myListItems = [];
for (i = 0; i < 1000; i++) {
myListItems.push('Это элемент списка № ' + i + '');
}
myList.html(myListItems.join(''));

В совете 24 правильно делать не так, а использовать e.preventDefault.

$('#id').click(function(e)
{
e.preventDefault();
// do actions
});

{jxe gjltkbnmcz c [f,hjj,otcndjv cdjtq cnfnmt j crjhjcnb ctktrnjhjd b ghfdbkmyjv b[ yfgbcfybb

хочу уточнить насчет вот этого:

$('#myImage').attr('src', 'image.jpg').load(function() {  
    alert('Картинка загружена');  
});

сработает ли alert() если картинка в кеше браузера и переключится моментально? не правильнее ли будет делать вот так:

$('#myImage').load(function() {  
    alert('Картинка загружена');  
}).attr('src', 'image.jpg');

Отличная статья спасибо!

>>2. Используйте «шпаргалку» (cheat sheet)
Мне очень сильно помогает шпаргалка сохраненная с visualjquery.com, может кому тоже поможет.

По поводу анимации

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

Для решения этой проблемы можно использовать одну недокументированную возможность функции animate

//К, примеру, анимируем изменение height от 500 до 0
$("#first_element").animate(
    {height:0},
    {
        duration: "fast",
        step: function(curr, _this) {
			// функция вызывается каждый раз ДО изменения значения height у элемента
			// curr будет содержать текущее значение от 500 до 0
			
			// изменим значение height, округлим значение (по-умолчанию height будет дробным)
			// изменение curr не сохраняется, поэтому меняем _this.now
            _this.now = Math.floor(curr);
            
			// теперь получим относительное изменение высоты
			// т.е. X будет изменяться от 0 до 1
			var x = (500 - curr) / 500;
			
			// будем менять значение высоты у любого элемента
			// отдельный таймер не создается, поэтому все меняется при одном обновлении dom дерева
			$("#second_element")
				.css({height: 500 * x + "px", color: "rgb(" + (r + parseInt((0xFF - 0x00) * x)) + ", " + (g + parseInt((0xFF - 0x00) * x)) + ", " + (b + parseInt((0xFF - 0x00) * x)) + ")"});

        },
        complete: function()
        {
            // call oncomplete
        }
    }
);

Таким способом можно анимировать цвет, фон и т.д. без использования плагинов.

Отличный материал, большое спасибо.

Спасибо, познавательно! =)

Спасибо, классная статейка. +1

все в одном месте, красиво и складно. да еще и с примерами. супер!

Рекомендую изучить непосредственно сам javascript. Мне кажется вы сможете это сделать, но jquery застилает вам глаза.

ЗЫ моя позиция: ничего не имею против использования фремвоков, но считаю что javascrit сам по себе дает куда большую свободу самовыражения.

Может я немного забыл селекторы в jquery.
Но, думаю в пункте 24 вы пропустили точку (.)

$('.popup').click(function(){
// Код запуска popup'а
});

Спасибо, это самая лучшая статья по Jquery, которую я когда-либо видел!

Большое Спасибо! Все советы очень полезные, подчеркнул для себя много нового!

Спасибо!

добавьте, пожалуйста, в раздел шпаргалок futurecolors.ru/jquery/
Шпаргалка по актуальной версии

Хороший перевод, спасибо за статью.

Спасибо за статью! Понятно, доступно, для каждого! Есть, куда развиваться! :)