آموزش jQuery به زبان ساده – کجا و چگونه از jQuery استفاده کنیم؟

برای این که بگویم با چه انگیزه‌ای اقدام به نوشتن مقاله آموزش jQuery کردم؛ ابتدا به یک نکته اشاره می‌کنم. شاید برای شما هم اتفاق افتاده باشد که در هنگام طراحی صفحات وب، با کدهای پیچیده و طولانی روبرو شوید. کدهایی که مانند یک بشقاب ماکارونی، ساختار در هم و پیچیده‌ای دارند و ساعت‌ها زمان می‌برد تا حتی نحوه ارتباط بین توابع و کلاس‌های آن‌ها را درک کنید و برای تغییرشان حتی روزها درگیر خطاهای مختلفی شده باشید.

متاسفانه کدهای طولانی موجود در اکثر زبان‌های برنامه نویسی، نه تنها باعث اتلاف وقت برنامه نویس می‌شود؛ بلکه ایجاد تغییرات در برنامه را هم بسیار سخت و خسته کننده می‌کند. وجود این مشکلات، باعث شد تا بنده به دنبال راه‌کارهای کاهش کدهای جاوا اسکریپت در بین نظریه‌های توسعه دهندگان وب باشم و آگاه شوم که راه حل ساده‌ای برای کوتاه کردن کدها و فراخوانی آسان آن‌ها وجود دارد. اگر مشتاق هستید که نتیجه مطالعات خود را با شما به اشتراک بگذارم؛ مقاله آموزش jQuery را تا انتها بخوانید. چرا که کدنویسی با متدها و تکنولوژی‌های روز باعث می‌شود؛ نگهداری کدها و ایجاد تغییر در آن‌ها راحت‌تر شده و درنهایت هدیه شیرینی دارد به نام صرفه‌جویی در زمان و انرژی!

مقدمه

بهترین طراحان وب کسانی هستند که به طور مستمر در کنفرانس‌ها شرکت کرده و به دنبال تحقیقات در علوم روز هستند پس برای افزایش بهره‌وری در هدفی که دارم؛ سعی کردم که راه آن‌ها را پیش بگیرم و در این بین با تکنولوژی jQuery آشنا شدم که یک زبان برنامه نویسی نیست بلکه یک کتابخانه از جاوا اسکریپت است که با نوشتن مقدار کمی کد، ویژگی‌ها و امکانات گسترده‌ای را در اختیار کاربر قرار می‌دهد. در این مقاله، شما را با مبانی کتابخانه jQuery آشنا خواهیم کرد تا با دنیای برنامه نویسی کدهای کوچک ولی سودمند آشنا شوید و با استفاده از آن طراحی وب برایتان جذاب‌تر از قبل شود.

در بیان کارشناسی‌تر، jQuery را می‌توان یک کتابخانه سریع و مختصر در جاوا اسکریپت معرفی کرد که دستورات فراوان و بی‌شمار آن را گرفته؛ در توابع موردنیاز و فقط در یک خط کد، فراخوانی کرده و پنهان می‌کند؛ پس می‌توان نتیجه گرفت که jQuery تلاش می‌کند تا بسیاری از دستورات پیچیده جاوا اسکریپت نظیر فراخوانی‌های AJAX و عملیات‌های DOM را ساده‌تر کند تا بتوان این کارها را بدون داشتن اطلاعات اولیه درمورد جاوا اسکریپت به راحتی اجرا کرد.

خبر خوش این که می‌توانید تقریباً برای انجام هر کاری یک پلاگین jQuery را پیدا نموده و با آموزش در این زمینه به راحتی با کمترین دانش نحوه کد نویسی jQuery را درک کنید.

jQuery چیست؟

jQuery یک کتابخانه چندپلتفرمی بسیار مفید با ویژگی‌های کاربردی برای جاوا اسکریپت می باشد. به بیان ساده‌تر می‌توان گفت که jQuery یک فریم وورک جاوا اسکریپت است و با هدف آسان کردن استفاده از جاوا اسکریپت در طراحی صفحات وب ایجاد شده است. به صورت خلاصه، هدف از طراحی jQuery ساده سازی اسکریپت‌نویسی سمت کاربر HTML می‌باشد تا باعث شود که سایت سازگار با مرورگر، تعاملی‌تر و کاربرپسندتر شود.

چرا jQuery؟

