آموزش jQuery – فصل اول

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

گفتم خودم شروع کنم به نوشتن آموزش جی کوئری (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>

بعد میتوانید کد های جیکوئری مورد نظر خود را در یک تگ جاوااسکریپت جداگانه بنویسید .به عنوان مثال :

بیشتر بخوانید  آموزش jQuery - فصل هفتم : پیمایش عناصر html ( Tree Traversal ( .

<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 را جداگانه تهیه و بر روی آن نصب کنید :

بیشتر بخوانید  مرجع کامل آموزش زبان برنامه نویسی php

نرم افزار 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 همانند شکل زیر وارد شوید :

jquery تصویر اول

پنجره زیر نمایش میابد . مانند شکل در قسمت Aptana views  روی Prefrences کلیک کنید :

محیط AptanaStudio

در پنجره preferences روی دکمه Add  کلیک کنید . به مسیر فایل کتابخانه jqury (شامل دو فایل js و sdoc ) بروید و آن را به پنجره اضافه کنید :

افزودن کتابخانه jquery شامل js و sdoc

همان طور که در تصویر فوق میبینید . این کتابخانه به Aptana اضافه شده است . حال در صورتی که یک فایل html یا js باز کنید . میتوانید درون آن هنگام نوشتن کدهای jquery از پنجره راهنما استفاده نمایید :

ادیتور ide برای jquery . جی کوئری

در صورتی که این پنجره باز نشد برای باز کردن آن میتوانید از کلید های ترکیبی Ctrl+Space  استفاده نمایید .

15 دیدگاه در “آموزش jQuery – فصل اول”

  1. 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.

  2. 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. با عرض سلام و تشکر بابت مطالب خوبی که وبلاکتون گذاشته بودین
    ولی من نرم افزار را سایتش دانلود کردم و نسخه اون 3 است و اصلا گزینه ای به نام preferences در Aptana views نداره
    حالا میخواستم خواهش کنم که میشه مسیر جدیده شا برام ایمیل کنید
    من هر چی گشتم پیدا نکردم
    با تشکر

  4. سلام بابت مطالب خوبتون ممنون ولی منم این مشکل رو که آقای hamed.h گفتن دارم و از نسخه 3.9 اون استفاده میکنم وهمچین گزینه ایی نداره باید چه کار کرد؟

  5. سلام عرض شد
    من هم مشکل آقای رضا رو دارم.می خواستم ببینم با نسخه 3.1.1 ش کار کردید؟من نمیتونم کتابخونه jq رو Add کنم .به شدت هم احتیاج دارم:(

  6. چون دیدم این مشکل رو چند تا از دوستان مطرح کردند گفتم جوابی بدم شاید به کارتون بیاد!
    اولا آپتانا زیاد مناسب برای جی کوئری نیست !
    فریم ورک های بهتری موجود است حتی دریمویور هم میتونه با اضافه کردن کتابخانه جی کوئری خیلی مناسبتر باشه یا اصلا جیکوئری یو آی یا موتولز و غیره !!
    ولی رفع این مشکل شما چطور انجام میشه:
    متاسفانه الان آپتانا نصب ندارم و دارم ذهنی میگم که چطور باید اضافه کنید پس یه مقدار پایین و بالاش رو ببخشید:
    وقتی آپتانا رو اجرا کردید یه منویی به نام کامند باید داشته باشید چهارمین گزینه از بالا دقیقا یادم نیست چی بود ولی یه بولدی بیلدی چیزی توش هست !! زیر مجموعه های یه اینستال داره می زنید و از کادری که باز می شه آخرین گزینه اش جی کوئری هست اون رو میزنید و منتظر میشید نرم افزار از طریق اینترنت شروع به اضافه کردن کتابخانه جی کوئری می کنه و در اتمام پیام مربوط به شما میده بعد آپتانا رو ریست کنید و تمام !!

  7. سلام منم مشگل فیروزه خانم و اقا رضا رو دارم و تو این سایتی که گذاشتین سر زدم ولی چیزی متوجه نشدم ممنون میشم راهنمایی کنین ممنون و منتظرم

  8. با سلام ميخواستم بدونم اصول نوشتن كد هاي جي كويري خارجي چطوريه آيا مثل css كه بادر اچ تي ام ال فراخواني ميشه جي كويري رو چطور فراخواني كنم

  9. برای اضافه کردن Jquery از آدرس زیر استفاده کنید
    Commands->Bundle Development->Install Bundle and then select jQuery from the list

    1. مینا خانوم من همین کار رو میکنم اما یک ترمینال(terminal) (یک صفه ی سیاه دیگه)
      باز میکنه که نوشته{This Terminal Emulator is not functional because no ‘bash’ shell could be found.
      Please corre}
      من چی کار کنم؟!؟!؟! دیوونه شدم تا حالا همه رو با نت پد نوشتم

  10. من همین کار رو میکنم(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}
    من چی کار کنم؟!؟!؟! دیوونه شدم تا حالا همه رو با نت پد نوشتم

    1. از ادیتور eclipse استفاده کنید . الان خوب با جی کوئری مچ شده . فکر میکنم الان ادیتور های مناسبی برای جی کوئری نوشته شده باشه که در زمان نوشتن این مطلب موجود نبوده

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *