JQuery Dersleri 5 - Header Seçicisi

Değerli okurlarımız, bu yazımızda yine JQuery Dersleri serisine devam etmekteyiz. Eğer ilk dersten itibaren takip edenler varsa, seçicilere ait bölümün Temel Filtreler (Basic Filters) alt başlığında devam etmekteyiz. Daha önce first-last, eq-lt-gt, even-odd filtrelerini gördük, bu yazımızda da header seçicisini işleyeceğiz.

Header bilmeyenler için aslında türkçede başlık demektir ve HTML var olduğundan beri kullanılan bir etikettir.

Döküman yapısı içerisinde hiyerarşik bir düzen oluşturmada da etkilidir. Şöyleki, <h1> - <h6> arası olan etiketleri kullanarak 1 den 6 ya kadar alt düzey başlıklar oluşturabilir ve css yardımıyla dokümanınızda büyükten küçüğe doğru fontlarla görsel seçiciliği arttırabilirsiniz.

Bu bilgilerden sonra gelelim JQuery derslerimizin içeriğine.

Yazı dizimiz bildiğiniz üzere temel JQuery anlatımıyla başlamış ve basit seçiciler ile 1-2 satırlık kod blokları ile HTML dokümanları içerisinde interaktif işlemler yapmanızı sağlamıştık ve örneklendirdik, bundan sonraki JQuery derslerinde de aynı sistem devam edecek ve seriyi tamamladığınızda artık, tüm bu örnekleri birleştirerek daha faydalı uygulamalar yapabileceksiniz.

Header seçicisine dönerek, işlevi aslında tüm başlık etiketlerini seçmektir, tabi bunlar h1, h2, h3 diye devam eder. En güzel anlatım her zamanki gibi örnekli anlatımdır.

/*
Jquery 
Örnekleri 
*/
<script>
  $(":header").css({background:'#bbb', color:'red'});
</script>

 

Yukarıdaki kod bloğunu,

<h1> Ana Başlık </h1>
<p> Burada paragraf halinde içerik</p>

<h2> Alt Başlık </h2>
<p> Burada ikinci paragrafta alt madde anlatılıyor</p>

şeklinde tasarlanmış bir HTML hiyerarşisinde sayfanın bitiminden hemen önce eklerseniz, tabiki script tagı içerisinde, sonuç olarak dokümandaki tüm başlıklara css kodu uygulanır ve arka planları açık gri, yazı stilleri de kırmızı olarak değişir.

Böylece diğer sayfa elementlerine erişebildiğiniz gibi başlık etiketlerine de müdahale edebilirsiniz.

Görüldüğü gibi aslında yapılan işlemler birbirini takip eder niteliktedir.

Öncelikle tüm seçicilerde olduğu gibi, $("seçici") dolar işareti ve devamında parantez içerisinde tırnaklar koyarak bunun da içerisine ifademizi ekliyoruz, bu bazen bir html elementinin türü, bazen bir karşılaştırma bazen de özel bir deyim olabiliyor, sonra zincirleme fonksiyon desteğini kullanarak aynı satırda, birden çok ifadeyi işleyebiliyoruz, bu da bize kolaylık ve fonksiyonellik sağlıyor.

Bu örneğimizde .css olarak görmekteyiz. Bu ifade aslında ilk bölümde seçilmiş olan elementlere nokta ile başlayan işlemi uygula demektir. Yani tüm <h1> ila <h6> arası etiketlerin özelliğine css de belirtilen renk ve arkaplan tanımlarını ekleme emrini veriyor.