jQuery Wskazówki i porady

Składnia

• Skrót do gotowego wydarzenia przez roosteronacid
• Przerwanie linii i łańcuchowość przez roosteronacid
• Zagnieżdżanie filtrów według Nathana Longa
• Buforuj kolekcję i wykonuj polecenia w tym samym wierszu przez roosteronacid
• Zawiera selektor według roosteronacid
• Definiowanie właściwości przy tworzeniu pierwiastka przez roosteronacid
• Uzyskuj dostęp do funkcji jQuery jak do tablicy przez roosteronacid
• Funkcja noConflict - Uwolnienie zmiennej $ przez Oli
• Wyodrębnij zmienną $ w trybie noConflict przez nickf
• Tryb bez konfliktu przez roosteronacid

Przechowywanie danych

• Funkcja danych - powiązanie danych z elementami przez TenebrousX
• Obsługa atrybutów danych HTML5 na sterydach! przez roosteronacid
• Wtyczka metadanych jQuery autorstwa Filipa Dupanovicia

Optymalizacja

• Zoptymalizuj działanie złożonych selektorów według roosteronacid
• Parametr kontekstu autorstwa lupefiasco
• Zapisuj i wykorzystuj ponownie wyszukiwania Nathana Longa
• Tworzenie elementu HTML i utrzymywanie odwołania, Sprawdzanie, czy element istnieje, Pisanie własnych selektorów przez Andreasa Grecha

Różne

• Sprawdź indeks elementu w kolekcji przez redsquare
• Obsługa zdarzeń na żywo przez TM
• Zastąp anonimowe funkcje nazwanymi funkcjami przez ken
• Struktura Microsoft AJAX i most jQuery firmy Slace
• Samouczki jQuery autorstwa egyamado
• Usuń elementy z kolekcji i zachowaj łańcuchowość dzięki roosteronacidowi
• Zadeklaruj to na początku anonimowych funkcji Bena
• FireBug Lite, wtyczka Hotbox, informuje, kiedy obraz został załadowany i Google CDN przez Color Blend
• Rozsądne wykorzystanie skryptów jQuery innych firm przez harriyott
• Każda funkcja Jana Zicha
• Wtyczka Form Extensions autorstwa Chrisa S.
• Asynchroniczna każda funkcja przez OneNerd
• Wtyczka szablonu jQuery: implementacja złożonej logiki przy użyciu funkcji renderowania przez roosteronacid

Tworzenie elementu HTML i utrzymywanie odwołania

var newDiv = $("<div />");

newDiv.attr("id", "myNewDiv").appendTo("body");

/* Now whenever I want to append the new div I created, 
   I can just reference it from the "newDiv" variable */

Sprawdzanie, czy element istnieje

if ($("#someDiv").length)
{
    // It exists...
}

Pisanie własnych selektorów

$.extend($.expr[":"], {
    over100pixels: function (e)
    {
        return $(e).height() > 100;
    }
});

$(".box:over100pixels").click(function ()
{
    alert("The element you clicked is over 100 pixels height");
});

data()Metoda jQuery jest przydatna i mało znana. Umożliwia powiązanie danych z elementami DOM bez modyfikowania DOM.

Zagnieżdżanie filtrów

Możesz zagnieżdżać filtry (jak pokazał tutaj nick ).

.filter(":not(:has(.selected))")

Naprawdę nie jestem fanem tego $(document).ready(fn)skrótu. Jasne, że ogranicza kod, ale także zmniejsza czytelność kodu. Kiedy widzisz $(document).ready(...), wiesz, na co patrzysz. $(...)jest używany na zbyt wiele innych sposobów, aby natychmiast mieć sens.

Jeśli masz wiele ram, możesz użyć, jQuery.noConflict();jak mówisz, ale możesz też przypisać do niej inną zmienną:

var $j = jQuery.noConflict();

$j("#myDiv").hide();

Bardzo przydatne, jeśli masz kilka ram, które można sprowadzić do $x(...)wywołań w stylu.

Ooooch, nie zapomnijmy o metadanych jQuery ! Funkcja data () jest świetna, ale należy ją wypełnić za pomocą wywołań jQuery.

Zamiast łamać zgodność W3C z niestandardowymi atrybutami elementu, takimi jak:

<input 
  name="email" 
  validation="required" 
  validate="email" 
  minLength="7" 
  maxLength="30"/> 

Zamiast tego użyj metadanych:

<input 
  name="email" 
  class="validation {validate: email, minLength: 2, maxLength: 50}" />

<script>
    jQuery('*[class=validation]').each(function () {
        var metadata = $(this).metadata();
        // etc.
    });
</script>

Obsługa zdarzeń na żywo

Ustaw moduł obsługi zdarzeń dla dowolnego elementu, który pasuje do selektora, nawet jeśli zostanie dodany do DOM po początkowym załadowaniu strony:

$('button.someClass').live('click', someFunction);

Umożliwia to ładowanie treści za pośrednictwem ajax lub dodawanie ich za pomocą javascript i automatyczne ustawianie programów obsługi zdarzeń dla tych elementów.

Podobnie, aby zatrzymać obsługę wydarzenia na żywo:

$('button.someClass').die('click', someFunction);

Te programy obsługi zdarzeń na żywo mają kilka ograniczeń w porównaniu ze zwykłymi wydarzeniami, ale działają świetnie w większości przypadków.

Aby uzyskać więcej informacji, zobacz dokumentację jQuery .

AKTUALIZACJA: live()i die()są przestarzałe w jQuery 1.7. Zobacz podobne funkcje zastępowania na http://api.jquery.com/on/ i http://api.jquery.com/off/ .

AKTUALIZACJA 2: live()dawno przestarzała, nawet przed wersją jQuery 1.7. Dla wersji jQuery 1.4.2+ przed wersją 1.7 delegate()i undelegate(). live()Przykład ( $('button.someClass').live('click', someFunction);) może być zapisane w delegate()tak: $(document).delegate('button.someClass', 'click', someFunction);.

Zastąp funkcje anonimowe nazwanymi funkcjami. To naprawdę zastępuje kontekst jQuery, ale wchodzi w grę bardziej, jak się wydaje podczas korzystania z jQuery, ze względu na jego zależność od funkcji zwrotnych. Problemy, które mam z wbudowanymi funkcjami anonimowymi, polegają na tym, że trudniej jest je debugować (o wiele łatwiej jest spojrzeć na stos wywołań z wyraźnie nazwanymi funkcjami, zamiast 6 poziomów „anonimowych”), a także fakt, że wiele anonimowych funkcji w tym samym Łańcuch jQuery może stać się niewygodny w czytaniu i / lub utrzymywaniu. Ponadto funkcje anonimowe zwykle nie są ponownie wykorzystywane; z drugiej strony, zadeklarowanie nazwanych funkcji zachęca mnie do napisania kodu, który prawdopodobnie będzie ponownie użyty.

Ilustracja; zamiast:

$('div').toggle(
    function(){
        // do something
    },
    function(){
        // do something else
    }
);

Wolę:

function onState(){
    // do something
}

function offState(){
    // do something else
}

$('div').toggle( offState, onState );

Definiowanie właściwości przy tworzeniu elementu

W jQuery 1.4 możesz użyć literału obiektu do zdefiniowania właściwości podczas tworzenia elementu:

var e = $("<a />", { href: "#", class: "a-class another-class", title: "..." });

... Możesz nawet dodawać style:

$("<a />", {
    ...
    css: {
        color: "#FF0000",
        display: "block"
    }
});

Oto link do dokumentacji .

zamiast używać innego aliasu dla obiektu jQuery (przy użyciu noConflict), zawsze piszę mój kod jQuery, pakując go w zamknięcie. Można to zrobić za pomocą funkcji document.ready:

var $ = someOtherFunction(); // from a different library

jQuery(function($) {
    if ($ instanceOf jQuery) {
        alert("$ is the jQuery object!");
    }
});

alternatywnie możesz to zrobić w następujący sposób:

(function($) {
    $('...').etc()    // whatever jQuery code you want
})(jQuery);

Uważam to za najbardziej przenośne. Pracowałem nad witryną, która jednocześnie używa Prototypu ORAZ jQuery, a techniki te pozwoliły uniknąć wszystkich konfliktów.

Sprawdź indeks

jQuery ma .index, ale korzystanie z niego jest kłopotliwe, ponieważ potrzebujesz listy elementów i przekazujesz element, który chcesz indeksować:

var index = e.g $('#ul>li').index( liDomObject );

Następujące jest znacznie łatwiejsze:

Jeśli chcesz poznać indeks elementu w zestawie (np. Elementy listy) w liście nieuporządkowanej:

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

Stenografia do imprezy gotowej

Bezpośredni i pełny sposób:

$(document).ready(function ()
{
    // ...
});

Stenografia:

$(function ()
{
    // ...
});

W podstawowej funkcji jQuery oprócz parametru selektora określ parametr kontekstu. Określenie parametru kontekstu umożliwia uruchamianie jQuery z głębszej gałęzi w DOM, a nie z katalogu głównego DOM. Biorąc pod uwagę wystarczająco duży DOM, określenie parametru kontekstu powinno przełożyć się na wzrost wydajności.

Przykład: Znajduje wszystkie dane wejściowe typu radia w pierwszym formularzu w dokumencie.

$("input:radio", document.forms[0]);

Odniesienie: http://docs.jquery.com/Core/jQuery#expressioncontext

Nie tylko jQuery, ale zrobiłem ładny mostek dla jQuery i MS AJAX:

Sys.UI.Control.prototype.j = function Sys$UI$Control$j(){
  return $('#' + this.get_id());
}

To naprawdę miłe, jeśli robisz dużo ASP.NET AJAX, ponieważ jQuery jest obsługiwany przez MS, a teraz ma ładny mostek, co oznacza, że ​​bardzo łatwo jest wykonywać operacje jQuery:

$get('#myControl').j().hide();

Tak więc powyższy przykład nie jest świetny, ale jeśli piszesz kontrolki serwera AJAX ASP.NET, łatwo jest mieć jQuery wewnątrz implementacji kontroli po stronie klienta.

Zoptymalizuj wydajność złożonych selektorów

Zapytanie o podzbiór DOM przy użyciu złożonych selektorów drastycznie poprawia wydajność:

var subset = $("");

$("input[value^='']", subset);

Mówiąc o poradach i poradach, a także niektórych samouczkach. Znalazłem te serię samouczków ( „jQuery dla początkujących” seria video) przez Jeffery Drogi są bardzo pomocne.

Jest skierowany do programistów, którzy są nowi w jQuery. Pokazuje, jak tworzyć wiele fajnych rzeczy za pomocą jQuery, takich jak animacja, tworzenie i usuwanie elementów i więcej ...

Wiele się z tego nauczyłem. Pokazuje, jak łatwo jest używać jQuery. Teraz to uwielbiam i potrafię czytać i rozumieć każdy skrypt jQuery, nawet jeśli jest złożony.

Oto przykład, który podoba mi się „ Zmiana rozmiaru tekstu ”

1- jQuery ...

<script language="javascript" type="text/javascript">
    $(function() {
        $('a').click(function() {
            var originalSize = $('p').css('font-size'); // get the font size 
            var number = parseFloat(originalSize, 10); // that method will chop off any integer from the specified variable "originalSize"
            var unitOfMeasure = originalSize.slice(-2);// store the unit of measure, Pixle or Inch

            $('p').css('font-size', number / 1.2 + unitOfMeasure);
            if(this.id == 'larger'){$('p').css('font-size', number * 1.2 + unitOfMeasure);}// figure out which element is triggered
         });        
     });
</script>

2- Stylizacja CSS ...

