jQuery Tips dan Trik

Sintaksis

• Singkatan untuk acara siap pakai oleh roosteronacid
• Pemutusan saluran dan kemampuan rantai oleh roosteronacid
• Filter bersarang oleh Nathan Long
• Tembolok koleksi dan jalankan perintah pada baris yang sama oleh roosteronacid
• Berisi pemilih oleh roosteronacid
• Mendefinisikan properti pada pembuatan elemen oleh roosteronacid
• Mengakses fungsi jQuery seperti yang Anda lakukan pada array oleh roosteronacid
• Fungsi noConflict - Membebaskan variabel $ oleh Oli
• Isolate $ variable dalam mode noConflict oleh nickf
• Mode tanpa konflik oleh roosteronacid

Penyimpanan data

• Fungsi data - ikat data ke elemen oleh TenebrousX
• Atribut data HTML5 mendukung, pada steroid! oleh roosteronacid
• Plug-in metadata jQuery oleh Filip Dupanović

Optimasi

• Optimalkan kinerja penyeleksi kompleks oleh roosteronacid
• Parameter konteks oleh lupefiasco
• Simpan dan gunakan kembali pencarian oleh Nathan Long
• Membuat Elemen HTML dan menyimpan referensi, Memeriksa apakah ada elemen, Menulis penyeleksi Anda sendiri oleh Andreas Grech

Lain-lain

• Periksa indeks elemen dalam koleksi dengan redsquare
• Penangan acara langsung oleh TM
• Ganti fungsi anonim dengan fungsi bernama oleh ken
• Kerangka kerja Microsoft AJAX dan jembatan jQuery oleh Slace
• tutorial jQuery oleh egyamado
• Hapus elemen dari koleksi dan pertahankan rantai oleh roosteronacid
• Nyatakan $ this di awal fungsi anonim oleh Ben
• FireBug lite, plug-in Hotbox, memberi tahu kapan gambar telah dimuat dan Google CDN oleh Color Blend
• Penggunaan bijaksana atas skrip jQuery pihak ketiga oleh harriyott
• Fungsi masing-masing oleh Jan Zich
• Plug-in Formulir Ekstensi oleh Chris S
• Asinkron setiap fungsi oleh OneNerd
• Plug-in templat jQuery: menerapkan logika kompleks menggunakan fungsi render oleh roosteronacid

Membuat Elemen HTML dan menyimpan referensi

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 */

Memeriksa apakah ada elemen

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

Menulis penyeleksi Anda sendiri

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

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

data()Metode jQuery bermanfaat dan tidak dikenal. Ini memungkinkan Anda untuk mengikat data ke elemen DOM tanpa mengubah DOM.

Filter Bersarang

Anda dapat membuat sarang filter (seperti yang ditunjukkan di sini ).

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

Saya benar-benar bukan penggemar jalan $(document).ready(fn)pintas. Tentu saja mengurangi kode tetapi juga mengurangi cara keterbacaan kode. Ketika Anda melihat $(document).ready(...), Anda tahu apa yang Anda lihat. $(...)digunakan terlalu banyak cara lain untuk segera masuk akal.

Jika Anda memiliki banyak kerangka kerja yang dapat Anda gunakan jQuery.noConflict();seperti yang Anda katakan, tetapi Anda juga dapat menetapkan variabel yang berbeda untuk itu seperti ini:

var $j = jQuery.noConflict();

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

Sangat berguna jika Anda memiliki beberapa kerangka kerja yang dapat $x(...)dirubah ke- gaya panggilan.

Ooooh, jangan lupa metadata jQuery ! Fungsi data () bagus, tetapi harus diisi melalui panggilan jQuery.

Alih-alih melanggar kepatuhan W3C dengan atribut elemen khusus seperti:

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

Gunakan metadata sebagai gantinya:

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

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

Penangan Acara Langsung

Tetapkan pengendali acara untuk setiap elemen yang cocok dengan pemilih, bahkan jika itu ditambahkan ke DOM setelah memuat halaman awal:

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

Ini memungkinkan Anda untuk memuat konten melalui ajax, atau menambahkannya melalui javascript dan mengatur penangan event agar diatur dengan benar untuk elemen-elemen tersebut secara otomatis.

Demikian juga, untuk menghentikan penanganan acara langsung:

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

Penangan acara langsung ini memiliki beberapa keterbatasan dibandingkan dengan acara reguler, tetapi mereka bekerja dengan baik untuk sebagian besar kasus.

Untuk info lebih lanjut lihat Dokumentasi jQuery .

