Bu yazımızda Jquery de parent, parents, parentsUntil, children, find metodlarını öğreneceğiz. Bildiğiniz gibi Html sayfaları bir ağaç yapısı şeklindedir. İç içe etiketlerden oluşur.
En basit haliyle örnek verecek olursak Html sayfalarının yapısı şu şekildedir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> |
Gördüğünüz gibi en başta html etiketi, onun içerisinde ise head ve body etiketleri var. Head etiketi içerisinde de title etiketi vs..
İşte Jquery bize bunun gibi iç içe etiketleri seçip işlem yapmamızı kolaylaştıran metodlar sunuyor.
Şimdi bu metodların ne işe yaradığını anlatıp, uygulama üzerinde nasıl kullanabileceğimize bakalım.
► parent metodu, seçmiş olduğumuz bir etiketin ebeveyn’lerinden ilk etiketi seçmemizi sağlar.
► parents metodu, seçmiş olduğumuz bir etiketin tüm ebeveyn’lerini seçmemizi sağlar. Bu metodu kullandığımız zaman body ve html etiketleri dahil hepsi seçilir.
► parentsUntil metodu, seçmiş olduğumuz bir etiketin ebeveyn’lerinden bizim belirteceğimiz bir etikete kadar seçmemizi sağlar.
► children metodu, seçmiş olduğumuz bir etiketin içerisindeki ilk etiketi (çocuk etiketi) seçmemizi sağlar.
► find metodu, seçmiş olduğumuz bir etiketin içerisinde istediğimiz etiketi bulmamızı sağlar.
Şimdi teoride kalan bilgilerimizi uygulamaya dökelim.
Şu şekilde Html kodları tanımlayıp üzerinde metodlarımızı uygulayalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div> div (büyük ebeveyn) <p> p (ebeveyn) <span style="margin: 10px">span (çocuk)</span> </p> </div> <br> <div> div (ebeveyn) <h4>h4 (çocuk)</h4> <p>p (çocuk)</p> <p>p (çocuk)</p> <span>span (çocuk)</span> </div> |
Butonlara tıklayarak, kullandığımız metodların seçmiş olduğu etiketlere kenarlık değeri vererek daha görünür olmasını sağlayalım.
Örnekleri incelediğinizde daha anlaşılır olacaktır.
Kodlarımız şu şekilde.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
, parents(), parentsUntil(), children(), find() Kullanımı){kind=link}