Jquery Dersleri 1 - Seçiciler ve Temel Filtreler

JQuery denince artık günümüz web dünyasında konuyu duymayan kalmadı diyebiliriz. Programciyim.com olarak bizde her ne kadar programlama konusunda türkçe kaynak temin etsek de, popüler teknolojileri de sizlerle paylaşmayı görev biliyoruz.

Programlama nedir, neden bu soruyu soruyoruz???

Programlama denince aslında ilk başta akla gelen kelimeler programlama dili, derleyici gibi başlıklar olsa da, bunların temelini kavrayan herkes, diğer uygulama alanlarında da kendine yer bulabilir. Bunun en güzel örneği de web programlamadır. İş böyle olunca da Türkiye gibi bir ülkede tüketim çok kolay gerçekleştiğinden, yüksek bilginin ne derecede önemsendiği sorusu da öne çıkıyor.

Buna ulaşmada aşamalar var ise, örneğin bir yapay zeka programlaması gerçekleştirebilmek için, belki önce web programlama yapılırsa, en azından olayın mantığı kavranmış olacak ve algoritma geliştirme konusunda bir altyapı oluşabilecektir.

Bu bağlamda, popüler teknolojilere değinerek sizlere programlamanın kapılarını aralayacak teknikleri anlatmayı umuyoruz.

Konumuza dönecek olursak, JQuery, bir Javascript kütüphanesi olup, DOM (Document Object Model) kullanarak web sayfalarını manipüle etmenize yarayan bir sistemdir. Bunu yapmak için de seçiciler(selectors) kullanırsınız. Bu seçicilerin de işlevlerine göre tipleri bulunur. Aşağıda bunları sırası ile göreceğiz.

Temel Seçiciler (Basic Selectors)

En basit anlamda bir veya birden fazla grup elementi elde etmek için seçicileri kullanırsınız. (Böylelikle seçtiğiniz bir element ile ilgili bir çok fonksiyonu yerine getirebilir, efekt, gizleme, hesaplama gibi)

Şimdi sıraylaa seçici parametrelerini görelim.

#id - Verilen id değerine ait olan tek bir elementi seçmek için kullanılır.

	$(document).ready( function() {
		$("#dıv1").html("Merhaba Dünya!");
	});

Bu örnekte de görüldüğü gibi sayfanızdaki bir div elementine # seçicisi ile (div1 ismindeki id's ile) erişerek html kodunu "Merhaba Dünya" olarak değiştirebiliyoruz.

element - Verilen tag isminde olan tüm elementleri seçer.

/*
Jquery 
Örnekleri 
*/
$(document).ready(function(){
    $("div").css("padding","20px");
  });

Bu örnekte de görüldüğü gibi yine bir seçici özelliği kullandık, ancak bu seferki diğerinden farklı, başında # simgesi yok, zaten div ismi de bilfiğimiz bir html tag ıdır. Böylelikle html dökümanı içerisindeki tüm div taglarını yakalamış ve bunlara css property olarak 20px padding özelliği eklemiş olduk.

.class - Verilen class değerini kullanan tüm elementleri seçmek için kullanılır.

/*
Jquery 
Örnekleri 
*/
 $(document).ready(function(){
    $(".classismi").css("border","5px solid black");
  });

Burada da css class adı .classismi olan tüm elementlerin border özelliğini değiştiriyoruz.

.class.class - Verilen class değerlerini (birden fazla class) içeren elementleri seçmek için kullanılır.

/*
Jquery 
Örnekleri 
*/
$(".classismi.baskaclassismi").css("border","5px solid black");

- Tüm elementleri seçmek için kullanılır. 

/*
Jquery 
Örnekleri 
*/
$("*").css("border","10px solid yellow");

seçici1,seçici2,seçici3 - Verilen birden fazla seçiciye karşılık gelen elementleri tek bir seferde yakalamak için kullanılır. 

/*
Jquery 
Örnekleri 
*/
$("div,a,p.classismi").css("border","5px solid blue");

 