UPDATE: live()dan die()tidak digunakan lagi di jQuery 1.7. Lihat http://api.jquery.com/on/ dan http://api.jquery.com/off/ untuk fungsi penggantian yang serupa.

UPDATE2: live()telah lama ditinggalkan, bahkan sebelum jQuery 1.7. Untuk versi jQuery 1.4.2+ sebelum 1.7 digunakan delegate()dan undelegate(). The live()contoh ( $('button.someClass').live('click', someFunction);) dapat ditulis dengan menggunakan delegate()seperti itu: $(document).delegate('button.someClass', 'click', someFunction);.

Ganti fungsi anonim dengan fungsi bernama. Ini benar-benar mengungguli konteks jQuery, tetapi lebih berperan seperti ketika menggunakan jQuery, karena ketergantungannya pada fungsi callback. Masalah yang saya miliki dengan fungsi anonim sebaris, adalah bahwa mereka lebih sulit untuk di-debug (lebih mudah untuk melihat callstack dengan fungsi yang diberi nama berbeda, alih-alih 6 tingkat "anonim"), dan juga fakta bahwa beberapa fungsi anonim dalam waktu yang sama jQuery-chain bisa menjadi sulit untuk dibaca dan / atau dipertahankan. Selain itu, fungsi anonim biasanya tidak digunakan kembali; di sisi lain, mendeklarasikan fungsi yang bernama mendorong saya untuk menulis kode yang lebih mungkin untuk digunakan kembali.

Sebuah ilustrasi; dari pada:

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

Saya lebih memilih:

function onState(){
    // do something
}

function offState(){
    // do something else
}

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

Mendefinisikan properti pada pembuatan elemen

Di jQuery 1.4 Anda bisa menggunakan objek literal untuk mendefinisikan properti saat Anda membuat elemen:

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

... Anda bahkan dapat menambahkan gaya:

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

Berikut tautan ke dokumentasi .

alih-alih menggunakan alias berbeda untuk objek jQuery (saat menggunakan noConflict), saya selalu menulis kode jQuery saya dengan membungkusnya semua sebagai penutup. Ini bisa dilakukan di dokumen. Sudah berfungsi:

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

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

atau Anda dapat melakukannya seperti ini:

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

Saya menemukan ini menjadi yang paling portabel. Saya telah mengerjakan situs yang menggunakan Prototipe DAN jQuery secara bersamaan dan teknik ini telah menghindari semua konflik.

Periksa Indeks

jQuery memiliki .index tetapi sulit digunakan, karena Anda memerlukan daftar elemen, dan mengirimkan elemen yang Anda inginkan indeks dari:

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

Berikut ini jauh lebih mudah:

Jika Anda ingin mengetahui indeks suatu elemen dalam set (misalnya item daftar) dalam daftar tidak berurutan:

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

Singkatan untuk acara siap

Cara eksplisit dan bertele-tele:

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

Steno:

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

Pada fungsi jQuery inti, tentukan parameter konteks selain parameter pemilih. Menentukan parameter konteks memungkinkan jQuery untuk memulai dari cabang yang lebih dalam di DOM, bukan dari akar DOM. Diberikan DOM yang cukup besar, menentukan parameter konteks harus diterjemahkan ke keuntungan kinerja.

Contoh: Temukan semua input radio jenis dalam bentuk pertama dalam dokumen.

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

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

Tidak hanya jQuery, tetapi saya membuat jembatan kecil yang bagus untuk jQuery dan MS AJAX:

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

Sangat menyenangkan jika Anda melakukan banyak ASP.NET AJAX, karena jQuery didukung oleh MS sekarang memiliki jembatan yang bagus berarti sangat mudah untuk melakukan operasi jQuery:

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

Jadi contoh di atas tidak bagus, tetapi jika Anda menulis kontrol server ASP.NET AJAX, membuatnya mudah untuk memiliki jQuery di dalam implementasi kontrol sisi klien Anda.

Mengoptimalkan kinerja penyeleksi yang kompleks

Query subset dari DOM saat menggunakan penyeleksi kompleks secara drastis meningkatkan kinerja:

var subset = $("");

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

Berbicara tentang Tip dan Trik dan juga beberapa tutorial. Saya menemukan serangkaian tutorial ini ( Seri Video "jQuery for Absolute Beginners") oleh Jeffery Way SANGAT MEMBANTU.

Ini menargetkan para pengembang yang baru mengenal jQuery. Dia menunjukkan cara membuat banyak hal keren dengan jQuery, seperti animasi, Membuat dan Menghapus Elemen dan banyak lagi ...

