JQuery Öğreniyorum – 2 (Seçiciler)

Bir önceki yazımda kısaca JQuery neden kullanmamız gerektiği  konusunda bilgi vermeye çalışmıştım.Bu yazımda ise JQuery en önemli konusun olan seçiler konusuna girmek istemekteyim.

JQuery de nesneleri seçmek için Css Class , html elemanlarını isimler yada html elemanlarını direk olarak    ID ‘ si kullanabilmektedir.

JQuery de seçim işlemi yapmak için $(“seçim yapmak istediğimiz nesne”) şeklinde kullanılmaktadır.

Html Elemanı Seçi

$(“p”) :Bu şekilde sadece p html elemanı seçmiş olduk.

$(“p,a”) : Bu şekilde hem p hem de  “a” html elemanın seçmiş olduk.Burada dikkat etmeniz gereken  nokta ise farklı elemanları seçim yapar iken araya “,” konulmasıdır.

$(“p img”) : bu şekilde ise p elemanı altındaki “img” teklerini seçmi olmaktayız.Yani bir parağrafımız var .Ama onun içerisinde deki “img” seçmek istiyoruz.Bu tip seçimler yapar ike araya “,” konulmamasına dikkat edeniz.

$(“p img”) bu örnekde bir diğer dikkate edilmesi gereken nokta ise p->img ye doğru bir seçim vardır.

Html Elemanın ID Kullara seçim yapmak

$(“divmenuContent”)

Gördüğünüz gibi ID kullanara sadece html elemanı isimi vermemiz yeterli olacak, şekilde nesneyi seçebiliyoruz.

Css Seçimleri

Css seçimlerini ,JQuery de aynı şekilde de kullabiliyoruz.Nasıl;

$(“#menuContent”): Şekilnde seçebiliyoruz.

$(“.menu”) :Bu şekilde ise bir css Class seçmiş olduk.

$(“p.News”): Bu şekilde yaptığımız şekilde news css Class atanış olan p elemanı seçmiş olduk.

$(“p.News.Enble”): uygulamada bazı durumlarda bir html elmanında bir den fazla Css Class atamanız gerekir ve onları seçini ise araya “.”  koyarak yapmaktayız.

Özel Seçici Kullanarak Seçim yapmak

Yukarında temel olarak kullanabilceğimiz seçicileri gördük.Bu bölümde ise seçim yapar iken kullanabileceğimiz kod parçalarını inceleyeceğiz.

:eq(3)

Kaçıncı sıradaki seçmek istediğiniz belirtirsiniz.

$(“img:eq(2)”)

Web Sayfamızda bulunan 5 adet bulunana “img” elemanında 2 tanesini seçmiş olduk.

Bu seçiciyi kullanır ken dikkate etmemiz gereken nokta ise seçme işlemi 0 da başlayarak devam etmektedir.

:not

Belirtmiş olduğumuz özellik dışında olan nesneleri seçmek istiyor iseniz , bunu kullanabilirsiniz.

$(“p:not(Enble)”)

Bu şekilde Enble Css Class özelliği taşımayan p elemanlarını seçmiş olduk.

:visible

Display özelliği “none” olmayan html elemanları seçmeyi sağlamaktadır.

$(“img:visible”)

örnekte web sayfasında görünür halde bulunan img elemanlarını seçmiş olduk.

:hidden

Display özelliği “none”  olan nesneleri  seçmeyi sağlamkatadır.

$(“a:hidden”)

Gizlenmiş olna linkleri seçmiş olduk.

:First

Birden fazla elema içerisinde ilkini seçmek için kullanır.Bunu eq(0) ile de yapabiliriz.

$(“a:First”)

Linkler içerisinde ilk linki seçmek işlemi yaptık.

:Last

Bir den fazla html elemaları içerisinde en sondakini seçmiş olduk.

$(“a:Last”)

bu yazımda, uygulama hazırlariken kullandığımız genel seçicileri değinmiş oldum.Bir daha yazımda görüşme dileği ile herkese kolya gelsin.

IBRAHIM ATAY 

Kaynak

http://docs.jquery.com/DOM/Traversing/Selectors

Leave a Reply

Your email address will not be published. Required fields are marked *