10+ полезных jQuery сниппетов на каждый день

http://www.catswhocode.com/blog/10-handy-and-reusable-jquery-code-snippets
  • Перевод
  • Tutorial


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


Плавный скролл к верху страницы


Давайте начнем этот список с очень популярного и полезного сниппета: эти 4 строки кода позволят вашим посетителям плавно проскролить страницу к верху простым нажатием ссылки (с id #top) расположенной внизу страницы.

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Источник

Дублирование thead в самый низ html таблицы


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

var $tfoot = $('<tfoot></tfoot>');
$($('thead').clone(true, true).children().get().reverse()).each(function() {
  $tfoot.append($(this));
});
$tfoot.insertAfter('table thead');

Источник

Загрузка внешнего контента


Вам нужно добавить определенный внешний контент в div? Так вот это очень просто сделать с jQuery, как показано в нижеприведенном примере.

$("#content").load("somefile.html", function(response, status, xhr) {
  // error handling
  if(status == "error") {
    $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);
  }
});

Источник

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


В случае использования колонок для отображения контента вашего сайта, определенно будет смотреться лучше, если у колонок будет одинаковая высота. Код ниже возьмет все div элементы с классом .col и установит их высоту по самому высокому элементу. Супер полезно!

var maxheight = 0;
$("div.col").each(function() {
  if($(this).height() > maxheight) { maxheight = $(this).height(); }
});

$("div.col").height(maxheight);

Источник

Табличные полосы (зебра)


Когда данные отображаются в виде таблицы, отличающиеся цвета в каждой строке однозначно повышают читаемость. Вот сниппет для автоматического добавления CSS класса в каждую вторую(четную) строку таблицы.

$(document).ready(function(){                             
     $("table tr:even").addClass('stripe');
});

Источник

Частичное обновление страницы


Если вам нужно обновить только часть страницы, то эти 3 строки кода точно помогут. В примере div с id #refresh автоматически обновляется каждые 10 секунд.

setInterval(function() {
  $("#refresh").load(location.href+" #refresh>*","");
}, 10000); // milliseconds to wait

Источник

Предзагрузка изображений


jQuery упрощает предзагрузку изображений в фоне, так что посетителям не придется ждать целую вечность, когда появятся желаемые изображения. Код готов к использованию, просто отредактируйте список изоборажений в строке 8.

$.preloadImages = function() {
       for(var i = 0; i<arguments.length; i++) {
               $("<img />").attr("src", arguments[i]);
       }
}

$(document).ready(function() {
       $.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
});

Источник

Открытие внешних ссылок в новом окне или новой вкладке


Аттрибут target="_blank" позволяет вам открывать ссылки в новых окнах. Но это относится к открытию внешних ссылок, внутридоменные ссылки должны окрываться в том же окне.
Этот код находит внешнюю ссылку и добавляет в найденный элемент аттрибут target="_blank".

$('a').each(function() {
   var a = new RegExp('/' + window.location.host + '/');
   if(!a.test(this.href)) {
       $(this).click(function(event) {
           event.preventDefault();
           event.stopPropagation();
           window.open(this.href, '_blank');
       });
   }
});

Источник

Div по ширине/высоте вьюпорта


Этот удобный фрагмент кода позволяет создавать растянутый по ширине/высоте вьюпорта div. Код также поддерживает изменение размеров окна. Прекрасное решение для модальных диалогов и popup-окон.

// global vars
var winWidth = $(window).width();
var winHeight = $(window).height();

// set initial div height / width
$('div').css({
    'width': winWidth,
'height': winHeight,
});

// make sure div stays full width/height on resize
$(window).resize(function(){
    $('div').css({
    'width': winWidth,
    'height': winHeight,
});
});

Источник

Проверка сложности пароля


Когда вы предоставляете пользователям самостоятельный выбор пароля, было бы неплохо показать насколько сложен их пароль. Код сниппета именно это и делает.

Для начала создадим поля ввода:

<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>


И далее немного jQuery кода. Введенный пароль будет проверен с помощью регулярных выражений и на основе этого пользователю будет выведено сообщение насколько сложен его пароль.

$('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('More Characters');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Strong!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#passstrength').html('Medium!');
     } else {
             $('#passstrength').className = 'error';
             $('#passstrength').html('Weak!');
     }
     return true;
});

Источник

Изменение размеров изображения


Вы конечно можете изменять размеры ваших изображений на стороне сервера (например, используя PHP и GD-библиотеку), но иногда полезно делать это на клиентской стороне с помощью jQuery. Вот сниппет для этого.

