jQuery İpuçları ve Püf Noktaları

Sözdizimi

• Roosteronacid tarafından hazırlanma olayı için stenografi
• Satır sonları ve chainability roosteronacid tarafından
• Nathan Long filtreleme yuvalama
• Bir koleksiyonu önbelleğe al ve roosteronacid ile aynı satırda komutları yürüt
• Roosteronasit seçici içerir
• Roosteronasit ile element oluşumundaki özellikleri tanımlama
• Roosteronacid ile bir dizi gibi jQuery işlevlerine erişin
• NoConflict işlevi - $ değişkenini Oli tarafından serbest bırakma
• $ Değişkenini noConflict modunda nickf ile ayırın
• Roosteronasit ile çatışma yok modu

Veri depolama

• Veri fonksiyonu - verileri TenebrousX tarafından elemanlara bağlama
• Steroidlerde HTML5 veri özellikleri desteği! roosteronacid tarafından
• Filip Dupanović'in jQuery meta veri eklentisi

Optimizasyon

• Roosteronasit ile karmaşık seçicilerin performansını optimize edin
• Lupefiasco tarafından içerik parametresi
• Nathan Long tarafından yapılan aramaları kaydedin ve tekrar kullanın
• Bir HTML Öğesi oluşturma ve referans tutma, Bir öğenin var olup olmadığını kontrol etme, Andreas Grech tarafından kendi seçicilerinizi yazma

Çeşitli

• Bir koleksiyondaki öğenin dizinini redsquare ile kontrol edin
• TM tarafından canlı etkinlik işleyicileri
• Anonim işlevleri ken tarafından adlandırılmış işlevlerle değiştirin
• Slace tarafından Microsoft AJAX çerçevesi ve jQuery köprüsü
• egyamado tarafından jQuery öğreticileri
• Bir koleksiyondaki elemanları çıkarın ve roosteronasit ile zincirlenebilirliği koruyun
• Ben'in anonim işlevlerinin başında bunu $ ilan et
• FireBug lite, Hotbox eklentisi, bir resmin ne zaman yüklendiğini ve Color Blend tarafından Google CDN'yi bildirin
• Harriyott tarafından üçüncü taraf jQuery betiklerinin mantıklı kullanımı
• Her fonksiyon Jan Zich tarafından
• Form Uzantıları eklentisi Chris S
• OneNerd tarafından her bir işlev zaman uyumsuz
• JQuery şablon eklentisi: roosteronacid ile render fonksiyonlarını kullanarak karmaşık mantık uygulama

HTML Öğesi oluşturma ve referans tutma

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

Bir öğenin var olup olmadığını kontrol etme

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

Kendi seçicilerinizi yazma

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

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

jQuery'nin data()yöntemi faydalıdır ve iyi bilinmemektedir. DOM'yi değiştirmeden verileri DOM öğelerine bağlamanızı sağlar.

Filtreleri Yerleştirme

