Mootools’da Nesne Seçiciler, CSS Seçicileri

Korkmayın

Döküman başlığı anlaşılmaz olsa da şimdi olayı kavrayacaksınız 🙂 Html elemanlarımızı css ile yerleştirirken css’de nesnelerin etiket adları, kimlikleri (id) ve sınıflarına (class) göre seçici cümleler oluştururuz. Mesela tüm bağlantılar için

kullanırız. Ya da tüm “ipucu” sınıfına ait elemanları seçmek için

tanımı kullanırız. Hatta tüm ipucu sınıfındaki sadece bağlantıları seçmek için

veya icerik kimliği içindeki tüm ipucu sınıflı span’ları seçmek istersek de

adreslemesini kullanırız. Bu adresleme aslında nesnelere erişimimizi oldukça kolaylaştırır. Gerek tek nesneye ulaşırken gerek de birden fazla nesneye ulaşırken css adreslemeleri bu konuda oldukça pratiktir.

JavaScript ile ne ilgisi var peki?

DOM’da seçici fonksiyonlar vardır bilirsiniz. getElementById(), getElementsByClass() gibi. Fakat son verdiğim örnekteki nesnelere ulaşmak için birkaç döngü kurmanız gerekir, daha karışık nesene seçimlerinde de bizi uğraştırabilir. Mootools’u yine seveceksiniz, çünkü mootools’da seçici fonksiyonlar var ve bunlardan bir tanesi (muhtemelen en çok kullanılan) css adreslemelerine göre elemanlar seçiyor.

$ Fonksiyonu elemanları kimliklerine göre seçer. getElementById(); ile aynı işi yapıyor aslında

$$ Fonksiyonu az önce yazdığımız css adreslemesinde bulduğu elemanları nesne dizesi olarak verir.

Örneğin ipucu sınıfındaki tüm linkleri seçtirelim

icerik kimliği içindeki ipucu sınıflı tüm linker :

ya da birden fazla sınıf adreslemesine ait elemanların hepsi :

Şimdilik pek oturmadı farkındayım ama birkaç örnek yapalım eminim daha iyi anlayacaksınız :

Mesela elimizde 4-5 linkten oluşan bir menü olsun. Aynı zamanda sayfamızın içeriğinde de linkler, span’lar bold metinler vs bir sürü elemanımız var. Sadece css ile yerleştirilip düzenlenmiş durumda. Örnek HTML şöyle :

Gördüğünüz gibi basit bir html dosyası. Şimdi menudeki tüm linkleri seçip bir güzellik yapalım 🙂

$$ ile aldığımız nesneleri each ile dönüyoruz. içerideki fonksiyona verdiğimiz link parametresi dizi dönerken elemanın nesnesini ifade ediyor. Böylece o elemanlar üzerinde istediğimizi yapabiliyoruz. İçeride basitçe linklerdeki title argümanına atadığım açıklama metinlerini alert ettirdim. Ama bu sayfa yüklenirken yapılır be birşey anlamazsınız. Daha güzel bir örnek vermek gerekirse :

Linklerin üzerine geldiğinizde sayfa statusbar’ında linklerin url’leri yerine açıklamaları çıkar 🙂 Bu kısımlar dökümanla ilgili değil, onun için geçiyorum.

Mesela kullanılabilir bir örnek için de sayfada içerikten sonraki linkler kısmında birşeyler yapalım. O linkler site dışı linkler ve target’ları yok gördüğünüz gibi. Yani linkler doğrudan sayfa üzerinde açılacaklar. Bu linkleri yeni pencerede açtıralım.

kodu işimizi görecektir. Bu kod işletildikten sonra o linkler yeni pencerede açılacaktır.

Bu örnek css seçicileri anlamanızı sağlamıştır umarım.

CSS seçiciler ile tek eleman seçtirmek

CSS seçiciler ile tek eleman seçtirmek istediğinizde, mesela bir sürü eleman içinden css adresiyle bir eleman seçtiriyorsunuz :

az önceki örnekte alttaki linklerin etiketinde hepsine sınıf eklediğimizi düşünelim. Google linkine de google sınıfı atadık. Fakat bu sınıfa tek eleman var. Sadece o link var. Ancak CSS seçiciler her zaman dizi döner.

olarak seçmek istediğinizde tek elemanlı bir dizi dönecektir.

ile kolayca elemanınıza ulaşabilir, üzerinde işlemler yapabilirsiniz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir