سلکتورهای پیشرفته در Jquery
آموزش جی کوئری --> جلسه دوم --> قسمت سوم : در این مقاله ، در مورد سلکتورهای پیچیده تری مانند adjacent و siblings و child صحبت خواهیم کرد .

در این قسمت می خواهیم سلکتور های پیچیده تر (سلسله مراتبی-Hierarchy) را با هم بررسی کنیم .

سلکتور فزرند بی واسطه (Child Selector) :

برای انتخاب فرزند مستقیم یک والد (Parent) بکار میرود که توسط کاراکتر < مشخص می شود . به مثال زیر توجه کنید :

فایلی بنام advanced_selectors.html در فولدر jq_ch_2 بسازید و مانند مثالهای قبل ، به کتابخانه جی کوئری رفرنس بدهید . کدهای زیر را در بخش بدنه صفحه بنویسید :


    

jQuery Hierarchy Selectors

To select elements based on their position in the document tree, use the Hierarchy Selectors.

The Hierarchy Selectors work by examining the position of target elements relative to other elements:

  • $("parent > child"): selects "child" elements that are immediate descendants of the "parent"
  • $("ancestor descendant"): selects "descendant" elements as long as they have an "ancestor" element somewhere above them
  • $("prev + next"): selects the "next" element if it is immediately preceded by a "prev" element
  • $("prev ~ siblings"): selects all "siblings" elements that come after a "prev" element

This is paragraph 1

This is paragraph 2

This is paragraph 3

This is paragraph 4

This is paragraph 5

 و در بخش head آن ، script جی کوئری را مطابق زیر تعریف کنید :


$("document").ready(function () {
    $("div > p").css("border", "3px solid yellow");
});

توضیح : در سلکتور $(“div > p”) گفته شده که پاراگرافهایی را انتخاب کن که فرزند بی واسطه (Immediate Child) تگ div باشند . بنابراین پاراگرافهایی که در div با آیدی example می باشند انتخاب می شوند و رنگ border آنها زرد می شود (مطابق تصویر زیر) :

سلکتور های سلسله مراتبی

سلکتور اولاد (Descendant Selector) :

بیانگر فرزندان یک والد و نیز نوه ها و نتیجه ها و … می باشد ! بدین معنی که مهم نیست المان بصورت بی واسطه فرزند والد باشد و فقط باید زیرمجموعه والد باشد . مثال زیر را بررسی کنید :

دستور جی کوئری زیر را به بخش head اضافه کنید و دستور قبلی را کامنت کنید :


$("document").ready(function () {
    $("div > p").css("border", "3px solid yellow");
});

توضیح : سلکتور $(“div p.a”) بدین مفهوم است که تمام پاراگرافهایی که دارای کلاس a هستند و نیز زیرمجموعه تگ div باشند را انتخاب کن .

 

سلکتور مجاور (Adjacent Selector) :

برای انتخاب المانی که دقیقا بعد از المان اول آمده است . بطور مثال در سلکتور $(“a + b”) گفته شده که المان b را که دقیقا مجاور به المان a می باشد را انتخاب کن . به مثال واضح تر زیر دقت کنید :

دستور زیر را در بخش مربوطه بنویسید :


  $("ul + div").css("border", "3px solid yellow");

این سلکتور بدین معنی می باشد که تگ div را که بلافاصله بعد از ul آمده است را انتخاب کن . بنابراین خروجی در این حالت بصورت تصویر زیر می شود :

سلکتور مجاور

مشاهده می کنید که کل div با آیدی example انتخاب شده است (زیرا مجاور تگ ul می باشد)

 

سلکتور هم خانواده های بعد (Next Siblings Selector) :

به این معنی است که تمام هم خانواده های بعد از المان اول را انتخاب کن . با مرور مثال زیر ، مطلب کاملا برایتان روشن خواهد شد :

دستور زیر را در script بنویسید :


  $("#para1 ~ p").css("border", "3px solid yellow");

سلکتور $(“#para1 ~ p”) بدین معنی است که تمام پاراگرافهایی که هم خانواده (sibling) المانی با آیدی para1 می باشند و بعد از آن تعریف شده اند را انتخاب کن . خروجی بصورت زیر می شود :

سلکتور siblings

در مقاله بعد راجع به فیلترهای پیشرفته در جی کوئری صحبت خواهیم کرد .


برچسب‌ها:

سلکتورهای پیشرفته

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

5 × 3 =