Jquery چیست؛ ۱۰ مزیت و ۷ کاربرد آن

Jquery چیست. jQuery بیش از ۱۰ سال است که وجود داشته است، که این مدت زمان زیادی برای یک کتابخانه کد است. اما هنوز هم یکی از محبوب‌ترین کتابخانه‌های javascript در توسعه وب است. در ادامه خواهیم دید Jquery چیست و چرا هنوز هم محبوب است و پیشنهاد می‌شود از آن در پروژه‌های خود استفاده می‌کنید. در این مقاله به شما خواهیم گفت Jquery چیست و با ۱۰ مزیت و ۸ کاربرد آن آشنا خواهیم شد.

تاریخچه جی کوئری

جان رسیگ نسخه اولیه jQuery را در سال 2005 توسعه داد و در سال 2006 در رویدادی به نام BarCampNYC منتشر کرد. او در وب سایت اصلی جی کوئری نوشت:

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

جی کوئری دو هدف ارزشمند و اصلی در طراحی وب سایت داشت. اولین مورد ارائه یک API ارگونومیک برای دستکاری یک صفحه وب بود. به ویژه، روش‌های قدرتمندی برای انتخاب عناصر ارائه کرد.

jQuery فراتر از انتخاب عناصر فقط بر اساس شناسه یا کلاس‌هایشان، اجازه عبارات پیچیده را می‌دهد، مانند انتخاب عناصر بر اساس رابطه آنها با عناصر دیگر:

// Select every item within the list of people within the contacts element

$('#contacts ul.people li');

دومین نکته عالی در مورد jquery این بود که تفاوت بین مرورگرها را در طراحی سایت شرکتی و طراحی فروشگاه اینترنتی و… از بین برد. در آن زمان، نوشتن کدی که روی همه مرورگرها به خوبی کار کند، سخت بود.

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

/ If Mozilla is used

if ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) {

// Use the handy event callback

jQuery.event.add( document, "DOMContentLoaded", jQuery.ready );

// If IE is used, use the excellent hack by Matthias Miller

// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited

} else if ( jQuery.browser == "msie" ) {

// Only works if you document.write() it

document.write("<scr" + "ipt id=__ie_init defer=true " + "src=javascript:void(0)><\/script>");

// Use the defer script hack

var script = document.getElementById("__ie_init");

script.onreadystatechange = function() {

if ( this.readyState == "complete" )

jQuery.ready();

};

// Clear from memory

script = null;

// If Safari is used

} else if ( jQuery.browser == "safari" ) {

// Continually check to see if the document.readyState is valid

jQuery.safariTimer = setInterval(function(){

// loaded and complete are both valid states

if ( document.readyState == "loaded" ||

document.readyState == "complete" ) {

// If either one are found, remove the timer

clearInterval( jQuery.safariTimer );

jQuery.safariTimer = null;

// and execute any waiting functions

jQuery.ready();

}

}, 10);

}

با استفاده از jQuery، توسعه دهندگان می‌توانند رسیدگی به این مشکلات را به تیم jQuery بسپارند.

سپس، jQuery استفاده از تکنیک‌های پیچیده‌تر مانند انیمیشن‌ها و Ajax را آسان کرد. jQuery عملاً به یک وابستگی استاندارد برای وب سایت‌ها تبدیل شد. امروزه بخش عظیمی‌از اینترنت را تامین می‌کند. W3Techs تخمین می‌زند که حدود 74 درصد از تمام وب سایت‌ها از jQuery استفاده می‌کنند.

در سال 2011، تیم jQuery رسماً هیئت مدیره jQuery را ایجاد کرد. در سال 2012، هیئت جی کوئری بنیاد جی کوئری را تشکیل داد.

در سال 2015، بنیاد جی کوئری با بنیاد دوجو ادغام شد و بنیاد JS را تشکیل داد، که سپس در سال 2019 با بنیاد Node.js ادغام شد و بنیاد OpenJS را تشکیل داد و jQuery به عنوان یکی از “پروژه‌های تاثیرگذاری” آن بود. جهت اطلاعات بیشتر در مورد این که nodejs چیست اینجا کلیک نمایید.

جی کوئری چیست؟

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

شعار جی کوئری «کمتر بنویس، بیشتر انجام بده» است، زیرا بسیاری از خطوط کد خام جاوا اسکریپت را با رابط ساده خود به یک خط کاهش می‌دهد. ویژگی‌های اصلی جی کوئری عبارتند از:

• مدیریت رویداد
• دستکاری DOM
• انیمیشن‌ها و افکت‌ها
• چارچوب AJAX

جی کوئری چگونه کار می‌کند؟

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

• انتخابگرهای عنصر DOM
• شی jQuery
• عملیات مجموعه پیچیده
• مدیریت رویداد ساده
• ردپای کوچک
• قابلیت توسعه آسان پلاگین

مجموعه‌ای از چارچوب‌های وب نظیر انواع فریم‌ ورک های فرانت اند، فریم ورک‌های جاوا اسکریپت، فریم‌ورک های PHP، فریم ورک های پایتون، فریم ورک های css و… از زمان انتشار جی کوئری پدیدار شده‌اند که برخی از پیشتازان فعلی React، Angular و Vue هستند. (جهت اطلاعات بیشتر در مورد این که پایتون چیست، اینجا کلیک نمایید.) این فریم ورک ها دو مزیت قابل توجه نسبت به جی کوئری دارند. جهت اطلاعات بیشتر در مورد این که php چیست، اینجا کلیک نمایید.

اولین مورد این است که تقسیم کردن یک UI به اجزاء را آسان می کنند. آنها برای مدیریت یک صفحه و همچنین به روز رسانی آن طراحی شده اند. jQuery معمولاً فقط برای به روز رسانی یک صفحه استفاده می شود و برای ارائه صفحه اولیه به سرور متکی است.

از سوی دیگر، کامپوننت‌های React، Angular و Vue امکان اتصال محکم بین HTML، کد و حتی CSS را فراهم می‌کنند. همانطور که ممکن است یک پایگاه کد را به چندین توابع و کلاس های مستقل تقسیم کنیم، تجزیه یک UI به اجزای قابل استفاده مجدد ساخت و نگهداری یک وب سایت پیچیده را آسان تر می کند.
مزیت دوم این است که چارچوب‌های جدیدتر پارادایم اعلامی را تشویق می‌کنند، که در آن توسعه‌دهنده توصیف می‌کند که رابط کاربری چگونه باید باشد و انجام تغییرات لازم برای رسیدن به آن را به چارچوب واگذار می‌کند. این رویکرد برخلاف رویکرد امری است که با کد jQuery مشخص می شود.

چرا باید از جی کوئری استفاده کرد؟

jQuery یک کتابخانه مستقل جاوا اسکریپت است که توابع اضافه شده و عملکردهای اضافی را به اشیاء داخلی استاندارد به آنچه جاوا اسکریپت به صورت بومی‌ارائه می‌کند، به همراه دارد.

در اصل، جی کوئری جاوا اسکریپت است. این برنامه چیزی به خود زبان جاوا اسکریپت اضافه نمی‌کند، اگرچه به دستکاری DOM به روشی بسیار آسان و راحت برای توسعه دهندگان کمک می‌کند.

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

طبق Builtwith، از 10000 وب سایت برتر، حدود 88٪ (یا نزدیک به 9000) از آنها در حال حاضر از jQuery از ابتدای سال 2019 استفاده می‌کنند.

jQuery یک کتابخانه آزموده شده با جامعه بزرگی از توسعه دهندگان است که به کمک زمان و تلاش خود برای مدرن سازی و بهبود کتابخانه ادامه می‌دهند. جی کوئری 2020 بسیار متفاوت از جی کوئری است که ممکن است در اوایل سال 2010 به یاد داشته باشید. و این یک نرم افزار رایگان و متن باز است!

کاربردهای جی‌کوئری

۱.سینتکس انتخابگر CSS توسعه یافته برای انتخاب عناصر DOM

jQuery یک نحو آشنا برای انتخاب عناصر DOM در صفحه ارائه می‌دهد. به‌جای ایجاد قوانین خاص خود برای انتخاب‌ها، از قوانینی استفاده می‌کند که توسعه‌دهندگان قبلاً با آنها آشنا هستند یعنی “Css Selectors”. انتخابگرهای CSS قدرتمندتر از نحو ارائه شده توسط روش‌های انتخاب DOM بومی‌جاوا اسکریپت هستند. مثلا:

$('a[href^="http://"]:visible')

در اینجا، ما در حال انتخاب همه پیوندهای قابل مشاهده در یک صفحه هستیم که با http شروع می‌شود (شاید بتوانیم از این انتخابگر برای اطلاع دادن به کاربر در صورت وجود پیوندهای ناامن در صفحه استفاده کنیم). Vanilla JavaScript همچنین API‌های انتخاب DOM را ارائه می‌دهد که از انتخابگرهای CSS استفاده می‌کنند، اما زیر مجموعه کوچکتری از انتخابگرها در دسترس هستند. قطعه کد بالا از انتخابگر :visible استفاده می‌کند که در مشخصات انتخابگرهای CSS3 نیست. برای استفاده از آن در جاوا اسکریپت ساده، باید جاوا اسکریپت آن را پیاده سازی کنیم. استفاده از سینتکس سبک CSS برای توسعه دهندگان بسیار بصری و آشنا است و به طور همزمان، می‌توانیم به عناصر درختی مختلف DOM به سرعت دسترسی پیدا کنیم.

۲.نوشتن چندین کار در یک خط

jQuery دارای یک ویژگی است که در آن تمام توابع دستکاری DOM آن عنصر جهش یافته را برمی‌گرداند. این به ما این امکان را می‌دهد که انتخابگرها و روش‌ها را به روشی ساده و قابل فهم با هم زنجیره کنیم. مثلا:

$('a[href^="http://"]').addClass('inecure').attr('target', '_blank');

در این بلوک کد، همه پیوندهایی را انتخاب می‌کنیم که با http:// شروع می‌شوند (با استفاده از همان انتخابگر که در بالا توضیح دادیم)، کلاس insecure را اضافه می‌کنیم و در نهایت یک ویژگی اضافه می‌کنیم که به مرورگر می‌گوید که می‌خواهیم پیوند در یک پنجره جدید باز شود. همه اینها بدون تعریف یک متغیر است. این یک ویژگی عالی jQuery است زیرا منجر به کدهای تمیز می‌شود که مختصرتر و خواندن آسان تر از جاوا اسکریپت ساده است که ما را ملزم به نوشتن می‌کند. مثل کد زیر:

const insecure_links = document.querySelector(‘a[href^=“http://“]’);

insecure_links.classList.add(‘insecure’);

insecure_links.addAttribute(’target’, ‘_blank’);

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

۳.مدیریت چندین عنصر DOM

در jQuery، توابع دستکاری DOM برای مدیریت چندین عنصر DOM نوشته شده است. اگر مثال بالا دارای 5 پیوند HTTP ناامن در صفحه باشد، مثال jQuery برای هر نمونه اعمال می‌شود. فرقی نمی‌کند 1 عنصر در صفحه وجود داشته باشد یا 100 عنصر، همان کد خواهد بود. این مورد در مورد جاوا اسکریپت نیست.

۴.پشتیبانی از مرورگرهای مختلف

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

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

۵.بهره وری توسعه دهندگان

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

۶.طیف گسترده ای از پلاگین‌های مفید

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

یکی از مثال‌هایی که واقعاً ارزش داشتن این پلاگین‌ها را نشان می‌دهد، زمانی است که یک طرح به چرخ و فلک (carousel) نیاز دارد. اگر بخواهیم نوار لغزنده چرخ و فلک خود را بنویسیم، به طور بالقوه می‌تواند 8-16 ساعت کار باشد. حتی اگر یک کتابخانه جاوا اسکریپت داشته باشیم که عملکرد مورد نیاز برای مقابله با انیمیشن‌ها را به ما بدهد، منطق چرخ و فلک پیچیده است.

۷.Dom Traversal Manipulation

Dom Traversal Manipulation بسیار ساده و آسان با JQuery ساخته شده است. دستکاری DOM مانند افزودن عناصر جدید، حذف عناصر، عبور از عناصر و غیره با پرس و جو و زنجیره ای بسیار شگفت انگیز و قوی است.

مزایای جی‌کوئری

۱.جی کوئری سادگی را ترویج می‌کند:

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

۲.انیمیشن‌ها با jQuery آسان هستند:

قبلا توسعه دهندگان از فلش برای انیمیشن استفاده می‌کردند. توسعه دهندگان فلش ارزان نیستند. توسعه در Flash نیاز به یک منحنی یادگیری بزرگ دارد. و همه مرورگرها نمی‌توانند فلش را اجرا کنند و برخی از مرورگرها برای اجرای فلش اجازه می‌خواهند.

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

۳.jQuery برای نوشتن کتابخانه‌ها راحت تر از جاوا اسکریپت است:

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

۴.صفحات جی کوئری سریعتر بارگذاری می‌شوند:

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

۵.jQuery با مرورگرهای مختلف سازگار است

یکی از بزرگترین مزایای jQuery این است که بسیاری از مشکلات ناسازگاری بین مرورگرها و نیز طراحی سایت ریسپانسیو را برای شما حل می‌کند. هرکسی که در گذشته جاوا اسکریپت جدی نوشته باشد می‌تواند تأیید کند که ناهماهنگی بین مرورگرها شما را دیوانه می‌کند. به عنوان مثال، طرحی که در موزیلا فایرفاکس و اینترنت اکسپلورر 8 به خوبی رندر می‌شود، در اینترنت اکسپلورر 7 از هم می‌پاشد. ردیابی این نوع مسائل هرگز آسان
نیست، و حتی حل کامل آن سخت‌تر است.

۶.بسیاری از کتابخانه‌ها در jQuery نوشته شده‌اند

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

۷.انتخابگرهای CSS3

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

۸.کتابخانه منبع باز

HTML یک کتابخانه منبع باز، رایگان و به خوبی در تمام انواع برنامه‌ها پشتیبانی می‌شود. بنابراین، هر کسی می‌تواند بدون هیچ گونه مشکل سازگاری و مجوز، از JQuery در برنامه خود استفاده کند. همچنین، مایکروسافت JQuery را به طور رسمی‌در IDE Visual Studio 2010 خود ادغام کرده است و JQuery intellisense اکنون به خوبی در Visual Studio 2010 پشتیبانی می‌شود.

۹.آسان برای یادگیری و انعطاف پذیر

JQuery بسیار فشرده و قابل درک است. واقعیت این است که حتی اگر دانش اولیه ای از کدنویسی داشته باشید، می‌توانید پس از گذراندن یک آموزش کوتاه خیلی راحت شروع به نوشتن JQuery کنید.

۱۰.زمانی که نباید از jQuery استفاده کنید

jQuery یک کتابخانه جاوا اسکریپت سریع، کوچک و غنی است. مواردی مانند پیمایش و دستکاری سند HTML، مدیریت رویداد، انیمیشن را ایجاد می‌کند.

جی کوئری برای چه سایت‌هایی مناسب است؟

jQuery این وجه تمایز را دارد که اولین کتابخانه ای است که برای بسیاری از توسعه دهندگان ارائه شده است. این بخاطر این است که:

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

گفته می‌شود، بسیاری از شرکت‌ها برنامه‌هایی خواهند داشت که از jQuery در کدهای خود استفاده می‌کنند که نیاز به نگهداری دارند. تنها به همین دلیل، ما کاملاً توصیه می‌کنیم دانش جاوا اسکریپت خود را با jQuery تکمیل کنید تا به شما در انجام کار کمک کند.

کلام آخر

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

[faq]