jQuery ipuçları ve püf noktaları

sözdizimi

Veri Depolama

optimizasyonu

çeşitli

507
tarihinde sordu roosteronacid 2008-10-08 17:06:00
kaynak

30 ответов

bir HTML öğesi oluşturma ve bir başvuru tutmak

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

olup olmadığını kontrol etme
if ($("#someDiv").length)
{
    // It exists...
}



kendi seçicilerinizi yazmak

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

$(".box:over100pixels").click(function ()
{
    alert("The element you clicked is over 100 pixels height");
});
252
cevap Andreas Grech 2011-03-23 21:51:14
kaynak

jQuery data() yöntemi yararlı ve iyi bilinen değil. Bu DOM değiştirmeden DOM öğelerine veri bağlamak için izin verir.

111
cevap clawr 2008-12-20 06:08:59
kaynak

Yuvalama Filtreleri

filtreleri yerleştirebilirsiniz ( nickf burada gösterdi).

.filter(":not(:has(.selected))")
95
cevap Nathan Long 2017-05-23 14:33:26
kaynak

$(document).ready(fn) kısayolunun hayranı değilim. Tabii ki kodu keser ama aynı zamanda kod okunabilirliği üzerinde yol aşağı keser. $(document).ready(...) gördüğünüzde, neye baktığını biliyorsunuz. $(...) , hemen mantıklı olmak için çok fazla başka yolla kullanılır.

birden fazla çerçeveniz varsa, jQuery.noConflict(); kelimesini de kullanabilirsiniz, ancak bunun için aşağıdaki gibi farklı bir değişken atayabilirsiniz:

var $j = jQuery.noConflict();

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

çok $x(...) stil çağrılarına kadar kaynatılabilen birkaç çerçeveniz varsa kullanışlıdır.

80
cevap Oli 2011-03-23 21:52:13
kaynak

Ooooh, jQuery' unutmayalım ! Data () işlevi harika, ancak jQuery çağrıları yoluyla doldurulması gerekiyor.

gibi özel öğe öznitelikleri ile W3C uyumluluğu kırma yerine:

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

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>
77
cevap Filip Dupanović 2010-06-01 15:12:12
kaynak

Canlı Etkinlik İşleyicileri

için bir olay işleyicisi ayarlayın herhangi bir ilk sayfa yükünden sonra DOM'A eklense bile, bir seçiciyle eşleşen öğe:

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

bu, ajax aracılığıyla içerik yüklemenize veya javascript aracılığıyla eklemenize ve olay işleyicilerinin bu öğeler için otomatik olarak düzgün bir şekilde ayarlanmasına izin verir.

aynı şekilde, canlı olay işleme durdurmak için:

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

bu canlı etkinlik işleyicileri, düzenli etkinliklere kıyasla birkaç sınırlamaya sahiptir, ancak vakaların çoğunluğu için mükemmel çalışırlar.

daha fazla bilgi için jQuery belgelerine bakın .

güncelleme: live() ve die() jQuery 1.7'de kullanımdan kaldırılmıştır. Bkz. http://api.jquery.com/on/ ve http://api.jquery.com/off / için benzer değiştirme işlevselliği.

UPDATE2: live() , jQuery 1.7'den önce bile uzun süre kullanımdan kaldırıldı. Kullanım delegate() ve undelegate() önce sürümleri jQuery 1.4.2+ için . live() örneği ( $('button.someClass').live('click', someFunction); ) delegate() kullanılarak yeniden yazılabilir: $(document).delegate('button.someClass', 'click', someFunction); .

74
cevap TM. 2012-01-10 21:01:46
kaynak

isimsiz işlevleri adlandırılmış işlevlerle değiştirin. Bu gerçekten jQuery bağlamını supercedes, ancak geri arama işlevlerine olan güveninden dolayı jQuery kullanırken olduğu gibi görünüyor. Satır içi anonim işlevlerle sahip olduğum sorunlar, hata ayıklamak için daha zor oldukları (isimsiz işlevlere sahip bir callstack'e bakmak çok daha kolay, bunun yerine 6 "anonim" Seviyeleri) ve aynı jQuery zinciri içindeki birden fazla anonim işlevin de olabileceği gerçeğidir okumak ve/veya korumak için beceriksiz. Buna ek olarak, anonim işlevler genellikle yeniden kullanılmaz; öte yandan, adlandırılmış işlevler bildirmek beni yeniden kullanılmaya daha muhtemel kod yazmamı teşvik eder.

bir illüstrasyon; 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 );
46
cevap ken 2009-03-30 12:17:40
kaynak

