8 отличных хитростей jQuery

[larikov]

Решение для target=«blank» можно перефразировать по другому. «Запрещено ездить непристегнутым? Так пристегнитесь, но когда милиционер не видит — можно ремень снять» :)

[Mithgol]

Безусловно, лучше было бы $('a[@rel$='external']').click(function(){ window.open(…

[aps]

Безусловно лучше бы было, если бы W3C не плодил идиотских запретов и правил. Их и так в стандарте предостаточно. А уж если бы и плодил в одном стандарте, то в последующих их не отменял.

[Mithgol]

Это соображение также справедливо.

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

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

[aps]

Вообще-то справедливости ради нужно сказать, что target запрещен только в strict. Так же как и iframe.
Но все равно непонятно зачем такая непоследовательность. Постоянно используемый, опять же из-за кривизны стандартов iframe исключен из strict, зато куча тегов, которые практически никем не используется (по назначению) типа dfn, cite, acronym, abbr потащили в xhtml2

[tenshi]

нет там никакой непоследовательности. просто там используется другая концепция… d-o-b.ru/?article:kill.html
xhtml — язык только лишь гипертекстовой разметки. а iframe — это виджет для создания веб-приложений

[aps]

Любопытно, почему object — хорошо, а iframe — плохо? Логичнее было бы наоборот.
Или микрософтовские корни iframe застят глаза W3C?

[tenshi]

объекты могут вкладываться друг в друга для обеспечения максимальной совместимости.

[aps]

Ну в iframe как раз совместимость 100% и обеспечивается стандартами w3c, а вот продекларированная совместимость вложенных объектов в obj окажется пшиком, потому что реализация будет 100% зависеть от конкретных реализайций.

[tenshi]

ты говоришь так, буд-то object появился только вчера и никто ещё не попробовал им воспользоваться =)

[aps]

Ага и широко пользоваться object им начали значительно позже чем iframe. Т.ч. по всем параметрам iframe должен был войти в strict.

[tenshi]

он банально не вышел названием =)
впрочем, в xhtml2 любой элемент может выступать в качестве iframe или object или img или embeed

[Mithgol]

Я использую <abbr> повседневно, а не то как же ещё аббревиатуры помечать в Паутине?

[aps]

>Я использую повседневно,
У вас на сайте (www.mithgol.ru) на первой странице нет ни одного abbr, аббревиатур типа FAQ, Фидонет, MP3, DOS и т.п.

>a не то как же ещё аббревиатуры помечать в Паутине?
А зачем? Более важные по смыслу email, phone или Фамилия Имя Отчество не имеют своих собственных тегов. И как-то обходятся. Или используют микроформаты.

[Mithgol]

1) А я не на персональном полузаброшенном сайте, я на других.

2) Firefox понимает <abbr>, подчёркивает пунктиром, подсказку всплывающую устраивает.

[aps]

1) Я верю, что начиная с 2006 года на _других_ сайтах, даже в [abbr]ЖЖ[/abbr] вы всегда заключаете в тег abbr такие слова как «колхоз», «интернет» и конструкции типа «и т.д.» «и т.п.»
Но вы человек исключительный.

2) Firefox понимает, подчёркивает пунктиром, подсказку всплывающую устраивает.
теги marquee и blink имели еще более выразительные средства. Но к счастью их прибили.
Подсказка при отсутствии title — какое-то сомнительное достижение.

[RommeDeSerieux]

Отплюсовал расово верный комментарий и совсем не додумался посмотреть на ник написавшего… о боже, мицгол!

[tenshi]

диагноз: синдром мицгола в поле фром

[aps]

>диагноз: синдром мицгола в поле фром
Нет Фромм здесь не причем. Здесь Ганушкин и Кащенко.

[Mithgol]

Так-то!

[hoglet]

как по мне так правильно запрещают. хочу сам контролировать — открывается ссылка в новом окне или в текущем.

[Ordos]

Я тоже хочу сам контролировать, только как разработчик, — будет ссылка у вас открываться новом окне или в текущем

[aps]

Странные люди — пользователи хабра. Единственный логичный ответ почему-то вызвал несогласие.

[savamura]

Тогда почему бы не запретить style атрибут?

[Mithgol]

Важная поправка.

Как на habrahabr.ru/blogs/jquery/54306/#comment_1448261 верно было подмечено, кавычки (окаймляющие или внутренние) должны быть сделаны двойными, ведь если одинарные и там и там, то не сработают.

[MTonly]

Полезно понимать разницу между атрибутом HTML-элемента и свойством Javascript-объекта. Если атрибут запрещён в HTML-коде как несемантический, то это никак не отражается на легитимности свойства, определяющего поведение Javascript-объекта.

