Полезные советы и хитрости jQuery

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

1. Подсказки по jQuery

Прежде всего, неплохо иметь подсказки в виде справочного материала. Я нашёл три такие в сети:

Подсказка с ColorCharge
Подсказка с ColorCharge

Подсказка из блога Gscottolson
Подсказка из блога Gscottolson

Подсказка из блога From Far East
Подсказка из блога From Far East

2. Сокращённый вариант $(document).ready

Это отличный совет! Вместо того, чтобы писать:

$(document).ready(function() {  
  // Здесь будет ваш код
}

можно пользоваться таким, полностью эквивалентным предыдущему, вариантом:

$(function(){
  // Здесь будет ваш код
});

3. Открыть в новом окне

Атрибут target отсутствует в STRICT-версии стандарта W3C. Поэтому, придётся использовать атрибут rel и немного кода jQuery, чтобы добавлять атрибут target динамически, и, тем самым, избежать ошибок при валидации. Это один из моих любимых примеров. Он так прост и при этом отлично справляется с работой.

$('a[rel=external]').attr('target', '_blank');
Queness in new window

4. Сделать элемент списка кликабельным

Эта хитрость очень полезна, когда вы используете маркированные списки в качестве меню. Теперь, когда вы нажмёте на область элемента списка (вне ссылки), скрипт найдёт нужный адрес и перейдёт по соответствующей ссылке:

$("ul li").click(function(){
  // Получим адрес из атрибута href и перейдём по ссылке
  window.location = $(this).find("a").attr("href"); return false;
});

5. Переключиться на другую CSS-таблицу

Вы хотите использовать различные дизайны сайта? Можете использовать следующий код для переключения используемых CSS-таблиц:

$("a.cssSwitcher").click(function() {
  // Изменим атрибут rel тега link на значение атрибута rel нажатой ссылки
  $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
});

......
По умолчанию 
Красная тема 
Синяя тема

6. Запретить нажатие правой кнопки

Некоторые могут захотеть отключить нажатие правой кнопки или создать собственное контекстное меню. Так мы определим щелчок правой кнопкой:

$(document).bind("contextmenu", function(e){
  // Можете поместить здесь свой код, например, вывод меню
 
  // Отменить отображение контекстного меню браузера
    return false;
});

7. Получить координаты x и y курсора

Этот скрипт отображает значения x и y позиции курсора:

$().mousemove(function(e){
  // Отобразим координаты по x и по y внутри параграфа
    $('p').html("X: " + e.pageX + " | Y: " + e.pageY);
});

8. Отменить поведение по умолчанию

Предположим, у нас есть длинная страница и ссылка, похожая на приведённую ниже, которая используется не как гиперссылка. При нажатии на такую ссылку, вы будете перемещены в начало страницы. Это происходит из-за того, что в атрибуте href указан символ #. Чтобы решить эту проблему, необходимо отменить поведение по умолчанию с помощью следующего кода:

$('#close').click(function(e){  
  e.preventDefault();
}); 

или

$('#close').click(function(){  
  return false;
});

9. Кнопка возврата в начало страницы

Полезную ссылку возврата к началу страницы можно реализовать с помощью плагина jQuery scrollTo. Мне нравится эффект прокрутки, я использую такие ссылки на своём сайте — можете убедиться. Разумеется, необходим плагин scrollTo.

$('#top').click(function() {
  $(document).scrollTo(0, 500);
}

......
В начало страницы

10. Колонки одинаковой высоты

Думаю, этот скрипт довольно полезен, хотя мне ещё не приходилось его использовать. Он относится к дизайну. Если вы хотите иметь колонки одинаковой высоты, эта функция — как раз то, что вам нужно. По мотивам CSSNewbie.

$(document).ready(function() {
  setHeight('.col');
});
 
// Глобальная переменная, хранящая максимальное значение высоты
var maxHeight = 0;
 
function setHeight(col) {
  //Получим все элементы с классом, указанным в переменной col
  col = $(col);
 
  //Для каждого элемента
  col.each(function() {        
 
    // Сохраним максимальное значение
    if ($(this).height() > maxHeight) {
      maxHeight = $(this).height();;
    }
  });
 
	// Установим высоту
  col.height(maxHeight);
}
Колонка 1
Состоит из трёх строк
И отличается по высоте

Колонка 2

11. Создание собственного селектора

Это более сложный пример.

// Расширяем функциональность jQuery
$.extend($.expr[':'], {  
 
  // Название вашего селектора
  moreThanAThousand : function (a){
    // Соответствующие элементы
    return parseInt($(a).html()) > 1000;
  }
});  
 
$(document).ready(function() {
  $('td:moreThanAThousand').css('background-color', '#ff0000');
});
1400700400
2500600100
1001100900
260011001200

12. Масштабирование шрифтов

Одна из наиболее популярных функций — возможность изменения размера шрифтов на странице. Я модифицировал скрипт с сайта shopdev.co.uk. Теперь в массиве можно указывать ID, классы или имена тегов, для которых будет доступно масштабирование.

$(document).ready(function(){
 
  // ID, классы или имена тегов элементов, 
  // для которых доступно масштабирование задаются в этом массиве.
  // Укажите 'html' или 'body', если хотите применять масштабирование для всей страницы
  var section = new Array('span','.section2');
  section = section.join(',');
 
  // Вернуть начальный размер
  var originalFontSize = $(section).css('font-size');  
    $(".resetFont").click(function(){
    $(section).css('font-size', originalFontSize);
  });
 
  // Увеличить размер
  $(".increaseFont").click(function(){
    var currentFontSize = $(section).css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $(section).css('font-size', newFontSize);
    return false;
  });
 
  // Уменьшить размер
  $(".decreaseFont").click(function(){
    var currentFontSize = $(section).css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $(section).css('font-size', newFontSize);
    return false;
  });
});
+ | 
- | 
=
 
 
Размер шрифта может быть изменён в этом блоке
На этот изменения не действуют
Этот тоже можно настроить!

Коллекция советов и хитростей пополняется!

Я продолжу обновлять статью, так что можете занести её в закладки — надеюсь, эти примеры помогут вам. Некоторые скрипты были изменены и стали более гибкими. Если вы знаете какие-либо советы или хитрости, которыми вы бы хотели поделиться, оставьте комментарий! Спасибо!