jQuery چیست؟/معرفی پرطرفدارترین فریم ورک جاوااسکریپت

rmehr

سالهای متمادی، جاوااسکریپت به چندش معروف بود! چون هم یادگیریش سخت بود و منبع آموزشی خوب براش کم پیدا می شد، هم کاربرد قابل قبولی براش نبود و هم باعث مشکلات امنیتی میشد.
اما با گذشت زمان، رونق گرفتن AJAX، بیشتر شدن ایده های سمت کلاینت افزایش امنیت مرورگرها که به دلیل توسعه مرورگرها بود، جاوااسکریپت خواهان بیشتری پیدا کرد.
(توسعه مرورگرها رو مدیون اتحادهای ضد اینترنت اکسپلورر هستیم که بخاطر پدرسوختگی و دشمنی با مایکروسافت، فایرفاکس رو پایه گذاری کردند مثل اپل و گوگل و اوراکل و بقیه که رشد و رقابتی شدن بازار مرورگرها رو باعث شد).

اما وقتی jQuery متولد شد، اوضاع کلی فرق کرد. jQuery گفت برای اعمال تغییر در اجزای صفحه با جاوااسکریپت، انیمیشن سازی و AJAX و غیره، نیازی به بلد بودن جاوااسکریپت نداری. من همه اش رو با یه سری توابع هلو شکل واست حل کردم اونم بصورت Cross-Browser یعنی در همه مرورگرها یه نتیجه داره!
چه حرف باحالی. ولی مگه میشه بدون بلد بودن یه زبان ازش استفاده کرد؟ راستش بله! کافیه کار با سینتکس خود jQuery رو یاد بگیریم و بعدش همه چی حله. این یادگیری فقط سه چهار ساعت (حتی کمتر) طول میکشه.

طریقه نصب و بکارگیری جی کوئری به این صورته که به سایت jQuery.com مراجعه می کنیم. آخرین نسخه اش رو داونلود می کنیم که یک فایل JS خواهد بود. این فایل رو توسط تگ <SCRIPT> به صفحه اضافه می کنیم و کدهای شخصی خودمون رو هم توسط یه تگ <SCRIPT> دیگه، بعد از <SCRIPT> قبلی قرار میدیم.

Please Login or Register to see this code
یه نکته ای وجود داره بعضی جاها میگن jQuery رو بجای <HEAD>، در آخر <BODY> بذاریم. می دونی که اون فایل jquery حدود 50 کیلوبایته و وقتی در <HEAD> قرار بگیره تا کامل لود و پردازش نشه، ادامه صفحه و <BODY> نمایش داده نمیشه و برای سرعتهای پایین، مدت زمانی وجود داره که باید صفحه سفید تماشا کنند اما وقتی این فایل در آخر <BODY> بذاریم، صفحه مسلما زودتر ظاهر میشه. اما این روش استاندارد و همیشه خوبی نیست. چون اولا یه استانداردی میگه همه تگهای <SCRIPT> باید در <HEAD> قرار بگیرند و دوما اینکه تصور کن ما کدهایی رو در جی کوئری نوشتیم که قراره با شروع صفحه دیده بشن و صفحه طولانی باشه اونوقت کاربر باید منتظر بمونه تا همه صفحه کامل لود شه و بعد بتونه افکتها و امکانات جی کوئری رو استفاده کنه که اصلا جالب نیست. در کل این بستگی به ساختار صفحه و سایت داره که کدوم روش براش بهتره.

جی کوئری بر پایه اجزای DOM بنا شده (اجزا یا Elementهای DOM بصورت خیلی خلاصه، همون اجزا و تگهای موجود در صفحه است). یعنی اولین قدم استفاده ازش انتخاب و پیدا کردن بخشی از صفحه است که می خوایم باهاش کار کنیم. به این صورت که تقریبا همه توابع جی کوئری به Elementها متصل میشن.

