از اونجایی که بنده این کتابخانه جاواسکریپت رو بسیار کارآمد میدونم و فکر میکنم در حال حاضر دیگه هر طراح وبی اگه بخواد حرفه ای بشه بهتره با این کتابخانه آشنا بشه و آموزش فارسی هم فعلا ندیدم ازش .
گفتم خودم شروع کنم به نوشتن آموزش جی کوئری (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 استفاده نمایید .
salam man hamishe farsi type mikonam vali alan in agha hang kardeh farsi type nemikone bayad reset konam be har hal sry ke fingilishe.
man ye code jquery daram roosh ye dokme daram be esme info mikham vaghty roye har image taraf roye info click kard ye matne farsi zaher beshe
in karo ham kardam va matn zaher mishe vali faghat age english bashe miad bayad chi kar konam ek farsi ro ham namayesh bedeh?
mamnoon misham be emailam javab bedid.
rasty az lotfe bozorgi ke dar haghe ma moshtaghane elm kardid va in amozeshe ali ro inja gozashtid azatoon mamnoonam.
vaghena ensane bozorgavary hastid
با عرض سلام و تشکر بابت مطالب خوبی که وبلاکتون گذاشته بودین
ولی من نرم افزار را سایتش دانلود کردم و نسخه اون 3 است و اصلا گزینه ای به نام preferences در Aptana views نداره
حالا میخواستم خواهش کنم که میشه مسیر جدیده شا برام ایمیل کنید
من هر چی گشتم پیدا نکردم
با تشکر
سلام بابت مطالب خوبتون ممنون ولی منم این مشکل رو که آقای hamed.h گفتن دارم و از نسخه 3.9 اون استفاده میکنم وهمچین گزینه ایی نداره باید چه کار کرد؟
متاسفانه مدتی هست که با آپتانا کار نکردم و بنابراین با نسخه های جدید آشنایی ندارم.
سلام عرض شد
من هم مشکل آقای رضا رو دارم.می خواستم ببینم با نسخه 3.1.1 ش کار کردید؟من نمیتونم کتابخونه jq رو Add کنم .به شدت هم احتیاج دارم:(
دوستان عزیز خانم فیروزه و آقای رضا : میتونید از ادیتور قدرتمند وب استورم استفاده کنید . اینم آدرسشه :
http://www.jetbrains.com/webstorm/
چون دیدم این مشکل رو چند تا از دوستان مطرح کردند گفتم جوابی بدم شاید به کارتون بیاد!
اولا آپتانا زیاد مناسب برای جی کوئری نیست !
فریم ورک های بهتری موجود است حتی دریمویور هم میتونه با اضافه کردن کتابخانه جی کوئری خیلی مناسبتر باشه یا اصلا جیکوئری یو آی یا موتولز و غیره !!
ولی رفع این مشکل شما چطور انجام میشه:
متاسفانه الان آپتانا نصب ندارم و دارم ذهنی میگم که چطور باید اضافه کنید پس یه مقدار پایین و بالاش رو ببخشید:
وقتی آپتانا رو اجرا کردید یه منویی به نام کامند باید داشته باشید چهارمین گزینه از بالا دقیقا یادم نیست چی بود ولی یه بولدی بیلدی چیزی توش هست !! زیر مجموعه های یه اینستال داره می زنید و از کادری که باز می شه آخرین گزینه اش جی کوئری هست اون رو میزنید و منتظر میشید نرم افزار از طریق اینترنت شروع به اضافه کردن کتابخانه جی کوئری می کنه و در اتمام پیام مربوط به شما میده بعد آپتانا رو ریست کنید و تمام !!
سلام منم مشگل فیروزه خانم و اقا رضا رو دارم و تو این سایتی که گذاشتین سر زدم ولی چیزی متوجه نشدم ممنون میشم راهنمایی کنین ممنون و منتظرم
با سلام ميخواستم بدونم اصول نوشتن كد هاي جي كويري خارجي چطوريه آيا مثل css كه بادر اچ تي ام ال فراخواني ميشه جي كويري رو چطور فراخواني كنم
سلام باید به window
showwindow
refrences
برید
finish
برای اضافه کردن Jquery از آدرس زیر استفاده کنید
Commands->Bundle Development->Install Bundle and then select jQuery from the list
مینا خانوم من همین کار رو میکنم اما یک ترمینال(terminal) (یک صفه ی سیاه دیگه)
باز میکنه که نوشته{This Terminal Emulator is not functional because no ‘bash’ shell could be found.
Please corre}
من چی کار کنم؟!؟!؟! دیوونه شدم تا حالا همه رو با نت پد نوشتم
من همین کار رو میکنم(Commands->Bundle Development->Install Bundle and then select jQuery from the list) اما یک ترمینال(terminal) (یک صفه ی سیاه دیگه)
باز میکنه که نوشته{This Terminal Emulator is not functional because no ‘bash’ shell could be found.
Please corre}
من چی کار کنم؟!؟!؟! دیوونه شدم تا حالا همه رو با نت پد نوشتم
از ادیتور eclipse استفاده کنید . الان خوب با جی کوئری مچ شده . فکر میکنم الان ادیتور های مناسبی برای جی کوئری نوشته شده باشه که در زمان نوشتن این مطلب موجود نبوده