[Octane]

Да, но все же DTD влияет на работу с DOM, возьмите к примеру document.all в Gecko, который доступен только в Quirks Mode, или scrollTop для document.body и document.documentElement в Internet Explorer. Нет уверенности, что не выйдет новая версия браузера с каким нибудь Super Standards Compliance Mode, в котором будут игнорироваться не описанные в DTD атрибуты тегов, для которых браузер должен автоматически синхронизировать соответствующие свойства DOM-элементов.

[MTonly]

Это крайне маловероятно, особенно учитывая, что в грядущем HTML5 атрибут target снова разрешён.

[Ordos]

Прям какая-то мыльная опера…

[MTonly]

Просто теория столкнулась с практикой. ;-)

[Octane]

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

А сейчас браузеры не обращают внимание на DTD?

[Octane]

Да браузеры не грузят каждый раз указанный файл с доктайпом, но речь то не об этом. Проблема в том, что от DTD зависит работа с DOM в Javascript и CSS. Да сейчас отличия только в режимах без доктайпа (QuirksMode) и c DTD (Standards Compliance Mode), а между версиями Transitional и Strict в XHTML 1.0 врятли в работе Javascript найдутся отличия, но кто может гарантировать что теже евангелисты из Mozill'ы не сделают в очередной новой версии браузера бесполезным для работы в режиме Strict, к примеру, такой код:

document.createElement("iframe")

или

element.setAttribute("target", "_blank")

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

[Dimchansky]

А разве символ "@" при выборке атрибутов не стал устаревшим? По-моему, сейчас надо писать так:

$('a[rel$='external']').click(function(){
 this.target = "_blank";
});

[XaocCPS]

да, вы правы, добавлю комментарий

[amduscias]

$('element').size(); — можно еще обращаться к свойству length, если не ошибаюсь, эффект будет тот же.

[yAnTar_yAnTar]

Всегда использовал только length, про size впервые сегодня узнал

[SSDPsM]

Ссылки target=blank

А не лучше ли тогда уже полностью по стандартам?

$('a[@rel$='external']').click(function(){
this.onclick = function(){ window.open(this.href) }
});

[XaocCPS]

согласен, добавил комментарий в статье

[MTonly]

В отличие от window.open, при использовании target все браузеры (а не только Firefox) передают заголовок referer.
+ см. чуть выше.

[heroOfOurTime]

>>Определение браузера
Ага, попробуйте потом за кем-нибудь такую мешанину кода разобрать.

>>Вот что я называю очень простым, но очень полезным советом
>>Вы когда-нибудь хотели иметь возможность удалять
Эм… Промт?

Честно говоря, на «хитрость» не тянет.

[Sef4eg]

продолжение следует? тонкостей больше :)

[Bonch]

Что-то никакие это не тонкости. Это банальности.

[tenshi]

> Вы используете атрибут target=blank для ссылок? Если да, то вы должны знать, что XHTML 1.0 Strict не позволяет этого делать

зато xhtml 1.1 позволяет.

> $('element').size()

ух уж эта хитрая документация ;-)

> $.preloadImages(«image1.gif», "/path/to/image2.png", «some/image3.jpg»);

а как же отделение оформления от поведения?

> в jQuery 1.3 и выше $.browser считается устаревшим и не рекомендуется к использованию, вместо этого рекомендуется использовать $.support.

да-да, как через support определить размер смещения при поэкранном листании (пробелом, например)?

> el.html(el.html().replace(/word/ig, ""));

el.html(el.html().replace(/strong/ig, ""));

> Существует множество вариантов запрета вызова контекстного меню мышью через Javascript, но jQuery позволяет реализовать это намного проще

чтоб вы сдохли, любезные гранато-раздаватели.

[tenshi]

www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_targetmodule
проверено, валидатор не против.

[tenshi]

валидатор парсит дтд. что там написано, то он и скушает. раньше просто небыло таргет-модуля и приходилось писать его самому…

[tenshi]

не, там речь о каком-то типографическом фиксе…

[tenshi]

судя по ченьжлогу это наблюдалось с сентября по ноябрь…
в любом случае пофиксить эту багу в локальной копии мог любой…

[Sarry]

$('a[rel$='external']').click(function(){

работать ведь не будет :-)
Кавычки для external тогда уж надо двойные

[XaocCPS]

:) fixed

[aps]

— Трюк с выравниванием колонок некошерный. Верстка будет прыгать после загрузки.

— Определение броузерв в старых версиях Jquery было реализовано по userAgent. Было очень странно видеть такой глюк, в библиотеке, которая решила 99% броузерной совместимости js.

