X

jQuery Dersleri Ders 4 – jQuery Seçiciler

jQuery Seçiciler

Merhaba arkadaşlar uzun bir aradan sonra jQuery derslerine devam ediyoruz. Bu dersmizinde jQuery’deki seçicilere değineceğiz.

jQuery Seçicileri

jQuery’deki seçiciler bizde html etiketlerini seçmemize olanak sağlar.

Seçiciler html etiketlerindeki kimlik,veri,stil özelliklerini ve ek olarak kedni eklediği özellikleri seçmemize yarar.

jQuery’deki seçiciler $() işareti arasına yazılır.

HTML Etiketi Seçici

Html etiketini seçmek için aşağıdaki kodu yazıyoruz.


$("p")

Yukarıdaki kodda p etiketini seçtik.

Örnek;


$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

Yukarıdaki kodda button etiketine tıklandığında ($(“button”).click(function()) p etiketinin gizlenmesini ($(“p”).hide();) istedik. $(document).ready(function(){ bu kodun arsına almamızın sebebi sayfa tam yüklenince içine aldığımız kodların çalışmasıydı.

#İd Seçicileri

İd seçicileri ise HTML etiketine belirtiğimiz id özniteliğini bulmamasını sağlar.

Not: HTML etiketlerine eklediğimiz id öznitelikleri bir kimlikmiş gibi her bir HTML etiketi için farklı olarak eklenmelidir. Örnek verecek olursak bir HTML etiketine “yazi” adında id özniteliği vermişsek başka bir HTML etiketine “yazi” adında id özniteliği veremeyiz.

Örnek;


$(document).ready(function(){
$("button").click(function(){
$("#yazi").hide();
});
});

Yukarıdaki örneğimizde butona tıklandığında ($(“button”).click(function()) id özelliği “yazi” olan HTML etiketinin gizlenmesini ( $(“#yazi”).hide()) istedik.

Sınıf (Class) Seçicileri

Sınıf seçicileri jQuery’de belirli sınıf özelliklerine sahip HTML etiketlerini bulmaya yarar.


$(".deneme")

Yukarıdaki kodda class özelliği deneme olan HTML etiketlerini seçmesini istedik.

Örnek;


$(document).ready(function(){
$("button").click(function(){
$(".deneme").hide();
});
});

Örneğimizde bu sefer butona tıklandığında ($(“button”).click(function()) sınıfı (class’ı) deneme olan HTML etiketinin gizlenmesini ($(“.deneme”).hide();) istedik.

Tüm jQuery Seçicileri

Seçici Açıklama
$(“*”) Tüm HTML etiketlerini seçer.
$(this) Geçerli HTML etiketini seçer.
$(“p.yazi”) <p> etiketleri arasında sınıfı yazi olanları seçer.
$(“p:first”) İlk <p> etiketini seçer.
$(“ul li:first”) <ul> etiketleri içindeki ilk <li> etiketini seçer.
$(“ul li:first-child”) <ul> etiketleri içindeki <li> etiketilerinin ilk öğesini seçer.
$(“[href]”) Href özniteliğine sahip tüm HTML etiketlerini seçer.
$(“a[target=’_blank’]”) Target özniteliği “_blank” olan tüm HTML etiketlerini seçer.
$(“a[target!=’_blank’]”) Target özniteliği “_blank” olmayan tüm HTML etiketlerini seçer.
$(“:button”) İnputlardaki “type” özniteliğinin değeri “button” olan tüm HTML etiketlerini seçer.
$(“tr:even”) Tüm <tr> etiketlerinden even özelliğine sahip etiketleri seçer.
$(“tr:odd”) Tüm <tr> etiketlerinden odd özelliğine sahip etiketleri seçer.

 

Dersimizin sonuna geldik arkadaşlar bir başka derslerde görüşmek üzere. Kendinize iyi bakın, takildiğınız yer olursa yorum olarak sorabilirsiniz.

Tuğra Yaldız: Merhaba bu alanda kısaca kendimden bahsedeceğim. Adım Tuğra, 19 yaşındayım. Ticaret lisesi mezunuyum şuan Afyon Kocatepe Üniversitesinde İşletme bölümü okuyorum. Aslen Konyalıyım Afyonkarahisar'da ailemle birlikte yaşıyorum. Yaklaşık 11 senedir bilgisayarlarla içli dışlıyım son 6 senedir kendimi internete 2 yıldır ise Web Programlamaya verdim ileri derece PHP ve HTML biliyorum CSS Javascript Jquery için kendimi geliştirmeye devam ediyorum.. Yakında yayına çıkaracağım yyazilim.com için projeler geliştiriyorum. İş çözümleriniz için mail (iletisim@tugrayaldiz.com) atabilirsiniz. Şimdilik benden bu kadar eğer sende aramıza gelmek istersen mail listemize katılman yeterli kendine iyi bak. :) Not: Web programlama dersleri için https://www.w3schools.com adresini kaynak alıyorum.
Benzer Yazılar