Filter ها در Jquery
آموزش جی کوئری --> جلسه دوم --> قسمت دوم : در این مقاله ، فیلترهای جی کوئری مانند first,last,odd,even,animated,focus,not را بررسی می کنیم .

خاصیتی که برای فیلتر کردن المان های انتخابی در صفحه بکار می روند مانند last و first و odd و even .

انواع فیلتر ها در جی کوئری :

فیلتر

نتیجه

:first  ,  :last

اولین یا آخرین المان موجود در صفحه

:odd  ,  :even

المان های زوج یا فرد

:gt() , :lt() , :eq()

المان های کوچکتر-مساوی-بزرگتر از ایندکس

:animated

المان هایی که در پروسه انمیشن می باشند

:focus

المان هایی که در حال فوکوس هستند

:not(expr)

المان هایی که با عبارت داخل پرانتز مطابقت ندارند

 

برای تمرین در زمینه فیلترها ، فایل جدید  بنام filters.html در فولدر jq_ch_2 بسازید و پس از افزودن رفرنس جی کوئری به head آن ، کدهای زیر را به بدنه صفحه اضافه کنید :


    

Using Basic jQuery Filters

jQuery filters are used to refine the results that are returned from selectors.

A few examples:

  • $("p:first"): of the returned <p> tags, select the first one
  • $("p:even"): select the even-number <p> tags
  • $("a:gt(1)"): of the <a> tags, select all those after the 0th and 1st
  • $("p:not(p:eq(2))"): select all the <p> tags except the one at index 2

This is paragraph 1

This is paragraph 2

This is paragraph 3

This is paragraph 4

This is paragraph 5

سپس کد های زیر را در بخش script بنویسید :


    $("document").ready(function () {
        $("#example p:first").css("border", "3px solid green");
        $("#example p:last").css("border", "3px solid green ");
    });

 

توضیح : در خط اول که در script فوق نوشتیم ، سلکتور را بصورت پیچیده تری نسبت به قبل بیان کرده ایم : $(“#example p:first”) این سلکتور بدین معنیست که ابتدا محدوده انتخاب را به div با آیدی example محدود کرده ایم و سپس توسط فیلترها گفتیم اولین پاراگراف این div را انتخاب کن و border آنرا سبزرنگ کن . در دومین دستور جی کوئری فوق ، سلکتور جی کوئری دقیقا مانند اولی است با این تفاوت که آخرین پاراگراف (last) را انتخاب می کند . بنابراین خروجی بصورت تصویر زیر می شود (پاراگرافهای اول و آخر حاشیه سبزرنگ دارند) :

خروجی فیلترها در جی کوئری 

برای تمرین بعدی دو خط زیر را به دستورات جی کوئری اضافه کنید (دستورات first و last را comment کنید) :


$("#example p:even").css("border", "3px solid red");
$("#example p:odd").css("border", "3px solid red");

ابتدا خط دوم یعنی odd را کامنت کنید و سپس فایل filters.html را در مرورگر خود اجرا کنید . خروجی زیر را خواهید دید :

فیلترها در جی کوئری

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

نکته : ایندکس ها از عدد صفر شروع می شوند پس پاراگراف اول که ایندکس ۰ (عدد زوج) دارد انتخاب شده است .

فیلتر odd نیز به همین ترتیب عمل می کند با این تفاوت که ایندکس های ۱ و ۳ را انتخاب می کند .

در تمرین بعدی دستورات زیر را داریم :


$("#example .a:first").css("border", "3px solid green");
$("#example .b:even").css("border", "3px solid green");

توضیح : سلکتور $(“#example .a:first”) بدین مفهوم است که اولین المانی را انتخاب کن که اولا داخل div با آیدی example باشد و دوما کلاس a داشته باشد .

تمرین بعدی درباره فیلترهای بزرگتر-مساوی-کوچکتر می باشد . دستورات زیر را در بخش script فایل خود بنویسید و سایر دستورات را کامنت کنید :


$("#example p:gt(1)").css("border", "3px solid green");
$("#example p:not(p:eq(2))").css("border", "3px solid green");

توضیح : سلکتور اول یعنی #example p:gt(1) می گوید تمام پاراگراف هایی را انتخاب کن که اولا در محدوده div با آیدی example باشند دوما ایندکس آنها از یک بزرگتر باشد (یعنی پاراگرافهای سوم به بعد) . بنابراین خروجی دستور اول به شکل زیر خواهد بود :

فیلترها در jquery

توضیح دستور دوم : در این سلکتور یعنی $(“#example p:not(p:eq(2))) قضیه را کمی پیچیده کردیم !

این selector بدین معنی است که اولا مانند سایر مثال های این بخش درون تگ div با آیدی example باشد . ثانیا با عبارت (expression) داخل فیلتر not مطابقت نداشته باشد یعنی ایندکس پاراگراف ۲ نباشد . بنابراین بجز پاراگراف سوم (ایندکس ۲) سایر پاراگراف ها را انتخاب می کند . خروجی بصورت زیر است :

filter ها در جی کوئری

در مقاله بعد ، بحث سلکتورهای پیشرفته را شروع خواهیم کرد .


برچسب‌ها:

filter در جی کوئریjquery filtersفیلترها در جی کوئری

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

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

یازده − 3 =