$(window).bind("load", function() {
	// IMAGE RESIZE
	$('#product_cat_list img').each(function() {
		var maxWidth = 120;
		var maxHeight = 120;
		var ratio = 0;
		var width = $(this).width();
		var height = $(this).height();
	
		if(width > maxWidth){
			ratio = maxWidth / width;
			$(this).css("width", maxWidth);
			$(this).css("height", height * ratio);
			height = height * ratio;
		}
		var width = $(this).width();
		var height = $(this).height();
		if(height > maxHeight){
			ratio = maxHeight / height;
			$(this).css("height", maxHeight);
			$(this).css("width", width * ratio);
			width = width * ratio;
		}
	});
	//$("#contentpage img").show();
	// IMAGE RESIZE
});

Источник

Автоматическая загрузка контента по скроллу


Некоторые сайты, такие как Twitter загружают контент по скроллу. Это значит, что весь контент динамически подгружается на странице в процессе прокрутки вниз.
Вот пример того, как вы можете сделать этот эффект на вашем сайте.

var loading = false;
$(window).scroll(function(){
	if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
		if(loading == false){
			loading = true;
			$('#loadingbar').css("display","block");
			$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
				$('body').append(loaded);
				$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
				$('#loadingbar').css("display","none");
				loading = false;
			});
		}
	}
});

$(document).ready(function() {
	$('#loaded_max').val(50);
});

Источник

Проверить, загрузилось ли изображение


Вот сниппет, который я часто использую при работе с изображениями, потому что, это лучший способ узнать, загрузилось изображение или нет.

var imgsrc = 'img/image1.png';
$('<img/>').load(function () {
    alert('image loaded');
}).error(function () {
    alert('error loading image');
}).attr('src', imgsrc);

Источник

Сортировка списка в алфавитном порядке


В некоторых случаях бывает очень полезна сортировка длинного списка в алфавитном порядке. Данный сниппет принимает любой список и сортирует его.

$(function() {
    $.fn.sortList = function() {
    var mylist = $(this);
    var listitems = $('li', mylist).get();
    listitems.sort(function(a, b) {
        var compA = $(a).text().toUpperCase();
        var compB = $(b).text().toUpperCase();
        return (compA < compB) ? -1 : 1;
    });
    $.each(listitems, function(i, itm) {
        mylist.append(itm);
    });
   }

    $("ul#demoOne").sortList();

});