Saya belajar banyak dari hal itu. Dia menunjukkan betapa mudahnya menggunakan jQuery. Sekarang saya menyukainya dan saya bisa membaca dan memahami skrip jQuery apa pun meskipun rumit.

Berikut adalah satu contoh yang saya suka " Ubah Ukuran Teks "

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- Styling 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>

Sangat merekomendasikan tutorial ini ...

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

Asinkron setiap fungsi ()

Jika Anda memiliki dokumen yang benar - benar kompleks di mana menjalankan fungsi jquery, masing-masing () mengunci browser selama iterasi, dan / atau Internet Explorer muncul pesan ' Anda ingin melanjutkan menjalankan skrip ini ', solusi ini akan menghemat hari.

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
};

Cara pertama Anda dapat menggunakannya sama seperti setiap ():

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

Sebuah 2 parameter opsional memungkinkan Anda menentukan kecepatan / delay di antara iterasi yang mungkin berguna untuk animasi ( contoh berikut akan menunggu 1 detik di antara iterasi ):

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

Ingat bahwa karena ini bekerja secara tidak sinkron, Anda tidak bisa mengandalkan iterasi yang harus diselesaikan sebelum baris kode berikutnya, misalnya:

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

Saya menulis ini untuk proyek internal, dan sementara saya yakin itu bisa diperbaiki, itu berhasil untuk apa yang kami butuhkan, jadi harap beberapa dari Anda merasa ini berguna. Terima kasih -

Syntactic shorthand-sugar-thing - Cache koleksi objek dan jalankan perintah pada satu baris:

Dari pada:

var jQueryCollection = $("");

jQueryCollection.command().command();

Saya lakukan:

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

Kasus penggunaan yang agak "nyata" bisa berupa sesuatu seperti ini:

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

Saya suka mendeklarasikan $thisvariabel di awal fungsi anonim, jadi saya tahu saya bisa mereferensi jQueried ini.

Seperti itu:

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

    // Other code
});

Simpan Objek jQuery dalam Variabel untuk Digunakan Kembali

Menyimpan objek jQuery ke variabel memungkinkan Anda menggunakannya kembali tanpa harus mencari kembali melalui DOM untuk menemukannya.

(Seperti yang disarankan oleh @Louis, saya sekarang menggunakan $ untuk menunjukkan bahwa variabel menyimpan objek 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...

Sebagai contoh yang lebih kompleks, misalkan Anda memiliki daftar makanan di toko, dan Anda hanya ingin menunjukkan makanan yang cocok dengan kriteria pengguna. Anda memiliki formulir dengan kotak centang, masing-masing berisi kriteria. Kotak centang memiliki nama seperti organicdan lowfat, dan produk memiliki kelas yang sesuai - .organic, dll.

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

Sekarang Anda dapat terus bekerja dengan objek jQuery itu. Setiap kali kotak centang diklik (untuk memeriksa atau menghapus centang), mulailah dari daftar induk makanan dan saring berdasarkan pada kotak yang dicentang:

// 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();
});

Tampaknya sebagian besar tips menarik dan penting telah disebutkan, jadi yang ini hanya tambahan kecil.

Tip kecil adalah fungsi jQuery.each (objek, callback) . Semua orang mungkin menggunakan fungsi jQuery.each (callback) untuk beralih pada objek jQuery itu sendiri karena itu alami. Fungsi utilitas jQuery.each (objek, callback) berulang di atas objek dan array. Untuk waktu yang lama, saya entah bagaimana tidak melihat apa yang bisa terjadi selain dari sintaks yang berbeda (saya tidak keberatan menulis semua loop fashion), dan saya agak malu bahwa saya menyadari kekuatan utamanya baru-baru ini.

Masalahnya adalah karena tubuh loop di jQuery.each (objek, callback) adalah fungsi , Anda mendapatkan ruang lingkup baru setiap kali dalam loop yang sangat nyaman ketika Anda membuat penutupan di loop.

Dengan kata lain, kesalahan umum yang umum terjadi adalah melakukan sesuatu seperti:

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

Sekarang, ketika Anda menjalankan fungsi dalam functionsarray, Anda akan mendapatkan peringatan tiga kali dengan konten undefinedyang kemungkinan besar tidak seperti yang Anda inginkan. Masalahnya adalah bahwa hanya ada satu variabel i, dan ketiga penutupan merujuk padanya. Ketika loop selesai, nilai akhir dari iadalah 3, dan someArrary[3]ini undefined. Anda bisa mengatasinya dengan memanggil fungsi lain yang akan membuat penutupan untuk Anda. Atau Anda menggunakan utilitas jQuery yang pada dasarnya akan melakukannya untuk Anda:

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

