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(); }); });

Demo element ismine göre, sayfadaki seçilen tüm elementleri gizlemek

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

Seçme işlemini elementlere "id" vererek de yapabiliyoruz. Bu da sadece belirlediğimiz elementlerde işlemin gerçekleşmesini sağlıyor. Örneğin bir elementimiz olsun ve idsini "#test" olarak verelim. Aşağıdaki kodlar sayesinde kullanıcı butona tıkladığında sayfamızdaki idsi "#test" olan element gizlenecektir.

$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); Demo element idsine göre, sayfadaki seçilen elementleri gizlemek See the Pen <a href="http://codepen.io/tolgacelik/pen/aOOwGV/">aOOwGV</a> by tolga celik (<a href="http://codepen.io/tolgacelik">@tolgacelik</a>) on <a href="http://codepen.io">CodePen</a>. 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.

$(document).ready(function(){

$("button").click(function(){ $("#test").hide(); }); });

Demo element classına göre, sayfadaki seçilen elementleri gizlemek

See the Pen <a href="http://codepen.io/tolgacelik/pen/jPPwvW/">jPPwvW</a> by tolga celik (<a href="http://codepen.io/tolgacelik">@tolgacelik</a>) on <a href="http://codepen.io">CodePen</a>.

 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 özelliği içeren tüm elementleri seçer.

Demo

$("a")

Target özelliği "_blank" olan tüm <a> elementlerini seçer.

Demo

$("a")

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

Evet arkadaşlar bu yazımda sizlere, jQueryde element seçimi ilgili örnekler paylaştım. Bir sonraki yazımda serimize jQuery ile ilgili başka örneklerle devam edeceğiz.

Soru ve önerilerinizi yorum olarak ya da e-mail göndererek iletebilirsiniz, teşekkürler. Kaynaklar : http://www.w3schools.com/