jQuery Serisi – jQuery Örnekleri (Element Seçmek – Selectors)
Merhaba arkadaşlar, Javascript kullanmak istediğimizde yardımımıza koşan“jQuery”kütüphanesinin ne olduğunu, ne işe yaradığını, nasıl kullanacağınızı anlatacağım ve jQuery örneklerini paylaşacağım “jQuery Serisine” seçiciler ile ilgili örneklerle devam ediyoruz.
Seçiciler (Selectors)
1) Aynı isimli tüm elementleri seçmek
jQuery ile aynı özellikteki tüm elementler seçmek istediğimizde ana adını yazmamız yeterli olacaktır. Örneğin sayfadaki tüm “p” elementlerini seçmek istiyoruz diyelim, aşağıdaki kodlar sayesinde kullanıcı butona tıkladığında sayfadaki tüm <p> elementleri gizlenecektir.
$(document).ready(function(){
$(“button“).click(function(){
$(“p“).hide();
});
});
Kodlarda element isimini yazarak istediğiniz elementleri gizleyebilirsiniz. Yapmanız gereken tek şey, $(“p”) yerine element adını yazmanız.
2) id ile element seçmek
$(document).ready(function(){
$(“button“).click(function(){
$(“#test“).hide();
});
});
Demo element idsine göre, sayfadaki seçilen elementleri gizlemek
Kodlarda kendi verdiğiniz element idsini yazarak istediğiniz elementleri gizleyebilirsiniz. Yapmanız gereken tek şey, $(“#test”) yerine element idnizi yazmanız.
3) class ile element seçmek
Seçme işlemini elementlere verdiğimiz classlar ile de yapabiliyoruz. Bu da sadece belirlediğimiz elementlerde işlemin gerçekleşmesini sağlıyor. Örneğin bir elementimiz olsun ve classını “.test” olarak verelim. Aşağıdaki kodlar sayesinde kullanıcı butona tıkladığında sayfamızdaki classı “.test” olan element gizlenecektir.
$(“#test“).hide();
});
});
Kodlarda kendi verdiğiniz element classını yazarak istediğiniz elementleri gizleyebilirsiniz. Yapmanız gereken tek şey, $(“.test”) yerine element classınızı yazmanız.
Diğer jQuery element seçme yöntemlerinden bazıları:
| Kod | Açıklama | Canlı Örnek |
|---|---|---|
| $(“*”) | Tüm elementleri seçmemizi sağlar. | Demo |
| $(this) | Varolan html elementini seçmemizi sağlar. | Demo |
| $(“p.intro”) | Classı “intro” olan tüm <p> elementlerini seçer. | Demo |
| $(“p:first”) | İlk <p> elementini seçer. | Demo |
| $(“ul li:first”) | İlk <ul> elementi içinde bulunan ilk <li> elementini seçer. | Demo |
| $(“ul li:first-child”) | Her <ul> elementi içinde bulunan ilk <li> elementini seçer. | Demo |
| $(“[href]”) | Href özelliği içeren tüm elementleri seçer. | Demo |
| $(“a[target=’_blank’]”) | Target özelliği “_blank” olan tüm <a> elementlerini seçer. | Demo |
| $(“a[target!=’_blank’]”) | Target özelliği “_blant” olmayan tüm <a> elementlerini seçer. | Demo |
| $(“:button”) | Tüm <button> elementlerini ve type özelliği “button” olan inputları seçer. | Demo |
Kaynaklar :
http://www.w3schools.com/
