Безопасно использовать # и. символов в атрибутах html?

Question

Мне интересно, можно ли задать значение атрибута объекта HTML в виде строки, содержащей символ #?

Причина, по которой я хочу это сделать, состоит в том, что на странице будет много элементов, которые должны прокручивать страницу до указанных элементов, и я хочу сохранить данные «какой элемент должен прокручиваться до? 'как атрибут data-scrollto.

Так что мой код JavaScript -will- выглядеть следующим образом:

function ScrollToElement(lm) 
{ 
    var theTop = lm.offset().top; 
    $("html,body").animate({ 
     scrollTop: theTop/*, 
     scrollLeft: 1000*/ 
    }); 
} 

// .. and add click event to all such objects : 
$('.scroller').click(function(){ 
     var theSelector = $(this).attr('data-scrollto'); 
     ScrollToElement($(theSelector)); 
    }); 

поэтому HTML элементы будут выглядеть следующим образом:

<a class='scroller' data-scrollto='p#p-to-scroll'>Click to scroll to p</a> 

это безопасно?

И как побочный вопрос, почему

$(element).data('scrollto'); 

не работает, но

$(element).attr('data-scrollto'); 

работ?

Answer 1

Согласно спецификации W3C, да, является безопасным для использования символов U+0023 NUMBER SIGN (#) и U+002E FULL STOP (.).

Имя атрибута, за которым следует ноль или более символов пробела, а затем с помощью одного U+003D EQUALS SIGN символа, за которым следует ноль или более символов пробела, за которым следует значение атрибута, которое, в дополнение к требованиям, указанным выше для атрибута значения, не должны содержать какие-либо буквенные символы пробела, любые U+0022 QUOTATION MARK символов ("), U+0027 APOSTROPHE символов ('), U+003D EQUALS SIGN символов (=), U+003C LESS-THAN SIGN символов (<), U+003E GREATER-THAN SIGN символов (>), или U+0060 GRAVE ACCENT символов (`), и не должна быть пустой строкой.

Прочитано http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#attributes-0.

Answer 2

Да, вы можете сохранить хэш # и . в атрибутах данных. Вы должны использовать надлежащие методы данных. http://api.jquery.com/jQuery.data/

var theSelector = $(this).data('scrollto'); 

Если вы не можете использовать метод данных, проверьте версию JQuery вы используете, она была введена в версии 1.2.3