آموزش فریم ورک jQuery

[ziXet]

سلام


در این تاپیک قصد دارم به آموزش فریم ورک حرفه ای و بسیار قدرمتند جی کوئری بپردازم.
قبل از شروع کار باید پیش زمینه هایی از زبان برنامه نویسی جاوااسکریپت ، Html و DOM داشته باشید.
سعی میکنم آموزش رو با مثال های زیاد پیش ببرم تا هم انگیزه یادگیری افزایش پیدا کنه و هم با کدهای جاوااسکریپت بیشتر آشنا بشید.

فهرست مطالبی که ارائه خواهد شد :

- مقدمه(جی کوئری چیست؟) ([تنها کاربران عضو شده قادر به دیدن لینک ها هستند.. ])
- آشنایی مقدماتی با اشیا، متدها و صفات در HTML ([تنها کاربران عضو شده قادر به دیدن لینک ها هستند.. ])
- نحوه راه اندازی ([تنها کاربران عضو شده قادر به دیدن لینک ها هستند.. ])
- آشنایی با سلکتورها در جی کوئری(نوشتن برنامه Hello World)
- رخدادها
- بررسی متدهای و صفان پرکاربرد
- ایجاد افکت های زیبا
- ایجاد درخواستهای ای جکس و نجوه هندل کردن پاسخ ها
- ادامه....

نکته :
اگر سوالی براتون پیش اومد که جوابش در آموزشها داده نشده بود لطفا در [تنها کاربران عضو شده قادر به دیدن لینک ها هستند.. ] مطرج کنید.

این تاپیک برای انسجام بیشتر مطالب قفل میشه

[ziXet]

[تنها کاربران عضو شده قادر به دیدن لینک ها هستند.. ] یک فریمورک جاوا اسکریپت می باشد. اما اصلاً یک فریمورک چیست؟ و فقط مورد نیاز یک برنامه‌نویس است یا یک طراح وب هم می‌تواند از آن بهره ببرد؟

نمی‌دانم وقتی صحبت از فریمورک می‌شود چه تعریفی برای آن در ذهن دارید. بطور کلی می‌توان فریمورک را مجموعه‌ای از ابزارها، کتابخانه‌ها، قراردادها و بهترین شیوه‌ها تعریف کرد بطوریکه سعی می‌کنند وظایف روتین را به سوی مدل‌های جامعی سوق دهند که دوباره می‌توانند مورد استفاده قرار بگیرند. هدف این است که به یک طراح یا توسعه دهنده اجازه داده شود تا بر روی وظایفی که در انجام پروژه مهم هستند تمرکز کند. البته وقتی صحبت از فریمورک می‌شود الزاماً در مورد چیزی که ساخته شده، بصورت پکیج در آمده و برای عموم منتشر شده حرف نمی‌زنیم. چرا که ممکن است یک فریمورک منحصراً برای شما یا تیم شما باشد.(منبع الوان وب)
همینطور که در بالا توضیح داده شد. jquery یک کتابخانه از توابع آماده شده برای جاوا اسکریپت می باشد. در این زمینه فریمورک های دیگری هم وجود دارند. همانند [تنها کاربران عضو شده قادر به دیدن لینک ها هستند.. ] و [تنها کاربران عضو شده قادر به دیدن لینک ها هستند.. ] و فریمورک معروف یاهو با نام [تنها کاربران عضو شده قادر به دیدن لینک ها هستند.. ] .که هر کدوم از این فریمورک ها داری معایب و مزایای مختص خود هستند.

[ziXet]

همینطور که میدونیم JQUERY یک کتابخانه جاوا اسکریپت هست . پس نیاز هست مقداری آشنایی با این زبان کلاینت ساید داشته باشید.

اما از همه مهمتر شما باید با تگ ها و المنت های html و xhtml آشنایی داشته باشیم. در این پست سعی می کنم موارد ضروری، که باید حتما بلد باشید رو مختصری توضیح میدهم!!

هر عنصر یا المنت می توانید دارای بخش های زیر باشد.

۱- صفات (Attribute’s) : شامل صفت هایی هستند که ما به عنصرهای داخل صفحات میدهیم. مانند title,dir,lang, hight,widthو
name ……

<div dir="rtl" lang="fa" title="hello"></div>

نکته : در خیلی از عنصر ها صفات خاص دارند یا صفاتی که در سایر عنصر ها هستند رو ندارند.

۲- شناسه یکتا ( ID ) : ما می توانیم به هر عنصر یک شناسه یکتا اختصاص بدیم تا بتونیم به راحتی از سایر عنر های هم نوع شناسایی و انتخاب کنیم

<div id="maindiv"></div>

3- کلاس (class) : تعریف کلاس هم یک نوع شناسه هست. هم میتواند یکتا باشد. هم یکتا نباشد. و بیشتر در صفحاتی که بر پایه css طراحی می شود استفاده می شود.

<div class="hidediv"></div>

4- سبک (style) : به کمک این صفت می توانید صفاتی که برای ظاهر عنصر مورد استفاده میگیرند رو در این صفت و inline قرار بدید