یک تابع Global به نام jQuery وجود داره که اجزای DOM رو بهمون میده. در حالت عادی تابع $ هم وجود داره که دقیقا با تابع jQuery برابره. این تابع برای گرفتن Elementها از دو روش استفاده می کنه یه روش استفاده از Selectorهای معتبر در CSS است که جی کوئری برای این کار از یک Selector آماده(Standalone) به نام Sizzle بهره میبره. روش دوم دادن خود Elementهای جاوااسکریپت به این تابع است.
مثلا می خوایم یه <DIV> که ID به نام myDiv داره رو انتخاب کنیم:
Please Login or Register to see this code

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

حالا Element رو پیدا کردیم و میخوایم توابعش رو استفاده کنیم. برای کسانیکه هیچی از جاوااسکریپت نمی دونن. این توابع با نقطه از هم جدا میشن. اصلی ترین تابع ready نام داره که خیلی پر کاربرده و کارش اینه که یک تابع (که ما میسازیم) رو میگیره و درست موقعیکه همه اجزای DOM کامل شناخته شدند، اجرا میشه یعنی زودترین موقعی که ما میتونیم مطمئن شیم همه تگهای موجود در صفحه رو مرورگر لود کرده و شناخته. گفته بودم که این فریم ورک به Elementها متصل میشه و این تابع هم باید به body متصل بشه. می تونیم body رو توسط Selectorها بگیریم ولی روش راحتتر استفاده از document.body است که یک مقدار استاندارد در مرورگرهاست که باید به روش دومی که بالا گفتم استفاده شه یعنی روش جاوااسکریپت:
Please Login or Register to see this code

برای مبتدی ها، تابع در جاوااسکریپت به این شکل ها ساخته میشه:
myFunction = function() {
// Functions codes here
}
// Or
function myFunction() {
// Functions codes here
}
و اینجوری استفاده میشن:
myFunction();

و می تونن مقادیری رو به عنوان پارامتر بگیرند:
Please Login or Register to see this code

اینجا someText به عنوان پارامتر قرار گرفته. پارامتر هر چی می تونه باشه. حتی میتونه خودش یک تابع باشه:
Please Login or Register to see this code
که می تونیم بجای اینکه یه تابع بسازیم و نامش رو به عنوان پارامتر بدیم، خود تابع رو بین پرانتزها تعریف کنیم و مشکلی هم پیش نیاد:
Please Login or Register to see this code

ادامه دارد ......

rmehr

اینجا ما خود تابع رو بجای اسمش استفاده کردیم.
اینا رو گفتم که با سینتکس جی کوئری راحتتر ارتباط برقرار کنی.
حالا برمی گردیم به همون تابع ready که بالا میبینی. این تابع هم یک تابع دیگه به عنوان پارامتر میگیره.
Please Login or Register to see this code

اگه گیج شدی و چیزی متوجه نشدی، غصه نخور. می تونی شکلش رو بخاطر بسپاری و ازش استفاده کنی و به چجوریش اهمیت ندی. فقط باید به پرانتزها و آکولادهای باز و بسته دقت کنی.
به عنوان اولین مثال، جی کوئری تابعی به نام css داره که هم مقدار CSS رو میده و هم اجازه میده تغییرشون بدیم:

Please Login or Register to see this code

این کد اول رنگ myDiv رو alert میده و سپس رنگش رو تغییر میده و چون داره در تابع ready این کار رو می کنه، در اولین فرصت این کار رو انجام میده یعنی اگر این کد رو اجرا کنی، همون اول نوشته رو قرمز میبینی که خیلی سریع کد اجرا شده.
توابع جی کوئری رو میشه بصورت زنجیروار هم استفاده کرد. مثلا تابعی وجود داره به نام addClass که کلاس CSS رو به Element اضافه می کنه. ما میخوایم هم رنگ myDiv رو عوض کنیم و هم کلاس بهش اضافه کنیم:

Please Login or Register to see this code

دو روش بالا، یعنی روش زنجیروار و روش جداگانه، یک نتیجه دارند ولی اولی سریعتره چون $ یک تابع است که یه سری عملیات انجام میده و در روش دوم ما دو بار اجراش کردیم در حالیکه داره یه کار تکراری انجام میده.
مثالهای بیشتر و مفصل رو به آموزشهای همین بلاگ واگذار می کنم و بخش و توابع جی کوئری رو معرفی می کنم تا بفهمی این فریم ورک چه امکاناتی داره...
جی کوئری براساس طبقه بندی خودش شامل بخشهای زیره:
Core: شامل توابع اساسی و هسته که به بخشهای زیر تقسیم میشه:
تابع (...)$ یا تابع (...)jQuery: شامل روشهای استفاده از تابع $.

Please Login or Register to see this code

خطهای اول و دوم روشهای گرفتن اجزای صفحه هستند.
خط سوم روش ساختن Element در صفحه است که توسط تابع appendTo به صفحه اضافه شده.
خط چهارم، یک تابع به $ داده شده که کدهای این تابع در زمان تکمیل DOM اجرا میشه. این روش دقیقا مشابه استفاده از تابع ready خواهد بود که بالا توضیح دادم.
توابع مربوط به دسترسی به شیء jQuery: توابعی برای فعالیت اختصاصی با خروجی تابع $ مثل شمارش Elementهای پیدا شده، گرفتن نمونه خاصی از بین اونها، تبدیل خروجی به DOM و غیره.
توابع کنترل اطلاعات: توابعی برای ذخیره و بازیابی اطلاعات خاصی برای Elementها. مثلا من یک کلمه رو به اولین <DIV> صفحه اضافه می کنم و بعدا وقتی این <DIV> رو انتخاب کردم می تونم اون کلمه رو هم ازش بخونم (کاربرد خاص داره). این بخش توابعی هم برای کنترل عملیاتهای پست سر هم ارائه داده.
ایجاد پلاگین: دو تا تابع اساسی برای ایجاد پلاگین برای جی کوئری و توسعه اش.
تداخل: معرفی تابعی برای استفاده فریم ورکهای مختلف در صفحه بدون بوجود اومدن مشکل و تداخل به نام noConflict.

Selectors: معرفی چگونگی استفاده از Selectorهای قابل استفاده و معتبر برای تابع $.

Please Login or Register to see this code

ادامه دارد .....

rmehr

Attributes: امکاناتی برای دسترسی به مشخصه ها و اطلاعات Elementها مثل value، href، م
Please Login or Register to see this code$("input.emailInput").val();
Traversing: امکانات فوق العاده ای برای کار با نتیجه تابع $ مثل گرفتن Element بالادستی نمونه پیدا شده. عضو بعدی، قبلی، اولی، آخری و غیره. یادگیری این بخش خیلی اهمیت داره.
Please Login or Register to see this code

Manipulation: توابعی برای تغییر محتویات Elementها. این توابع امکان قرار دادن HTML یا Element رو در Elementهای دیگه میدن. مثلا بخوایم یک پاراگراف رو داخل یک کادر ببریم و غیره.

Please Login or Register to see this code

[External Link Removed for Guests]: توابعی برای دسترسی و تغییر در مقادیر CSS.

Please Login or Register to see this code

Events: بخش بسیار مهمی برای تنظیم رویدادها برای Elementها مثل click و change و mouseover و غیره.

Please Login or Register to see this code

Effects: انیمیشن سازی در jQuery شامل توابع محوسازی، اسلاید و تغییر تدریجی مشخصه های CSS.

Please Login or Register to see this code

Ajax: توابع آماده کار با AJAX. برخی از این توابع به Elementها متصل نمی شوند و مستقیما باید به خود شیء jQuery متصل گردند.

Please Login or Register to see this code

Utilities: توابعی برای سهولت کار در جی کوئری مثل توابع شمارش آرایه و شیء، چک کردن نوع متغیرها، تبدیل شیء به کوئری و غیره.

Please Login or Register to see this code
Internals: شامل توابعی که کاربرد خیلی خاص دارند مثل تابع data.
Please Login or Register to see this code

مهمترین خصوصیت jQuery سادگی استفاده اشه. به این ترتیب که ما بدون بلد بودن جاوااسکریپت و فقط با یادگیری سینتکس جی کوئری می تونیم کارهای خیلی زیادی انجام بدیم و نگران چیزی نباشیم. این خصوصیت متمایز jQuery باعث شده تا تعداد کاربرانش خیلی بالا بره یعنی یه جورایی نمیشه از نظر تعداد کاربران، با فریم ورکهای دیگه مقایسه اش کرد.
جی کوئری امکان ایجاد پلاگین رو هم میده. مثلا من بیام تابعی بسازم که بیاد همه فرمها صفحه رو آژاکسی کنه و این پلاگین رو به تو بدم و تو فقط استفاده اش کنی. تعداد بالای کاربران تعداد خیلی بالای این پلاگینها رو موجب شده. یعنی اگر به بخش Plugin Repository سر بزنی، انقدر پلاگین میبینی که نمی دونی کدوم رو انتخاب کنی. خیلی پلاگینها توی سایت ثبت نشده اند و با سرچ باید پیداشون کرد. این حرف یعنی دامنه توابع و امکانات jQuery خیلی خیلی بیشتر از فهرست بالاست (فهرست بالا شامل همه توابع نیست و فقط یه معرفی از امکاناته). چون امکانی که در توابع خود جی کوئری وجود نداره، احتمالا پلاگینش وجود داره و یا بخاطر سادگی جی کوئری نوشتنش راحته.
مهمترین مشکلش که میتونه حسنش هم به حساب بیاد، اینه که جی کوئری کاملا برای DOM تعریف شده یعنی همه امکاناتش مخصوص اجزای صفحه است و اگر ما بخوایم یکم دسترسی بیشتری داشته باشیم، باید بریم سراغ کدهای عادی جاوااسکریپت. مثلا بخوایم Drag&Drop در صفحه داشته باشیم. باید یا از jQuery UI استفاده کنیم یا با کدهای خام جاوااسکریپت این بخش رو بنویسیم و اونجا تقریبا از جی کوئری هیچ خبری نیست.
این موضوع از این جهت بده که ما رو مجبور می کنه برای کارهای اضافی، کد خام بنویسیم یا فریم ورکهای دیگه ای به صفحه اضافه کنیم و از این جهت خوبه که جی کوئری رو یک فریم ورک مخصوص DOM معرفی می کنه. به این ترتیب که میگه من با خارج از DOM کاری ندارم ولی وقتی با خود DOM کار داری، من به بهترین شکل برات کار انجام میدم و نیازت رو برآورده می کنم.

تمام بخشهایی که در بالا دیدی، خلاصه و معرفی بود. سعی می کنم در بخش جی کوئری همه اش رو مفصل آموزش بدم. اینها همه نظرات و دیدگاه شخص من از jQuery بود. میتونه کامل و عالی، ناقص و پیش پا افتاده یا غلط باشه. برای اطلاعات صحیح و بروز به سایت خود جی کوئری مراجعه کنید.
jQuery در حال توسعه است و در آدرس [External Link Removed for Guests] قابل دسترسی و دریافت است. بخش دریافت نسخه های مختلف و دریافت پلاگین ها صفحات مفیدی هستند.

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

مرکز انجمنهای تخصصی

jQuery چیست؟/معرفی پرطرفدارترین فریم ورک جاوااسکریپت

jQuery چیست؟/معرفی پرطرفدارترین فریم ورک جاوااسکریپت

چیست؟/معرفی پرطرفدارترین فریم ورک جاوااسکریپت 2

چیست؟/معرفی پرطرفدارترین فریم ورک جاوااسکریپت 3