آموزش: آموزش jQuery همراه با مثال [بایگانی]

EhsanSQL

سه شنبه 24 اسفند 1389, 14:05 عصر

با سلام. با اجازه مدیران این آموزش در تالار قرار می گیرد.

قوانین تاپیک:
1- دوستان خواهشا با دکمه تشکر از من تشکر کنند.
2- سوالاتشون را با پیام خصوصی به من بفرستند.
3- ارسال پست اسپم ممنوع
----------------------------------------------------------
این آموزش شامل بخش های:

مقدمه jQuery
انتخابگرها
جلوه ها
رویدادها
ارتباط با آژاکس
ارتباط با HTML
ارتباط با CSS
مثال های کاربردی به همراه منبع

-----------------------------------------------
هر مورد در هر جلسه ای آموزش داده میشه. پس در کل این آموزش 8 جلسه می باشد.

با تشکر از دوستان.

EhsanSQL

سه شنبه 24 اسفند 1389, 14:46 عصر

پیشنیازها برای درک آموزش

شما برای درک این آموزش باید به زبان های زیر مسلط یا با آن ها آشنایی لازم را داشته باشید:

HTML
CSS
JavaScript

-----------------------------------------------------------------------------------------------------------------------
جی کوئری چیست؟

جی کوئری یک کتابخانه از توابع مفید جاوا اسکریپت است که باعث عملی شدن شعار "برنامه نویسی کمتر، کار بیشتر" شد. کتابخانه جی کوئری تنها یک فایل است و در کنار دیگر فایل های شما با فرمت js قرار می گیرد. برای دانلود jQuery می توانید از سایت jquery.com نسخه Min (کوچک) و نسخه کامل آن را کامل کنید که هر نسخه حجم کمی (60 کیلوبایت) دارد. هم چنین می توانید از آدرس های زیر نیز از جی کوئری استفاده کنید:

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

---------------------------------------------------------------------------------------
استفاده از جی کوئری
ابتدا باید با تگ <script> که در تگ <head> قرار می گیرد جی کوئری را به صفحه HTML معرفی کنید. برای این کار از خط زیر کمک می گیریم:

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

به جای jquery.js می توانید آدرس های دیگری که از جی کوئری ذکر شد استفاده کنید.
----------------------------------------------------------------------------------------
نحوه جی کوئری
نحوه یا Syntax جی کوئری ساده است به نمونه زیر توجه کنید:
$(selector).action("parameter 1","parameter 2",...);
به جای selector باید انتخابگر عنصر HTML را وارد کنید.
action می تواند یک رویداد یا یک متد باشد. اگر رویداد بود پارامتر اول باید تابع بی نام یا با نام باشد.
parameter 1 و 2 به معنی قرار گیری پارامتر ها به جای آن ها هستند.
-----------------------------------------------------------------------------------------
تابع Document Ready
کد های جی کوئری که شما می نویسید باید بین تگ اسکریپت قرار بگیرد:

<head>
...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// You JQuery codes was here
</script>
...
</head>

رویداد Document Ready همیشه باید اول کدهای جی کوئری شما قرار بگیرند. این تابع به این صورت است:

$(document).ready(function() {
// jquery codes
)};

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