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

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

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

موضوع آموزش : برنامه ای که با زدن دکمه، متن نوشته شده نمایش داده شود.

کدهای HTML : 

<input type="text" id="dr-text">
<button id="dr-show-message"> نمایش متن </button>

با استفاده از کد HTML بالا، ما یک TextBox و یک Button قرار دادیم.حال با استفاده از JQuery باید برای دکمه ایجاد شده یک رویداد (Event) تعریف کنیم.

کدهای JQuery :

<script type="text/javascript" src="http://dr-code.ir/front/js/jquery-3.2.1.min.js">
    <script>
        $(document).ready(function() { //-> ساختار اصلی JQuery
            $('#dr-show-message').on('click', function() { //-> تعریف رویداد کلیک برای dr-show-message
                var text = $('#dr-text').val(); //-> قرار دادن متن در متغییر text
                alert(text); //-> نمایش متغییر text
            });
        });
</script>

در کدهای JQuery بالا، ما از طریق dr-show-message# که id‌ دکمه ما هست می توانیم برای آن یک رویدادی مانند Click تعریف کنیم و زمانی که روی دکمه رویداد کلیک انجام می شود کد های تعریف شده اجرا خواهند شد.


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

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



پرسش و پاسخ

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