در ادامه مطلب قبلی آموزش (jQuery) جی کوئری 3# به ادامه بحث میپردازیم.
گاهی اوقات انتخاب عناصر با توجه به مکان آنها و یا موقعیت مکانی آنها نسبت به سایر اجزا صورت میپذیرد؛ برای مثال اولین لینک صفحه و یا اولین لینک هر پاراگراف و یا گزینهی آخر از لیست، jQuery شیوه ای خاص را برای چنین انتخاب هایی ارایه کرده است. برای مثال دستور زیر اولین لینک موجود در صفحه را انتخاب میکند:
دستور زیر چکاری انجام میدهد؟
دستور بالا تمامی پاراگرافهای فرد را انتخاب میکند. روشهای دیگری هم ممکن است بخواهیم استفاده کنیم؛ مثلا دستور زیر تمامی پاراگرافهای زوج را انتخاب میکند:
یا با استفاده از دستور زیر میتوان آخرین فرزند یک والد را انتخاب کرد؛ در زیر آخرین <lii> فرزند یک <ul> انتخاب میشود. علاوه بر انتخاب کننده هایی که ذکر شد؛ تعداد قابل توجه دیگری نیز وجود دارند که در جدول 2-2 ذکر شده اند.
پ.ن : در جدول بالا در توضیحات بعضی از انتخاب گرها comment// نوشه شده است، اینها جز دستور نبوده و فقط برای نمایش صحیح پردانتز در صفحه اینترنتی نوشته شده است، در عمل نیازی به اینها نیست.
با توجه به حالتهای مختلف و گزینههای گوناگونی که انتخاب کنندهها در اختیار ما گذاشته اند، اگر هنوز دنبال قدرت بیشتری از انتخاب کنندهها هستید در ادامه به چند مورد از آنها اشاره خواهیم کرد.
3-1- انتخاب عناصر بر اساس موقعیتگاهی اوقات انتخاب عناصر با توجه به مکان آنها و یا موقعیت مکانی آنها نسبت به سایر اجزا صورت میپذیرد؛ برای مثال اولین لینک صفحه و یا اولین لینک هر پاراگراف و یا گزینهی آخر از لیست، jQuery شیوه ای خاص را برای چنین انتخاب هایی ارایه کرده است. برای مثال دستور زیر اولین لینک موجود در صفحه را انتخاب میکند:
a:first
دستور زیر چکاری انجام میدهد؟
p:odd
دستور بالا تمامی پاراگرافهای فرد را انتخاب میکند. روشهای دیگری هم ممکن است بخواهیم استفاده کنیم؛ مثلا دستور زیر تمامی پاراگرافهای زوج را انتخاب میکند:
p:even
یا با استفاده از دستور زیر میتوان آخرین فرزند یک والد را انتخاب کرد؛ در زیر آخرین <lii> فرزند یک <ul> انتخاب میشود. علاوه بر انتخاب کننده هایی که ذکر شد؛ تعداد قابل توجه دیگری نیز وجود دارند که در جدول 2-2 ذکر شده اند.
جدول 2-2: انتخاب گرهای پیشرفته موقعیت عناصر که توسط jQuery پشتیبانی میشوند
توضیح | فیلتر |
اولین عنصر که با شرط ما مطابقت میکند را انتخاب میکند، li a:first اولین لینکی را که فرزند لیست به حساب میآیند؛ را بر میگرداند | :first |
آخرین عنصری که با شرط ما مطابقت کند را انتخاب میکند. li a:last آخرین لینک از فرزندان لیست را برمی گرداند. | :last |
اولین فرزند عنصر که با شرط ما مطابقت میکند را انتخاب میکند. li a:first-child اولین عنصر لینک از هر لیست را برمی گرداند. | :first-child |
آخرین فرزند عنصر که با شرط ما مطابقت میکند را انتخاب میکند. li a:last-child اولین عنصر لینک از هر لیست را برمی گرداند. | :last-child |
تمام عناصری که پدر انها تنها همان فرزند را داد، برمی گرداند. | :only-child |
nامین فرزند عنصری که با شرط ما مطابقت داشته باشد را انتخاب میکند. li: nth-child:(2) //comment دومین عنصر از هر لیست را برمی گرداند. | :nth-child(n) |
فرزندان زوج یا فرد عنصر را انخاب میکند. li:nth-child(even) //commentتمام عناصر زوج لیستها را بر میگرداند. | :nth-child(even یا odd) |
nامین فرزند عنصری که از طریق فرمول ارایه شده به دست میآید را انتخاب میکند. اگر Y صفر باشد، نیازی به نوشتن آن نیست. li:nth-child(3n)//comment تمام عناصر ضریب 3 لیستها را بر میگرداند، در حالی که li:nth-child(5n+1)// comment عناصری از لیست را برمیگرداند که بعد از عنصرهای ضریب 5 لیستها قرار گرفته باشند. | :nth-child(Xn+Y) |
تمام عناصر زوج یا فرد که با شرط ما مطابقت کنند را انتخاب میکند. li:evenتمامی عناصر زوج لیستها را بر میگرداند. | :even |
n امین عنصر انتخاب شده را برمی گرداند. | :eq(n) |
عناصر بعد از n امین عنصر را بر میگرداند. (در واقع عناصری که بزرگتر از عنصر n ام هستند را بر میگرداند) | :gt(n) |
عناصر قبل از n امین عنصر را بر میگرداند. (در واقع عناصری که کوچکتر از عنصر n ام هستند را بر میگرداند) | :lt(n) |
نکته ای که در مورد انتخاب گرهای جدول بالا وجود دارد این است که در فیلتر nth-child: برای سازگاری با CSS، مقدار شمارشگر از 1 آغاز میشود، اما در سایر فیلترها از قاعده ای که اکثر زبانهای برنامه نویسی استفاده شده است و شمارشگر آنها از صفر اغاز میشود. برای درک این موضوع مثال زیر را در نظر بگیرید:
<table id="languages"> <thead> <tr> <th>Language</th> <th>Type</th> <th>Invented</th> </tr> </thead> <tbody> <tr> <td>Java</td> <td>Static</td> <td>1995</td> </tr> <tr> <td>Ruby</td> <td>Dynamic</td> <td>1993</td> </tr> <tr> <td>Smalltalk</td> <td>Dynamic</td> <td>1972</td> </tr> <tr> <td>C++</td> <td>Static</td> <td>1983</td> </tr> </tbody> </table>
حال میخواهیم از این جدول، محتویات تمام خانه هایی که نام یک زبان برنامه نویسی در آنهاست را انتخاب نماییم. از انجا که نام این زبانها در اولین ستون از هر سطر قرار دارد. میتوانیم دستوری مانند زیر بنویسیم:
و یا با استفاده از دستور زیر این کار را انجام دهیم:
اما دستور اول مختصرتر و خواناتر است. پس از آن برای دسترسی به نوع هریک از زبانهای برنامه نویسی، دستور انتخاب کننده دوم را به صورت
تغییر میدهیم، و همچنین با تغییر پارامتر 2 به 3 سالی که هر یک از زبانها ابداع شده اند ، انتخاب میشوند. بدیهی است در این حالت دو دستور
با یکدیگر برابرند. اما هردوی آنها ستون آخر از هر سطر را انخاب میکنند، در شرایطی که بخواهیم آخرین خانه جدول انتخاب شود (خانه ای با مقدار 1983)، از td:last استفاده میکنیم. توجه کنید در حالی که دستور td:eq(2) //comment خانه ای با مقدار 1995 را انتخاب میکند، دستور td:nth-child(2)//comment تمام خانههای بیان کننده نوع زبانها را انتخاب میکند. بنابراین به خاطر داشته باشید که مقدار ابتدایی شمارشگر فیلتر eq: از صفر است و این مقدار برای فیلتر nth-child: یک تعیین شده است.
در پست بعدی انتخاب گرهای CSS و فیلترهای سفارشی jQuery را بررسی خواهیم کرد.
table#languages tbody td:first-child
و یا با استفاده از دستور زیر این کار را انجام دهیم:
table#languages tbody td:nth-child(1)
اما دستور اول مختصرتر و خواناتر است. پس از آن برای دسترسی به نوع هریک از زبانهای برنامه نویسی، دستور انتخاب کننده دوم را به صورت
:nth-child(2)
:nth-child(3) یا :last-child
در پست بعدی انتخاب گرهای CSS و فیلترهای سفارشی jQuery را بررسی خواهیم کرد.