Filtreleri iç içe yerleştirebilirsiniz ( burada nickf'in gösterdiği gibi ).

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

Gerçekten $(document).ready(fn)kısayolun hayranı değilim . Elbette kodu keser, ancak kodun okunabilirliğini de azaltır. Gördüğün zaman $(document).ready(...), neye baktığını biliyorsun. $(...)hemen anlam ifade etmek için çok daha fazla şekilde kullanılır.

jQuery.noConflict();Dediğiniz gibi kullanabileceğiniz birden fazla çerçeveniz varsa, bunun için farklı bir değişken de atayabilirsiniz:

var $j = jQuery.noConflict();

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

$x(...)Stil çağrılarına kaynatılabilen birkaç çerçeveniz varsa çok yararlıdır .

Ooooh, jQuery meta verilerini unutmayalım ! Data () işlevi mükemmeldir, ancak jQuery çağrılarıyla doldurulması gerekir.

W3C gibi özel öğe niteliklerine uyumu kırmak yerine:

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

Bunun yerine meta verileri kullanın:

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

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

Canlı Etkinlik İşleyicileri

İlk sayfa yüklemesinden sonra DOM'a eklense bile, seçiciyle eşleşen herhangi bir öğe için bir olay işleyicisi ayarlayın :

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

Bu, içeriği ajax aracılığıyla yüklemenizi veya bunları javascript yoluyla eklemenizi ve olay işleyicilerin bu öğeler için otomatik olarak doğru şekilde ayarlanmasını sağlar.

Benzer şekilde, canlı etkinlik işlemeyi durdurmak için:

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

Bu canlı etkinlik işleyicilerinin normal etkinliklerle karşılaştırıldığında birkaç sınırlaması vardır, ancak çoğu durumda büyük ölçüde çalışırlar.

Daha fazla bilgi için jQuery Dokümantasyonuna bakın .

GÜNCELLEME: live()ve die()jQuery 1.7'de kullanımdan kaldırılmıştır. Benzer değiştirme işlevleri için bkz. Http://api.jquery.com/on/ ve http://api.jquery.com/off/ .

GÜNCELLEME2: live()jQuery 1.7'den önce bile uzun süre kullanımdan kaldırıldı. 1.7'den önceki sürümler için jQuery 1.4.2+ delegate()ve undelegate(). live()Örnek ( $('button.someClass').live('click', someFunction);) kullanılarak yeniden olabilir delegate()böyle: $(document).delegate('button.someClass', 'click', someFunction);.

Anonim işlevleri adlandırılmış işlevlerle değiştirin. Bu gerçekten jQuery bağlamının üstündedir, ancak geri arama işlevlerine güvenmesi nedeniyle jQuery kullanırken daha fazla görünmektedir. Satır içi anonim işlevlerle yaşadığım sorunlar, hata ayıklaması daha zor (6 ad "anonim" yerine farklı adlandırılmış işlevlerle bir çağrıya bakmak çok daha kolay) ve aynı zamanda birden çok anonim işlevin jQuery zinciri okunması ve / veya bakımı zorlaşabilir. Ayrıca, anonim işlevler genellikle yeniden kullanılmaz; Öte yandan, adlandırılmış işlevlerin bildirilmesi beni yeniden kullanılması daha olası bir kod yazmaya teşvik ediyor.

Bir örnek; onun yerine:

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

Tercih ederim:

function onState(){
    // do something
}

function offState(){
    // do something else
}

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

Eleman oluşturmada özellikleri tanımlama

JQuery 1.4 sürümünde, bir öğe oluştururken özellikleri tanımlamak için bir nesne değişmezi kullanabilirsiniz:

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

... stiller bile ekleyebilirsiniz:

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

İşte belgelere bir bağlantı .

jQuery nesnesi için farklı bir takma ad kullanmak yerine (noConflict kullanılırken), her zaman jQuery kodumu her şeyi bir kapanışta sararak yazarım. Bu, document.ready işlevinde yapılabilir:

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

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

alternatif olarak şu şekilde yapabilirsiniz:

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

Bunu en taşınabilir buluyorum. Prototip ve jQuery'yi aynı anda kullanan bir sitede çalışıyorum ve bu teknikler tüm çatışmalardan kaçındı.

Dizini kontrol edin

jQuery .index'e sahiptir, ancak öğelerin listesine ihtiyacınız olduğu ve dizinini istediğiniz öğeyi geçirdiğiniz için kullanmak bir acıdır:

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

Aşağıdakiler çok daha kolay:

Sıralanmamış bir liste içindeki bir kümedeki öğenin dizinini (ör. Liste öğeleri) bilmek istiyorsanız:

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

Hazır etkinlik için stenografi

Açık ve ayrıntılı yol:

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

Stenografi:

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

Temel jQuery işlevinde, selector parametresine ek olarak context parametresini belirtin. Context parametresini belirtmek, jQuery'nin DOM kökünden ziyade DOM'daki daha derin bir daldan başlamasına izin verir. Yeterince büyük bir DOM verildiğinde, context parametresini belirtmek performans kazanımlarına dönüşmelidir.

Örnek: Belgedeki ilk formdaki tüm radyo türü girişlerini bulur.

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

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

Sadece jQuery değil, ama jQuery ve MS AJAX için güzel bir küçük köprü yaptım:

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

Çok sayıda ASP.NET AJAX yapıyorsanız gerçekten güzel, çünkü jQuery MS tarafından destekleniyor, şimdi güzel bir köprüye sahip olmak jQuery işlemleri yapmanın gerçekten kolay olduğu anlamına geliyor:

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

Yukarıdaki örnek harika değildir, ancak ASP.NET AJAX sunucu denetimleri yazıyorsanız, istemci tarafı denetim uygulamanızın içinde jQuery olmasını kolaylaştırır.

Karmaşık seçicilerin performansını optimize edin

Karmaşık seçiciler kullanırken DOM'un bir alt kümesini sorgulama performansı önemli ölçüde artırır:

var subset = $("");

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

İpuçları ve püf noktaları ve bazı öğreticilerden bahsetmek. Ben öğreticiler bu dizi (buldum “Mutlak başlayanlar için jQuery” Video Dizisi) tarafından Jeffery Way ÇOK YARARLI bulunmaktadır.

JQuery'de yeni olan geliştiricileri hedefler. Animasyon, Elemanları Oluşturma ve Kaldırma ve daha fazlası gibi jQuery ile birçok harika şeyin nasıl oluşturulacağını gösterir ...

Ben ondan çok şey öğrendim. JQuery kullanmanın ne kadar kolay olduğunu gösterir. Şimdi onu seviyorum ve karmaşık olsa bile herhangi bir jQuery komut dosyasını okuyabilir ve anlayabilirim.

İşte " Metni Yeniden Boyutlandırma "

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- CSS Şekillendirme ...

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

Bu eğiticileri şiddetle tavsiye ederim ...

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

Eşzamansız each () işlevi

Jquery çalıştırmanın gerçekten karmaşık belgeleriniz varsa , her () işlevi yineleme sırasında tarayıcıyı kilitler ve / veya Internet Explorer ' bu komut dosyasını çalıştırmaya devam etmek istiyor musunuz? ' İletisini açar , bu çözüm günü kurtaracaktır.

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

Bunu kullanmanın ilk yolu tıpkı her biri gibi ():

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

İsteğe bağlı bir 2. parametre , animasyonlar için yararlı olabilecek yinelemeler arasındaki hız / gecikmeyi belirlemenizi sağlar ( aşağıdaki örnek yinelemeler arasında 1 saniye bekleyecektir ):

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

Bu, eşzamansız olarak çalıştığı için, bir sonraki kod satırından önce tamamlanacak yinelemelere güvenemeyeceğinizi unutmayın, örneğin:

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

Bunu dahili bir proje için yazdım ve geliştirilebileceğinden emin olduğum halde, ihtiyacımız olan şey için çalıştı, umarım bazılarınız faydalı buluyor. Teşekkürler -

Sözdizimsel kestirme şeker - Bir nesne koleksiyonunu önbelleğe alın ve komutları tek bir satırda yürütün:

Onun yerine:

var jQueryCollection = $("");

jQueryCollection.command().command();

Yaparım:

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

Biraz "gerçek" bir kullanım durumu şu satırlarda olabilir:

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

$thisAnonim işlevlerin başında bir değişken bildirmeyi seviyorum , bu yüzden bu bir jQueried başvurabilir biliyorum.

Şöyle ki:

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

    // Other code
});

JQuery Nesnelerini Yeniden Kullanmak İçin Değişkenlere Kaydetme

Bir jQuery nesnesini bir değişkene kaydetmek, onu bulmak için DOM'da geri arama yapmak zorunda kalmadan onu yeniden kullanmanızı sağlar.

(@Louis'in önerdiği gibi, artık bir değişkenin jQuery nesnesini tuttuğunu belirtmek için $ kullanıyorum.)

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

Daha karmaşık bir örnek olarak, bir mağazada yiyeceklerin bir listesinin olduğunu ve yalnızca bir kullanıcının ölçütlerine uyanları göstermek istediğinizi varsayalım. Her biri bir ölçüt içeren onay kutularına sahip bir formunuz var. Onay kutularının organicve gibi adları vardır ve lowfatürünlerin karşılık gelen sınıfları vardır - .organicvb.

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

Artık bu jQuery nesnesiyle çalışmaya devam edebilirsiniz. Bir onay kutusuna her tıklandığında (işaretlemek veya işaretini kaldırmak için), ana gıda listesinden başlayın ve işaretli kutulara göre filtreleyin:

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

İlginç ve önemli ipuçlarının çoğundan daha önce bahsedilmiş gibi görünüyor, bu yüzden bu sadece küçük bir ekleme.

Küçük ipucu jQuery.each (nesne, geri arama) işlevidir. Herkes doğal olduğu için jQuery nesnesinin kendisini yinelemek için muhtemelen jQuery.each (geri arama) işlevini kullanıyor. JQuery.each (object, callback) yardımcı programı işlevi, nesneler ve diziler üzerinden yinelenir. Uzun bir süre boyunca, bir şekilde farklı bir sözdizimi dışında ne olabileceğini görmedim (tüm moda döngülerini yazmayı umursamıyorum) ve ana gücünü sadece son zamanlarda gerçekleştirdiğim için biraz utanıyorum.

Mesele şu ki , jQuery.each (nesne, geri arama) içindeki döngü gövdesi bir işlev olduğundan , döngüde her seferinde yeni bir kapsam elde edersiniz , bu da özellikle döngüde kapaklar oluşturduğunuzda uygundur .

Başka bir deyişle, tipik bir yaygın hata şunun gibi bir şey yapmaktır:

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

Şimdi, functionsdizideki işlevleri çağırdığınızda undefined, büyük olasılıkla istediğiniz şey olmayan içerikle üç kez uyarı alacaksınız . Sorun şu ki, sadece bir değişken var ive her üç kapanış da buna işaret ediyor. Döngü bittiğinde, son değeri i3 ve someArrary[3]olur undefined. Kapanışı sizin için yaratacak başka bir işlev çağırarak bunun etrafında çalışabilirsiniz. Veya temelde sizin için yapacağı jQuery yardımcı programını kullanın:

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

Şimdi, fonksiyonları çağırdığınızda beklendiği gibi 1, 2 ve 3 içerikli üç uyarı alırsınız.

Genel olarak, kendiniz yapamayacağınız bir şey değil, ama olması güzel.

JQuery işlevlerine bir dizi gibi erişin

Boole tabanlı bir sınıf ekleme / kaldırma ...

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

Kısa versiyonu ...

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

Bunun için pek çok kullanım durumu değil. Asla daha az; Bence temiz :)