— За запрет вызова контекстного меню мышью нужно отрывать руки.

[whoami]

Иногда требуется свое контекстное меню, не показывать же их оба

[wixus]

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

arguments_length = arguments.length;
for(var i = 0; i<arguments_length; i++)

по-моему так лучше

[tenshi]

о да, прямо-таки ускорил в десять раз!

[tenshi]

а не смущает, что один вызов jquery тут в 100 раз медленнее вызова Image?

[bolk]

В Opera контекстное меню всё равно будет появляться.

[XAMelleOH]

А почему «минус» комментарию? В Опере действительно стоит запрет на изменение обработки правой кнопки мыши.

З.Ы. Включается: Инструменты -> Настройки -> Дополнительно -> Содержание -> Параметри Javascript

[DriverX]

Что-то как-то не очень советы. Скорее повторение доков jQuery =/

[Pilat]

Советы странные. Особенно мне понравился совет по замене комментариев в CSS на Javascript вызовы. Интересно, хоть один верстальщик придёт в восторг от такого? А пользователи с отключённым Javascript'om будут долго хвалить авторов сайта?
Изменение размера шрифта не требует jQuery — это сейчас хорошо делают браузеры. Похоже, советам года три-четыре.

[elw00d]

Относитесь к ним как к возможностям, а не как к руководству к действию. Это — информация для размышления, а не идеальные решения проблем.

[Slash]

и о чем тут размышлять? :))

[Octane]

$('a[rel$="external"]').click(function(){
 this.target = "_blank";
});

jQuery же может сразу для всего списка атрибуты изменить, и селектор атрибута неправильно подобран, нужно использовать ~= для списка значений, разделенных пробелом:

$('a[rel~="external"]').attr("target", "_blank");

[XaocCPS]

вы наверное имели в виду селектор '*='?
docs.jquery.com/Selectors/attributeContains#attributevalue

[Octane]

Нет, я правильно написал, для списка значений, разделенных пробелом нужно использовать ~=, в документации по jQuery его почему-то нет, но он поддерживается (строка №2028 в jQuery 1.3.2):

type === "~=" ?
(" " + value + " ").indexOf(check) >= 0 :

В старых версиях тоже есть поддержка такого селектора атрибутов, а так же он является стандартным и описан в спецификации.

[elfiki]

Это, по-моему, как вместо простых действий на чистом JS, подключить фреймворк и сделать так же…

[jandosul]

Почему этот совет
jQuery.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)
{
jQuery("").attr(«src», arguments[i]);
}
};

не использует этот совет
$('element').size();

[Octane]

Потому что количество аргументов функции считается, а не сколько элементов найдено на странице.

[magicstream]

ожидал увидеть что то более неизвестное

[dsCode]

Ёпрст. Какого года статья? В 98% этих советов — при чём здесь jQuery? Чистого JS-кода для этих же действий будет столько же (а где-то меньше).

P.S.>:

> Кому не нравится jQuery?

шикарное начало для статьи :D (я знаю, что это перевод =), но тем не менее)

[RedOctober]

Я не использую ссылки с атрибутом target=blank, я использую атрибут target="_blank"

[bibimij]

Спасибо! Искал код для подгрузки изображений, и вот нашёл. :)

[sunsey]

на счет пункта «Колонки одинаковой высоты»
имхо лучше все таки вешать подобную функцию не на $(document).ready а на $(window).load то есть после полной загрузки страницы. Был у меня случай когда высота блоков считалась некорректно как раз из за того, что в них были картинки. Вешанье на $(window).load как раз помогло. Мот кому пригодиться =)

[aubt]

имхо лучше это решать средствами css.

[genzo]

Плохо что вот этот код

$(document).ready(function(){
  $(document).bind("contextmenu",function(e){
    return false;
  });
});

не работает в Opera 9

[aubt]

> Предзагрузка изображений
по-моему стоило упомянуть о возможности подцепить callback-функции:

var _src = «path/to/image.jpg»;

$("").load(function() {
alert(«image loaded»);
}).error(function() {
alert(«error loading image»);
}).attr(«src», _src);

> Колонки одинаковой высоты
Во-первых, это можно и нужно решать средствами css, а не javascript.
Во-вторых переменной tallest нечего делать в global scope. Автору примера стоит подучить значение ключевого слова var в javascript.

Вообще ни одной «хитрости» в статье не увидел.

[aubt]

> $("").load(function()
тег скушался.

пусть так будет:
$(new Image()).load(function()

[bor1s]

Статья получилась полезной, не столько из-за советов, сколько из-за комментариев.