دلیل اصلی مرسوم شدن استفاده از jQuery این است که دستورات آن در عین سادگی، روان و قابل فهم می‌باشد؛ به عنوان مثال با استفاده از یک API آسان که روی هر نوع مرورگری کار می‌کند، مواردی مانند پیمایش و دستکاری اسناد HTML، انیمیشن، مدیریت رویداد و AJAX را بسیار ساده می‌سازد یا مثال دیگر این که با به کارگیری تکنولوژی AJAX به علاقمندان خود این اجازه را می‌دهد که سریع و بدون اتلاف وقت، یک سایت طراحی کنند و به سادگی برای سایت‌شان انیمیشن اضافه کنند؛ علاوه بر این‌ها در jQuery پلاگین‌های متعدد و متنوعی وجود دارد که همواره در حال افزایش هستند و توسعه دهنده اصلی آن، گوگل است؛ به طوری که وجود این پلاگین‌های رایگان و در دسترس، نیاز برنامه‌نویس برای نوشتن کد را به طرز قابل توجهی کاهش می‌دهد بنابراین توصیه می‌شود که آموزش jQuery را در دستور کارتان قرار دهید.

تاریخچه انتشار jQuery توسط برنامه نویسان وب

jQuery در سال ۲۰۰۶ توسط برنامه نویس جان رزیگ منتشر شد و تا سال 2014 مدام در حال توسعه و کامل شدن بود. این نرم افزار رایگان با منبع باز دارای مجوز دوگانه MIT و GNU است و محبوب انواع مرورگرها، مخصوصا گوگل واقع شده است. نه تنها در مرورگرها بلکه در شرکت مایکروسافت هم به طور رسمی ادغام شده است و در آخرین ورژن ویژوال استودیو موجود می‌باشد تا مورد استفاده کاربران قرار بگیرد. در ادامه، جدولی از تاریخچه ایجاد نسخه‌های توسعه‌یافته کتابخانه jQuery را به اشتراک می گذاریم تا با سرعت رشد آن در گذر زمان هم آشنا شوید.

ویژگی‌های jQuery

نقاط قوت تکنولوژی jQuery طی لیستی از مهم‌ترین‌ها در زیر آورده شده است که دلایل محکمی بر به روز بودن بحث استفاده و آموزش jQuery می‌باشد.

• ایجاد امکان دسترسی به بخش‌هایی از یک صفحه بدون نیاز به ابزارهای جاوا اسکریپت
• عدم نیاز به کدنویسی‌های زیاد
• امکان تغییر ظاهر یک صفحه
• مکانیسم سریع و موثر برای جست‌وجو
• افزودن افکت‌ها و انیمیشن‌ها به یک صفحه وب جهت پیاده‌سازی ظرافت‌های هدفمندانه
• ساده سازی عملکردهای مشترک یا تکراری جاوا اسکریپت
• قابل توسعه از طریق پلاگین‌ها

پیشنیازهای نصب jQuery

قبل از عملی کردن آموزش jQuery باید در نظر بگیریم که برای ایجاد اولین نمونه jQuery ، باید از فایل جاوا اسکریپت برای کتابخانه jQuery استفاده کنید. برای این منظور دو راه وجود خواهدداشت:

1. فایل jQuery را از jquery.com دانلود کنید.
2. از URL فایل jQuery استفاده کنید.

روش‌های موجود برای دانلود jQuery

1. Minified: که فایل خیلی فشرده jQuery می‌باشد و به دلیل لود شدن سریع برای استفاده‌های تجاری کاربرد دارد.
2. Uncompressed: که به صورت غیرفشرده در دسترس عموم قرار دارد و در موارد مربوط به توسعه یا موارد آموزشی مورد استفاده قرار می‌گیرد.
3. Packed: که به صورت gzip فشرده نشده است و کاربرد آن نسبت به موارد قبلی کمتر است.

سلکتورها یا انتخاب‌گرهای jQuery

جهت تحقق آموزش jQuery بهتر است بدانیم که سلکتورها مهم‌ترین بخش کتابخانه jQuery را تشکیل می‌دهند و از آن‌ها برای انتخاب، دستکاری عناصر و المنت‌های HTML با هدف اعمال کد بر روی آن‌ها استفاده می‌گردد. فراخوانی سلکتورها به صورت مستقیم انجام می‌شود که در این فراخوانی المنت‌های HTML بر اساس ویژگی‌ها یا حتی کلاسی که در آن قرار دارند؛ از یک DOM انتخاب شده و پس از انتخاب عملیات مختلفی بر روی آن‌ها انجام می‌گیرد. در کدنویسی برای انتخاب‌گرهای jQuery از علامت تابع کارخانه یا ()$ شروع می‌شود.

• آموزش جامع و رایگان جاوا اسکریپت در 10 جلسه __ کلیک کنید

سه بخش  اصلی در سلکتور وجود دارد که به ترتیب تگ نام، ID و کلاس سلکتور را در یک DOM مشخص می‌کند. به مثال زیر توجه کنید:

<!DOCTYPE html>  
<html>  
<head>  
 <title>First jQuery Example</title>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">  
 </script>  
 <script type="text/javascript" language="javascript">  
 $(document).ready(function() {  
 $("p").css("color", "red");  
 });  
 </script>  
 </head>  
<body>  
<p>This is first paragraph.</p>  
<p>This is second paragraph.</p>  
<p>This is third paragraph.</p>  
</body>  
</html>

در این مثال رنگ متن، قرمز انتخاب می‌شود و در اجرای تکه کد، خروجی زیر را خواهیم دید.

.This is first paragraph

.This is second paragraph

.This is third paragraph

در زیر، جهت تکمیل آموزش jQuery لیستی از سلکتورهای مهم jQuery آورده شده است.

رویدادهای کاربردی jQuery

به بیان ساده، رویدادها اتفاقاتی هستند که برنامه نویس در هنگام نوشتن کد، تعیین می کند آیا آن اتفاق در زمان مشخص بیوفتد یا نه؟! می‌توان گفت؛ اکثر رویدادها شرطی هستند. یعنی منتظر می‌مانند شرطی اجرا شود تا رویداد آن شرط اتفاق بیوفتد؛ همچنین دسته دیگری از رویدادها هم وجود دارند که در جریان فرآیند محقق می‌شوند. در ادامه، رویدادهای مهم jQuery آورده شده است.

رویداد Ready

بعد از اتمام عملیات لود یا عملیات بارگذاری وب سایت یعنی زمانی که شی DOM به طور کامل Load شود و تمام رویدادها یا توابع به همراه تمام تصاویر و… به طور کامل واکشی شده باشد؛ رویداد Ready اتفاق افتاده است. به بیان دیگر، تابع Ready زمانی به طور کامل اجرا می‌شود که می‌خواهیم گروهی از اطلاعات و دستورالعمل‌ها را از سرور و در داخل یک عنصر html بارگذاری کنیم.

فیلم آموزش HTML برای سایت نویسی (پیش نیاز آموزش برنامه نویسی وب)

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

همین الان کلیک کنید

برای شروع عملی آموزش jQuery و حصول نتیجه، یک مثال ساده از jQuery که داخل تگ اسکریپت نوشته شده است را مورد بررسی قرار می‌دهیم.

<!DOCTYPE html>  
<html>  
<head>  
 <title>First jQuery Example</title>  
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">  
 </script>  
 <script type="text/javascript" language="javascript">  
 $(document).ready(function() {  
 $("p").css("color", "blue");  
 });  
 </script>  
 </head>  
<body>  
<p>The first paragraph is selected.</p>  
<p>The second paragraph is selected.</p>  
<p>The third paragraph is selected.</p>  
</body>  
</html>  

خروجی حاصل از تست این تکه کد در زیر آورده شده است:

.The first paragraph is selected

.The second paragraph is selected

.The third paragraph is selected

تکه کد نوشته شده داخل تابع Ready یک بار اجرا می‌شود تا صفحه وب را برای اجرا کد جاوا اسکریپت آماده کند.

رویداد Change

برای چک باکس‌ها و دکمه‌های رادیویی و در واقع زمانی که کاربر با ماوس انتخابی انجام می‌دهد؛ رویداد Change بلافاصله فعال میگردد. به بیان دیگر، در این رویداد، کاربر یک کنترل متن یا عنصری از صفحه وب را تغییر داده و گزینه کادر انتخابی را عوض می‌کند. در واقع در رویداد Change مقدار یک عنصر HTML تغییر می‌کند و هم‌زمان با این تغییر، متد Change یک تابع را به آن متصل می‌سازد تا اجرا شود.

$(selector).change()

توضیح اینکه شکل کلی رویداد Change به عناصر <input>، کادرهای <textarea> و عناصر <select> محدود می‌شود.

رویداد Sumbit

زمانی که کاربر سعی می‌کند با کلیک بر روی دکمه ارسال یا با استفاده از کلید Enter فرمی را ارسال کند؛ رویداد Sumbit اتفاق افتاده است و در واقع زمانی که رویداد Sumbit یا ارسال رخ می‌دهد؛ متد ()Submit تابعی را برای اجرا به آن متصل می‌سازد. تابعی که برای رویداد Sumbit استفاده می‌گردد؛ دارای یک پارامتر اختیاری است تا برای تعیین تابعی که هنگام اجرای رویداد ارسال اجرا می‌شود، مورد استفاده قرار گیرد. در مثال زیر نمونه ای از چگونگی عمل کردن رویداد Sumbit آورده شده است.

<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <title>submit demo</title>  
  <style>  
  p {  
    margin: 0;  
    color: blue;  
  }  
  div,p {  
    margin-left: 10px;  
  }  
  span {  
    color: red;  
  }  
  </style>  
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
</head>  
<body>  
<p>Type 'javatpoint' to submit this form finally.</p>  
<form action="javascript:alert( 'success!' );">  
  <div>  
    <input type="text">  
    <input type="submit">  
  </div>  