Источник
Поделиться публикацией
Похожие публикации
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама
Комментарии 54
  • 0
    Не совсем понятен код проверки загрузки изображения… Тоесть у тега есть src на изображение, и при эвенте что оно загрузилось Вы меняете аттрибут на это же самое изображение?
    • –1
      Скорее при ошибке загрузки изображения мы пытаемся его загрузить снова.
      • +2
        Нет. Этот код
        var imgsrc = 'img/image1.png';
        $('<img/>').load(function () {
            alert('image loaded');
        }).error(function () {
            alert('error loading image');
        }).attr('src', imgsrc);
        

        эквивалентен этому
        $('<img/>').load(function () {
            alert('image loaded');
        }).error(function () {
            alert('error loading image');
        }).attr('src', 'img/image1.png');
        

        .load — это навешивание обработчика на событие 'load' в данном контексте. Сначала вешаем обработчики, потом загружаем изображение (присваивая значение imgsrc атрибуту src).
    • НЛО прилетело и опубликовало эту надпись здесь
    • +13
      Вы хотели показать именно кроссбраузерное решение? Потому что
      Табличные полосы (зебра)

      делаются чистым css. Да, у ИЕ, ниже 9, с ними будут проблемы, но все же.

      А так, спасибо, много полезного.
      • +28
        И не только зебра делается через css.
        Ишь, удумались, css-свойства картинкам через js устанавливать. Про max-width не слышали что ле?
        Одинаковая высота блоков? Это же вообще класическая css задача! Однопиксельную полосочку нужно подкладывать, чтоб колонки сэмулировать :-)
        А div по ширине/высоте вьюпорта — это вообще курам на смех.

        Ну и не говоря уже про качество кода в таких сниппетах.
        Например, при проверке сложности пароля нужно всю инициализацию выносить наружу. Создание трёх RegExp и семи jQuery объектов (они не кешируются) на каждое нажатие клавиши — далеко не самое оптимальное решение.
        • +9
          Ага, а самое страшное что люди ЭТО плюсуют и около тысячи добавили в избранное.
          jQuery сам по себе хороший инструмент, но не тогда когда берут и копипастят откровенный говнокод в свои проекты. Мне это напоминает нулевые, когда на форумах люди выкладывали «скрипт гостевой книги»/«галерея изображений» где простыня откровенного фарша на пыхе творила не пойми что.
          Те кто понимают что делают эти «магические строки» никогда не «возьмут на вооружение» такой бред, ну а для тех кто «не в теме» эти сниппеты «медвежья услуга».
      • –3
        $('a[href=#]').click(function(){ return false; });
        • +2
          Плавный скролл к верху страницы
          • +3
            А потом событие клика в самый ответственный момент не всплывёт. Тогда уж лучше preventDefault:
            $('a[href=#]').click(function(e){ e.preventDefault(); });
            
          • +6
            Я бы необходимость сделать из таблицы «зебру» переложил на css
            • +1
              Я тоже не понял сакрального смысла делать это через js, кроме особых случаев.
              • +1
                Интересные примеры. Но всетаки jquery — это фреймворк с удобным и привычным апи. Сейчас можно сконфигурировать jquery под себя и использовать ровно то, что нужно.
                Для тех же ajax запросов так или иначе прийдется писать обертку
                • +2
                  jQuery — это не фреймфорк, а библиотека.
                  • –6
                    Фреймворк — это набор библиотек. Так вот jquery — это как минимум сизл + ядро jquery. Сейчас это просто набор компонентов, которые можно собрать ровно так как тебе это нужно.
                    И да, зря я поддался на провокацию. Как ваше замечание меняет суть вышеизложенного?
                    • 0
                      Фреймворк — это не набор библиотек, а каркас приложения. Загляните на, скажем, википедию.
                      На суть вышеизложенного никак не влияет, я просто указываю вам на грубую ошибку, допущенную в комментарии.
                      • –6
                        Загляните, скажем, не на русскую википедию.
                        In computer programming, a software framework is an abstraction in which software providing generic functionality can be selectively changed by additional user-written code, thus providing application-specific software. A software framework is a universal, reusable software platform to develop applications, products and solutions

                        Вот вам цитата, чтобы далеко не заглядывать
                  • +2
                    Лучше бы ваниль была привычной, так как иногда смотришь на эти жикверьные цепочки в каше и становится не по себе. Если бы jQuery использовали только в случае наличия в доставшемся проекте или требования включают поддержку старых браузеров… мечты.
                    • НЛО прилетело и опубликовало эту надпись здесь
                      • 0
                        jQuery облегчает работу с DOM, не вижу в этом ничего плохого. Что касается каши, ну а что можно сделать с тем, что jQuery в принципе позволяет писать говно?
                        Это примерно как с PHP, низкий порог вхождения даёт соответствующие последствия. Правда, в случае PHP сам язык спроектирован неважно.
                  • +3
                    пример с «Div по ширине/высоте вьюпорта» не будет работать, так как переменные ширины/высоты окна устанавливаются изначально и не корректируются на resize.
                    • –4
                      Все снипеты вроде простые и очевидные. Но иногда полезно бегло проглядывать подобные подборки снипетов, чтобы потом они всплывали в голове в подходящей ситуации.

                      А вот качество кода приведенных примеров действительно хромает. Рефакторить их надо!
                      Хотя, если не копипейстить эти снипеты, а просто запоминать их применение, то и так сойдет.
                      • +1
                        Рефакторинг не поможет, в половине примеров подход грубо неправильный.
                        • –1
                          Меня больше заинтересовали идеи снипетов, но не реализация (кривая в данном случае).
                      • +37
                        На хабре поколение сменилось? Очередная волна изучающих jQuery с нуля?
                        • +20
                          Почти «Вредные советы», если исключить пару-тройку примеров, которые действительно нельзя (без лишних проблем) заменить на что-либо иное.
                          • +9
                            $('a').each(function() {
                               var a = new RegExp('/' + window.location.host + '/');
                               if(!a.test(this.href)) {
                                   $(this).click(function(event) {
                                       event.preventDefault();
                                       event.stopPropagation();
                                       window.open(this.href, '_blank');
                                   });
                               }
                            });
                            

                            Зачем так усложнять? Почему просто не дать ссылке аттрибут target=_blank?
                            • –12
                              К сожалению, не могу ответить за автора. Я только перевел. И, действительно, как пишут выше, сниппеты довольно спорные.
                              Например, решение с _blank оно даже невалидно и корректней его делать повесив на ссылку атрибут rel=«external», а открывать уже простым js опеном.

                              $('body').on('click', 'a[rel="external"]', function() {
                                window.open($(this).attr('href'));
                                return false;
                              });
                              
                              • +8
                                То что вы написали — тоже какая-то фигня. Зачем делать что-то за браузер?
                                • +1
                                  Ну был раньше такой загон, вам выше написали, — всё должно быть валидно.
                                  Чтоб эмблему W3C можно было в подвале повесить или просто для удовлетворения чсв, не знаю. Но поганый target="_blank" ломал весь кайф и заставлял w3c-валидатор ругаться. Поэтому исходно этот атрибут выпиливали, а для достижения требуемого эффекта подключали js.
                                  • +1
                                    Идиотский загон, тем более в отношении нынешних реалий. Абсолютно все браузерные префиксы вне стандарта.
                                    rel браузерам не важен, в отличии от target
                                    Я более чем уверен, что 99,9% пользователей глубоко наплевать что думает про ваш сайт w3c валидатор, ему главное чтобы браузер его правильно открывал
                                    • +1
                                      Я вас и не пытался убедить в обратном, зачем вы всё это мне рассказываете.
                                    • 0
                                      Если я не ошибаюсь, то target="_blank" проходит валидацию в html5 документах.
                                      • 0
                                        Да, его вернули.
                                    • 0
                                      Благодарю. В целом, комментарии стали для меня показателем собственной некомпетентности в сабже. Чему рад, так как конкретизировались недостатки и понятно над чем работать. Признаю: «лох и опозорился» ©.
                                  • 0
                                    Автор неверно описал суть кода. Там не атрибут добавляется, а внешние ссылки открываются в новом окне (вкладке). Причем данный код не будет корректно работать с относительными ссылками. Теперь по вашему вопросу: что будет с _blank в будущем не ясно (мне по крайней мере), будет он всегда поддерживаться или нет не известно. А во-вторых, часто это просто удобно, открывать все внешние ссылки в новой вкладке и при этом не думать о том, что контент-менеджер забыл указать _blank.
                                  • 0
                                    $("#refresh").load(location.href+" #refresh>*","");

                                    зачем к url добавлять #refresh>*? это типа анти-кеширование? тогда Math.random() использовать будет попрактичнее)
                                    • +5
                                      load по ссылке подгрузит всю страницу, а с #refresh возьмет из всей страницы только элемент #refresh (а >* все что в нем), и вставит его в существующий #refresh.
                                    • 0
                                      Второй сниппет, копирующий в футер таблицы её шапку, не работает, если на странице больше одной таблицы. Точнее работает, но превращает таблицы в кашу.
                                      • –5
                                        Может кто-нибудь пояснить зачем поддерживается версия jQuery 1.1 наравне с 2.x?
                                        • +7
                                          Может кто-то пойдет и прочтет на сайте jQ три строки с описанием версий, дабы не задавать такие вопросы?
                                        • 0
                                          Плавный скролл к верху страницы
                                          Для решения этой задачи я бы навесил плагины scrollTo и localScroll и тем невозбранно достиг бы желаемого, а также избавился бы от излишней возни в случае возникновения вопросов «а что делать, если откручивать не совсем до верха?», «а что делать, если хочется после этого #top сохранить в строке адреса?» и прочих.
                                          • +19
                                            var enoughRegex = new RegExp("(?=.{6,}).*", "g");
                                            
                                            Можно подозревать, и подозреваю, что автором этого кода был лютый фанат регулярных выражений. Любой другой бы сравнил у строки свойство «.length» с шестёркою — и на том успокоился бы.
                                            • +3
                                              Пункт «Частичное обновление страницы»
                                              поправьте, если не прав, но очень топорное решение — к серверу пойдет запрос на генерацию всей страницы, после чего js заставляют вычленять из всего dom'a нужный блок и вставлять его содержимое в этот же блок. Если обновляется какая-то часть страницы, то и грузиться с сервера должна только часть, а не вся страница целиком, иначе тогда в чем суть Ajax'a здесь?
                                              • +7
                                                Я не знаю за что тут плюсовать, решения сами по себе ужачны и их код тоже. Не учите людей плохому.
                                                • 0
                                                  Эти вредные сниппеты, как мне кажется, рассчитаны в первую очередь на новичков в мире js, когда полного понимания еще нет, но решение нужно здесь и сейчас. Думаю, что любой разработчик, использующий js не меньше чем год, сможет написать любой сниппет с 0, даже без исп. jquery. И сделает он это более эффективно, если речь идет о производительности.
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                    • 0
                                                      Полностью согласен. Никогда не понимал ресурсы, требующие определенных правил в паролях. Ничего, кроме раздражения, не вызывает.
                                                      • 0
                                                        А если пользователь захочет без пароля? Это ведь пользователь должен решать какой пароль и нужен ли он ему вообще?
                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                      • 0
                                                        Табличные полосы я бы лично делал на CSS
                                                        • 0
                                                          нажатием ссылки (с id #top)

                                                          <a id="top">Top</a>
                                                          

                                                          В таком варианте, код приведенный в статье работать не будет.

                                                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.