۱۵ نکته و ترفند جی کوئری – بخش سوم
15 نکته و ترفند جی کوئری - بخش سوم : در این مقاله، با سه ترفند جی کوئری آشنا می شویم: selector property ، آبجکت خالی و سلکتور رندوم.

در مقالات قبل، سه ترفند از کتابخانه jQuery را مطرح نمودیم. در این مقاله، با ترفندهای دیگر برای افزایش کارایی (performance) کدهای جی کوئری آشنا می شویم.

 

۴- Selector Property:

selector property

جی کوئری دارای یک property می باشد که به اولین المان در یک سلکتور چند بخشی اشاره دارد. در مثال زیر، selector برابر #container خواهد بود:

 
$('#container li:first-child').selector    // #container li:first-child
$('#container li').filter(':first-child').selector    // #container li.filter(:first-child)

اگر چه دو دستور فوق یک نتیجه خواهند داشت و به یک المان اشاره دارند اما همانطور که مشاهده می کنید، سلکتورهای متفاوتی دارند. استفاده از عبارت selector در دستور دوم نامعتبر (invalid) است زیرا selector نمی تواند بعد از متد filter بیاید.

 

۵- ایجاد یک آبجکت خالی جی کوئری (Empty jQuery Object):

آبجکت خالی جی کوئری

ایجاد یک شی جی کوئری (jQuery object) سربار (overhead) زیادی را به همراه خواهد داشت. گاهی اوقات شما نیاز دارید یک آبجکت خالی تعریف کنید و بعدا آنرا توسط متد add() پر کنید:

 
var container = $([]);
container.add(another_element);

این قضیه، اساس و بنیان این مطلب است که استفاده از متد each سریع (quickEach) بهتر از each پیش فرض جی کوئری می باشد.

 

۶- انتخاب المان بصورت تصادفی (Select Random Element):

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

جی کوئری فیلترهای selection خود را اضافه می کند. مانند هر بخش دیگر از جی کوئری، شما می توانید خودتان این فیلترها را بنویسید. برای انجام اینکار، براحتی یک تابع (function) به عبارت $.expr[‘:’] اضافه کنید. یکی از موارد کاربردی فیلترهای تصادفی، در این وب سایت بیان شده است (تعریف فیلترهای تصادفی برای انتخاب المان های رندوم) شما می توانید کد مختصرتر و ساده تر این سناریو را در بخش زیر ببینید:

 
(function($){
    var random = 0;
    $.expr[':'].random = function(a, i, m, r) {
        if (i == 0) {
            random = Math.floor(Math.random() * r.length);
        }
        return i == random;
    };
})(jQuery);
// This is how you use it:
$('li:random').addClass('glow');

در مقاله بعد، با بیان ترفندهای دیگری از جی کوئری در خدمتتان خواهیم بود…


برچسب‌ها:

آبجکت خالیآموزش جی کوئریترفند جی کوئریسلکتور رندوم

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

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

سه × دو =