jQuery 1.0: библиотека, которая сделала JavaScript пригодным для работы (2006)

До jQuery JavaScript был чем-то, что вы терпели. Писали потому что приходилось - валидация форм, выпадающие меню, Ajax-запросы. Но каждая фича требовала написания browser-detection кода, параллельных реализаций для IE/Firefox/Safari и отладки различий, не имевших разумного объяснения.

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

Я начал использовать его на той же неделе. За два месяца убрал все собственноручно написанные DOM-утилиты за последние четыре года. jQuery делал всё то же самое, лучше, в меньшем коде, и работал в IE 6.

---

Что jQuery решил: кросс-браузерный ад

// БЕЗ jQuery - манипуляция DOM в 2005 году
// Добавить класс всем <li> в конкретном <ul>

// Только IE:
var items = document.all['menu'].children;
for (var i = 0; i < items.length; i++) {
    if (items[i].tagName === 'LI') {
        items[i].className += ' active';
    }
}

// События: IE vs W3C
function addEvent(el, type, fn) {
    if (el.addEventListener) {
        el.addEventListener(type, fn, false);  // W3C
    } else if (el.attachEvent) {
        el.attachEvent('on' + type, fn);        // IE
    }
}

// С jQuery 1.0 - одна строка, работает везде:
$('#menu li').addClass('active');
$('#menu li').click(function() {
    $(this).toggleClass('active');
});

---

Селекторный движок: CSS как язык запросов к DOM

В 2006 году document.querySelector() не существовал ни в одном браузере (появился в 2008). jQuery реализовал CSS-селекторы в чистом JavaScript:

// jQuery делал возможным в 2006 - ничего из этого не было нативным

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

// Обязательные пустые поля формы
$('form input[required]').filter(function() {
    return $(this).val() === '';
}).addClass('error');

// Нажатые чекбоксы
$('#myform input[type="checkbox"]:checked').each(function() {
    console.log($(this).val() + ' отмечен');
});

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

---

Ajax в jQuery

До jQuery Ajax = 15 строк шаблонного кода (создание XHR, заголовки, onreadystatechange). С jQuery:

// jQuery 1.0 Ajax - 2006
$.ajax({
    url: '/api/user.php',
    type: 'GET',
    data: { id: userId },
    dataType: 'html',
    beforeSend: function() {
        $('#panel').html('<p>Загрузка...</p>');
    },
    success: function(html) {
        $('#panel').html(html);
    },
    error: function(xhr) {
        $('#panel').html('<p>Ошибка загрузки.</p>');
    }
});

// Или ещё короче:
$('#panel').load('/api/user.php?id=' + userId);

// JSON:
$.getJSON('/api/stats.php', function(data) {
    $('#visits').text(data.visits);
});

---

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

// ДО jQuery: аккордеон вручную - 30 строк с setInterval
// С jQuery:
$('.section-header').click(function() {
    $(this).next('.section-body').slideToggle(300);
});

// Плавное появление/исчезновение:
$('#notification').fadeIn(200).delay(3000).fadeOut(500);

// Цепочки - каждый метод возвращал $(this):
$('#submit-btn')
    .css('background', '#ccc')
    .attr('disabled', true)
    .text('Отправка...');

---

Нормализация событий IE 6

IE 6 занимал 80%+ рынка в 2006 году. jQuery поглощал все его причуды:

// jQuery делал прозрачно:
$(el).css('opacity', 0.5);
// IE получал:    filter: alpha(opacity=50)
// Остальные:     opacity: 0.5
// Разработчик писал одну строку.

$('a').click(function(e) {
    e.preventDefault();    // внутри: e.returnValue = false для IE
    e.stopPropagation();   // внутри: e.cancelBubble = true для IE
});

---

Почему jQuery победил Prototype, MooTools и Dojo

jQuery не расширял нативные прототипы (в отличие от Prototype.js), был маленьким (в отличие от Dojo), и его селекторный API был интуитивен для всех, кто знал CSS.

К 2009 году jQuery был на большем числе сайтов, чем любая другая JS-библиотека. К 2012 - на более чем 50% всех сайтов. Он всё ещё присутствует на большинстве веб-страниц сегодня.

Ландшафт JavaScript до и после августа 2006 года - принципиально разные вещи. До: браузерный JavaScript был болью, которую минимизировали. После: это был инструмент, который хотелось использовать.