jQuery Nesne Bulma/Seçme
Bir HTML belgesi iç içe elementlerden oluşur. Örneğin;
JAVASCRIPT Kodu
<div>
<ul>
<li>Kırmızı</li>
<li>Mavi</li>
</ul>
</div>
Yukarıdaki örnekte div, tüm diğer elementleri kapsar. ul ise sadece li elementlerini kapsar.
İşte jQuery bizlere bunların yerini bulmada kolaylık sağlayan fonksiyonlar sağlar.
jQuery parent() Yöntemi
Bir elementin ait olduğu bir üst elementi belirtmemize yarar.
JAVASCRIPT Kodu
<div><span>Bir kelime yazın</span></div>
<script>
$(document).ready(function(){
$("span").parent();
});
</script><br/><br/>
Yukarıdaki fonksiyon bize belgemizdeki span'dan önce gelen div'i verecektir. Böylelikle bunun üzerine işlem yapabiliriz.
jQuery children() Yöntemi
Eğer belirttiğimiz elementin içinde yer alan nesneleri seçeceksek bu kez children() fonksiyonu yardımımıza koşar.
JAVASCRIPT Kodu
<div>
<span class="kirmizi">Satır 1</span>
<span class="mavi">Satır 2</span>
</div>
<script>
$(document).ready(function(){
$("div").children();
});
</script><br/><br/>
Yazacağımız aşağıdaki kod ile tüm span elementleri seçilmiş olur.
Bunlardan sadece belirleyeceğimiz özellikteki seçilsin istiyorsak children("nesne özelliği") şeklinde kullanabiliriz.
JAVASCRIPT Kodu
<script>
$(document).ready(function(){
$("div").children("span.kirmizi");
});
</script><br/><br/>
Yukarıdaki kod "kirmizi" stiline sahip span elementlerini seçmemize yarar.
jQuery find() Yöntemi
Bir ve daha fazla nesneyi kapsayan üst düzey bir html elementi içerisinde arama yaparak da bulmak istediğimiz nesneyi seçebiliriz.
JAVASCRIPT Kodu
<div><span>Bir şey yazın.</span></div> olsun.
<script>
$(document).ready(function(){
$("div").find("span");
});
</script><br/><br/>
Tüm nesneleri ifade etmek için .find("*") kullanılabilir.
jQuery ile Nesne Seçimine Yardımcı Diğer Fonksiyonlar
JAVASCRIPT Kodu
<div>div
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
<script>
$(document).ready(function(){
$("h2").siblings();
});
</script><br/><br/>
Yukarıdaki HTML koduna baktığımızda tek bir div'in birçok (p, span, h2, h3) elementi içerdiğini görüyoruz. İşte bunlar arasında nesne belirtmek için siblings() komutu kullanabiliriz.
Yukarıdaki kod ile h2 hariç diğer tüm div içindeki komutlar kastedilmiş olur.
JAVASCRIPT Kodu
<script>
$(document).ready(function(){
$("h2").siblings("p");
});
</script><br/><br/>
Yukarıdaki kod ile sadece h2 ile aynı grupta yer alan p elementleri seçilmiş olur.
JAVASCRIPT Kodu
<script>
$(document).ready(function(){
$("h2").next();
});
</script><br/><br/>
Yukarıdaki kod ise bize h2'den sonra gelen (h3) nesnesini verir.
JAVASCRIPT Kodu
<script>
$(document).ready(function(){
$("h2").nextAll();
});
</script><br/><br/>
Yukarıdaki kod h2'den sonra gelen tüm aynı gruptaki elementleri seçmeye yarar.
JAVASCRIPT Kodu
<script>
$(document).ready(function(){
$("h2").nextUntil("p");
});
</script><br/><br/>
Yukarıdaki kod h2'den sonra gelen ve p den önce olan tüm aynı gruptaki elementleri seçmeye yarar.
Ayrıca prev() bir öncekini, prevAll() tüm öncekileri ve prevUntil("nesne") belirtilen nesneye kadar tüm öncekileri seçmeye yarayan fonksiyonlardır.
first(), last(), eq() ve filter() Yöntemleri
- Bunlardan first(), bir elementin alt elementlerinden ilkini seçmeye yarar.
JAVASCRIPT Kodu
<script>
$(document).ready(function(){
$("div p").first();
});
</script><br/><br/>
(Herhangi bir div elementi içindeki ilk p elementini seçer)
- last() fonksiyonu ise bir elementin alt elementlerinden en sondakini seçer.
JAVASCRIPT Kodu
<script>
$(document).ready(function(){
$("div p").last();
});
</script><br/><br/>
(Herhangi bir div elementinin içinde yer alan son p elementini seçer)
- eq() yöntemi, bir elementten birden fazla olduğunda sıralamaya bakarak hangisini seçeceğimizi bildirmemize yarar. Sıralamada sıfır ilk elementi verir.
JAVASCRIPT Kodu
<script>
$(document).ready(function(){
$("p").eq(1);
});
</script><br/><br/>
(Sayfadaki tüm p elementlerinden 2. sini seçer (0 = 1, 1 = 2 şeklinde gidiyor))
- filter() ise belirli bir özelliğine göre element seçmemizi sağlar.
JAVASCRIPT Kodu
<script>
$(document).ready(function(){
$("p").filter(".intro");
});
</script><br/><br/>
(Tüm p elementleri içinde "intro" stiline sahip p elementlerini seçer)