Сделай свою таблицу стилей редактируемой

<style type="text/css" id="regular-style-block">
    html {
        background-color:#222229;
        position:relative;
    }
    body {
        font:14px/1.3 'Segoe UI', Arial, sans-serif;
        color:#e4e4e9;
        min-height:500px;
    }
</style>

Эта забавная хитрость покажет вам, что вы можете манипулировать встроенными блоками стилей точно также, как другими элементами. Они могут быть видимыми и даже редактируемыми с помощью небольшого jQuery сниппета. Например, давайте предположим, что у нас есть следующая встроенная таблица(внутри тега body):

Чтобы сделать этот блок видимым и редактируемым, запустите этот код в консоли:

$('#regular-style-block').css({
    'display':'block', 
    'white-space':'pre',
    'background': '#666'})
.attr('contentEditable',true);

Оптимизируйте ваши селекторы

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

<div id="peanutButter">
    <div id="jelly" class="jellyTime"></div>
</div>

// Давайте проведем несколько измерений!
var iterations = 10000, i;
console.time('Fancy');
for(i=0; i < iterations; i++){
// Это очень медленный способ обойти элементы DOM
$('#peanutButter div:first');
}
console.timeEnd('Fancy');
console.time('Parent-child');
for(i=0; i < iterations; i++){
// Лучше, но все равно медленно
$('#peanutButter div');
}
console.timeEnd('Parent-child');
console.time('Parent-child by class');
for(i=0; i < iterations; i++){
// Для некоторых браузеров такой подход немного быстрее
$('#peanutButter .jellyTime');
}
console.timeEnd('Parent-child by class');
console.time('By class name');
for(i=0; i < iterations; i++){
// Еще лучше
$('.jellyTime');
}
console.timeEnd('By class name');
console.time('By id');
for(i=0; i < iterations; i++){
// Самый лучший
$('#jelly');
}
console.timeEnd('By id');

Запуск этого примера в современном браузере приведет к примерно следующему результату:

Используйте кэширование

Каждый раз, когда вы создаете новый объект jQuery, передавая селектор элемента, jQuery обходит DOM и связывает этот селектор с реальным элементом страницы. Это довольно медленный процесс в JavaScript, но ситуация меняется в лучшую сторону при использовании современных браузеров, которые поддерживают функцию document.querySelector, возвращающую элементы напрямую связанные с CSS селекторами. К сожалению, проблема остается актуальной в таких браузерах как IE8 и более ранних версиях. Хорошей практикой является повторное использование объектов jQuery, предварительно сохранив их в переменную.

<ul id="pancakes">
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
</ul>

// Плохой способ:
    $('#pancakes li').eq(0).remove();
    $('#pancakes li').eq(1).remove();
    $('#pancakes li').eq(2).remove();
// Хороший:
    var pancakes = $('#pancakes li');
    pancakes.eq(0).remove();
    pancakes.eq(1).remove();
    pancakes.eq(2).remove();
// Альтернативный:
    pancakes.eq(0).remove().end()
    .eq(1).remove().end()
    .eq(2).remove().end();

Определяйте повторяющуюся функцию только один раз

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

<button id="menuButton">Show Menu!</button>
<a href="#" id="menuLink">Show Menu!</a>

Js пример 1

// Это приводит к множественному копированию callback-функции в памяти
$('#menuButton, #menuLink').click(function(){
// ...
});

Js пример 2

// Так лучше:
function showMenu(){
alert('Showing menu!');
// Тело слушателя
}
$('#menuButton').click(showMenu);
$('#menuLink').click(showMenu);

Если вы определяете callback-функцию так, как показано в первом примере и jQuery объект содержит больше одного элемента, копии функции сохранятся в памяти для каждого элемента коллекции.

Одиночный вызов обработчика событий

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

var press = $('#press');
// Это метод который сработает только единожды:
press.one('click',function(){
alert('This alert will pop up only once');
});

Внутри себя этот метод вызывает метод on() с 1 в качестве последнего аргумента:

press.on('click',null,null,function(){alert('I am the one and only!');}, 1)

Самый простой Ajax запрос

jQuery предлагает короткий метод для быстрой загрузки контента в элемент при помощи Ajax - метод $.load().

HTML

<p class="content"></p>
<p class="content"></p>

JS

var contentDivs = $('.content');
// Возьмем содержимого текстового файла:
contentDivs.eq(0).load('1.txt');
// Берем содержимое HTML файла и отображаем элемент с id header
contentDivs.eq(1).load('1.html #header');

В отличие от остальных Ajax запросов, тут вы можете указать CSS селектор, который ограничит результат. К тому же данные не возвращаются, а непосредственно заменяют содержимое элемента.

Метод map() 

Другим полезным, но малоизвестным методом библиотеки jQuery, является map(). Он обходит все элементы jQuery объекта и собирает новый массив. Вот, как его использовать:

Which days would you like to work on?
<ul id="week">
    <li><input type="checkbox" value="Monday" class="day" checked /> Monday </li>
    <li><input type="checkbox" value="Tuesday" class="day" checked /> Tuesday </li>
    <li><input type="checkbox" value="Wednesday" class="day" checked />Wednesday </li>
    <li><input type="checkbox" value="Thursday" class="day" checked /> Thursday </li>
    <li><input type="checkbox" value="Friday" class="day" checked /> Friday </li>
    <li><input type="checkbox" value="Saturday" class="day" /> Saturday </li>
    <li><input type="checkbox" value="Sunday" class="day" /> Sunday </li>
</ul>
<p id="workdays"></p>

// Найдем все чекбоксы:
var checkboxes = $('#week .day');
function callback(){
// Обходим все выбранные чекбоксы и выводим их значения
var days = checkboxes.filter(':checked').map(function(){
// Возвращенное значени станет частью нового массива
return $(this).val();
}).get();
$('#workdays').text('You want to work on ' + days.join(', '));
}
checkboxes.on('click',callback);

В этом примере у нас есть семь чекбоксов, символизирующих дни недели. При клике на чекбокс параграф #workdays обновляется и в него записываются те дни, в которые вы хотите работать.