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

[jaybekster]

Не совсем понятен код проверки загрузки изображения… Тоесть у тега есть src на изображение, и при эвенте что оно загрузилось Вы меняете аттрибут на это же самое изображение?

[lastwish]

Нет. Этот код

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).

[sortarage]

Как страшно жить.

[popovsergey]

Вы хотели показать именно кроссбраузерное решение? Потому что

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

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

А так, спасибо, много полезного.

[eBuster]

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

Ну и не говоря уже про качество кода в таких сниппетах.
Например, при проверке сложности пароля нужно всю инициализацию выносить наружу. Создание трёх RegExp и семи jQuery объектов (они не кешируются) на каждое нажатие клавиши — далеко не самое оптимальное решение.

[mekegi]

Ага, а самое страшное что люди ЭТО плюсуют и около тысячи добавили в избранное.
jQuery сам по себе хороший инструмент, но не тогда когда берут и копипастят откровенный говнокод в свои проекты. Мне это напоминает нулевые, когда на форумах люди выкладывали «скрипт гостевой книги»/«галерея изображений» где простыня откровенного фарша на пыхе творила не пойми что.
Те кто понимают что делают эти «магические строки» никогда не «возьмут на вооружение» такой бред, ну а для тех кто «не в теме» эти сниппеты «медвежья услуга».

[firedragon]

Я например слышал. IE 11 при первой загрузке отражает скрул бар справа и полоску снизу.
Но стоит обновить страницу и все исчезает. Фоотер переносится вниз.

Причем поймать этот момент непонятно как.

[Chesnovich]

$('a[href=#]').click(function(){ return false; });

[popovsergey]

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

[lastwish]

А потом событие клика в самый ответственный момент не всплывёт. Тогда уж лучше preventDefault:

$('a[href=#]').click(function(e){ e.preventDefault(); });

[Flatformer]

Я бы необходимость сделать из таблицы «зебру» переложил на css

[eydemidov]

Я тоже не понял сакрального смысла делать это через js, кроме особых случаев.

[azproduction]

You might not need jQuery ;)

[hell0w0rd]

Интересные примеры. Но всетаки jquery — это фреймворк с удобным и привычным апи. Сейчас можно сконфигурировать jquery под себя и использовать ровно то, что нужно.
Для тех же ajax запросов так или иначе прийдется писать обертку

[Finom]

jQuery — это не фреймфорк, а библиотека.

[hell0w0rd]

Фреймворк — это набор библиотек. Так вот jquery — это как минимум сизл + ядро jquery. Сейчас это просто набор компонентов, которые можно собрать ровно так как тебе это нужно.
И да, зря я поддался на провокацию. Как ваше замечание меняет суть вышеизложенного?

[Finom]

Фреймворк — это не набор библиотек, а каркас приложения. Загляните на, скажем, википедию.
На суть вышеизложенного никак не влияет, я просто указываю вам на грубую ошибку, допущенную в комментарии.

[hell0w0rd]

Загляните, скажем, не на русскую википедию.

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

Вот вам цитата, чтобы далеко не заглядывать

[Glebcha]

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

[WGH]

jQuery облегчает работу с DOM, не вижу в этом ничего плохого. Что касается каши, ну а что можно сделать с тем, что jQuery в принципе позволяет писать говно?
Это примерно как с PHP, низкий порог вхождения даёт соответствующие последствия. Правда, в случае PHP сам язык спроектирован неважно.

[everyonesdesign]

пример с «Div по ширине/высоте вьюпорта» не будет работать, так как переменные ширины/высоты окна устанавливаются изначально и не корректируются на resize.

[tushev]

Все снипеты вроде простые и очевидные. Но иногда полезно бегло проглядывать подобные подборки снипетов, чтобы потом они всплывали в голове в подходящей ситуации.

А вот качество кода приведенных примеров действительно хромает. Рефакторить их надо!
Хотя, если не копипейстить эти снипеты, а просто запоминать их применение, то и так сойдет.

[WGH]

Рефакторинг не поможет, в половине примеров подход грубо неправильный.

[tushev]

Меня больше заинтересовали идеи снипетов, но не реализация (кривая в данном случае).

[konclave]

На хабре поколение сменилось? Очередная волна изучающих jQuery с нуля?

[SerafimArts]

