Mart 22

Prototype.js Kılavuzu - 3

AJAX & Hazır Kütüphaneler orhan

Element.next

Belirtilen elementin bir sonraki kardeş elementini sırası veya seçicisine göre döndürür. Eğer boş ise "undefined" verir. İki elementin kardeş olması; aynı üst elemente bağlı olmaları anlamına gelir. (liste elemanları gibi)

<ul id="fruits">
    <li id="apples">
        <h3 id="title">Apples</h3>
        <ul id="list-of-apples">
            <li id="golden-delicious">Golden Delicious</li>
            <li id="mutsu">Mutsu</li>
            <li id="mcintosh" class="yummy">McIntosh</li>
            <li id="ida-red" class="yummy">Ida Red</li>
        </ul>
        <p id="saying">An apple a day keeps the doctor away.</p>
    </li>
</ul>

PLAIN TEXT
JAVASCRIPT:
  1. $('list-of-apples').next();
  2. $('list-of-apples').next(0);
  3. // p#sayings
  4.  
  5. $('title').next(1);
  6. // ul#list-of-apples
  7.  
  8. $('title').next('p');
  9. // p#sayings
  10.  
  11. $('golden-delicious').next('.yummy');
  12. // li#mcintosh
  13.  
  14. $('golden-delicious').next('.yummy', 1);
  15. // li#ida-red
  16.  
  17. $('ida-red').next();
  18. // undefined

Element.nextSiblings

Belirtilen elementten sonraki kardeş elementleri dizi olarak döndürür.

<ul>
    <li id="golden-delicious">Golden Delicious</li>
    <li id="mutsu">Mutsu</li>
    <li id="mcintosh">McIntosh</li>
    <li id="ida-red">Ida Red</li>
</ul>

PLAIN TEXT
JAVASCRIPT:
  1. $('mutsu').nextSiblings();
  2. // -&gt; [li#mcintosh, li#ida-red]
  3.  
  4. $('ida-red').nextSiblings();
  5. // -&gt; []

Element.observe

Elemente bir olay (event) kaydeder (click, focus, change... gibi)

PLAIN TEXT
JAVASCRIPT:
  1. $(element).observe('click', function(event){
  2. alert(Event.element(event).innerHTML);
  3. });
  4. // HTMLElement (ve elementin üzerine tıklandığında
  5. // içeriğini gösteren bir uyarı mesajı görüntülenir).

Element.previous

"Element.next" metoduna zıt olarak çalışır. Belirtilen elementin bir önceki kardeş elementini sırası veya seçicisine göre döndürür. İki elementin kardeş olması; aynı üst elemente bağlı olmaları anlamına gelir. (liste elemanları gibi) Parametre olarak "Element.next" gibi işler.

Element.previousSiblings

"Element.nextSiblings" metoduna zıt olarak çalışır. DOM ağacı sıralamasındaki önceki kardeş elementleri dizli olarak döndürür.

Element.readAttribute

Elementin belirtilen parametresinin değerini döndürür.

<a id="tag" href="/tags/prototype" rel="tag" title="ilgili yer imlerini göster." my_widget="bazı bilgiler.">Prototype</a>

PLAIN TEXT
JAVASCRIPT:
  1. $('tag').readAttribute('href');
  2. // '/tags/prototype'
  3.  
  4. $('tag').readAttribute('title');
  5. // ‘ilgili yer imlerini göster.'
  6.  
  7. $('tag').readAttribute('my_widget');
  8. // ‘bazı bilgiler.'

Element.recursivelyCollect

Belirtilen elementin alt elementlerini belirtilen kritere göre döndürür. ($('fruits').recursivelyCollect('firstChild'); ifadesi "fruits" elementinin ilk alt elementinin ilk alt elementi… şeklindeki yapıyı sonuna kadar takip edip dizi değişken olarak döndürür)

<ul id="fruits">
    <li id="apples">
        <ul id="list-of-apples">
            <li id="golden-delicious"><p>Golden Delicious</p></li>
            <li id="mutsu">Mutsu</li>
            <li id="mcintosh">McIntosh</li>
            <li id="ida-red">Ida Red</li>
        </ul>
    </li>
</ul>

PLAIN TEXT
JAVASCRIPT:
  1. $('fruits').recursivelyCollect('firstChild'); // [li#apples, ul#list-of-apples, li#golden-delicious, p]

Element.remove

Elementi DOM ağacından siler.

Önce:

<ul>
    <li id="golden-delicious">Golden Delicious</li>
    <li id="mutsu">Mutsu</li>
    <li id="mcintosh">McIntosh</li>
    <li id="ida-red">Ida Red</li>
</ul>

PLAIN TEXT
JAVASCRIPT:
  1. $('mutsu').remove(); // -&gt; HTMLElement (ve i#mutsu silinir)

Sonra:

<ul>
    <li id="golden-delicious">Golden Delicious</li>
    <li id="mcintosh">McIntosh</li>
    <li id="ida-red">Ida Red</li>
</ul>

Element.removeClassName

Elementten belirtilen isimdeki stili siler.


<div id="mutsu" class="apple fruit food"></div>
$('mutsu').removeClassName('food'); // -> HTMLElement
$('mutsu').classNames(); // -> ['apple', 'fruit']

Element.replace

Belirtilen elementin içeriğini verilen HTML kodu ile değiştirir.

<div id="food">
    <div id="fruits">
       <p id="first">Kiwi, banana <em>and</em> apple.</p>
    </div>
</div>

$('first').replace('<ul id="favorite"><li>kiwi</li><li>banana</li><li>apple</li></ul>');
// -> HTMLElement (p#first)

$('fruits').innerHTML;
// -> '<ul id="favorite"><li>kiwi</li><li>banana</li><li>apple</li></ul>'

Sayfalar: 1 2 3 4

Toplamda 9075 kez okunmuş.
Şu an 1 kişi okuyor.
En fazla 7 kişi aynı anda okumuş.
Bugün 9 kez okunmuş.

Etiketler: , , , , , , , 

1 oy2 oy3 oy4 oy5 oy (13 oy, ortalama 4.92) Oylanıyor ... Oylanıyor ...

  1. PHP ve Yerleşik DOM Sınıfları
  2. Javascript Sanal Klavye Yapalım
  3. Ajax Olmasaydı Ne Yapardık ? :)

Trackback Yorumları takip et Baskı Önizleme

5 yorum var

  1. # kiirpi | 22 Mart 2007, 15:23 Gravatar

    daha ne olsun..

  2. # grkn | 22 Mart 2007, 16:36 Gravatar

    güzel bir seri tebrikler :)

  3. # cüneyt | 17 Nisan 2007, 14:59 Gravatar

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

  4. # Murat | 09 Mayıs 2007, 16:05 Gravatar

    ellerine sağlık üstad.

  5. # Firma Rehberi | 22 Şubat 2008, 12:58 Gravatar

    güzel bir doküman teşekkürler

Yorum yazın

sayfa sayacı