almalini 5 фев 2014 в 15:13

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

5 мин

86K

Веб-разработка * JavaScript * jQuery *

Туториал

Перевод

+23

Комментарии 55

jaybekster 5 фев 2014 в 15:37

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

НЛО прилетело и опубликовало эту надпись здесь

lastwish 5 фев 2014 в 15:58

Нет. Этот код

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 6 фев 2014 в 10:08

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

popovsergey 5 фев 2014 в 15:44

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

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

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

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

eBuster 5 фев 2014 в 16:25

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

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

mekegi 6 фев 2014 в 07:02

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

firedragon 22 окт 2018 в 14:01

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

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

Chesnovich 5 фев 2014 в 15:47

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

popovsergey 5 фев 2014 в 15:50

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

lastwish 5 фев 2014 в 16:06

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

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

Flatformer 5 фев 2014 в 16:24

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

eydemidov 5 фев 2014 в 20:23

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

azproduction 5 фев 2014 в 17:18

You might not need jQuery ;)

hell0w0rd 5 фев 2014 в 20:34

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

Finom 5 фев 2014 в 22:58

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

hell0w0rd 5 фев 2014 в 23:02

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

Finom 5 фев 2014 в 23:09

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

hell0w0rd 5 фев 2014 в 23:27

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

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 6 фев 2014 в 03:26

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

НЛО прилетело и опубликовало эту надпись здесь

WGH 6 фев 2014 в 08:23

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

everyonesdesign 5 фев 2014 в 17:38

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

tushev 5 фев 2014 в 17:44

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

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

WGH 6 фев 2014 в 08:26

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

tushev 6 фев 2014 в 19:56

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

konclave 5 фев 2014 в 18:54

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

SerafimArts 5 фев 2014 в 19:33

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

hell0w0rd 5 фев 2014 в 20:38

$('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 5 фев 2014 в 20:52

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

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

hell0w0rd 5 фев 2014 в 21:28

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

eBuster 5 фев 2014 в 22:00

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

hell0w0rd 5 фев 2014 в 22:14

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

eBuster 5 фев 2014 в 22:15

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

Mushtat 6 фев 2014 в 08:44

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

WGH 6 фев 2014 в 09:49

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

almalini 6 фев 2014 в 12:18

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

НЛО прилетело и опубликовало эту надпись здесь

berman 5 фев 2014 в 21:59

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

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

mr_avi 6 фев 2014 в 00:14

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

Regis 6 фев 2014 в 00:12

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

Bektimirov 6 фев 2014 в 04:10

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

Seldon 6 фев 2014 в 05:05

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

Mithgol 6 фев 2014 в 06:14

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

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

Mithgol 6 фев 2014 в 06:19

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

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

Jholinar 6 фев 2014 в 07:03

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

Seldon 6 фев 2014 в 08:42

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

NLab 6 фев 2014 в 09:33

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