bildirgec.org

Merhaba, arkadaşlar!Sizlele, bir süre önce geliştirmeye başladığım bir javascript kütüphanesini paylaşmak istiyorum. Biliyorum ki şimdi jQuery gibi harika birşey varken buna ne gerek var diye düşünüyorsunuzdur. Gerçekten bunda haklısınız fakat ben bizimde bir kütüphanemiz olsun istedim.KİMLERE ÖNERİLİR
– Bir javascript kütüphanesi öğrenmek isteyenlere- jQuery yerine daha hafif birşey arayanlara- Türkçe kütüphane arayanlarasize rahatlıkla önerebilirim.GENEL KULLANIMI
Javaskop([seçici]).FonkA(parametre, […]).FonkB()…FonkN();
Javaskop yerine $$ kısayolunu da kullanabilirsiniz.$$([seçici]).FonkA(parametre, […]).FonkB()…FonkN();
Seçiçilere Genel Bakış
Javaskop seçicileri bazı özel seçicileri hariç tıplı CSS seçicileri gibidir. Bu nedenden dolayı bu konuda azda olsa bilgi sahibi olmalısınız. Ben elimden geldiğince anlatacağım zaten.Kimlik (id) Seçicisi:
Kimlik seçimlerini bunu id değerini önüne bir # işareti koyarak belirliyoruz.Örneğin aşağıdaki gibi:

$$(‘#birAlan’); // id değeri “birAlan” olan elemanı seçiyoruzSınıf (class) Seçicisi:
Sınıf seçmek için class değeri önüne bir nokta (.) işareti koymamız gerekiyor. Aşağıdaki örneği inceleyiniz.Deneme TR
$$(‘.siteIsmi’); // class değeri siteIsmi olan yeri seçiyoruz.Özellik Seçicisi
Özellik seçici bir elemanı sahip olduğu özelliğe göre değerlendirerek seçer. Genel kullanımı etiket[özellik(belirtec)=(deger)] Aşağıdaki örnekle daha iyi anlayacaksınız.Öncelikle belirteç yerine neler gelebilir bir bakalım.
Karakter / Anlamı^ ile başlayan (örnek “okul yolu”, “okul” ile başlıyor)* içinde olan (örnek: “site” kelimesi “www.site.com” içinde)= tamamen eşit (örnek: “javaskop” ile “javaskop” tamamen aynı)$ ile biten (örnek: “bilim projesi”, “projesi” ile bitiyor )siteye git
$$(‘a[href=benimSitem]’); // href değeri benimSitem olan a etiketini seçiyoruz$$(‘a[title]’); // title özelliği atanmış a etiketlerini seçiyoruz$$(‘a[href$=em]’) // href özelliğine atanmış değer “em” ile biten a etiketlerini seçerİlk Eleman Seçici
Bazen sayfadaki ilk elemanı veya belirtilen bir etiket (a, p, div vs.) altındaki ilk elemanları seçmek isteriz. İşte bu gibi durumlarda “ilk” özel seçicisi bize yardıcı olacaktır.Örneğin sayfamızda div etiketlerinden ilk olanını seçmek istiyoruz. O zaman seçicimiz şöyle olacaktır: “div:ilk”$$(‘div:ilk’);
Sayfadaki ilk div etiketinin altındaki ilk p elemanını seçelim.

$$(‘div:ilk p:ilk’); // ilk div etiketinin altındaki ilk p elemanını seçElemanları tekli ve çiftli seçmek: “tek”, “cift”
Kimi durumda elemanları belirli bir sırayla seçilmesi gerekir. Örneğin tablolar yada listelerin daha kolay okunmasını sağlamak için satırlarını farklı renglerle boyarız. Bir örnekle durumu daha iyi açıklayalım. Şöyle bir listemiz olsun.

• Elma
• Portakal
• Kiraz
• Armut
• Çilek
• Karpuz

Bu listemizde satır numarı çift olanların (2, 4 …) arkaplan rengini mavi diğerlerinin ise olduğu gibi kalmasını istiyoruz. Bunu gerçekleştirmek için şöyle bir seçici kullanabiliriz: “#meyveler li:cift” ve kodumuz aşağıdaki gibi olur.$$(‘#meyveler li:cift’)
Birde satır numarı tek olanlara (1, 3 …) arkaplan rengi atayalım ve sarı yapalım. Seçicimizde sadece “cift” yerine “tek” seçici deyinmini koymamız yeterlidir.$$(‘#meyveler li:tek’).CSS(‘background-color’, ‘yellow’);
İçeriği boş elemanları seçmek: “bos”
Elemanlar sayfada içeriği boş olarak bulunabilirler (

) Bu durumda içeriği boş olan elemanlarımızı kontrol etmek isteyebiliriz. Aşağıdaki gibi bir sayfamız olsun:

Yukarıda içeriği boş olan p elemanını (yani 2. olanı) seçelim$$(‘.konu p:bos’);
ÖRNEKLER VE MAKALELER
Seçicileri test etFonksiyon: HazirMi() (Canlı)Fonksiyon: CSS() (Canlı)Fonksiyon: HTML() (Canlı)Fonksiyon: OlayEkle() (Canlı)Fonksiyon: MetinEkle() (Canlı)Fonksiyon: Opaklik() (Canlı)Özellik SeçicilerÖzel Seçiciler ve KullanımıKullanışlı İpuçları – 1JAVASKOP v1.0 İNDİR