Güncelleme

Yorum okuma türü olmadığınızda ThiefMaster , toggleClass öğesinin bir sınıfın eklenip kaldırılmayacağını belirleyen bir boolean değeri kabul ettiğini belirtir . Yukarıdaki örnek kodum kadarıyla, bu en iyi yaklaşım olacaktır ...

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

Güncelleme:

Bu komut dosyasını siteye dahil ettiğinizde, herhangi bir tarayıcıda hata ayıklamak için açılan bir Firebug konsolu alırsınız. Tam özellikli değil ama yine de oldukça yararlı! İşiniz bittiğinde kaldırmayı unutmayın.

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

Bu bağlantıya göz atın:

CSS Hilelerinden

Güncelleme: Yeni bir şey buldum; onun JQuery Hotbox.

JQuery Hotbox

Google, Google Code'da birkaç JavaScript kitaplığı barındırır. Oradan yüklenmesi bant genişliğinden tasarruf sağlar ve zaten önbelleğe alınmış olduğundan hızlı yüklenir.

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

Veya

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

Bunu, bir görüntünün tam olarak ne zaman yüklendiğini söylemek için de kullanabilirsiniz.

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

Uyarı kutularını kullanmak zorunda kalmadan iletileri ve değişkenleri ekrana dökmek için kullanabileceğiniz kundakçı "console.info". "console.time", bir grup kodu sarmak ve ne kadar sürdüğünü görmek için kolayca bir zamanlayıcı ayarlamanızı sağlar.

console.time('create list');

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

console.timeEnd('create list');

JQuery, querySelectorAll (cızırtıdan çok daha hızlıdır) kullanabilmesi için mümkünse sözde seçiciler üzerinde filtreleme yöntemleri kullanın. Bu seçiciyi düşünün:

$('.class:first')

Aynı seçim aşağıdakiler kullanılarak yapılabilir:

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

İlk '.class' seçimi QSA uyumlu olduğundan daha hızlı olmalıdır

Bir koleksiyondaki öğeleri kaldırın ve zincirlenebilirliği koruyun

Aşağıdakileri göz önünde bulundur:

<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()İşlev jQuery nesnesi elemanı çıkarır. Bu durumda: "Bir" veya "İki" metnini içermeyen tüm li-elemanları kaldırılacaktır.

Bir giriş öğesinin türünü değiştirme

Ben zaten DOM bağlı bir giriş elemanı türünü değiştirmeye çalışırken bu sorunla karşılaştım. Mevcut öğeyi kopyalamanız, eski öğeden önce eklemeniz ve sonra eski öğeyi silmeniz gerekir. Aksi takdirde çalışmaz:

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

Form alanı doğrulaması veya URL ayrıştırma gibi üçüncü taraf jQuery komut dosyalarının mantıklı kullanımı. Ne hakkında olduğunu görmeye değer, böylece bir sonraki JavaScript gereksinimi ile karşılaştığınızda bunu öğreneceksiniz.

Satır kesmeleri ve zincirlenebilirlik

Koleksiyonlarda birden fazla çağrıyı zincirlerken ...

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

Çizgi çizgileri ile okunabilirliği artırabilirsiniz. Bunun gibi:

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

Bir animasyonu tetiklerken .stop (true, true) öğesini kullanın, animasyonu animasyonu tekrarlamasını önler. Bu özellikle fareyle üzerine gelme animasyonları için yararlıdır.

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

Kendini yürüten anonim işlevleri bir yöntem çağrısında bir .append()şeyi yineleme gibi kullanmak. IE:

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

Bunu, inşa etmek için zincirlerimden kopmak için büyük ve rahatsız edici olan şeyleri tekrarlamak için kullanıyorum.

Steroidlerde HTML5 veri özellikleri desteği!

Veri fonksiyonu daha önce bahsedilmiştir. Bununla, verileri DOM öğeleriyle ilişkilendirebilirsiniz.

Son zamanlarda jQuery ekibi HTML5 özel data- * özellikleri için destek ekledi . Ve sanki bu yeterli değildi; veri işlevini steroidlerle zorla beslediler, bu da karmaşık nesneleri JSON biçiminde doğrudan işaretlemenizde depolayabileceğiniz anlamına gelir.

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!