Jquery Seçiciler – Jquery HTML Eleman Seçicileri
Merhaba, bu yazımda Jqeury de seçicileri anlatmaya çalışacağım ve html elemanlarına nasıl müdahale edebileceğimizden bahsedeceğim. Bir önceki yazımda Jquery Nedir? ve Nasıl Kullanılır? başlıklı yazımda Jquery’e bir giriş yapmış, kısa örnekler vererek açıklamalarda bulunmuştum.
Jquery kütüphanesi ile haşır neşir olmaya başlayacaksanız evvela seçicileri öğrenmeniz gerek. Bu arkadaşlardan bi-haber bu kütüphaneyi herhangi bir şekilde kullanmanız neredeyse imkansızdır. Önceki yazımda da küçük bir giriş yapmıştım.
Jquery Seçicileri Tanıyalım
Jquery’de seçicileri birkaç başlık altında inceleyelim;
- Basit Seçiciler,
- ID Seçiciler
- Class Seçicileri,
- Hiyerarşik Seçiciler,
- Form Seçiciler.
Şimdi yukarıdaki seçicileri, her başlıkta örnekler olacak şekilde tek tek ele alalım.
Basit Seçiciler
Herhangi bir küme ve filtre belirtmeden sayfadaki elemanları seçelim,
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script> // BASİT SEÇİCİLER // Sayfada bulunan tüm h1 taglarını seçelim $("h1") // Sayfada bulunan tüm div taglarını seçelim $("div") // Sayfada bulunan tüm p taglarını seçelim $("p") // Sayfada bulunan tüm img taglarını seçelim $("img") // Sayfada bulunan tüm elemanları seçelim $("*") </script> |
şeklinde sayfada bulunan bazı elemanları toplu halde seçebiliyoruz. Burada dikkat edilmesi gereken nokta, mesela div tagı belirtirsek tüm div taglarının etkileneceğidir.
ID Seçiciler
Bildiğiniz gibi sayfada aynı id değerine sahip birden fazla eleman kullanılamaz. Bunu göz önünde bulundurduğumuzda seçeceğimiz eleman sayfada zaten teke düşmüş olacak. Yine bildiğiniz gibi id belirteci # işaretidir.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> // ID SEÇİCİLERİ // Sayfada bulunan yazilim id değerine sahip elemanı seçtik. $("#yazilim") // Bir başka örnek // ID değeri yazilim olan elemanı gizledik. $("#yazilim").hide(); </script> |
Yukarıda 2 örnek var, aklınızı bulandırmasın, yazilim id değerindeki elemanı seçmek için $(“#yazilim”) seçicisini kullandık. Gizlemek için ise sonuna .hide() metodunu ekledik. Bu metodu ilerleyen yazılarda anlatacağım.
Class Seçiciler
Sınıflar (class’lar), sayfada birden fazla kullanılabilen ve id gibi en kolay işlem yapılabilen seçicilerdir.
Örnek;
|
1 2 3 4 5 6 7 8 |
<script> // CLASS SEÇİCİLERİ // Class değeri tasarim olan elemanların arka planını kırmızı yaptık. $(".tasarim").css("background-color","red"); </script> |
Yukarıdaki örnekte class değeri tasarim olan elemanların arka planını kırmızı yaptık. Gördüğünüz gibi jquery ile çalışmak oldukça basittir.
Hiyerarşik Seçiciler
Jquery ile bir elemanı belirterek yalnızca o eleman içesinde bulunan elemanlara da ulaşabiliriz. Hemde herhangi bir class ya da id değeri olmasına ihtiyaç duymadan.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> // HİYERARŞİK SEÇİCİLER // tasarim class değerine sahip elemanın içindeki p taglarını seçelim $(".tasarim p"); // yazilim id değerine sahip elemanın içindeki span taglarını seçelim $(".yazilim span"); </script> |
şeklinde kullanabiliriz. Burada yüzlerce örnek yaparak pekiştirmek ve anlatmak mümkün. Bir html sayfası oluşturup istediğiniz kadar varyasyon ile örneklerinizi çoğaltabilirsiniz.
Form Seçiciler
Jquery form elemanları üzerinde de diğer elemanlar, id ve class’lardaki gibi kullanılabilir.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> // FORM SEÇİCİLER // tipi text olan inputların tümünü seçer $("input[type='text']"); // tipi textarea olan inputların tümünü seçer $("input[type='textarea']"); </script> |
şeklinde form elemanlarına da erişebiliriz. Burada da yine dikkat edeceğimiz husus belirttiğiniz elemanların tümünün seçileceğidir.
Örnekler çoğaltılabilir. Jquery Seçiciler ve Jquery HTML Eleman Seçicileri konularına kendimce kısa bir anlatım getirmeye çalıştım. Bu yazılık bu kadar. Bir sonraki yazıda görüşmek üzere.