jQuery در صفحان وب سایت بسیاری مورد استفاده قرار می گیرد. و یکی از متداول ترین کتابخانه هایی است که در صفحات وب سایت استفاده می شود, که عمکرد آن با آبجکت DOM است.
البته, دلیل اصلی استفاده از jQuery سادگی آن است. و شما می توانید هر کاری توسط این کتابخانه انجام دهید.
چندین دستور و کد از آن وجود دارد که به صورت مرتب مود استفاده طراحان و برنامه نویسان وب قرار می گیرد. در این بخش به شما 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>
به طوری که در بالا مشاهده می نمایید تابع animate و scrollTop در jQuery برای اسکرول به بالا به صورت انیمیشنی نیازی به پلاگین jQuery وجود ندارد.
با تغییر مقدار scrollTop می توانیم اسکرول را به جایی که می خواهیم هدایت نماییم, در برخی از زمان ها این مقدار 0px است ولی می توانید به آن سایر مقدارها را نیز بدهید.
عدد 800ms مدت زمان انجام این کار می باشد کخ به صورت انیمیشن این کار انجام می شود.
2) بررسی آنکه تصاویر لود شده باشند
$(‘img’).load(function() {
console.log(‘image load successful’);
});
برخی از زمان ها احتیاج دارید بدانید که آیا تصاویر لود شده اند و یا خیر تا ادامه اسکریپت را انجام دهید, در این سه خط jQuery ما این کار را به سادگی انجام داده ایم.
همچنین شما با رد کردن نام کلاس و مشخصه تصویر می توانید تصویر خاصی را بررسی نمایید.
3) تعمیر تصاویر مشکل دار به صورت اتوماتیک
$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});
در برخی از زمان ها زمان کافی برای جایگزین نمودن تمام تصاویر مشکل دار را نداریم و می توانیم این کار را با تابع مورد نظر انجام دهیم
در صورتی که حتی تصویر مشکل داری ندارید اضافه کردن این کد ضرری برای سایت شما ندارد.
4) Toggle class on hover
$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);
معمولا قصد داریم زمانی که موس بر روی منطقه خاصی حرکت می نماید کلاس آن بخش را تغییر دهیم, این دستور زمانی که کاربر بر روی آیتمی موس خود را نگاه داشته کلاس هاور را به آن اضافه می نماید و زمانی که کاربر از روی آیتم حرکت می نماید کلاس را حذف می نماید, بنابراین تنها موردی که نیاز دارید آن است که به کلاس مورد نظر CSS های لازم را ارجاع دهید.
5) غیر فعال کردن فیلدهای فرم
$('input[type="submit"]').attr("disabled", true);
در برخی از زمان ها احتیاج دارید که فیلدی از فرم خود را غیر فعال نمایید تا کاربر نتواند بر روی فیلد مورد نظر کلیک نماید و یا مطلبی درج نماید این کار را با دستور بالا انجام می دهید.
برای فعال سازی دوباره فیلد می توانید از دستور زیر استفاده نمایید:
$('input[type="submit"]').removeAttr("disabled”);
6) جلوگیری از لود کردن لینک ها
$(‘a.no-link').click(function(e){
e.preventDefault();
});
در برخی از زمان ها لازم است که لینکی به کاربر نمایش داده نشود از طریق کد بالا این کار انجام می شود
7) Toggle فید/اسلاید
// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});
// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});
در برخی از مناطق لازم است افکت های فید و اسلاید jQuery انجام شود, برخی زمان ها لازم است برای نمایش آیتمی خاص از روش فید و اسلاید استفاده شود که با کلیک بر روی آیتمی خاص اتفاق می افتد, زمانی مع لازم است با یک کلیک کاربر آیتم نمایش داده شود و با کلیک بعدی آیتم حذف شود از دستور بالا استفاده می گردد.
8) ساده accordion
// 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;
});
با استفاده از دستور بالا می توانید مطالب خود را به صورت accordion نمایش دهید.
همانطور که در مثال بالا می بینید در حالت اول تمام پنجره ها بسته شده اند و با کلیک کاربر بر روی هدر accordion متن مربوط به آن هدر نمایش داده می شود، و سایر اسلاید ها بسته می شوند. این روش برای ساخت accordion ساده بسیار مناسب است.
9) دو دایو با یک ارتفاع
$(‘.div').css('min-height', $(‘.main-div').height());
برخی زمان ها لازم دارید دو دایو هم ارتفاع باشند, این کد این امکان را برای شما فراهم می نماید; در این مثال مقدار min-height را تعیین نمایید که به معنای حداقل سایز دایو ها می باشد. این کد برای سایت های masonry بسیار مورد استفاده دارد.
10) رنگ های پس زمینه یکی در میان
$('li:odd').css('background', '#E8E8E8’);
توسط این کد می توانید رنگ های پس زمینه یک لیست را به صورت یک در میان یکسان سازی نمایید و در اصطلاح گورخری نمایید, در این کد برای ردیف های فرد می توانید رنگ چس زمینه مشخص نمایید پس برای سایر ردیف ها از طریق پس زمینه اصلی می توانید رنگی مشخص نمایید. این کد را به هر المانی از سایت خود می توانید اضافه نمایید.
