jQuery 1.0: JavaScript без боли (2006)

До jQuery JavaScript в Казнете был болью. Каждая фича требовала написания browser-detection кода: разные API для IE 6 (70%+ рынка), Firefox, Opera. attachEvent vs addEventListener. document.all vs document.getElementById. currentStyle vs getComputedStyle. IE имел сотни нестандартных поведений.

26 августа 2006 Джон Резиг показал jQuery 1.0 на BarCamp NYC. 19 КБ. «Write less, do more».

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

---

Кросс-браузерная боль до jQuery

// БЕЗ jQuery - реальный код 2005 года для казахстанских сайтов

// Добавить обработчик события (IE 6 vs остальные):
function addEvent(el, type, fn) {
    if (el.addEventListener) {
        el.addEventListener(type, fn, false);  // Firefox, Opera, Safari
    } else if (el.attachEvent) {
        el.attachEvent('on' + type, fn);        // IE 5, IE 6
    } else {
        el['on' + type] = fn;                  // Совсем старые
    }
}

// Получить стиль элемента:
function getStyle(el, prop) {
    if (el.currentStyle) {
        return el.currentStyle[prop];              // IE
    } else if (window.getComputedStyle) {
        return getComputedStyle(el, null)[prop];   // W3C
    }
}

// Предотвратить действие по умолчанию:
function preventDefault(e) {
    if (e.preventDefault) {
        e.preventDefault();   // W3C
    } else {
        e.returnValue = false; // IE
    }
}

// С jQuery 1.0 - одна строка, работает везде:
$('#menu a').click(function(e) {
    e.preventDefault();  // jQuery нормализовал объект события
    $(this).addClass('active');
});

---

Селекторы: CSS как язык запросов

// В 2006 году document.querySelector() не существовал.
// jQuery реализовал CSS-селекторы в JavaScript - включая IE 6.

// Все нечётные строки таблицы:
$('table.catalog tr:odd').css('background', '#f0f0f0');

// Форма: обязательные пустые поля:
$('input[required]').filter(function() {
    return $(this).val() === '';
}).addClass('error').closest('label').css('color', 'red');

// Аккордеон - казахстанские разработчики делали его для FAQ:
$('.faq-question').click(function() {
    $(this).next('.faq-answer').slideToggle(250);
    $(this).toggleClass('open');
});

// Всё это работало в IE 6.
// Внутри jQuery - самописный CSS-парсер, Sizzle.
// Опенсорсен отдельно в 2009.

---

Ajax в jQuery: что изменилось

// ДО jQuery: Ajax-запрос = 15 строк шаблонного кода (см. 2005)

// С jQuery 1.0:
$.ajax({
    url: '/catalog/search.php',
    type: 'GET',
    data: { q: $('#search').val(), cat: currentCategory },
    dataType: 'html',
    beforeSend: function() {
        $('#results').html('<p>Поиск...</p>');
    },
    success: function(html) {
        $('#results').html(html);
    },
    error: function() {
        $('#results').html('<p>Ошибка. Попробуйте позже.</p>');
    }
});

// Или ещё короче для простых случаев:
$('#sidebar').load('/sidebar-content.php?lang=ru');

// JSON (PHP 5.2+ возвращает json_encode):
$.getJSON('/api/cities.php', function(data) {
    $.each(data, function(i, city) {
        $('#city-select').append(
            $('<option>').val(city.id).text(city.name)
        );
    });
});

---

Анимации: то, чего хотел каждый клиент

// Казахстанские клиенты в 2006-2007 хотели "живой" сайт.
// jQuery делал это тривиальным.

// Появление уведомления:
function showNotification(text, type) {
    var note = $('<div class="notification ' + type + '">' + text + '</div>');
    $('body').append(note);
    note.fadeIn(200).delay(3000).fadeOut(500, function() {
        $(this).remove();
    });
}

// Плавный скролл к разделу:
$('a[href^="#"]').click(function(e) {
    e.preventDefault();
    var target = $($(this).attr('href'));
    if (target.length) {
        $('html,body').animate({
            scrollTop: target.offset().top - 80
        }, 600);
    }
});

// Аккордеон для меню услуг:
$('.services-menu > li').click(function() {
    $(this).siblings().find('.submenu').slideUp(200);
    $(this).find('.submenu').slideToggle(200);
});

---

jQuery в Казнете: 2006-2010

jQuery распространился в Казнете быстро. К 2008 году он был на большинстве новых казахстанских сайтов. Причина: он решал реальную проблему - поддержку IE 6, который оставался доминирующим браузером в Казахстане дольше, чем на Западе.

Корпоративные пользователи в Казахстане обновлялись с IE 6 медленно. jQuery позволял писать код один раз и забыть о browser-detection. Это было ценнее чем просто синтаксический сахар.

К 2012 году jQuery был на более чем 50% сайтов мира. В Казнете - ещё выше. Он изменил стандарт: JavaScript перестал быть болью и стал инструментом.