jQuery استفاده می شود روی هزاران هزار صفحه وب این یکی از رایج ترین کتابخانه ها برای درج در صفحات است، و دستکاری DOM را به یک ضربه محکم می کند.

البته بخشی از محبوبیت جی کوئری سادگی آن است. به نظر می رسد ما می توانیم تقریباً هر کاری که دوست داریم با این کتابخانه قدرتمند انجام دهیم.

با وجود همه گزینه هایی که برای ما باز است، برخی از قطعات وجود دارد که تمایل داریم بارها و بارها به آنها بازگردیم. امروز می‌خواهم 10 قطعه را به شما بدهم که همه، تازه‌کارها، بارها و بارها از آن‌ها استفاده خواهند کرد.

1) دکمه بازگشت به بالا

// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});

//Create an anchor tag
<a class=”top” href=”#”>Back to top</a>

همانطور که می بینید با استفاده از جان دادن و scrollTop توابع در jQuery ما برای ایجاد یک اسکرول ساده به بالا انیمیشن نیازی به پلاگین نداریم.

با تغییر در scrollTop مقداری که می‌توانیم جایی را که می‌خواهیم نوار اسکرول قرار بگیرد تغییر دهیم، در مورد من از مقدار 0 استفاده کردم زیرا می‌خواهم به بالای صفحه ما برود. page، اما اگر من یک افست 100 پیکسلی می خواستم، فقط می توانستم 100 پیکسل را در تابع تایپ کنم.

بنابراین تنها کاری که ما واقعاً انجام می‌دهیم این است که بدنه سند خود را در طول 800 میلی‌ثانیه متحرک می‌کنیم تا زمانی که به بالای سند برود.

2) بررسی اینکه آیا تصاویر بارگذاری شده اند یا خیر

$(‘img’).load(function() {
console.log(‘image load successful’);
});

گاهی اوقات برای ادامه کار با اسکریپت های خود، باید بررسی کنید که آیا تصاویر شما به طور کامل بارگذاری شده اند، این قطعه سه خطی jQuery می تواند این کار را به راحتی برای شما انجام دهد.

همچنین می توانید با جایگزین کردن برچسب img با یک شناسه یا کلاس بررسی کنید که آیا یک تصویر خاص بارگذاری شده است یا خیر.

3) تصاویر شکسته را به طور خودکار رفع کنید

$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});

گاهی اوقات ما مواقعی داریم که پیوندهای تصویر را خراب می کنیم روی وب سایت ما و جایگزین کردن آنها به صورت یک به یک آسان نیست، بنابراین افزودن این کد ساده می تواند شما را از سردردهای زیادی نجات دهد.

حتی اگر پیوندهای خرابی نداشته باشید، افزودن آن هیچ ضرری ندارد.

4) کلاس را تغییر دهید روی شناور

$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);

ما معمولاً می خواهیم تصویر یک عنصر قابل کلیک را تغییر دهیم روی ما page هنگامی که کاربر روی ماوس می‌چرخد و این قطعه جی کوئری دقیقاً این کار را انجام می‌دهد، زمانی که کاربر شناور است یک کلاس به عنصر شما اضافه می‌کند و وقتی کاربر متوقف می‌شود کلاس را حذف می‌کند، بنابراین تنها کاری که باید انجام دهید این است که استایل‌های لازم را در فایل CSS خود اضافه کنید. .

5) غیرفعال کردن فیلدهای ورودی

$('input(type="submit")').attr("disabled", true);

در مواقعی ممکن است بخواهید دکمه ارسال یک فرم یا حتی یکی از ورودی های متنی آن غیرفعال شود تا زمانی که کاربر اقدام خاصی را انجام دهد (برای مثال، کادر انتخاب “من شرایط را خوانده ام” را علامت بزنید) و این خط کد انجام شود. که؛ را اضافه می کند معلول به ورودی خود نسبت دهید تا بتوانید در صورت تمایل آن را فعال کنید.

برای انجام این کار تنها کاری که باید انجام دهید این است که تابع removeAttr را اجرا کنید روی ورودی با غیرفعال به عنوان پارامتر:

$('input(type="submit")').removeAttr("disabled”);

6) بارگذاری لینک ها را متوقف کنید

$(‘a.no-link').click(function(e){
e.preventDefault();
});

گاهی اوقات ما نمی خواهیم پیوندها به یک مکان خاص بروند page یا حتی آن را مجدداً بارگذاری کنید، ما می‌خواهیم آنها کار دیگری مانند راه‌اندازی اسکریپت دیگر انجام دهند و در این صورت این قطعه کد ترفند جلوگیری از عملکرد پیش‌فرض را انجام می‌دهد.

7) محو کردن/اسلاید را تغییر دهید

// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});

// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});

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

8) آکاردئون ساده

// Close all Panels
$('#accordion').find(‘.content').hide();
// Accordion
$('#accordion').find(‘.accordion-header').click(function(){
var next = $(this).next();
next.slideToggle('fast’);
$(‘.content’).not(next).slideUp('fast’);
return false;
});

با اضافه کردن این اسکریپت تمام چیزی که واقعاً نیاز دارید روی شما page HTML لازم است بروید این کار را انجام دهید.

همانطور که در این قطعه مشاهده می کنید، ابتدا تمام پانل های آکاردئون خود را بستم و سپس روی رویداد کلیکی که من محتوایی را که به آن هدر پیوند داده شده است را تغییر دادم و همه موارد دیگر به بالا اسلاید می شوند. این یک روش ساده برای یک آکاردئون سریع است.

9) دو دیو با ارتفاع یکسان درست کنید

$(‘.div').css('min-height', $(‘.main-div').height());

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

10) لیست نامرتب لخته زبرا

$('li:odd').css('background', '#E8E8E8’);

با این قطعه کوچک می توانید به راحتی لیست های نامرتب راه راه گورخری ایجاد کنید، این پس زمینه ای را که تعریف می کنید قرار می دهد. روی هر آیتم لیست فرد را به طوری که می توانید یکی از موارد پیش فرض زوج را در فایل CSS خود قرار دهید. می توانید این قطعه را به هر نوع نشانه گذاری اضافه کنید، از جداول گرفته تا divs ساده، هر چیزی که می خواهید زبرا حذف شود.

نتیجه

اینها تکه‌هایی از کدهای جی کوئری هستند که من بارها و بارها در پروژه‌هایم از آنها استفاده می‌کنم. امیدوارم این را نشانه گذاری کنید page و هر زمان که به یکی از این تکه ها نیاز داشتید برگردید.

به چه تکه های جی کوئری تکیه می کنید؟ آیا کد بهتری برای این سناریوها دارید؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر مفید از طریق Shutterstock.