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

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

در قسمت های قبلی آموزش JQuery، تقریبا اصول پایه ای و با یک سری از توابع پرکاربرد این زبان آشنا شدید و نیز در بخش آموزش های CSS، طریقه استفاده در HTML را نیز یاد گرفتید.حالا میخوام طریقه استفاده CSS رو با استفاده از JQuery‌ بهتون بگم.مثلا شاید بخواهید رنگ یک متن یا پس زمینه متن را با استفاده یک دکمه تغییر بدید و این کار توسط JQuery  وCSS انجام میشه.

کد های HTML : 

<button id="dr-color-change"> تغییر رنگ متن </button>
<select id="dr-colors">
    <option value="red">قرمز</option>
    <option value="blue">آبی</option>
    <option value="yellow">زرد</option>
    <option value="purple">بنفش</option>
    <option value="orange">نارنجی</option>
</select>
<h4 id="dr-text"> دکتر کد </h4>

<hr>

<select id="dr-change">
    <option value="red">قرمز</option>
    <option value="blue">آبی</option>
    <option value="yellow">زرد</option>
    <option value="purple">بنفش</option>
    <option value="orange">نارنجی</option>
</select>
<h4 id="dr-text1"> دکتر کد - مرجع آموزش برنامه نویسی وب </h4>

کدهای 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-color-change').on('click', function(){ //-> on Click
            var color = $('#dr-colors').find(':selected').val(); //-> نحوه گرفتن رنگ انتخابی از جعبه انتخاب
            $('#dr-text').css({'color':color}); //-> اعمال رنگ انتخابی به متن
        });

        // در این روش بدون نیاز به دکمه رنگ انتخاب شده را اعمال کردیم.
        $('#dr-change').on('change', function(){ //-> on Change
            var color = $(this).find(':selected').val();
            $('#dr-text1').css({'background':color});
        });
    });
</script>

در کدهای JQuery‌ ما اسم رنگ را از جعبه انتخابی گرفته و در متغیر color ذخیره می کنیم و از طریق تابع css. آن رنگ به مشخصه color متن اعمال می کنیم.

از کد ':selected' جهت تشخصی گزینه انتخابی در بین گزینه های موجود استفاده می شود.

ساختار اعمال css در داخل JQuery به این صورت می باشد که ما مشخصه مورد نظرمان color بود و مقدار مشخصه را از بین گزینه های موجود انتخاب کردیم.

$('#id').css({'مقدار مشخصه':'مشخصه مورد نظر جهت تغییر'});

در روش دوم ما بدون استفاده از دکمه، توانستیم از طریق رویداد Change تغییرات در انتخاب رنگ در بین گزینه های موجود را تشخیص دهیم و در صورت تعویض گزینه، کدهای اعمال رنگ به پس زمینه متن دوم را انجام دهیم.


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

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



پرسش و پاسخ

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