Sekarang, ketika Anda menjalankan fungsi Anda mendapatkan tiga peringatan dengan konten 1, 2 dan 3 seperti yang diharapkan.

Secara umum, tidak ada yang tidak bisa Anda lakukan sendiri, tetapi menyenangkan untuk dimiliki.

Akses fungsi jQuery seperti yang Anda lakukan pada array

Tambah / hapus kelas berdasarkan pada boolean ...

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

Apakah versi ...

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

Tidak banyak kasus penggunaan untuk ini. Tidak pernah kurang; Saya pikir itu rapi :)

Memperbarui

Jika Anda bukan tipe pembaca komentar, ThiefMaster menunjukkan bahwa toggleClass menerima nilai boolean , yang menentukan apakah kelas harus ditambahkan atau dihapus. Jadi sejauh contoh kode saya di atas berjalan, ini akan menjadi pendekatan terbaik ...

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

Memperbarui:

Cukup sertakan skrip ini di situs dan Anda akan mendapatkan konsol Firebug yang muncul untuk debugging di browser apa pun. Fitur tidak cukup lengkap tetapi masih cukup membantu! Ingatlah untuk menghapusnya saat Anda selesai.

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

Lihat tautan ini:

Dari Trik CSS

Pembaruan: Saya menemukan sesuatu yang baru; itu adalah JQuery Hotbox.

JQuery Hotbox

Google meng-host beberapa perpustakaan JavaScript di Google Code. Memuatnya dari sana menghemat bandwidth dan memuat cepat karena sudah di-cache.

<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>

Atau

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

Anda juga dapat menggunakan ini untuk mengetahui kapan suatu gambar dimuat penuh.

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

"Konsol.info" dari pembakar, yang dapat Anda gunakan untuk membuang pesan dan variabel ke layar tanpa harus menggunakan kotak peringatan. "console.time" memungkinkan Anda dengan mudah mengatur timer untuk membungkus banyak kode dan melihat berapa lama.

console.time('create list');

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

console.timeEnd('create list');

Gunakan metode penyaringan melalui penyeleksi semu jika memungkinkan sehingga jQuery dapat menggunakan querySelectorAll (yang jauh lebih cepat daripada mendesis). Pertimbangkan pemilih ini:

$('.class:first')

Pilihan yang sama dapat dilakukan dengan menggunakan:

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

Yang mana harus lebih cepat karena pemilihan awal '.class' kompatibel dengan QSA

Hapus elemen dari koleksi dan pertahankan rantai

Pertimbangkan yang berikut ini:

<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());
});

The filter()fungsi menghilangkan unsur-unsur dari objek jQuery. Dalam hal ini: Semua elemen-li yang tidak mengandung teks "Satu" atau "Dua" akan dihapus.

Mengubah jenis elemen input

Saya mengalami masalah ini ketika saya mencoba untuk mengubah jenis elemen input yang sudah terpasang ke DOM. Anda harus mengkloning elemen yang ada, memasukkannya sebelum elemen yang lama, dan kemudian menghapus elemen yang lama. Kalau tidak, itu tidak bekerja:

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");

Penggunaan skrip jQuery pihak ketiga secara bijak, seperti validasi bidang formulir atau penguraian url. Layak untuk mengetahui apa yang terjadi sehingga Anda akan tahu kapan Anda harus menghadapi persyaratan JavaScript berikutnya.

Line-break dan chainability

Saat menghubungkan beberapa panggilan pada koleksi ...

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

Anda dapat meningkatkan keterbacaan dengan linebreak. Seperti ini:

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

Gunakan .stop (benar, benar) ketika memicu animasi mencegahnya mengulangi animasi. Ini sangat membantu untuk animasi rollover.

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

Menggunakan fungsi anonim yang dijalankan sendiri dalam pemanggilan metode seperti .append()untuk mengulangi sesuatu. YAITU:

$("<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();
}()));

Saya menggunakan ini untuk beralih melalui hal-hal yang akan besar dan tidak nyaman untuk keluar dari rantai saya untuk membangun.

Atribut data HTML5 mendukung, pada steroid!

Itu data telah disebutkan sebelumnya. Dengannya, Anda dapat mengaitkan data dengan elemen DOM.

Baru-baru ini tim jQuery telah menambahkan dukungan untuk atribut data- * kustom HTML5 . Dan seolah itu tidak cukup; mereka telah mencekoki fungsi data dengan steroid, yang berarti Anda dapat menyimpan objek kompleks dalam bentuk JSON, langsung di markup Anda.

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!