آموزش جی کوئری در پانزده روز : روز پنجم

سه شنبه, ۶ام بهمن , ۱۳۸۸ | ۲۰ دیدگاه

سلام. اجازه بدید همین ابتدای کار بگم که آموزش امروز برای کسانیکه با الگوریتم های برنامه نویسی آشنا نیستند ممکنه کمی دشوار باشه ولی خیالتون راحت باشه چون تک تک کد هارو توضیح می دم و بد نیست که شما هم کمی ذهنتون رو درگیر برنامه نویسی کنید و ببینید چقدر در شکوفایی و خلاقیت ذهنتون تأثیر داره. البته اینم بگم که امروز درگیر یکی از آسونترین الگوریتم های برنامه نویسی هستیم به نام لوپ و قضیه زیاد هم پیچیده نیست. فرض کنید ویزیتورهای وبلاگتون با زدن یک علامت + در پایین آخرین پست صفحۀ اصلی بتونن پست قبل تر رو ببینن …

امروز چه کار خواهیم کرد :

  1. اضافه کردن آیتم به انتهای لیست به ترتیب شماره
  2. کم کردن آیتم از انتهای لیست

اضافه کردن آیتم به انتهای لیست به ترتیب شماره :
خب ابتدا باید یه لیست تهیه کنیم. پس بعد از لینک کردن فریم ورک جی کوئری ( در چهار جلسۀ گذشته توضیح داده شد ) لیستی سه تایی به ترتیب اعداد می سازیم :

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

حالا باید دو لینک برای اضافه کردن و کم کردن آیتم ها ایجاد کنیم :

<a href="#" id="add">Add</a>
<br />
<a href="#" id="remove">Remove</a>

آدرس لینک ها اصلاً مهم نیست. فقط id اونا مهمه که ما به ترتیب add و remove گذاشتیم. دقت کنید که می تونستیم از class هم استفاده کنیم و هیچ تفاوتی نداشت. بعد از این سراغ کد های جی کوئری میریم. در این آموزش چون کدها کوتاه هستند اونارو درون فایل index می نویسیم. خب من مرحله به مرحله با توضیح ، کدها رو کامل می کنم.
اول از همه ما باید با کدی تعداد عناصر لیست رو در بیاریم که الان این تعداد رو ۳ تعریف کردیم به صورت پیش فرض. برای این کار از کد .size استفاده می کنیم و تعداد عناصر لیست را i می نامیم.

<script type="text/javascript">

        $(function() {

            var i = $('li').size();

        });
    </script>

به این ترتیب کد می فهمد که هم اکنون لیست ما ۳ آیتم دارد و این مقدار را I می نامد. حالا سراغ اضافه کردن آیتم می رویم با این کد :

<script type="text/javascript">

        $(function() {
            var i = $('li').size();

            $('a#add').click(function() {
                $('<li>' + i + '</li>').appendTo('ul');
            });

        });
    </script>

خب ما قصد داریم با زدن بر روی لینک add یک آیتم جدید اضافه کنیم. پس بعد از دستور click ( که با آن آشنا هستید ) می خواهیم مقدار <li>i</li> به انتهای لیست ما اضافه بشه و i مقدار مقدار آخرین آیتم لیست تعریف شده است. appendTo نشان می دهد که لیست ما زیر مجموعه ای از ul است و کد خاصی نیست. حالا با کلیک کردن روی add زیر مقدار ۳ که آخرین آیتم ما در لیست بود دوباره مقدار ۳ اضافه می شود و به همین صورت ادامه پیدا می کند ! پس باید موقع تعریف کردن i مقدار آن را یک عدد افزایش دهیم. برای همین ۱+  را  به فرمول بالا اضافه می کنیم :

    <script type="text/javascript">

        $(function() {
            var i = $('li').size() + 1;

            $('a#add').click(function() {
                $('<li>' + i + '</li>').appendTo('ul');
            });

        });
    </script>

حالا با کلیک بر روی add مقدار ۴ به لیست اضافه می شه چون i را + آخرین مقدار موجور تعریف کردیم ولی وقتی چند بار روی add کلیک کنید پی در پی عدد ۴ اضافه میشه. پس باید انتهای حلقه i را دوباره تعریف کنیم و مقدار آن را یکی اضافه کنیم به این شکل : I = I + 1 .این همان معنی لوپ است که در برنامه نویسی بسیار استفاده می شود. پس فرمول به شکل زیر در می آید :

<script type="text/javascript">

        $(function() {
            var i = $('li').size() + 1;

            $('a#add').click(function() {
                $('<li>' + i + '</li>').appendTo('ul');
                i = i + 1;
            });

        });
    </script>

