مجموعه آموزش های تکنولوژی JQuery

[MoBiN.R]

جلسه اول

برای استفاده از کتابخانه JQuery بعد از دانلود اون باید در تگ <Script> قرار بدین که توابع اون به صفحه لینک بشن . بصورت زیر :

<script type="text/javascript" src="jquery-1.3.2.js"></script>

بعد از اینکار باید کد های JQuery رو بشه جایی نوشت . برای نوشتن کدهای JQuery زیر کدی که در بالا ذکر شد دوباره یک تگ <Script> دیگه باز میکنیم . بصورت زیر :

<script type="text/javascript">

// JQuery Code Here

</script>

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

با مثالی که در زیر ذکر می شود کد نویسی JQuery را آغاز می کنیم :

کد CSS مورد نظرمان مینویسیم :

<style>
.box2 {
    color:#0F0;
    }
</style>

بعد از نوشتن یک تگ پاراگراف در قیمت Body ایجاد میکنیم و متنی را درون اون مینویسیم :

<p>This is JQuery Tuturial</p>

بعد از تمامی این کارها نوبت به کد JQuery میرسه . ما با این کد میخواهیم متن درون پاراگراف را به رنگ سبز تغییر دهیم ( در حالت معمولی مشکی هست و از خاصیت Class خود تگ هم استفاده نمیکنیم ) :

$(function(){
$("p").addClass("box2");
});

کد بالا اولین کد JQuery ما می باشد .

توضیح : در JQuery به این صورت می باشد که ما اول بخشی از صفحه را انتخاب میکنیم و بعد عملیات موردنظرمان را روی آن پیاده میکنیم ..

در اولین خط کد بالا ، دستور $(function(){ را قرار دادیم . این دستور در واقع صفحه ما به Ready یا کدهای HTML اون لودکامل شد کدهای درون خودش را اجرا می کند . بعنی تمامی کدهایی که بین این دستور قرار میگیرد بعد از لود صفحه اجرا خواهند شد :

$(function(){
// Code Here
});

حالا میرسیم به دستور اصلی بعنی :

$("p").addClass("box2");

در دستور بالا همانطور که توضیح دادیم رنگ قرمز در واقع Selector یا انتخاب کننده بخشی از صفحه است که در اینجا ما تگ p را انتخاب کردیم و رنگ سبز عملیات موردنظرمان می باشد که تابع AddClass کد CSS مورد نظرمان که در اول صفحه نوشتیم به تگ پاراگراف وصل میکند .

حالا صفحه را اجرا میکنیم و مشاهده میکنیم که متنی که در تگ پاراگراف قرار گرفته به رنگ سبز تغییر پیدا کرد .

پایان جلسه اول

طرح سوالات ، مشکلات ، انتقادات و پیشنهادات آموزش های JQuery

جلسه های بعد در روزهای آینده .. ادامه دارد ..

با تشکر