HTML+CSS+JavaScript

В чем принципиальная разница?
И там и там можно создавать любые имена и присваивать данные.
Мне, например установка новых атрибутов элементам DOM кажется более удобным способом, т.к. их значения проще отследить в реальном времени, в том же FireBug'е.
Но не дает покоя мысль, что зачем-то же придумали еще и .data() !
Никто не подскажет зачем?...

>И там и там можно создавать любые имена и присваивать данные.
Мне, например установка новых атрибутов элементам DOM кажется более удобным способом

Значение значению рознь, если атрибут, это строка и строковое значение, то data, это объект, который может хранить и объекты.

<script> $(function(){   $('p').attr('main',10).data('main',10);   alert(($('p').attr('main')+10)+' - '+($('p').data('main')+10))   $('p').data('main',[12,'str',23]);   alert($('p').data('main')[1]) });     </script>

PS. Атрибут, это свойство объекта. )

тарабарский язык не знаю, но касаемо атрибутов и свойств HTML-тегов сказать имею:

1) атрибуты HTML-тегов могут принимать значения только 2 (двух) типов:
-- либо типа String (строка символов)
-- либо типа Boolean (true или false)

попытка присвоить атрибуту в качестве значения какой-то иной тип - например, число, массив, объект или функцию приведёт к преобразованию типа (вместо типа Number получите значением атрибута тип String, т.е. строку, содержащую символы, в совокупности похожие на число; вместо массива атрибут получит значение valueOf () этого массива, т.е. опять же строку; вместо объекта - его так называемое "элементарное значение" - снова строку; вместо функции получите в атрибуте набор символов - текст этой функции)

2) а вот свойства HTML-тегов, не являющиеся одновременно атрибутами - они могут принимать значение любых нужных вам типов, включая числа, массивы, объекты и функции
например, во вновь придуманном свойстве hren тега <A> можно хранить ссылку на текущий document - и всё прекрасно будет работать
------

совсем недавно я здесь объяснял это в качестве ответа на свой "вопрос экзаменационного билета"...
и кое-кто посчитал этот вопрос "оторванным от практики" - см. http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=88010 (вопрос #2)

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

Всем спасибо. Я так и думал. Просто пока мне как-то не приходилось "приклеивать" к тегам объекты. Как-то строками и обходился, вот и возник вопрос.
Надо будет подумать, может это и удобно в каких-то ситуациях....

Разве строками всегда можно обойтись? Походу работу сценария возникают необходимости хранить данные, ссылки, объекты, для этого создаются массивы, объекты. Каким образом в этом случае могут помочь атрибуты объекта?

<script> $(function(){   $('p').click(function(){      if(!$.isEmptyObject($(this).parent().data()))          $(this).parent()                 .data('obj')                .css('color','#000');            $(this).css('color','#f00')             .parent()             .data('obj',$(this));   }); });     </script> <div> <p>Text</p> <p>Text</p> <p>Text</p> </div>

А теперь напишите это же самое с применением атрибутов.

Написать-то без проблем:

<script>  $(function(){    $('p').click(function(){       if($(this).attr('tColor')!='red'){        $(this).parent()               .find('[tColor="red"]')               .attr('tColor','black')               .css('color','black');      $(this).attr('tColor','red')             .css('color','red')       }   });  });      </script>

Но Ваш способ, конечно элегантнее и "легче" по нагрузке.
Нда... Надо будет это переварить =)

Это не мой способ, это так JS позволяет. То что вы написали предполагает обход коллекции в цикле. В вашем случае можно было бы вообще ничего не искать по атрибуту, а просто всем сбросить цвет, а у текущего установить, но это тоже обход массива.
А метод data(), это тоже самое, как и:

<script> var obj; function set(e) {    if(obj) obj.style.color = '#000';    e.style.color = '#f00';    obj = e;  }     </script> <p onclick="set(this)">text</p> <p onclick="set(this)">text</p> <p onclick="set(this)">text</p>

Отличие только в том, что метод data() привязывает данные к DOM объекту.

Что-то у меня не получается функцию прицепить.
Функция это ж тоже объект?
Делаю так:

$(function(){   $('#sel').data('alertOnClick',function(){     alert(1)   });   $('#sel').on('click'.function(){     $(this).data('alertOnClick')   }) })

В чем ошибка?

Ошибка в точке вместо запятой в аргументах метода on(), и в ожидании, что таким образом можно впихнуть нечто во что-то и оно и исполниться.
http://javascript.ru/basic/functions

Ну точка - это, естессно, опечатка. Я не из кода это скопировал, а прям тут писал.

А из статьи ничего не понял.
Вернее я и так это знал, именно поэтому мне не понятно, почему в моем коде при клике не выскакивает алерт.
Вернее сейчас дошло, что функция возвращается из объекта дата, но не выполняется, соответственно ее еще нужно запустить:

$('p').on('click',function(){      var f = $(this).data('alertOnClick');     f();   })

так сработало.
Но понял это не из статьи, а из вашей фразы "и оно и исполниться".

Дальше сообразил, что можно сократить вот так:

$('p').on('click',function(){      $(this).data('alertOnClick')();   })

и тоже стаботало.

И даже так:

$(function(){    $('p').data('alertOnClick',function(par){      alert(par)    });    $('p').on('click',function(){      $(this).data('alertOnClick')('параметр');   }) });

работает =)

Суть ясна.
Но выглядит это, мягко говоря, не органично.
Нужно будет этим попользоваться, чтоб осело на подкорке мозга =)