Почти «Вредные советы», если исключить пару-тройку примеров, которые действительно нельзя (без лишних проблем) заменить на что-либо иное.

[hell0w0rd]

$('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?

[almalini]

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

$('body').on('click', 'a[rel="external"]', function() {
  window.open($(this).attr('href'));
  return false;
});

[hell0w0rd]

То что вы написали — тоже какая-то фигня. Зачем делать что-то за браузер?

[eBuster]

Ну был раньше такой загон, вам выше написали, — всё должно быть валидно.
Чтоб эмблему W3C можно было в подвале повесить или просто для удовлетворения чсв, не знаю. Но поганый target="_blank" ломал весь кайф и заставлял w3c-валидатор ругаться. Поэтому исходно этот атрибут выпиливали, а для достижения требуемого эффекта подключали js.

[hell0w0rd]

Идиотский загон, тем более в отношении нынешних реалий. Абсолютно все браузерные префиксы вне стандарта.
rel браузерам не важен, в отличии от target
Я более чем уверен, что 99,9% пользователей глубоко наплевать что думает про ваш сайт w3c валидатор, ему главное чтобы браузер его правильно открывал

[eBuster]

Я вас и не пытался убедить в обратном, зачем вы всё это мне рассказываете.

[Mushtat]

Если я не ошибаюсь, то target="_blank" проходит валидацию в html5 документах.

[WGH]

Да, его вернули.

[almalini]

Благодарю. В целом, комментарии стали для меня показателем собственной некомпетентности в сабже. Чему рад, так как конкретизировались недостатки и понятно над чем работать. Признаю: «лох и опозорился» ©.

[Eureka]

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

[berman]

$("#refresh").load(location.href+" #refresh>*","");

зачем к url добавлять #refresh>*? это типа анти-кеширование? тогда Math.random() использовать будет попрактичнее)

[mr_avi]

load по ссылке подгрузит всю страницу, а с #refresh возьмет из всей страницы только элемент #refresh (а >* все что в нем), и вставит его в существующий #refresh.

[Regis]

Второй сниппет, копирующий в футер таблицы её шапку, не работает, если на странице больше одной таблицы. Точнее работает, но превращает таблицы в кашу.

[Bektimirov]

Может кто-нибудь пояснить зачем поддерживается версия jQuery 1.1 наравне с 2.x?

[Seldon]

Может кто-то пойдет и прочтет на сайте jQ три строки с описанием версий, дабы не задавать такие вопросы?

[Mithgol]

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

Для решения этой задачи я бы навесил плагины scrollTo и localScroll — и тем невозбранно достиг бы желаемого, а также избавился бы от излишней возни в случае возникновения вопросов «а что делать, если откручивать не совсем до верха?», «а что делать, если хочется после этого #top сохранить в строке адреса?» и прочих.

[Mithgol]

var enoughRegex = new RegExp("(?=.{6,}).*", "g");

Можно подозревать, и подозреваю, что автором этого кода был лютый фанат регулярных выражений. Любой другой бы сравнил у строки свойство «.length» с шестёркою — и на том успокоился бы.

[Jholinar]

Пункт «Частичное обновление страницы»
поправьте, если не прав, но очень топорное решение — к серверу пойдет запрос на генерацию всей страницы, после чего js заставляют вычленять из всего dom'a нужный блок и вставлять его содержимое в этот же блок. Если обновляется какая-то часть страницы, то и грузиться с сервера должна только часть, а не вся страница целиком, иначе тогда в чем суть Ajax'a здесь?

[Seldon]

Я не знаю за что тут плюсовать, решения сами по себе ужачны и их код тоже. Не учите людей плохому.

[NLab]

Эти вредные сниппеты, как мне кажется, рассчитаны в первую очередь на новичков в мире js, когда полного понимания еще нет, но решение нужно здесь и сейчас. Думаю, что любой разработчик, использующий js не меньше чем год, сможет написать любой сниппет с 0, даже без исп. jquery. И сделает он это более эффективно, если речь идет о производительности.

[Jholinar]

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

[posledam]

А если пользователь захочет без пароля? Это ведь пользователь должен решать какой пароль и нужен ли он ему вообще?

[Jemeron]

Табличные полосы я бы лично делал на CSS

[olegshilov]

нажатием ссылки (с id #top)

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

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