<style type="text/css" >
body{ margin-left:300px;text-align:center; width:700px; background-color:#666666;}
.box {width:500px; text-align:justify; padding:5px; font-family:verdana; font-size:11px; color:#0033FF; background-color:#FFFFCC;}
</style>

2- HTML ...

<div class="box">
    <a href="#" id="larger">Larger</a> | 
    <a href="#" id="Smaller">Smaller</a>
    <p>
    In today’s video tutorial, I’ll show you how to resize text every time an associated anchor tag is clicked. We’ll be examining the “slice”, “parseFloat”, and “CSS” Javascript/jQuery methods. 
    </p>
</div>

Bardzo polecam te samouczki ...

http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

Asynchroniczna funkcja each ()

Jeśli masz naprawdę złożone dokumenty, w których uruchomienie funkcji jquery każda () blokuje przeglądarkę podczas iteracji i / lub Internet Explorer wyświetla komunikat „ czy chcesz kontynuować uruchamianie tego skryptu ”, to rozwiązanie uratuje ten dzień.

jQuery.forEach = function (in_array, in_pause_ms, in_callback)
{
    if (!in_array.length) return; // make sure array was sent

    var i = 0; // starting index

    bgEach(); // call the function

    function bgEach()
    {
        if (in_callback.call(in_array[i], i, in_array[i]) !== false)
        {
            i++; // move to next item

            if (i < in_array.length) setTimeout(bgEach, in_pause_ms);
        }
    }

    return in_array; // returns array
};


jQuery.fn.forEach = function (in_callback, in_optional_pause_ms)
{
    if (!in_optional_pause_ms) in_optional_pause_ms = 10; // default

    return jQuery.forEach(this, in_optional_pause_ms, in_callback); // run it
};

Pierwszy sposób, w jaki możesz go użyć, jest taki sam jak każdy ():

$('your_selector').forEach( function() {} );

Opcjonalnie 2. parametr pozwala określić prędkość / opóźnienie między iteracji , które mogą być użyteczne dla animacji ( w poniższym przykładzie będzie czekać na 1 sekundę między iteracji ):

$('your_selector').forEach( function() {}, 1000 );

Pamiętaj, że ponieważ działa to asynchronicznie, nie możesz polegać na ukończeniu iteracji przed następnym wierszem kodu, na przykład:

$('your_selector').forEach( function() {}, 500 );
// next lines of code will run before above code is complete

Napisałem to dla wewnętrznego projektu i chociaż jestem pewien, że można go ulepszyć, zadziałało to, czego potrzebowaliśmy, więc mam nadzieję, że niektórym z was okaże się ono przydatne. Dzięki -

Syntactic shorthand-sugar-thing - Buforuj kolekcję obiektów i wykonuj polecenia w jednym wierszu:

Zamiast:

var jQueryCollection = $("");

jQueryCollection.command().command();

Ja robię:

var jQueryCollection = $("").command().command();

Nieco „prawdziwy” przypadek użycia może być następujący:

var cache = $("#container div.usehovereffect").mouseover(function ()
{
    cache.removeClass("hover").filter(this).addClass("hover");
});

Lubię deklarować $thiszmienną na początku funkcji anonimowych, więc wiem, że mogę odwołać się do jQueried to.

Tak jak:

$('a').each(function() {
    var $this = $(this);

    // Other code
});

Zapisz obiekty jQuery w zmiennych do ponownego wykorzystania

Zapisanie obiektu jQuery w zmiennej pozwala na jej ponowne użycie bez konieczności przeszukiwania DOM, aby go znaleźć.

(Jak sugeruje @Louis, teraz używam $, aby wskazać, że zmienna zawiera obiekt jQuery.)

// Bad: searching the DOM multiple times for the same elements
$('div.foo').each...
$('div.foo').each...

// Better: saving that search for re-use
var $foos = $('div.foo');
$foos.each...
$foos.each...

Jako bardziej złożony przykład, powiedzmy, że masz listę produktów spożywczych w sklepie i chcesz pokazać tylko te, które spełniają kryteria użytkownika. Masz formularz z polami wyboru, każdy zawierający kryteria. Pola wyboru mają nazwy takie jak organici lowfat, a produkty mają odpowiednie klasy - .organicitp.

var $allFoods, $matchingFoods;
$allFoods = $('div.food');

Teraz możesz kontynuować pracę z tym obiektem jQuery. Za każdym razem, gdy klikane jest pole wyboru (aby zaznaczyć lub odznaczyć), zacznij od głównej listy potraw i odfiltruj na podstawie zaznaczonych pól:

// Whenever a checkbox in the form is clicked (to check or uncheck)...
$someForm.find('input:checkbox').click(function(){

  // Start out assuming all foods should be showing
  // (in case a checkbox was just unchecked)
  var $matchingFoods = $allFoods;

  // Go through all the checked boxes and keep only the foods with
  // a matching class 
  this.closest('form').find("input:checked").each(function() {  
     $matchingFoods = $matchingFoods.filter("." + $(this).attr("name")); 
  });

  // Hide any foods that don't match the criteria
  $allFoods.not($matchingFoods).hide();
});

Wygląda na to, że większość interesujących i ważnych wskazówek została już wspomniana, więc ta jest tylko małym dodatkiem.

Mała wskazówka to funkcja jQuery.each (obiekt, wywołanie zwrotne) . Prawdopodobnie wszyscy używają funkcji jQuery.each (callback) do iteracji samego obiektu jQuery, ponieważ jest on naturalny. Funkcja narzędzia jQuery.each (obiekt, wywołanie zwrotne) iteruje obiekty i tablice. Przez długi czas jakoś nie widziałem, po co to może być, oprócz innej składni (nie mam nic przeciwko pisaniu wszystkich modnych pętli) i trochę się wstydzę, że dopiero niedawno uświadomiłem sobie jego główną siłę.

Chodzi o to, że ponieważ treść pętli w jQuery.each (obiekt, wywołanie zwrotne) jest funkcją , za każdym razem w pętli otrzymujesz nowy zakres, co jest szczególnie wygodne, gdy tworzysz zamknięcia w pętli.

Innymi słowy, typowym powszechnym błędem jest zrobienie czegoś takiego:

var functions = [];
var someArray = [1, 2, 3];
for (var i = 0; i < someArray.length; i++) {
    functions.push(function() { alert(someArray[i]) });
}

Teraz, gdy wywołasz funkcje w functionstablicy, otrzymasz trzykrotnie alert z zawartością, undefinedktóra najprawdopodobniej nie jest tym, czego chciałeś. Problem polega na tym, że istnieje tylko jedna zmienna ii odnoszą się do niej wszystkie trzy zamknięcia. Po zakończeniu pętli końcowa wartość iwynosi 3 i someArrary[3]wynosi undefined. Możesz obejść ten problem, wywołując inną funkcję, która stworzy dla ciebie zamknięcie. Lub korzystasz z narzędzia jQuery, które zrobi to za Ciebie:

var functions = [];
var someArray = [1, 2, 3];
$.each(someArray, function(item) {
    functions.push(function() { alert(item) });
});

Teraz, gdy wywołujesz funkcje, otrzymujesz trzy alerty o treści 1, 2 i 3, zgodnie z oczekiwaniami.

Ogólnie rzecz biorąc, nie można tego zrobić samodzielnie, ale dobrze jest mieć.

Uzyskaj dostęp do funkcji jQuery jak do tablicy

Dodaj / usuń klasę na podstawie wartości logicznej ...

function changeState(b)
{
    $("selector")[b ? "addClass" : "removeClass"]("name of the class");
}

Czy krótsza wersja ...

function changeState(b)
{
    if (b)
    {
        $("selector").addClass("name of the class");
    }
    else
    {
        $("selector").removeClass("name of the class");
    }
}

Nie tak wiele przypadków użycia. Niemniej jednak; Myślę, że jest fajnie :)

Aktualizacja

Na wypadek, gdybyś nie był typem do komentowania, ThiefMaster wskazuje, że toggleClass akceptuje wartość logiczną , która określa, czy klasa powinna zostać dodana czy usunięta. Jeśli chodzi o powyższy przykładowy kod, byłoby to najlepsze podejście ...

$('selector').toggleClass('name_of_the_class', true/false);

Aktualizacja:

Wystarczy umieścić ten skrypt na stronie, a otrzymasz konsolę Firebug, która wyskakuje w celu debugowania w dowolnej przeglądarce. Nie jest tak w pełni funkcjonalny, ale nadal jest całkiem pomocny! Pamiętaj, aby go usunąć, gdy skończysz.

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

Sprawdź ten link:

Od sztuczek CSS

Aktualizacja: Znalazłem coś nowego; jest to JQuery Hotbox.

JQuery Hotbox

Google obsługuje kilka bibliotek JavaScript w Google Code. Ładowanie go stamtąd oszczędza przepustowość i ładuje się szybko, ponieważ został już buforowany.

<script src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">  

    // Load jQuery  
    google.load("jquery", "1.2.6");  

    google.setOnLoadCallback(function() {  
        // Your code goes here.  
    });  

</script>

Lub

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

Możesz również użyć tego, aby określić, kiedy obraz jest w pełni załadowany.

$('#myImage').attr('src', 'image.jpg').load(function() {  
    alert('Image Loaded');  
});

„Console.info” firebuga, którego możesz użyć do zrzucenia wiadomości i zmiennych na ekran bez konieczności używania okien alarmowych. „console.time” pozwala łatwo skonfigurować licznik czasu, aby zawinąć sporo kodu i zobaczyć, ile to zajmuje.

console.time('create list');

for (i = 0; i < 1000; i++) {
    var myList = $('.myList');
    myList.append('This is list item ' + i);
}

console.timeEnd('create list');

Jeśli to możliwe, używaj metod filtrowania przez pseudo selektory, aby jQuery mógł używać querySelectorAll (co jest znacznie szybsze niż skwierczenie). Rozważ ten selektor:

$('.class:first')

Tego samego wyboru można dokonać za pomocą:

$('.class').eq(0)

Co musi być szybsze, ponieważ początkowy wybór „.class” jest zgodny z QSA

Usuń elementy z kolekcji i zachowaj łańcuchowość

Rozważ następujące:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

$("li").filter(function()
{
    var text = $(this).text();

    // return true: keep current element in the collection
    if (text === "One" || text === "Two") return true;

    // return false: remove current element from the collection
    return false;
}).each(function ()
{
    // this will alert: "One" and "Two"       
    alert($(this).text());
});

filter()Funkcji usuwa elementy z obiektu jQuery. W takim przypadku: wszystkie elementy li nie zawierające tekstu „One” lub „Two” zostaną usunięte.

Zmiana typu elementu wejściowego

Zetknąłem się z tym problemem, gdy próbowałem zmienić typ elementu wejściowego już dołączonego do DOM. Musisz sklonować istniejący element, wstawić go przed starym elementem, a następnie usunąć stary element. W przeciwnym razie to nie działa:

var oldButton = jQuery("#Submit");
var newButton = oldButton.clone();

newButton.attr("type", "button");
newButton.attr("id", "newSubmit");
newButton.insertBefore(oldButton);
oldButton.remove();
newButton.attr("id", "Submit");

Rozsądne użycie skryptów jQuery innych firm, takich jak sprawdzanie poprawności pól formularza lub parsowanie adresów URL. Warto zobaczyć, o co chodzi, abyś wiedział, kiedy następnym razem spotkasz się z wymaganiem JavaScript.

Łamanie linii i łańcuchowość

Podczas łączenia wielu połączeń w kolekcje ...

$("a").hide().addClass().fadeIn().hide();

Możesz zwiększyć czytelność dzięki podziałom linii. Lubię to:

$("a")
.hide()
.addClass()
.fadeIn()
.hide();

Użyj .stop (prawda, prawda), gdy uruchomienie animacji uniemożliwia jej powtórzenie. Jest to szczególnie przydatne w przypadku animacji najazdu.

$("#someElement").hover(function(){
    $("div.desc", this).stop(true,true).fadeIn();
},function(){
    $("div.desc", this).fadeOut();
});

Korzystanie z anonimowych funkcji wykonujących się w wywołaniu metody, takich jak .append()iteracja przez coś. TO ZNACZY:

$("<ul>").append((function ()
{
    var data = ["0", "1", "2", "3", "4", "5", "6"],
        output = $("<div>"),
        x = -1,
        y = data.length;

    while (++x < y) output.append("<li>" + info[x] + "</li>");

    return output.children();
}()));

Używam tego do iteracji przez rzeczy, które byłyby duże i niewygodne, aby wyrwać się z mojego łańcucha do budowania.

Obsługa atrybutów danych HTML5 na sterydach!

Funkcja danych została wspomniana wcześniej. Dzięki niemu możesz powiązać dane z elementami DOM.

Ostatnio zespół jQuery dodał obsługę niestandardowych atrybutów danych * HTML5 . I jakby to nie wystarczyło; zasilili siłą funkcję danych steroidami, co oznacza, że ​​możesz przechowywać złożone obiekty w postaci JSON, bezpośrednio w swoim znaczniku.

HTML:

<p data-xyz = '{"str": "hi there", "int": 2, "obj": { "arr": [1, 2, 3] } }' />

JavaScript:

var data = $("p").data("xyz");

data.str // "hi there"
typeof data.str // "string"

data.int + 2 // 4
typeof data.int // "number"

data.obj.arr.join(" + ") + " = 6" // "1 + 2 + 3 = 6"
typeof data.obj.arr // "object" ... Gobbles! Errrghh!