آموزش JQuery (قسمت ۴)

آموزش-jquery-قسمت-۴

سلام.در این بخش از آموزش JQuery‌ میخوام با حلقه های تکرار For و Foreach آشنا بشید و بتونید توسط این حلقه ها، دستورات مشخصی رو به تعداد تعیین شده تکرار بکنید.مثلا می خواهیم اعداد ۱ تا 10 را به ترتیب در یک لیست وارد کنیم.

موضوع آموزش : افزودن اعداد 1 تا 10 در لیست توسط حلقه For

کدهای HTML :

<h4> For Loop </h4>
<button id="dr-for"> افزودن اعداد </button>
<ul id="dr-for-list">
    <h5> لیست اعداد </h5>
</ul>

کدهای JQuery : 

<script type="text/javascript" src="http://dr-code.ir/front/js/jquery-3.2.1.min.js"></script>
<script>
    $(document).ready(function() { //-> ساختار اصلی JQuery
        $('#dr-for').on('click', function() { //-> تعریف رویداد کلیک برای دکمه توسط #dr-for
            for (var i = 1; i <= 10; i++) { //-> ساختار اصلی حلقه تکرار شونده
                $("#dr-for-list").append( //-> افزودن یک سطر به لیست ul
                    '<li>' + i + '</li>'
                );
            }
        });
    });
</script>

در کدهای JQuery بالا دیدین که ما توسط حلقه تکرار For تونستیم توسط یک متغییر i از عدد 1 تا 10 رو تکرار کرده و اون رو در لیست خودمون اضافه کنیم.حالا ممکنه براتون سوال پیش بیاد که کاربرد کد append چیه ولی در آموزش بعدی کاربرد کد append‌ رو هم خواهم گفت.

خب تا اینجا با حلقه تکرار For آشنا شدید و میریم سراغ حلقه Foreach. از این حلقه تکرار شونده در مواقعی استفاده می شود که ما یک آرایه ای داریم و می خواهیم به ترتیب، اطلاعات آرایه رو خوانده و از آن ها استفاده کنیم.در مثال زیر بیشتر با این حلقه آشنا خواهید شد.

موضوع آموزش : خواندن اطلاعات یک آرایه توسط حلقه Foreach

کدهای HTML :

<h4> Foreach Loop </h4>
<button id="dr-foreach"> افزودن اطلاعا آرایه </button>
<ul id="dr-foreach-list">
    <h6> لیست اطلاعات آرایه </h6>
</ul>

کدهای JQuery : 

<script type="text/javascript" src="http://dr-code.ir/front/js/jquery-3.2.1.min.js"></script>
<script>
    $(document).ready(function() { //-> ساختار اصلی JQuery
        $('#dr-foreach').on('click', function() { //-> تعریف رویداد کلیک برای دکمه توسط #dr-foreach
            var dr_array = ['JQuery', 'JavaScript', 'Php', 'Sql', 'Html', 'Css']; //-> تعریف آرایه و مقدار دهی
            $.each(dr_array, function(i, item) { //-> ساختار اصلی حلقه تکرار شونده
                $('#dr-foreach-list').append( //-> افزودن یک سطر به لیست ul
                    '<li>' + item + '</li>'
                );
            });
        });
    });
</script>

در کدهای JQuery‌ بالا دیدین که ما توانستیم توسط حلقه Foreach که در JQuery با each استفاده می شود مقادیر آرایه dr_array رو خوانده و در لیست مربوط به خودش اضافه کنیم.


► قسمت قبلی قسمت بعدی ◄
خودتان امتحان کنید

آموزش های مرتبط :



پرسش و پاسخ
مریم در 09 فرودین 1397 :
سایتتتتون خیلی خوبه،من کلی مطلب یادمیگیرم دستتتون دردنکنه سطح اطلاعات و اموزش خیلی بالاس مرسی اقای مهندس
دکتر کد در 09 فرودین 1397 :
سلام.خیلی ممنون از نظر و لطفتون.ادامه آموزش های مارو دنبال کنید.

سوالی دارید بپرسید؟