jQuery obyekt tapmaq/seçmək

HTML sənədi iç-içə elementlərdən ibarətdir. Məsələn;
<div>
   <ul>
      <li>Qırmızı</li>
      <li>Mavi</li>
   </ul>
</div>
Yuxarıdakı nümunədə div, bütün digər elementləri əhatə edir. ul isə yalnız li elementlərini əhatə edir.

jQuery bizləri, bunların yerini tapmaqda asanlıq yaradan funksiyalarla təmin edir.

jQuery parent() üsulu
Elementin aid olduğu bir üst elementi seçməyə yarayır.
<div><span>Bu sadəcə bir sınaqdır</span></div>
<script>
$(document).ready(function(){
  $("span").parent();
}); 
</script>
Yuxarıdakı funksiya bizə sənədimizdəki span'dan əvvəl gələn div'i verəcək. Beləliklə bunun üzərində əməliyyatlar edə bilərik.
 
jQuery children() üsulu
Əgər elementin içində iştirak edən obyektləri seçəcəyiksə, bu dəfə children() funksiyası köməyimizə çatacaqdır.
<div>
   <span class="qirmizi">Sətir 1</span>
   <span class="mavi">Sətir 2</span>
</div>
<script>
$(document).ready(function(){
  $("div").children();
}); 
</script>
Yuxarıdakı kod ilə bütün span elementləri seçilmiş olur.

Bunlardan yalnız istədiyimiz xüsusiyyətdəki elementin seçilməsini istəyiriksə, children("element xüsusiyyəti") formasından istifadə edə bilərik.
<script>
$(document).ready(function(){
  $("div").children("span.qirmizi");
});
</script>
Yuxarıdakı kod "qirmizi" stilinə sahib olan span elementlərini seçməyə yarayacaqdır.

jQuery find() üsulu
Bir və daha çox obyekti əhatə edən üst səviyyə html elementi içərisində axtarış edərək, tapdığımız obyekti seçə bilərik.
<div><span>jQuery öyrənirik</span></div> olsun.
<script>
$(document).ready(function(){
  $("div").find("span");
}); 
</script>
Yuxarıdakı kodda span elementi tapılıb seçilir.
 
Bütün obyektləri ifadə etmək üçün .find("*") istifadə edilə bilər.

jQuery ilə obyekt seçimi üçün köməkçi digər funksiyalar
<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>
Yuxarıdakı HTML koduna baxsaq, tək bir div'in bir çox (p, span, h2, h3) elementi əhatə etdiyini görürük. Bunlar arasında obyekt seçmək üçün siblings() əmrini istifadə edə bilərik.

Yuxarıdakı kod ilə div içərisindəki h2 elementi seçilmiş olur.
 
<script>
$(document).ready(function(){
  $("h2").siblings("p");
});
</script>
Yuxarıdakı kod ilə yalnız h2 ilə eyni qrupda olan p elementləri seçilmiş olur.
 
<script>
$(document).ready(function(){
  $("h2").next();
});
</script>
Yuxarıdakı kod isə bizə h2'dən sonra gələn h3 obyektini verir.
 
<script>
$(document).ready(function(){
  $("h2").nextAll();
}); 
</script>
Yuxarıdakı kod h2'dən sonra gələn bütün eyni qrupdakı elementləri seçməyə yarayır.
 
<script>
$(document).ready(function(){
  $("h2").nextUntil("p");
}); 
</script>
Yuxarıdakı kod h2'dən sonra gələn və p'dən əvvəl olan bütün eyni qrupdakı elementləri seçməyə yarayır.

Bundan başqa prev() bir əvvəlkini, prevAll() bütün əvvəlkiləri və prevUntil("obyekt") ifadə edilən obyektə qədər bütün əvvəlkiləri seçməyə yarayan funksiyalardır.

first(), last(), eq() və filter() üsulları
Bunlardan first(), bir elementin alt elementlərindən ilk olanı seçmək üçündür.
<script>
$(document).ready(function(){
  $("div p").first();
}); 
</script>
Hər hansı bir div elementi içindəki ilk p elementini seçir.

last() funksiyası isə bir elementin alt elementlərindən ən sondakını seçir.
<script>
$(document).ready(function(){
  $("div p").last();
}); 
</script>
Hər hansı bir div elementinin içində olan sonuncu p elementini seçir.

eq() üsulu, əgər bir elementdən çox olarsa, sırasını qeyd edərək arasından istədiyimizi seçməyə yarayır. Sıfır ilk elementi verir.
<script>
$(document).ready(function(){
  $("p").eq(1);
}); 
</script>
Yuxarıdakı kodla səhifədəki bütün p elementlərindən 2-cisi seçilir. (0 = 1, 1 = 2 sayılır)

filter() isə müəyyən bir xüsusiyyətinə görə elementi seçməyə yarayır.
<script>
$(document).ready(function(){
  $("p").filter(".intro");
}); 
</script>
Bütün p elementləri içərisində "intro" stilinə sahib olan p elementlərini seçir.
jQuery