خب الان کار ما برای اضافه کردن آیتم تمام شد. یک نکته ، در زبان برنامه نویسی I = I + 1 را به این صورت i++ هم می نویسند و هیچ تفاوتی بین این دو نیست.

کم کردن آیتم از انتهای لیست :
خب برای کم کردن کافیه آخرین آیتم لیستمان را مشخص کنیم. برای این کار از دستوری که هفتۀ پیش یاد گرفتیم برای مشخص کردن آخرین آیتم استفاده می کنیم :

$('a#remove').click(function() {
$('li:last').remove();

});

ولی این کد به تنهایی کافی نیست و ایراد دارد. فرض کنید با کلیک بر روی add تا شمارۀ ۳۲ رفته اید و دوباره تا شمارۀ ۳ را با این کد پاک می کنید. اگر دوباره add کنید میبینید سطر چهارم که باید عدد ۴ باشد عدد ۳۳ نمایان می شود ! برای این کار باید بعد از هر با remove کردن I را منهای یک کنیم. پس فرمول به این شکل در می آید :

$('a#remove').click(function() {
$('li:last').remove();
i = i - 1;

});

و در نهایت کل کد را می توانیم به شکل زیر بنویسیم :

<script type="text/javascript">

$(function() {
var i = $('li').size() + 1;

$('a#add').click(function() {
$('<li>' + i + '</li>').appendTo('ul');
i++;
});

$('a#remove').click(function() {
$('li:last').remove();
i--;

});
});
</script>

خب آموزش این جلسه که در ادامۀ جلسۀ پیش بود تمام شد. از جلسات آینده دوباره سراغ افکت های تصویری جی کوئری میریم چون جلسۀ امروز و هفتۀ گذشته ممکنه کمی خسته کننده بوده براتون.

پستهای مرتبط :

آموزش جی کوئری در پانزده روز : روز چهارم

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

آموزش جی کوئری در پانزده روز : روز دوم

آموزش جی کوئری در پانزده روز : روز اول

مقدمه ای بر آموزش jQuery در ۱۵ روز

Be Sociable, Share!


۲۰ دیدگاه


  1. رامتین
    ۷ بهمن ۱۳۸۸

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




  2. مجید
    ۷ بهمن ۱۳۸۸

    سلام

    خیلی عالیه

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

    من قبل از کلیک روی add همه li ها رو remove کردم. در واقع هیچ li رو صفحه نبود.

    وقتی دوباره add رو میزنم li بعدی از شماره ۴ شروع میشه.

    چطور میشه کاری کرد که از ۱ شرو بشه.

    ممنون.




  3. مجید
    ۷ بهمن ۱۳۸۸

    ببخشید

    مشکل بر طرف شد.

    i– رو جا انداخته بودم.




  4. مسیح
    ۷ بهمن ۱۳۸۸

    # رامتین : اومده بودم سایتت بابا جون مارو دست کم نگیر ! یه لینک به آموزش روز اول داده بودی از اون طریق پیدات کردم… تماس با منت هم مبازک 😉

    # مجید : مرسی که پرسیدی، مرسی که جواب دادی چون ممکنه سئوال و جواب یکی دیگه هم باشه. فقط مجید جان اگر چیز باحالی از توش دراوردی حتماً یه جا آپلود کن ما هم ببینیم …




  5. عاطفه
    ۷ بهمن ۱۳۸۸

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




  6. رامتین
    ۷ بهمن ۱۳۸۸

    ممنون مسیح جان……شرمنده کردی




  7. امین
    ۱۴ بهمن ۱۳۸۸

    خسته نباشی. ادامه بدین:)



  8. […] آموزش جی کوئری در پانزده روز : روز پنجم […]



  9. […] آموزش جی کوئری در پانزده روز : روز پنجم […]




  10. مهسا
    ۱۹ بهمن ۱۳۸۸

    راحت تر هم می شد. چرا اینقدر شلوغش کردین.
    یه سوال شخصی:
    شما که به کامپیوتر و IT و اینا علاقه مند هستین چرا رفتین صنایع خوندین؟
    از توضیحاتتون در مورد خودتون به نظر میاد آچار فرانسه هستین!
    مرسی.




  11. مسیح
    ۲۰ بهمن ۱۳۸۸

    # رامتین و رامین : ممنونم.

    # مهسا : انگار با خودتون عهد بستین هر روز یه انتقادی بکنین. ما که خوشحالیم . فردا آموزش روز هفتم میره رو air ! منتظر انتقادتون هستم مهسا خانوم.

    * راجع به سئوالتون که چرا شلوغش کردم باید بگم که شما تا ضرب رو یاد نگیرین نمی تونین توان رو یاد بگیرین. مثلاً چرا تو کتاب پنجم دبستان میان می نویسن ۲ * ۲ * ۲ * ۲ * ۲ ! چرا انقدر شلوغش می کنن آخه ؟! چرا یهو نمی نویسن ۲ به توان ۵ ؟ اینجا من دقیقاً می خواستم همینایی که نوشتم رو یاد بدم نه خلاصۀ مطلب رو !

    * راجع به اینکه چرا صنایع خوندم و … فکر می کنم اینجا جای توضیح نباشه.

    Y! Messenger ID = masih32




  12. کامران
    ۲۰ بهمن ۱۳۸۸

    رو air رو خوب اومدی مسیح




  13. masuod
    ۲۶ بهمن ۱۳۸۸

    آقا چند تا مورد بد
    ۱٫ چرا من وقتی نشونی فایل جاوا اسکریپت رو میدم جواب نمیده
    مثلا
    src=”/js/jqeury.js
    ولی وقتی این رو روی اینترنت آپلود میکنم و نشونی آپلود شده رو میدم درست کار میکنه
    مثلا همون فایل روز اولیتون که به نشونی زیر بود
    Ajax.google

    ۲٫ اینکه در این آموزش وقتی من میخوام آخرین رو حذف کنم … حذف نمیشه … فقط متغیر یکی کم میشه
    اما وقتی به جای اخرین گزینه ازش میخوام که اولی رو پاک کنه خیلی خوب و بی دردسر از صفحه پاک میکنه




  14. masoud
    ۲۷ بهمن ۱۳۸۸

    با عرض پوزش
    یکی از مشکلات بالا و اونم نشونی فایل جاوا اسکریپ رو فهمیدم اشتباهم کجا بود ولی هنوز نمیدونم چرا حذف از آخر برای من کار نمیکنه




  15. محمد
    ۱۰ اسفند ۱۳۸۸

    باز هم درود ،

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

    خیلی دمتون گرم و کامیاب باشید .




  16. مسیح
    ۱۱ اسفند ۱۳۸۸

    # مسعود : مشکل اولت اینه که اسلش اول رو نباید بذاری . پاکش کن درست میشه. مشکل دومت هم من تا نبینم محتویات فایلی که ساختی چیه نمی تونم کمکت کنم ولی ختماً با مقایسه با فایل های سورس می تونی ایرادت رو پیدا کنی.

    # محمد : خیلی ممنونم محمد آقا. ببین حرفت رو قبول دارم که بعضی از کد ها ممکنه گنگ باشن ولی جی کوئری فریم ورک جاوا اسکریپته. من واقعاً نمی تونم همۀ کد های جاوا اسکریپ هم توضیح بدم. سعیم این بوده که واقعاً آموزش برای کسایی باشه که جاوا اسکریپت رو آشنا هستن و فقط می خوان سر از کدهای جی کوئری در بیارن. باز هم ممنون از تعریف و تمجیدت. اگر کار خوبی از این آموزش ها دراوردی حتماً لینک بده که سختگیم در بره . سایت قشنگی هم داری…




  17. جعفر
    ۳۰ آبان ۱۳۸۹

    آموزش خوبیه ممنون
    در این بخش کنترلی در قسمت پاک کردن وجود نداره مثلا شما می تونید وقتی همه ی لیست ها پاک شد چند بار دیگه دکمه remove رو بزنید و بعد اگه دکمه add رو بزنید اعداد از ۰ یا اعداد منفی لیست میشن.البته به آموزش شما لطمه ای نزده!




  18. میلاد بیرون وند
    ۸ مهر ۱۳۹۰

    سلام

    یک مشکل وجود دارد ، اگر هنگامی که برای اولین بار صفحه بارگذاری می شود ، چند بار بر روی دکمه ی حذف کلیک کنیم ، و هیچ آیتمی بر روی صفحه وجود نداشته باشد ، دوباره وقتی بر روی افزودن کلیک می کنیم ، از منفی شروع می شود ف برای رفع این حالت باید بجای –i از کد زیر استفاده کنیم

    $(‘a#remove’).click(function() {
    $(‘li:last’).remove( );
    if (i != 1 )
    i–;




  19. comerun
    ۲۷ مهر ۱۳۹۰

    $(function () {
    var i = $(“li”).size() + 1;

    $(“a#add”).click(function () {
    $(“” + i + “”).appendTo(“ul”);
    i++;
    });

    $(“a#remove”).click(function () {
    $(“li:last”).remove();
    if (i>0) {
    i–;
    }

    });

    });




  20. HappyMoon
    ۹ اسفند ۱۳۹۰

    خیلی خوب:)



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