MooTools - Dizileri Kullanma

MooTools, dinamik web sayfaları oluşturmaya yardımcı olan hafif bir JavaScript kitaplığıdır. DOM öğesini yönetirken, bir web sayfasının tüm DOM öğelerini seçmemiz gerekir. Bu koleksiyon, diziler kullanılarak işlenebilir.

Bu bölüm, DOM öğelerini yönetmek için dizilerin nasıl kullanılacağını açıklar.

each () yöntemi

Bu, dizilerle uğraşmanın temel yöntemidir. Bir liste aracılığıyla tüm öğeleri yineler. Bu yöntemi gereksinime göre kullanabilirsiniz. Örneğin, bir sayfanın tüm div öğelerini seçmek istiyorsanız, aşağıda verilen komut dosyasını izleyin. Birden çok div içeren aşağıdaki html sayfasına bir göz atın.

<div>One</div>
<div>Two</div>

Seçmek için aşağıdaki komut dosyasını kullanabilirsiniz each individual divsayfadaki bir div koleksiyonundan. Komut dosyası, her bir div'i seçecek ve bir uyarı iletecektir. Aşağıdaki betiğe bir göz atın.

Senaryo

$$('div').each(function() {
   alert('a div');
});

Yukarıda verilen örneği işlemek için aşağıdaki sözdizimini kullanabilirsiniz. HTML sayfasına bir göz atın.

Senaryo

<div id = "body_div">
   <div>One</div>
   <div>Two</div>
</div>

Burada, iki div başka bir div ile çevrilidir - body_div. Bir betik tasarlarken, sadece bir harici div seçmemiz gerekiyor. Daha sonra getElements () yöntemini kullanarak iki dahili div'i seçebiliriz. Aşağıdaki betiğe bir göz atın.

Senaryo

$('body_wrap').getElements('div').each(function() {
   alert('a div');
});

Yukarıdaki betiği aşağıdaki gibi yazmak için farklı bir yöntem kullanabilirsiniz. Burada, seçmek için ayrı bir değişken kullanıyoruzbody_div.

Senaryo

var myArray = $('body_div').getElements('div');
myArray.each(function() {
   alert('a div');
});

Bir Diziden Belirli Öğeleri Seçin

Bir dizi elemanı işlerken, bir dizi elemandan belirli bir elemanı seçebiliriz. Aşağıdakiler, DOM öğelerini işlemek için kullanılan bazı önemli yöntemlerdir -

getLast ()

Bu yöntem, bir dizinin son öğesini döndürür. Bu yöntemi anlamak için bir dizi oluşturalım.

var myArray = $('body_div').getElements('div');

Artık dizideki son elemanı yakalayabiliriz.

var lastElement = myArray.getLast();

Değişken lastElement artık myArray içindeki son öğeyi temsil ediyor.

getRandom ()

getRandom () yöntemi, getLast () yöntemine benzer şekilde çalışır, ancak diziden rastgele bir öğe alır.

Syntax

var randomElement = myArray.getRandom();

Değişken randomElement şimdi içinde rastgele seçilen bir öğeyi temsil ediyor myArray.

Bir Dizinin Kopyası

MooTools, $ A () işlevini kullanarak bir diziyi kopyalamak için bir yol sağlar. $ A () işlevi için sözdizimi aşağıdadır.

Sözdizimi

var <variable-name> = $A ( <array-variable>);

Bir Diziye Eleman Ekleme

Bir diziye eleman eklemek için iki farklı yöntem vardır. İlk yöntem, öğeleri tek tek eklemenize izin verir veya iki farklı diziyi tek bir dizide birleştirebilirsiniz.

Dahil etmek()

include () yöntemi, bir DOM öğeleri dizisine bir öğe eklemek için kullanılır. Örneğin, tek ve kapalı bir div öğesi altında iki div öğesi ve bir span öğesi içeren aşağıdaki HTML kodunu düşünün -body_div.

Syntax

<div id = "body_div">
   <div>one</div>
   <div>two</div>
   <span id = "add_to_array">add to array</span>
</div>

Yukarıdaki kodda, eğer getElements ('div') yöntemini body_divöğesi, bir ve iki div elde ederiz, ancak span öğesi diziye dahil edilmemiştir. Eğer aradığınız diziye eklemek istiyorsanızinclude()dizi değişkenindeki yöntem. Aşağıdaki betiğe bir göz atın.

Script

//creating array variable by selecting div elements
var myArray = $('body_wrap').getElements('div');

//first add your element to a var
var newToArray = $('add_to_array');

//then include the var in the array
myArray.include(newToArray);

Artık myArray hem div'leri hem de span öğesini içerir.

birleştir ()

Bu yöntem, bir dizinin öğelerini başka bir dizinin öğeleriyle birleştirmek için kullanılır. Bu aynı zamanda yinelenen içerikle de ilgilenir. Örneğin, tek ve kapalı div öğesi altında iki div öğesi ve iki span öğesi içeren aşağıdaki HTML kodunu düşünün -body_div.

Syntax

<div id = "body_div">
   <div>one</div>
   <div>two</div>
   <span class = "class_name">add to array</span>
   <span class = "class_name">add to array, also</span>
   <span class = "class_name">add to array, too</span>
</div>

Yukarıdaki kodda, getElements ('div') yöntemini body_divöğesi. Bir ve iki div alırsınız. $$ ('. Class_name') yöntemini çağırmak iki span elemanını seçer. Artık bir dizi div öğesi ve başka bir span öğesi dizisi var. Bu iki diziyi birleştirmek istiyorsanız, birleştirme yöntemini () kullanabilirsiniz. Aşağıdaki betiğe bir göz atın.

Script

//create your array just like we did before
var myArray= $('body_wrap').getElements('div');

//then create an array from all elements with .class_name
var newArrayToArray = $$('.class_name');

//then combine newArrayToArray with myArray
myArray.combine(newArrayToArray );

Artık myArray, newArrayToArray değişkeninin tüm öğelerini içerir.

Example

Bu, MooTools'taki dizileri anlamanıza yardımcı olacaktır. Diyelim ki, divs ve span içeren eleman dizisine arka plan rengi uyguluyoruz. Aşağıdaki koda bir göz atın. Burada, ikinci eleman dizisi herhangi bir id veya sınıf grubuna ait değildir ve bu nedenle herhangi bir arka plan rengini yansıtmaz. Aşağıdaki koda bir göz atın.

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var myArray = $('body_wrap').getElements('.class_name');
            var addSpan = $('addtoarray');
            var addMany = $$('.addMany');
            
            myArray.include(addSpan);
            myArray.combine(addMany);
            
            var myArrayFunction = function(item) {
               item.setStyle('background-color', '#F7DC6F');
            }
            
            myArray.each(myArrayFunction);
         });
      </script>
   </head>
   
   <body>
      <div id = "body_wrap">
         <div class = "class_name">one</div>
         <div>two</div>
         <div class = "class_name">three</div>
         <span id = "addtoarray">add to array</span>
         <br /><span class = "addMany">one of many</span>
         <br /><span class = "addMany">two of many</span>
      </div>
   </body>
   
</html>

Aşağıdaki çıktıyı alacaksınız -

Output