از اونجایی که بنده این کتابخانه جاواسکریپت رو بسیار کارآمد میدونم و فکر میکنم در حال حاضر دیگه هر طراح وبی اگه بخواد حرفه ای بشه بهتره با این کتابخانه آشنا بشه و آموزش فارسی هم فعلا ندیدم ازش .
گفتم خودم شروع کنم به نوشتن آموزش جی کوئری (jquery ) .
البته فعلا فصل فصل میذارم و وقتی آموزش تمام شد همه رو بصورت یک فایل pdf برای دانلود خواهم گذاشت .
لطفا برای تکمیل این کتاب الکترونیکی مشکلاتتون رو با این آموزش بیان کنید .
آموزش jquery
فصل اول : کلیات jquery
Jquery چیست ؟
Jquery یک کتابخانه بسیار مفید برای جاوااسکریپت است .
Jquery بسیار ساده و کارآمد است و مشکل جاوااسکریپت را برای تطابق با بروزرهای مختلف برطرف نموده .
یادگیری jquery بسیار آسان است .
در Jquery کد جاوااسکریپت از فایل html جدا شده و بنابراین کنترل کد ها و بهینه سازی آنها بسیار ساده تر خواهد شد .
Jquery توابعی برای کار با ایجاکس فراهم نموده و در این زمینه نیز کار را بسیار ساده کرده است .
پیش نیازها :
برای دانستن jquery باید با زبانهای html ، CSS و جاوااسکریپت آشنایی داشته باشید .
چگونه از زبان jquery استفاده کنیم ؟
شما تنها نیاز دارید که آخرین نسخه jquery را از سایت http://jquery.com بصورت رایگان دانلود کنید . این فایل یک فایل جاوااسکریپت با پسوند js است که باید آن را در فایل html خود در قسمت <head> فراخوانی نمایید .
<script type=”text/javascript” src=”jquery.js”></script>
بعد میتوانید کد های جیکوئری مورد نظر خود را در یک تگ جاوااسکریپت جداگانه بنویسید .به عنوان مثال :
<script type=”text/javascript”>
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();
});
});
</script>
به عنوان مثال قطعه کد زیر هنگامی که روی عبارت “Click Me ” کلیک شود این تگ پنهان (hide ) میشود .
<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p> Click Me <p>
</body>
</html>
همان طور که در کد بالا میبینید تمام کدهای jquery درون یک تابع به نام $ نوشته شده و قابل استفاده هستند .
به جای حرف $ میتوان از نام کامل آن jQuery استفاده کرد .
در خط اول کد (خط پنجم قطعه کد بالا ) تابعی را هنگامی که برنامه ما آماده اجراشدن است صدا میزنیم ( هنگامی که رویداد ready از شی document صدا زده شده است ) .
در این تابع میگوییم (خط دوم کد ) : هنگامی که روی همه تگهای “p” کلیک شد تابعی صدا زده شود که کارش این است که این تگ (تگی که رویش کلیک شده ) را پنهان (hide ) نماید .
به همین سادگی . حال اگر صد تا تگ p هم در قسمت body فایل خود بنویسیم . هنگامی که روی هرکدام کلیک میشود این تابع اجرا میشود .
اگر نگران ساختار مبهم jquery هستید باید به شما اطمینان دهم که بزودی در طی روند این آموزش به این ساختار عادت کرده و از آن لذت خواهید برد .
نکته : شما همچنین میتوانید کدهای خود را در یک فایل js جداگانه بنویسید و سپس آن را پس از فراخوانی کتابخانه jquery.js ، فراخوانی نمایید :
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”mycode.js”></script>
برنامه ide مناسب برای jquery :
شما میتوانید کدهای jquery را در تمام برنامه های طراحی وب مانند Dreamweaver Zend Studion , Eclips, بنویسید اما معروفترین محیط برای برنامه نویسی jquery در حال حاضر نرم افزار open source به نام AptanaStudio است که برای کد نویسی جاوااسکریپت نوشته شده اما کتابخانه jquery هم به آن اضافه شده که البته در این زمان که بنده مشغول نوشتن این آموزش هستم باید نرم افزار را جداگانه دانلودنمایید و کتابخانه راهنمای jquery را جداگانه تهیه و بر روی آن نصب کنید :
نرم افزار Aptana را از سایت http://www.aptana.com دانلود نمایید .
کتابخانه jquery را که برای Aptana تهیه شده از سایت http://www.bitstorm.org/edwin/jquery دریافت نمایید .
( دریافت مستقیم از همین وبلاگ : لینک دریافت : https://blog.monavarian.ir/wp-content/aptana_jquery-111_sdoc.zip)
وارد نر افزار Aptana شوید :
به قسمت Windows -> Show view -> Other همانند شکل زیر وارد شوید :
پنجره زیر نمایش میابد . مانند شکل در قسمت Aptana views روی Prefrences کلیک کنید :
در پنجره preferences روی دکمه Add کلیک کنید . به مسیر فایل کتابخانه jqury (شامل دو فایل js و sdoc ) بروید و آن را به پنجره اضافه کنید :
همان طور که در تصویر فوق میبینید . این کتابخانه به Aptana اضافه شده است . حال در صورتی که یک فایل html یا js باز کنید . میتوانید درون آن هنگام نوشتن کدهای jquery از پنجره راهنما استفاده نمایید :
در صورتی که این پنجره باز نشد برای باز کردن آن میتوانید از کلید های ترکیبی Ctrl+Space استفاده نمایید .
Firefox
در پایین سمت چپ صفحه در status bar نمایش داده میشه . اگر روی آیکن کلیک کنید و موس را در مکان مورد نظر در صفحه درگ کنید طول و عرض را به پیکسل به شما نشون میده .