eleman oluşturma özelliklerini tanımlama

jQuery 1.4 bir öğe oluşturduğunuzda özelliklerini tanımlamak için bir nesne değişmez değeri kullanabilirsiniz:

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

... Hatta stilleri ekleyebilirsiniz:

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

işte belgelerine bağlantı .

45
cevap roosteronacid 2010-10-19 14:23:49
kaynak

jQuery nesnesi için farklı bir takma ad kullanmak yerine (noconflict kullanırken), her zaman jQuery kodumu bir kapanışta sararak yazıyorum. Bu belgede yapılabilir.hazır fonksiyon:

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 olarak görüyorum. Hem prototip hem de jQuery kullanan bir sitede çalışıyorum ve bu teknikler tüm çatışmalardan kaçındı.

43
cevap nickf 2008-12-20 06:35:40
kaynak

dizin kontrol

jQuery var .dizin ancak, öğelerin listesine ihtiyacınız olduğu için kullanmak ve dizinini istediğiniz öğeye geçmek için bir acıdır:

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

aşağıdakiler çok daha kolaydır:

sıralanmamış bir liste içinde bir dizi (örneğin liste öğeleri) içindeki bir öğenin dizinini bilmek istiyorsanız:

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});
39
cevap redsquare 2009-10-05 07:53:16
kaynak

hazır etkinlik için Shorthand

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

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

shorthand:

$(function ()
{
    // ...
});
23
cevap cllpse 2010-02-07 23:07:40
kaynak
Çekirdek jQuery işlevinde

, seçici parametresine ek olarak bağlam parametresini belirtin. Bağlam parametresinin belirtilmesi, JQUERY'NİN DOM kökünden ziyade DOM'DAKİ daha derin bir daldan başlamasına izin verir. Yeterince büyük bir DOM göz önüne alındığında, bağlam parametresinin belirtilmesi performans kazançlarına tercüme edilmelidir.

örnek: belgedeki ilk formdaki radyo türünün tüm girdilerini bulur.

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

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

22
cevap lupefiasco 2010-11-12 05:29:37
kaynak

gerçekten 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 şey yapıyorsanız gerçekten güzel ASP.NET AJAX, jQuery MS tarafından desteklendiğinden şimdi güzel bir köprüye sahip olmak, jQuery işlemlerini yapmak gerçekten kolay olduğu anlamına geliyor:

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

yani yukarıdaki örnek harika değil, ama yazıyorsanız ASP.NET AJAX sunucu denetimleri, istemci tarafı denetimi içinde jQuery olmasını kolaylaştırır uygulanış.

21
cevap Aaron Powell 2008-10-10 16:58:24
kaynak

karmaşık seçicilerin performansını Optimize et

karmaşık seçicileri kullanırken DOM alt kümesini sorgulamak performansı büyük ölçüde artırır:

var subset = $("");

$("input[value^='']", subset);
20
cevap cllpse 2009-06-20 00:26:42
kaynak

ipuçları ve püf noktaları ve yanı sıra bazı öğreticiler Konuşma. Ben öğreticiler bu dizi bulundu ( "mutlak başlayanlar için jQuery" Video Serisi) tarafından Jeffery Way çok yararlıdır.

bu jQuery için yeni olan geliştiriciler hedefliyor. Animasyon, oluşturma ve öğeleri kaldırma ve daha fazlası gibi jQuery ile birçok serin şeyler oluşturmak için nasıl gösterir...

ondan çok şey öğrendim. Nasıl olduğunu gösteriyor. jQuery kullanımı kolay. Şimdi seviyorum ve karmaşık olsa bile herhangi bir jQuery komut dosyasını okuyabilir ve anlayabiliyorum.

işte sevdiğim bir örnek " 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 Styling...

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

son derece bunları tavsiye öğreticiler...

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

19
cevap egyamado 2010-09-03 23:04:27
kaynak

asenkron her () işlevi

gerçekten karmaşık belgeleriniz varsa jQuery her biri () işlevi iterasyon sırasında tarayıcıyı kilitler ve / veya Internet Explorer ' bu komut dosyasını mesajı çalıştırmaya devam etmek istiyor musunuz, bu çözüm günü kurtaracak.

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



kullanabileceğiniz ilk yol, her biri gibi ():

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

bir isteğe bağlı 2. parametre, animasyonlar için yararlı olabilecek yinelemeleri arasındaki hız/gecikmeyi belirtmenizi sağlar ( aşağıdaki örnek, yinelemeleri arasında 1 saniye bekler ):

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