<div style="width:30px; height:40px; background:#CCCCCC;"></div>

سوال اینجاست اینها به چه درد ما میخوره؟!
سوال خوبی هست. باید خدمتتون عرض کنم که برای کنترل عنصر ها توسط جاوا اسکریپت ما نیاز داریم که بتونیم عنصر مورد نظرمون رو سریع پیدا کنیم. راه های زیادی هست برای شناسایی. شاید سریع ترین راهی که مد نظرتون بیاد این هست که ما میتوانیم کل عنصر ها رو اسکن کنیم و عنر مورد نظر رو پیدا میکنیم. اما به نظر شما این کار درست و بهینه ای هست؟ شاید در صفحای که ما میخواهیم این کار رو انجام بدیم صدها عنصر همانند وجود داشته باشه؟ اونقت به نظر شما چه مقدار وقت باید صرف پیدا کردن عنصر مورد نظرمون بکنیم؟
در مطلب بعدی خواهیم دید که ما توسط jquery چه طور به کمک موارد بالا یعنی شناسه ها ، کلاسها یا نوع عنصر به راحتی عنصر مورد نظرمون رو پیدا خواهیم کرد.

[ziXet]

در شروع کار با jquery اول باید jquery رو نصب کنیم. البته اصطلاح نصب درست نیست. اما چیزی جایگزین پیدا نکردم.
در مرحله اول نیاز هست شما آخرین نسخه کتابخانه jquery رو از سایت jquery.com دانلود کنید. کافیه وارد سایت بشید و در منو های بالای سایت گزینه دانلود رو انتخاب کنید. ([تنها کاربران عضو شده قادر به دیدن لینک ها هستند.. ])

در حالت کلی سه مدل برای دانلود وجود دارد :
۱- Minified : که خیلی فشرده شده و برای استفاده تجاری استفاده میشه و ۱۵ کیلوبایت هم می باشد.(به دلیل لود شدن سریع)

۲- Uncompressed : که به صورت غیر فشرده هست و حجمش حدود ۹۴ کیلو بایت می باشد. و برای توسعه یا فراگیری مورد استفاده قرار میگیرد.

۳- Packed : حجمی حدود ۲۹ کیلوبایت داره و به صورت gzip فشرده نشده

در حال حاضر آخرین نسخه jquery ورژن 1.4.2 هست.

بعد از دانلود شما باید کتابخانه را در صفحات خود نصب کنید .

طریق نصب در صفحات همانند کد های زیر می باشد.

اما نحوه نوشتن کدها : در ۲ حالت ما میتونیم کدهای خودمون رو بنویسیم ۱. به صورت inline : یعنی کدها رو در همون صفحه تایپ کنیم. من پیشنهاد میدم از این روش کمتر استفاده کنید. و سعی کنید زمانی استفاده کنید که کد مربوز به همین صفحه باشه. اگر قرار کد یا تابعه ای که می نویسید در صفحات دیگر هم استفاده شوند. حتما از روش دوم استفاده کنید. ۲. به صورت external : در این حالت شما یک فایل با پسوند sample.js ایجاد میکنید. و تمامی کد های خود را در این فایل مینویسید. و سپس فایل sampale.js را در صفحات خود فراخوانی میکنید. بصورت زیر :

<html>
    <head>
        <script type="text/javascript" src="path/to/jquery.js"></script>
        <script src="path/to/sample.js" type="text/javascript"></script>
    </head>
    <body>
        <a href="http://jquery.com/">jQuery</a>
    </body>
</html>

پیوست:

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

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

برای سایر فریم ورک ها به[تنها کاربران عضو شده قادر به دیدن لینک ها هستند.. ]مراجعه کنید!

و یک پیشنهاد دیگر سعی کنید تمام کد هاتون به صورت تابع نوشته بشه . تا بهینه تر بتونید استفاده کنید.

خوب ما موفق به نصب جی کوئری شدیم.

[ziXet]

همونطور که در پست 3 دیدید، جاوااسکریپت(جی کوئری) میتونه به هر شی در DOM دسترسی پیدا کنه.
اما نحوه دسترسی به شی ها در جی کوئری با تابعی به نام $ انجام پذیره!
با استفاده از این تابع که در حقیقت هسته اصلی جی کوئری محسوب میشه میتونید هر شی در DOM رو انتخاب کنید(select) کنید.
سلکتورها در جی کوئری دقیقا مثل سلکتورها در CSS طراحی شده.
اگر کمی با CSS آشنا باشید میدونید که برای تخصیص استایل مورد نظر به شی ای با صفت id = "school" میتونید از این کد استفاده کنید:

#school{
    **your style***
}

در جی کوئری هم میتونید برای دسترسی به شی ای که id آن برابر school هست از همین سلکتور استفاده کنید! به صورت زیر:

var object = $("#school");

کد بالا شی مورد نظر با سلکتور school# گرفته شد.

مثال کاربردی : Hello World!
در این برنامه کاربر با کلیک بروی یک لینک پیام "Hello World" را دریافت میکند.

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                    $("#link1").click(function(){
                        alert("Hello World!");
                    });
            });
        </script>
    </head>
    <body>
        <a id="link1" href="#">Click Here!</a>
    </body>
</html>

کدهای بالا رو در نت پد یا هر ادیتور دیگه ای تایپ کنید و با پسوند html یا htm ذخیره کنید.
با دوبار کلیک کردن بروی فایل ایجاد شده مرورگر شما باز خواهد شد و نتیجه را خواهید دید!
بروی "Click Here" کلیک کنید تا پیام مورد نظر به صورت یک Alert نشان داده شود.

توضیح کد:
در اینجا لازمه که به یک نکته در مورد تفاوت شی ای در جی کوئری با استفاده از $ گرفته می شود و تعریف شی در جاوااسکریپت اشاره کنم.
همانطور که میدانید به دست آوردن شی در DOM توسط جاوااسکریپت با استفاده از توابعی همچون : getElementById - getElementsByTagName یا حرکت بر اشیای DOM توسط Nodeها صورت میگیرد اما جی کوئری برای این دستیابی از مفهوم سلکتور استفاده میکند.
به کد زیر توجه کنید:

var linkObject = document.getElementById("link1");

کد بالا از تابع getElementById برای دستیابی به شی مورد نظر که مقدار id آن برابر link1 است استفاده میکند.
متغیر تعریف شده جدید به نامه linkObject دارای صفات و متدهای مختلفی است که به صورت پیش فرض در جاوااسکریپت تعریف شده اند.
حال به این کد توجه کنید:

var jqueryObject = $("#link1");

کد بالا با استفاده از jQuery شی مورد نظر را از DOM انتخاب میکند اما در این جالت دیگر این شی خاصیت های پیش فرض همانند شی linkObject را نخواهد داشت بلکه متدها وصفات جدیدی در آن قرار دارد که کار با این متدها کار را بسیار برای ما راجتتر میکند.

توضیح خط به خط:

$(document).ready

این کد در حقیقت یک رخداد رو مدیریت میکنه. وقتی document کاملا لود شد(ready) تابعی که به عنوان آرگومان به آن دادم فراخونی میشه.
در اینجا تابع:

function(){
    $("#link1").click(function(){
        alert("Hello World!");
    });
}

بعد از لود شدن کامل document فراخونی میشه!
یکی از محاسن جاوااسکریپت اینه که میشه توابع رو به صورت inline(نه به مفهومی که در++C هست) تعریف کرد. در js با توابع همانند متغیر رفتار می شود.
در این کد:

$("#link1").click

یک رخداد یا event جدید به شی با آی دی link1 اضافه می شود که دوباره همانند رخداد قبلی یک تابع به عنوان آرگومان دریافت میکند:

function(){
    alert("Hello World!");
}

در کد بالا نیز تابع alert که از توابع پیش فرض js است با رشته "Hello World!" به عنوان آرگومان ورودی فراخوانی شده و عبارت !Hello World بعد از کلیک کردن بروی لینک بروی صفحه چاپ می شود.
اگر با مفهموم event و eventListener خیلی آشنایی ندارید شاید نتونید توضیحات بالا رو خوب درک کنید ولی مشکلی نیست در درس های آینده به مفهوم رخداد و listener ها میپردازیم.

انواع سلکتورها:
همونطور که قبلا توضیح دادم سلکت کردن اشیا در جی کوئری دقیقا مثل CSS هست.

1 - انتخاب شی بر اساس صفت class
به کد زیر توجه کنید:

<p class="master">Contents...</p>

برای انتخاب این شی که کلاس آن برابر master است باید از این کد استفاده کنید:

$(".master")

2 - انتخاب شی بر اساس صفت ID

 <p id="master">Contents...</p>

برای انتخاب این شی که id آن برابر master است باید از این کد استفاده کنید:

 $("#master")

3 - انتخاب شی بر اساس Tag name

  <tagname>Contents...</tagname>

برای انتخاب یک شی که اسم تگ آن مشخص است میتوانیم از کد زیر استفاده کنید

  $("tagname")

باید توجه داشته باشید که اگر چندین تگ با یک اسم در document موجود باشد میتوان با اندیس مخصوص آن تگ شی آن را به دست آورد.
به این مثال توجه کنید:

<html>
    <head>
    ..................
    </head>
    <body>
        <div>This is the first tag</div>
        <div>This is the second tag</div>
        <div>This is the third tag</div>
    </body>
</html>

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

$("div")[0] //access to the first div
$("div")[1] //access to the second div
$("div")[3] //access to the third div

4 - دسترسی به اشیای تو در تو
به این کد توجه کنید:

<div id="first">
    <p>My contents in "p" Tag...</p>
    <span>My contents in "span" Tag...</span>
</div>

برای دسترسی به شی های داخل تگ div از این کدها استفاده میکنیم:

$("#div span")[0] //access to the span tag element
$("div p")[0]     //access to the p tag element

پایان فصل چهارم