Hiyerarşi, ast - üst ilişkisi anlamına gelmektedir. Web tasarımında ise en bilindik hiyerarşi yapısı HTML DOM (Document Object Model) ağacıdır. Örneğin; <html> etiketinden önce <body> etiketini tanımlamayız. <body> etiketini daima <html> etiketinin içerisine yazarız. Bu HTML'deki DOM yapısının hiyerarşik düzeninden kaynaklanır. <html> etiketini general, <body> etiketini ise albay olarak düşünebilirsiniz. <div> etiketleri teğmen, <p> etiketleri ise çavuş olsunlar. Bir paragraf etiketinin içerisinde hiçbir zaman <div> etiketi tanımlamayız. Böyle fanteziler denemeyin. (= Aynı şekilde <div> etiketinin içinde de <body>'yi tanımlamayız. Kısacası çavuş teğmen'e, teğmen de albay'a emir veremez. İşte tüm bu ast - üst ilişkilerini belirleyen HTML DOM yapısıdır ve jQuery ile bu ast - üst ilişkilerinde bazı düzenlemeler yapabiliriz. Bu dersimizde size bu düzenlemeleri yapabileceğimiz metodların "alay"ını anlatacağım. =)
Siblings dilimizde kardeşler anlamındadır. Bu fonksiyon ile bir HTML yapısındaki istenilen elementin kardeşi ya da kardeşleri seçilebilir ve gerekli düzenlemeler yapılabilir.
<ul>
<li>liste elemanı 1</li>
<li>liste elemanı 2</li>
<li>liste elemanı 3</li>
<li>liste elemanı 4</li>
<li>liste elemanı 5</li>
</ul>
<script>
$('li:nth-child(2)').siblings().css('color', 'mediumslateblue');
</script>
Sırasız bir liste oluşturdum ve ikinci elemanının kardeşi olan tüm elemanların rengini "orta şeker mavi" olarak belirledim.
- liste elemanı 1
- liste elemanı 2
- liste elemanı 3
- liste elemanı 4
- liste elemanı 5
Ekran çıktımız ise bu şekilde olacaktır.
Children dilimizde çocuklar anlamına gelmektedir. Bir elementin alt elemanlarını seçmeyi ve bu elemanları düzenlemeye yarar.
<ul>
<li>liste elemanı 1</li>
<li>liste elemanı 2</li>
<li>liste elemanı 3</li>
<li>liste elemanı 4</li>
<li>
liste elemanı 5
<ul>
<li>alt liste elemanı 1</li>
<li>alt liste elemanı 2</li>
<li>alt liste elemanı 3</li>
<li>alt liste elemanı 4</li>
<li>alt liste elemanı 5</li>
</ul>
<li>liste elemanı 6</li>
<li>liste elemanı 7</li>
</ul>
<script>
$('li').children().css('color', 'mediumslateblue');
</script>
Bu sefer listemi biraz daha ayrıntılı yazdım. Beşinci elemanın içinde yeni bir sırasız liste tanımladım. Daha sonra jQuery ile liste elemanını seçtim ve çocuğu olanların rengini orta şeker mavi yapmasını istedim. Çocuğu olan tek liste elemanı beşinci eleman olduğu için sadece bu elemanın çocuklarının rengi değişti.
- liste elemanı 1
- liste elemanı 2
- liste elemanı 3
- liste elemanı 4
-
liste elemanı 5
- alt liste elemanı 1
- alt liste elemanı 2
- alt liste elemanı 3
- alt liste elemanı 4
- alt liste elemanı 5
- liste elemanı 6
- liste elemanı 7
Çıktımız ise bu şekilde oldu.
.next( ) seçilen elemandan bir sonraki elementi, .nextAll( ) ise seçilen elemandan sonraki tüm elementleri seçmek ve düzenlemek için kullanılır.
<ul>
<li>liste elemanı 1</li>
<li>liste elemanı 2</li>
<li class="deneme">liste elemanı 3</li>
<li>liste elemanı 4</li>
<li>
liste elemanı 5
<ul>
<li>alt liste elemanı 1</li>
<li>alt liste elemanı 2</li>
<li>alt liste elemanı 3</li>
<li>alt liste elemanı 4</li>
<li>alt liste elemanı 5</li>
</ul>
<li>liste elemanı 6</li>
<li>liste elemanı 7</li>
</ul>
<script>
$('li.deneme').next().css('color', 'mediumslateblue');
</script>
Üçüncü liste elemanıma deneme adlı bir class tanımladım ve jQuery ile bu elemandan bir sonraki elementin rengini orta şeker mavi olarak değiştirmesini istedim. Bu arada jQuery seçicisini nasıl yazdığıma dikkat edin. li.deneme ifadesi liste elemanında deneme class'ına sahip elemanı seç demektir.
- liste elemanı 1
- liste elemanı 2
- liste elemanı 3
- liste elemanı 4
-
liste elemanı 5
- alt liste elemanı 1
- alt liste elemanı 2
- alt liste elemanı 3
- alt liste elemanı 4
- alt liste elemanı 5
- liste elemanı 6
- liste elemanı 7
Üçüncü liste elemanından bir sonraki eleman dördüncü liste elemanı olacağı için jQuery kodlarımız bu element üzerinde uygulanacaktır. Çıktımız ise bu şekilde olacaktır.
<ul>
<li>liste elemanı 1</li>
<li>liste elemanı 2</li>
<li class="deneme">liste elemanı 3</li>
<li>liste elemanı 4</li>
<li>
liste elemanı 5
<ul>
<li>alt liste elemanı 1</li>
<li>alt liste elemanı 2</li>
<li>alt liste elemanı 3</li>
<li>alt liste elemanı 4</li>
<li>alt liste elemanı 5</li>
</ul>
<li>liste elemanı 6</li>
<li>liste elemanı 7</li>
</ul>
<script>
$('li.deneme').nextAll().css('color', 'mediumslateblue');
</script>
.next( ) fonksiyonu yerine .nextAll( )'u kullansaydım üçüncü elemandan sonraki tüm elementlerin rengini değiştirecektim.
- liste elemanı 1
- liste elemanı 2
- liste elemanı 3
- liste elemanı 4
-
liste elemanı 5
- alt liste elemanı 1
- alt liste elemanı 2
- alt liste elemanı 3
- alt liste elemanı 4
- alt liste elemanı 5
- liste elemanı 6
- liste elemanı 7
Çıktım ise bu şekilde olacaktı.
.next( )'in tam tersidir. Seçilen elemandan önceki elemanı ya da elemanları seçer ve düzenler.
<ul>
<li>liste elemanı 1</li>
<li>liste elemanı 2</li>
<li class="deneme">liste elemanı 3</li>
<li>liste elemanı 4</li>
<li>
liste elemanı 5
<ul>
<li>alt liste elemanı 1</li>
<li>alt liste elemanı 2</li>
<li>alt liste elemanı 3</li>
<li>alt liste elemanı 4</li>
<li>alt liste elemanı 5</li>
</ul>
<li>liste elemanı 6</li>
<li>liste elemanı 7</li>
</ul>
<script>
$('li.deneme').prevAll().css('color', 'mediumslateblue');
</script>
Sadece .prevAll( ) fonksiyonunu gösteriyorum. deneme sınıfına sahip elemandan önceki elemanlar birinci ve ikinci elemanlar olduğu için sadece bu elementlerin rengi değişecektir.
- liste elemanı 1
- liste elemanı 2
- liste elemanı 3
- liste elemanı 4
-
liste elemanı 5
- alt liste elemanı 1
- alt liste elemanı 2
- alt liste elemanı 3
- alt liste elemanı 4
- alt liste elemanı 5
- liste elemanı 6
- liste elemanı 7
Çıktımız ise bu şekilde olacaktır. Eğer .prevAll( ) yerine .prev( ) kullansaydım sadece ikinci elemanın rengi değişecekti.
Closest dilimizde en yakın anlamına gelmektedir. .closest( ), jQuery ile seçilen elemana en yakın olan elementi seçmeye ve düzenlemeye yarar. Parents ise ebeveynler anlamına gelmektedir. Yani anne babalar. .parents( ) ise seçilen elemanın tüm ailesini seçer ve düzenler.
<ul>
<li>liste elemanı 1</li>
<li>liste elemanı 2</li>
<li>liste elemanı 3</li>
<li>liste elemanı 4</li>
<li>
liste elemanı 5
<ul>
<li>alt liste elemanı 1</li>
<li>alt liste elemanı 2</li>
<li class="deneme">alt liste elemanı 3</li>
<li>alt liste elemanı 4</li>
<li>alt liste elemanı 5</li>
</ul>
<li>liste elemanı 6</li>
<li>liste elemanı 7</li>
</ul>
<script>
$('li.deneme').closest('ul').css('color', 'mediumslateblue');
</script>
Bu sefer deneme sınıfımı üçüncü alt liste elemanımda tanımladım ve deneme sınıfına sahip liste elemanına en yakın sırasız listenin (ul'nin) rengini değiştirmesini istedim.
- liste elemanı 1
- liste elemanı 2
- liste elemanı 3
- liste elemanı 4
-
liste elemanı 5
- alt liste elemanı 1
- alt liste elemanı 2
- alt liste elemanı 3
- alt liste elemanı 4
- alt liste elemanı 5
- liste elemanı 6
- liste elemanı 7
deneme sınıfının en yakın sırasız listesi alt liste olduğu için sadece bu liste elemanlarının rengi değişti.
<ul>
<li>liste elemanı 1</li>
<li>liste elemanı 2</li>
<li>liste elemanı 3</li>
<li>liste elemanı 4</li>
<li>
liste elemanı 5
<ul>
<li>alt liste elemanı 1</li>
<li>alt liste elemanı 2</li>
<li class="deneme">alt liste elemanı 3</li>
<li>alt liste elemanı 4</li>
<li>alt liste elemanı 5</li>
</ul>
<li>liste elemanı 6</li>
<li>liste elemanı 7</li>
</ul>
<script>
$('li.deneme').parents().css('color', 'mediumslateblue');
</script>
Burada ise deneme sınıfına sahip liste elemanının tüm ebeveynlerinin rengini değiştirdim. Yani tüm listenin rengini değiştirmiş oldum.
- liste elemanı 1
- liste elemanı 2
- liste elemanı 3
- liste elemanı 4
-
liste elemanı 5
- alt liste elemanı 1
- alt liste elemanı 2
- alt liste elemanı 3
- alt liste elemanı 4
- alt liste elemanı 5
- liste elemanı 6
- liste elemanı 7
Çıktımız ise bu şekilde olacaktır.
Find dilimizde bulmak anlamına gelmektedir. Eğer nokta atışı yapmak istiyorsanız bu fonksiyonu kullanmalısınız.
<ul>
<li>liste elemanı 1</li>
<li>liste elemanı 2</li>
<li>liste elemanı 3</li>
<li>liste elemanı 4</li>
<li>
liste elemanı 5
<ul>
<li>alt liste elemanı 1</li>
<li>alt liste elemanı 2</li>
<li class="deneme">alt liste elemanı 3</li>
<li>alt liste elemanı 4</li>
<li>alt liste elemanı 5</li>
</ul>
<li>liste elemanı 6</li>
<li>liste elemanı 7</li>
</ul>
<script>
$('ul').find('.deneme').css('color', 'mediumslateblue');
</script>
Burada dedik ki, tüm sırasız listeleri seç, deneme sınıfına sahip elemanı bul ve ardından rengini değiştir.
- liste elemanı 1
- liste elemanı 2
- liste elemanı 3
- liste elemanı 4
-
liste elemanı 5
- alt liste elemanı 1
- alt liste elemanı 2
- alt liste elemanı 3
- alt liste elemanı 4
- alt liste elemanı 5
- liste elemanı 6
- liste elemanı 7
Bu şekilde bir nokta atışı yaptık.
Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.
Bu derslik bu kadar. Bir sonraki dersimizde jQuery'de CSS ve atıflar konusuna değineceğiz.