</form>  
<span></span>  
<script>  
$( "form" ).submit(function( event ) {  
  if ( $( "input:first" ).val() === "javatpoint" ) {  
    $( "span" ).text( "Submitted Successfully." ).show();  
    return;  
  }  
  $( "span" ).text( "Not valid!" ).show().fadeOut( 2000 );  
  event.preventDefault();  
});  
</script>  
</body>  
</html>

با کلیک بر روی لینک تست می‌توانید خروجی این تکه کد را مشاهده کنید.

رویداد Focus

رویداد Focus با کلیک ماوس یا با به حرکت دادن آن یا به واسطه فشردن متوالی کلید Tab بر روی یک عنصر خاص اتفاق می‌افتد؛ برای مجموعه‌ای از عناصر که به نوعی توسط مرورگرها برجسته شده و کانون توجه مخاطب واقع می‌شود. مثلا در مورد عناصر <input>، <select> و پیوندهای <a href> که به واسطه این رویداد، مرورگر بر روی آن متمرکز شده و فوکوس برنامه را در اختیار می‌گیرد. آشنایی با رویداد فوکوس به آموزش jQuery بیشتر کمک می‌کند.

کاربرد افکت‌ها در jQuery

هرگاه بخواهیم هر عنصر صوتی یا تصویری را به عکس یا فیلم اضافه کنیم؛ از افکت‌های موجود در کتابخانه jQuery استفاده خواهیم کرد. مثلا زمانی که میخواهیم پس زمینه را تغییر دهیم یا یک تبلیغ انیمیشنی به وب سایت اضافه کرده و عملیات متحرک‌سازی را در آن انجام دهیم یا هر ابتکار بصری دیگری که نیاز داریم را خود انجام دهیم. جذاب‌ترین بخش آموزش jQuery بخش مربوط به استفاده از افکت‌های آن می‌باشد. استفاده از افکت‌ها در jQuery شبیه استفاده از رویدادها در این کتابخانه بسیار آسان است. در ادامه، لیستی از افکت‌های کاربردی jQuery آورده شده است:

1. ()hide: وظیفه پنهان کردن المان‌های انتخاب شده را بر عهده دارد.
2. ()show: المان‌های موردنظر را به نمایش می‌گذارد.
3. ()toggle: این افکت بین دو متد ()hide و ()show جابجا می‌شود.
4. ()slidedown: المان‌های مطابق با اسلاید موردنظر را نشان می‌دهد.
5. ()slideup: برعکس افکت ()slidedown عمل می‌کند.
6. ()slidetoggle: افکت جابجایی بین دو متد ()slideUp و ()slideDown می‌باشد.
7. ()animate: وظیفه اجرای انیمیشن را بر عهده دارد.
8. ()stop: وظیفه متوقف کردن اجرای انیمیشن‌های مربوط به المان‌های موردنظر را دارد.
9. ()fadein: عناصر انتخاب شده در صفحه وب را به صورت مات یا محو نمایش می‌دهد.
10. ()fadeout: برعکس افکت ()fadein عمل کرده و عناصر موردنظر را از حالت محو به شفاف برمی‌گرداند.
11. ()fadetoggle: بین افکت‌های ()fadeIn و()fadeOut جابجا می‌شود.
12. () clearQueue: توابع در صف باقی مانده، از عناصر انتخاب شده را حذف می‌کند.
13. ()delay: تنظیم‌کننده اجرای تأخیر برای توابع صف و روی عناصر انتخاب شده، می‌باشد.
14. ()dequeue: تابع بعدی را از صف حذف کرده و سپس تابع حاضر را اجرا می‌کند.
15. ()finish: انیمیشن‌های صف‌بندی شده انتخابی را متوقف، حذف و تکمیل می‌کند.

کلام آخر درباره آموزش jQuery

هدف از تدوین مقاله آموزش jQuery این بود که به صورت اجمالی با کلیات و جذابیت‌های دانش jQuery آشنا شده، با تمرکز بر روی آن، اطلاعات عمومی خود را در این زمینه افزایش دهید و اگر در زمینه برنامه نویسی تازه کار هستید؛ استفاده از کتابخانه jQuery در طراحی صفحات وب را جزو اولویت‌هایتان قرار داده و آن را مرحله به مرحله یاد بگیرید تا با استفاده از کدهای تغییرپذیر و آسانی که دارد؛ از کارتان لذت ببرید و همگام با توسعه علوم، پیشرفت کنید. حتما نظرات و پیشنهادات خود را با ما در میان بگذارید. موفق و پیروز باشید.