دستورات زنجیره ای در جی کوئری -درس سیزدهم

خانه » بلاگ » jquery » دستورات زنجیره ای در جی کوئری -درس سیزدهم

دستورات زنجیره ای در جی کوئری:

در جلسات قبلی درباره قواعد دستوری جی کوئری صحبت کردیم اما گاهی در نوشتن کدهای جی کوئری نیاز داریم تا برای یک عنصر چندین متد متفاوت به کار ببریم . اگر شما بخواهد متدها را به صورت جداگانه بنویسید و هر بار عنصر مورد نظر را دوباره فراخوانی کنید باعث می شود مرورگر هر بار به صورت جداگانه عمل شناسایی عنصر را انجام دهد که در کاهش سرعت سایت شما موثر است . از این رو قصد داریم تا در این جلسه از آموزش گام به گام جی کوئری قاعده دستوری ایجاد دستورات زنجیره ای را به شما آموزش دهیم .پس با تیم طراحی سایت اصفهان وب یار همراه باشید .

دستورات زنجیره ای (پشت سر هم) در جی کوئری :

تا کنون در کدنویسی ها دستورات jQuery را یکی بعد از دیگری نوشته اید. اما تکنیکی به نام “زنجیره ای کردن” یا “chaining” وجود دارد که به ما اجازه می دهد تا تنها با یک دستور، چندین متد را روی یک عنصر مشخص، اجرا کنیم . این عمل باعث می‌شود چندین کد فقط در یک سطر قرار گیرد و در نتیجه علاوه بر افزایش سرعت سایت شما که در ابتدا به آن اشاره کردیم ، کد شما نیز بسیار مختصر گردد.

استفاده از دستورات زنجیره ای در جی کوئری به ما اجازه می دهد تا تنها با یک دستور، چندین متد را روی یک عنصر مشخص، اجرا کنیم.

برای زنجیره ای کردن دستورات ، تنها نیاز است عمل دلخواه تان را به عمل قبلی متصل کنید.

برای مثال:

در قطعه کد زیر، متدهای css () و slideUp () و slideDown () به یکدیگر زنجیر شده اند. عنصر با شناسه “p7” ابتدا به رنگ قرمز، سپس به صورت اسلایدی پنهان می شود و در نهایت به صورت اسلایدی نمایان خواهد شد:

$("#p7").css("color","red").slideUp(2000).slideDown(2000);

شما می توانید هر تعداد متد دیگری که نیاز دارید را به انتهای کد بالا اضافه نمایید.

توجه: زمانی که در حال زنجیره ای کردن متدها هستید، می توانید هر متد را در یک خط مانند زیر قرار دهید:

$("#p7").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

زیرا jQuery، خطوط سفید اضافی را حذف می کند و کد بالا را مانند یک خط کد اجرا خواهد کرد.

برای مثال :

می‌خواهیم تمام عناصر  تگ <section> در صورتی که دارای کلاس webyar باشند را مخفی (با فید شدن) کنیم.

$(" section. webyar").fadeOut();

 

یکی از مزیت‌های اکثر متدهای قابل اجرا بروی مجموعه عناصر انتخاب شده آن است که خروجی خود آنها مجموعه‌ای دیگر است. به این معنا که خروجی این متد، آماده اعمال یک متد دیگر است.
فرض کنید در مثال بالا بخواهیم پس از مخفی کردن هر تگ <section> یک کلاس به نام seoyar به آن بیافزاییم. به این منظور می‌توان کدی مانند زیر نوشت:

$("div. webyar ").fadeOut().addClass("seoyar ");

در پایان :

در جلسات قبلی آموزش گام به گام جی کوئری اشاره مختصر و کوتاهی به دستورات زنجیره ای داشته ایم اما اکنون سعی کردیم به طور کامل درباره دستورات زنجیره ای صحبت کرده و با آوردن چندین مثال متفاوت این موضوع را برای شما روشن تر سازیم.

پس اکنون وقت آن رسیده که کدهای جی کوئری خود را بازنگری کنید و برای بهینه سازی آنها اقدام نمایید.

درصورتی که با وجود مطالعه این آموزش و تمرین مثال ها احساس  میکنید که هنوز هم در کاربرد دستورات زنجیره ای در جی کوئری مشکلی دارید می توانید مشکل و سوال خود را با متخصصان تیم طراحی سایت وبیار در میان بگذارید.