jQuery Dersleri
jQuery Nedir?
jQuery Nedir?
jQuery Kurulumu
jQuery Kod Yapısı
jQuery ready Fonksiyonu
jQuery Nesne Seçimi
jQuery Fonksiyonlar

jQuery Efektleri
jQuery Gizle ve Göster
jQuery Kaydırma
jQuery Animasyonlar
jQuery callback
jQuery Toplu İşlemler

jQuery HTML
jQuery Bilgi Almak
jQuery Bilgi Değiştirme
jQuery Bilgi Ekleme
jQuery Veri Silme
jQuery'de CSS İşlemleri

jQuery Nesneler
jQuery Nesne Boyutları
jQuery Nesne Bulma/Seçme

jQuery AJAX
jQuery AJAX

Bağlantılar
HTML Dersleri
JavaScript Dersleri
CSS Dersleri
ASP Dersleri
PHP Dersleri
MySQL Komutları
jQuery Dersleri
Venus Programlama

Ana Sayfa Bize Ulaşın

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)

Tüm hakları saklıdır. Lütfen kaynak belirtmeden sitenizde yayınlamayın. Web Sitesi © 2014