bunun zaman uyumsuz olarak çalıştığından, örneğin, bir sonraki kod satırından önce tamamlanacak yinelemeler:

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



bunu bir iç proje için yazdım ve geliştirilebileceğinden eminim, ihtiyacımız olan şey için çalıştı, bu yüzden bazılarınızın yararlı olduğunu umuyoruz. Teşekkürler -

19
cevap OneNerd 2011-04-20 12:39:04
kaynak

sözdizimsel shorthand-sugar-thing-bir nesne koleksiyonunu önbelleğe alın ve bir satırda komutları çalıştırın:

yerine:

var jQueryCollection = $("");

jQueryCollection.command().command();

I do:

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

biraz "gerçek" kullanım kılıfı bu satırlar boyunca bir şey olabilir:

var cache = $("#container div.usehovereffect").mouseover(function ()
{
    cache.removeClass("hover").filter(this).addClass("hover");
});
18
cevap roosteronacid 2011-06-27 18:20:38
kaynak

anonim işlevlerin başında bir $this değişkeni bildirmeyi seviyorum, bu yüzden bir jqueried'e başvurabileceğimi biliyorum.

benzeri:

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

    // Other code
});
15
cevap Ben 2011-03-07 21:31:42
kaynak

jQuery nesnelerini yeniden kullanım için değişkenlere Kaydet

bir jQuery nesnesini bir değişkene kaydetmek, bulmak için DOM üzerinden geri aramak zorunda kalmadan yeniden kullanmanızı sağlar.

(@Louis'in önerdiği gibi, şimdi bir değişkenin bir 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 gıdaların bir listesi olduğunu ve yalnızca bir kullanıcının kriterlerine uyan ürünleri göstermek istediğinizi söyleyin. Bir onay kutuları ile form, bir ölçüt içeren her biri. Onay kutularının organic ve lowfat gibi isimleri vardır ve ürünlerin karşılık gelen sınıfları vardır - .organic , vb.

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

Şimdi bu jQuery nesnesiyle çalışmaya devam edebilirsiniz. Bir onay kutusu tıklandığında (kontrol etmek veya işaretini kaldırmak için) her zaman, gıdaların ana listesinden başlayın ve kontrol kutularına 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();
});
14
cevap Nathan Long 2011-11-08 21:13:38
kaynak

bu ilginç ve önemli ipuçları çoğu zaten söz edilmiştir gibi görünüyor, bu yüzden bu sadece küçük bir ektir.

küçük ucu jQuery olduğunu.her (nesne, geri arama) işlevi. Herkes muhtemelen jQuery kullanıyor.her (geri arama) işlevi doğal olduğu için jQuery nesnesinin kendisi üzerinde yineleme yapmak. JQuery.her (object, callback) yardımcı programı işlevi nesneler ve diziler üzerinde yineler. Uzun zamandır, bir şekilde farklı bir sözdizimden ayrı olarak ne olabileceğini görmedim (tüm moda döngüler yazmayı umursamıyorum) ve son zamanlarda ana gücünü fark ettiğimden biraz utanıyorum.

şey jQuery döngü gövdesi beri olmasıdır.her(nesne, geri arama) işlevidir, yeni kapsam oluşturduğunuzda özellikle uygun olan döngüde her seferinde bir alırsınız. döngüde.

başka bir deyişle, tipik bir yaygın hata 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, functions dizisindeki işlevleri çağırdığınızda, undefined içeriğiyle üç kez uyarı alırsınız; bu da büyük olasılıkla istediğiniz şey değildir. Sorun şu ki, sadece bir değişken i var ve üç kapak da buna atıfta bulunuyor. Döngü tamamlandığında, i son değeri 3 ve someArrary[3] undefined dir . Sizin için kapatma yaratacak başka bir işlev çağırarak etrafında çalışabilirsiniz. Veya temel olarak sizin için yapacak olan jQuery yardımcı programını kullanırsınız:

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

şimdi, işlevleri çağırdığınızda, beklendiği gibi içerik 1, 2 ve 3 ile üç uyarı alırsınız.

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

11
cevap Jan Zich 2009-10-21 11:42:09
kaynak

bir dizi

/boolean dayalı bir sınıf Ekle...

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

kısa sürümüdür...

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 düzgün :)



güncelleme

sadece durumda yorum okuma türü değil, ThiefMaster toggleClass bir Boole değeri kabul eder ve bu da bir sınıfın eklenip eklenmeyeceğini veya kaldırılmayacağını belirler. Yukarıdaki örnek kodumun gittiği kadarıyla, bu en iyi yaklaşım olacaktır...

$('selector').toggleClass('name_of_the_class', true/false);
11
cevap roosteronacid 2011-04-20 12:31:10
kaynak

güncelleme:

siteye bu komut dosyasını ekleyin ve herhangi bir tarayıcıda hata ayıklama için açılan bir Firebug konsolu alırsınız. Tam özellikli değil ama hala 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ıyı kontrol edin:

dan CSS Tricks

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

JQuery Hotbox

Google, Google kodunda birkaç JavaScript kütüphanesini barındırıyor. Oradan yükleme bant genişliğini kaydeder ve zaten önbelleğe alınmış olduğundan hızlı yükler.

<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 yüklendiğini söylemek için de kullanabilirsiniz.

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

"console.info" mesajları ve değişkenleri dökümü için kullanabileceğiniz firebug uyarı kutuları kullanmak zorunda kalmadan ekrana. "konsol.time", bir grup kodu sarmak ve ne kadar sürdüğünü görmek için 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');
9
cevap Colour Blend 2009-12-28 12:32:07
kaynak

, jQuery queryselectorall'ı (sizzle'dan çok daha hızlı olan) kullanabilmesi için mümkün olduğunda sahte seçiciler üzerinde filtreleme yöntemleri kullanır. Bu seçiciyi düşünün:

$('.class:first')

aynı seçim kullanılarak yapılabilir:

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

ilk seçimi nedeniyle daha hızlı olmalıdır'.sınıf 'qsa uyumlu

9
cevap Ralph Holzmann 2010-12-03 21:16:37
kaynak

öğeleri bir koleksiyondan çıkarın ve zincirlenebilirliği koruyun

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

<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() işlevi öğeleri jQuery nesnesinden kaldırır. Bu durumda: "bir" veya "iki" metnini içermeyen tüm li-elemanları kaldırılacaktır.

9
cevap roosteronacid 2011-03-23 21:54:42
kaynak

giriş elemanının türünü değiştirme

zaten DOM'A bağlı bir giriş öğesinin türünü değiştirmeye çalışırken bu soruna rastladım. Varolan öğeyi klonlamanız, eski öğenin önüne yerleştirmeniz ve ardından eski öğeyi silmeniz gerekir. Aksi halde çalışmıyor:

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");
8
cevap Vivin Paliath 2010-02-08 00:04:21
kaynak

form alanı doğrulama veya url ayrıştırma gibi üçüncü taraf jQuery komut dosyalarının akıllıca kullanılması. Ne hakkında olduğunu görmeye değer, böylece bir JavaScript gereksinimi ile karşılaştığınızda bileceksiniz.

7
cevap harriyott 2008-10-08 17:46:12
kaynak

Satır sonları ve chainability

koleksiyonları üzerinde birden fazla çağrı zincirleme zaman...

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

linebreaks ile okunabilirliği artırabilir. Şöyle:

$("a")
.hide()
.addClass()
.fadeIn()
.hide();
7
cevap cllpse 2010-02-07 23:10:07
kaynak

kullanın .bir animasyonu tetiklerken dur(true,true) animasyonu tekrar etmesini engeller. Bu rollover animasyonlar için özellikle yararlıdır.

$("#someElement").hover(function(){
    $("div.desc", this).stop(true,true).fadeIn();
},function(){
    $("div.desc", this).fadeOut();
});
7
cevap Kenneth J 2010-05-06 03:27:20
kaynak

gibi bir yöntem çağrısı anonim işlevleri kendi kendine yürütme kullanarak .append() bir şey yinelemek için. I. E.:

$("<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 zincirlememden kurtulmak için büyük ve rahatsız edici olan şeyleri yinelemek için kullanıyorum.

7
cevap Rixius 2011-03-23 21:47:21
kaynak

HTML5 veri öznitelikleri desteği, steroidler üzerinde!

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

son zamanlarda jQuery ekibi HTML5 özel veri için destek ekledi -* öznitelikleri . Ve sanki bu yeterli değildi; veri işlevini steroidlerle zorla beslediler, bu da depolayabileceğiniz anlamına geliyor json şeklinde karmaşık nesneler, doğrudan işaretlemenizde.



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!
5
cevap roosteronacid 2011-03-23 22:53:25
kaynak

Diğer sorular javascript jquery