Attribute Filters

Filtre denince akla ilk gelen excel, sql sorgusu gibi bir şey olabilir. JQuery'de de buna benzer olarak çeşitli attribute (özellik, ya da nitelik) içeren html elementleri üzerinde sorgulama yaparak, belli bir değere eşit olmaları, belli bir değer ile başlamaları ya da not equals kullanarak belli bir değere eşit olmamaları durumuna göre mantıksal işlemler yapabilirsiniz.
 

/*JQuery 
Ornekleri
*/			
$("div[id]").html("Merhaba Dünya");

Yukarıdaki örnek de bunun ilk tanıtımıdır. Burada [id] köşeli parantez içinde id attribute vererek, yani herhangi bir div elementine id bir özellik olarak eklenmişse, bunun içerdiği metni Merhaba Dünya olarak değiştiriyoruz.

Mesela içeriğimizde birden çok div varsa, ve sadece id özelliği eklediğimiz div leri değiştirmek,ancak id tanımlamadığımız div lerin aynen korunmasını istiyorsak bu özellikten yararlanabiliriz, böylece id attribute için bir filtre uygulamış oluruz.

/*JQuery 
Ornekleri
*/
$("a[href*='programciyim.com']").addClass("mydomain");

Yukarıdaki örnekte de yine özelliklere uyguladığımız filtrelere devam ediyoruz. Buradaki özellik ise, anchor yani herhangi bir linkin href özelliğinin içinde eğer programciyim.com şeklinde bir ifade yer alıyorsa, bunu yakalayıp, yani bu özellikte olan linkleri seçip bunlara mydomain isimli css classı örnek olarak ekleyebiliriz. Bu şekilde, çalışma zamanında eğer, bir içerik eklerken diyelim sitenizle ilgili bir sayfaya yönlendirme yapacaksanız, bu linkin formatı otomatik olarak biçimlendirilecek ve diğer linklerden ayrılacaktır, böylece sitenizi daha çekici bir hale getirebilir ve bunun gibi akıllı özellikleri kullanarak, kullanıcıların da dikkatini çekebilirsiniz.

/*JQuery 
Ornekleri
*/
$("p[class!=myclass]").append("Bu metin eklensin...");

Benzer şekilde yine yukarıdaki bir diğer örnekte ise, paragrafınızın css class özelliğini seçerek, eğer istediğiniz classın dışında bir class kullanıyorsa, bunu da != Not Equals (değilse) operatörünü kullanarak ayırd edebilir ve sonuna örneğin, append komutunu kullanarak bir metin ekleyebilirsiniz.

İlk dersimizde JQuery' de kullanılan en temel seçicileri gördük ve her seçici türü ile ayrı ayrı örnekler yaparak konuyu irdeledik. Görmüş olduğumuz gibi DOM kullanarak döküman üzerinde oldukça kolay şekilde erişim sağlayabiliyor ve kullanıcı tarafında css özelliği eklemeden tutun da, her hangi bir html elementinin özelliğini değiştirmeye kadar ve hatta içindeki metni dahi modifiye etmeye yarayan metodlarımız mevcut, dolayısıyla bu gücü kullanarak çok daha interaktif uygulamalar (web 2.0) gerçekleştirebilir ve kullanıcı deneyimini en üst düzeye çıkarabilriz. Daha sonraki derslerimizde de, bu örnekleri birleştirerek anlamlı uygulamalar oluşturacağız.

Programlama denince bir çok şey akla gelir, Javascript ya da script bunlardan sadece birisidir ve JQuery de senelerdir kullanılan bu istemci taraflı script dili üzerine geliştirilmiş bir kütüphanedir.

Özetlemek gerekirse, denizde binlerce balık türü varsa, bu sadece bir tanesi, daha derinlerde daha bir çok canlı türü var, hatta daha keşfedilemeyenler bile mevcut, mesela bilgisayarların ne zaman insanın yerini alacağı gibi!