yükleniyor..
 
 
Diğer Javascript - jQuery Temel Seçiciler

Temel Seçiciler

"Javascript - jQuery" ile ilgili 0 yazı bulundu.

Merhaba, bu yazımda jQuery kodları ile sayfanızdaki elementleri nasıl seçeceğinizi ve etkileşime geçeceğinizi anlatacağım. jQuery fonksiyonlarını kullanmadan önce www.jquery.com sitesindeki download linkinden Jquery'nin son sürümünü indirip web sayfanıza aşağıdaki gibi ekleyin.
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>

Sunucu üzerindeki yükü azaltmak için compressed(sıkıştırılmış) yazan versiyonu indirin. İndirdiğimiz jQuery kütüphanesini başka sunucu üzerinden de sağlayabiliriz. Başka sunucu üzerinden sağlarsak hostingimizin trafiğini işgel etmemiş ve her zaman en son sürümü kullanmış oluruz. Bize bu imkanı sağlayan sunuculara CDN(Content Delivery Network) denir.

Jquery kütüphanerini sağlayabileceğimiz bazı CDN sunucular şunlardır;

Google Ajax API CDN (örneğin : <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>)

Microsoft CDN (örneğin : <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>)

jQuery CDN (örneğin : <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>)

JQuery kütüphaneleri, sitenizi ziyaret eden birinin cache'sine kaydedilir. Daha sonra tekrar siteyi ziyaret ettiğinde tarayıcı çok hızlı çalışır.

jQuery ile bir elementi seçmek için $ sembolünü parantez ile kullanırız. Bir kaç örnek verecek olursak;
$('div a') //sayfadaki bütün div elementlerinin içindeki a(link) leri seçer.

$('#element_id') //Bir elementi id'si ile seçer.

$('.css_class') //Element yada elementleri uygulanan css class'a göre seçer. seçim yapıldıktan sonra seçilen element/elementlerin önüne fonksiyon eklenir.

Fonksiyonlar, seçilen element/elementler üzerinde yapılacak olan değişikliği belirler. Fonksiyonların kullanımı şu şekildedir; $('element')fonksiyon_adı();

örneğin; $("#firstdiv").css("border","3px solid red");

Bir elementin kullanıma hazır olduğu anda işlem yapmak için şu şekilde ready olayını tanımlıyoruz;

$(document).ready(function ()
{
..
});
Şimdi div elementine border özelliği katan bir örnek yapalım.

Yukarıdaki örneğimizi elementin diğer seçici özelliklerine göre uygularsak;
$("div").css("border", "2px solid blue"); //sayfadaki tüm div elementlerine uygulanır.
$("*").css("border", "2px solid blue"); //sayfada bulunan tüm elementlere uygulanır.

Aynı css sınıfı ile eşleşen tüm elementlere border özelliği katan örneğimizi yapalım. Pratiklik açısından yukarıdaki örneğimizde değişiklikler yaparak uygulayalım.

Şimdi elementleri çoklu seçerek ve birden fazla css uygulayarak bir örnek yapalım.

Sonuç aşağıdaki gibi olacaktır.
jquery-seçici

:first (seçilen ilk elementi etkiler.) Bir örnek yapalım;

jquery-first Sonuç şekildeki gibi olacaktır.
Aynı şekilde :last en son elenti etkiler.

:empty (alt element ya da yazı içermeyen elementleri seçer.) örneğin;

Sonuç aşağıdaki gibi olacaktır.

jquery-empty


Site içinde ara
Son yazılar
Tavsiye edilenler