AJAX & Hazır Kütüphaneler orhan
Element.descendantOf
Bir elementin belirtilen üst elemente sahip olup olmadığı bilgisini döndürür. ("true" ya da "false")
<div id="australopithecus">
<div id="homo-herectus">
<div id="homo-sapiens"></div>
</div>
</div>
-
$('homo-sapiens').descendantOf('australopithecus');
-
// true
-
-
$('homo-herectus').descendantOf('homo-sapiens');
-
// false
Element.descendants
"Element.ancestors" ile zıt yönde çalışan belirtilen elementin alt elementlerini dizi olarak döndürmeye yarayan metottur.
<div id="australopithecus">
<div id="homo-herectus">
<div id="homo-neanderthalensis"></div>
<div id="homo-sapiens"></div>
</div>
</div>
-
$('australopithecus').descendants();
-
// [div#homo-herectus, div#homo-neanderthalensis, div#homo-sapiens]
-
-
$('homo-sapiens').descendants();
-
// []
Element.down
Bir elementin DOM ağacı yapısındaki bir alt elementini veya sırası/seçicisi belirtilen alt elementini döndürür. "Element.descendants" gibi işler fakat tek element döndürür.
<ul id="fruits">
<li id="apples">
<ul>
<li id="golden-delicious">Golden Delicious</li>
<li id="mutsu" class="yummy">Mutsu</li>
<li id="mcintosh" class="yummy">McIntosh</li>
<li id="ida-red">Ida Red</li>
</ul>
</li>
</ul>
-
$('fruits').down();
-
// aşağıdaki ile aynı
-
-
$('fruits').down(0);
-
// li#apple
-
-
$('fruits').down(3);
-
// li#golden-delicious
-
-
$('apples').down('li');
-
// li#golden-delicious
-
-
$('apples').down('li.yummy');
-
// li#mutsu
-
-
$('fruits').down('.yummy', 1);
-
// li#mcintosh
-
-
$('fruits').down(99);
-
// undefined
Element.empty
Elementin bir içeriğinin (innerHTML) olup olmamasına göre "true" ya da "false" döndürür.
<div id="cuzdan"> </div>
<div id="sepet">dolu!</div>
-
$('cuzdan').empty(); // true
-
$('sepet').empty(); // false
Element.getDimensions
Elementin boyutlarını (yükseklik ve genişlik) verir. Boyut bilgisi kümülatif olarak hesaplanarak döndürülür. Yani % veya em olarak girilen değerler piksele dönüştürülerek elde edilir.
<div id="rectangle" style="font-size: 10px; width: 20em; height: 10em"></div>
-
var dimensions = $('rectangle').getDimensions();
-
// {width: 200, height: 100}
-
-
dimensions.width;
-
// 200
-
-
dimensions.height;
-
// 100
Element.getElementsByClassName
Daha önce anlatılmıştı.
Element.getElementsBySelector
Etiket-seçici ismi, ID'si veya parametresine göre elementleri yakalayıp bir dizi döndürür.
<ul id="fruits">
<li id="apples">
<h3 title="yummy!">Apples</h3>
<ul id="list-of-apples">
<li id="golden-delicious" title="yummy!" >Golden Delicious</li>
<li id="mutsu" title="yummy!">Mutsu</li>
<li id="mcintosh">McIntosh</li>
<li id="ida-red">Ida Red</li>
</ul>
<p id="saying">Günde bir elma her derde iyi gelir.</p>
</li>
</ul>
-
$('apples').getElementsBySelector('[title="yummy!"]');
-
// [h3, li#golden-delicious, li#mutsu]
-
-
$('apples').getElementsBySelector( 'p#saying', 'li[title="yummy!"]');
-
// [li#golden-delicious, li#mutsu, p#saying]
-
-
$('apples').getElementsBySelector('[title="disgusting!"]');
-
// []
Element.getHeight
Elementin yüksekliğini verir.
Element.getStyle
Elemente belirtilen stil ifadesinin uygulanıp uygulanmadığını ya da belirtilen stil seçicisinin değerini döndürür. $('test').getStyle('margin-left'); gibi.
-
$(element).getStyle('font-size');
-
// aşağıdaki ile aynıdır
-
$(element).getStyle('fontSize');
-
// '12px'
Element.getWidth
Elementin hesaplanmış genişliğini döndürür. (em veya % olarak girilmiş değerler piksel olarak elde edilir)
Element.hasClassName
Elemente belirtilen stil uygulanmışsa "true", aksi taktirde "false"
<div id="mutsu" class="apple fruit food"></div>
-
$('mutsu').hasClassName('fruit');
-
// true
-
-
$('mutsu').hasClassName('vegetable');
-
// false
Element.hide
Belirtilen nesneyi gizler.
Element.immediateDescendant
"Element.descendants" gibi çalışır. Tek farkı sadece bir alt basamakdakileri döndürmesidir.
<div id="australopithecus">
<div id="homo-herectus">
<div id="homo-neanderthalensis"></div>
<div id="homo-sapiens"></div>
</div>
</div>
-
$('australopithecus').immediateDescendants();
-
// [div#homo-herectus]
-
-
$('homo-herectus').immediateDescendants();
-
// [div#homo-neanderthalensis, div#homo-sapiens]
Element.inspect
Belirtilen elementin hata ayıklama amaçlı bilgisini (debug mode) döndürür. Daha fazla bilgi için Object.inspect metodunu inceleyebilirsiniz.
<ul>
<li id="golden-delicious">Golden Delicious</li>
<li id="mutsu" class="yummy apple">Mutsu</li>
<li id="mcintosh" class="yummy">McIntosh</li>
<li</li>
</ul>
-
$('golden-delicious').inspect();
-
// '<li>'
-
-
$('mutsu').inspect();
-
// '<li>'
-
-
$('mutsu').next().inspect();
-
// '<li>'
Element.makeClipping
Nesneye "overflow: hidden" CSS özelliğinin uygulanmasıyla zayıf kalan "clip" özelliğini taklit eder.
Element.makePositioned
Elementin konumlandırma bilgisini "relative" yapar.
<p>lorem ipsum...</p>
<div id="container">
<div id="element" style="position: absolute; top: 20px; left: 20px;"></div>
</div>
Bu HTML kodunun çıktısı aşağıdaki gibidir;
-
$('container').makePositioned();
-
// HTMLElement
Element.match
Elementin belirtilen CSS seçicisine sahip olup olmadığı bilgisini döndürür.
<ul id="fruits">
<li id="apples">
<ul>
<li id="golden-delicious">Golden Delicious</li>
<li id="mutsu" class="yummy">Mutsu</li>
<li id="mcintosh" class="yummy">McIntosh</li>
<li id="ida-red">Ida Red</li>
</ul>
</li>
</ul>
-
$('fruits').match('ul'); // true
-
$('mcintosh').match('li#mcintosh.yummy'); // true
-
-
$('fruits').match('p'); // false
Toplamda 9076 kez okunmuş.
Şu an 1 kişi okuyor.
En fazla 7 kişi aynı anda okumuş.
Bugün 10 kez okunmuş.
Etiketler: css, dom, form, javascript, kütüphane, library, orta, prototype
(13 oy, ortalama 4.92)
Oylanıyor ...
Trackback Yorumları takip et Baskı Önizleme
# kiirpi | 22 Mart 2007, 15:23
daha ne olsun..
# grkn | 22 Mart 2007, 16:36
güzel bir seri tebrikler
# cüneyt | 17 Nisan 2007, 14:59
hmm. bu kısım sıradan okuyup geçmek için değil de şöyle bir başlıklarına bakıp gerektiğinde tekrar dönmek için referans amaçlı yani….
# Murat | 09 Mayıs 2007, 16:05
ellerine sağlık üstad.
# Firma Rehberi | 22 Şubat 2008, 12:58
güzel bir doküman teşekkürler