jQUERY چیست؟

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

درباره jQuery

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

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

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

برای مثال زبان فارسی را در نظر بگیرید که بسیار گسترده است. حال ما درنظر داریم یه کتاب کوچک بنویسیم و برای 2000 لغت پرکاربرد زبان فارسی علامت های اختصاری در نظر بگیریم. به عنوان مثال برای لغت «در» یک معادل در نظر می‌گیریم:

در = ^-^

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

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

در سال 2005، یک برنامه نویس وب به نام جان رسیگ که روی پروژه‌های مختلفی کار می‌کرد، از نوشتن کدهای جاوا اسکریپت برای چندین مرورگر خسته شده بود. او تصمیم گرفت که با ساخت کتابخانه‌ی جاوا اسکریپت خود، این مشکل را حل کند. از این طریق بود که jquery در سال 2006 وارد بازار شد. جان رسیگ در وب سایت رسمی خود جی کوئری را به عنوان یک کتابخانه‌ی Javascript معرفی کرد که هدف اصلی‌اش جذاب کردن روند نوشتن کدهای جاوا اسکریپت است. این ابزار کدهای مشابه و تکراری را شناسایی کرده و بخش‌های غیرضروری آن‌ها را حذف می‌کرد. در نتیجه دیگر لازم نبود برنامه نویس کدهای طولانی و خسته کننده را تکرار کند.

جی کوئری در آن زمان دو قابلیت اصلی داشت که بسیار مورد توجه برنامه نویسان قرار گرفت. یکی این بود که jquery سیستم API آسانی را برای ایجاد تغییرات در یک صفحه وب به کاربر ارائه می‌کرد. با این نرم‌افزار انتخاب اجزای مختلف سایت بسیار راحت‌تر شده بود. این قابلیت انتخاب اجزا بعدها گسترش یافت و به کتابخانه‌ای مجزا به نام Sizzle تبدیل شد. دومین قابلیت این بود که با استفاده از جی کوئری دیگر تفاوتی بین مرورگرهای مختلف وجود نداشت. قبل از آن سازگار کردن یک کد برای چندین مرورگر کار سختی بود. بعدها با محبوب شدن این کتابخانه، قابلیت‌ها و تکنیک‌های بیشتری مثل استفاده از انیمیشن و Ajax به آن اضافه شد. البته باید ذکر کرد که در سال‌های اخیر محبوبیت این کتابخانه در مقایسه با سال‌های اوجش کاهش پیدا کرده است و برخی از سایت‌های معروف مثل GitHub و Bootstrap به دلیل روی کار آمدن نرم‌افزارهای جدید، jquery را از سایت خود حذف کرده‌اند.

کاربردهای jquery

حالا که با این زبان برنامه نویسی آشنا شدید، در این بخش می‌خواهیم 5 کاربرد jquery را به شما معرفی کنیم.

ایجاد تغییر در مدل DOM

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

پشتیبانی از انیمیشن و Ajax

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

پشتیبانی از چندین مرورگر

مهم‌ترین کاربرد jquery این است که روی تمامی مرورگرها کار می‌کند. همچنین از انتخابگر CSS هم پشتیبانی می‌کند.

کم‌تر بنویس، بیشتر انجام بده

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

ساخت پلاگین

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

چرا باید از jquery استفاده کنیم؟

1. باعث ساده‌تر شدن کارها می‌شود

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

2. حتی زمانی که جاوا اسکریپت غیر فعال باشد، اجزای نوشته شده با جی کوئری قابل مشاهده هستند

در حالت عادی اگر Adobe Flash روی مرورگر شما نصب نباشد، احتمال اینکه بعضی از قسمت‌های سایت برایتان نمایش داده نشوند وجود دارد. این موضوع برای کاربران ناخوشایند است. همچنین برنامه نویسان را مجبور می‌کند تا وقت بیشتری روی کدنویسی برای مرورگرهایی بگذارند که پلاگین Flash را ندارند. اما این مشکل با جی کوئری دیگر وجود نخواهد داشت. با استفاده از مدل DOM در کد HTML می‌توان تغییراتی در یک صفحه ایجاد کرد تا حتی اگر در یک مرورگر، جاوا اسکریپت غیرفعال است، تمام محتوا برای کاربر نمایش داده شود. jquery به شما قابلیت ایجاد تغییرات در مدل DOM را می‌دهد.

3. از این زبان برنامه نویسی می‌توانید برای ساخت انیمیشن استفاده کنید

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

4. با استفاده از این کتابخانه صفحات سایت شما سریع‌‌تر لود می‌شوند

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

ویژگی‌های جی کوئری

این زبان برنامه نویسی دارای قابلیت‌ها و ویژگی‌های متعددی است که در این بخش آن‌ها را نام برده‌ایم:

• افکت و انیمیشن

• پشتیبانی از Ajax

• قابل گسترش بودن

• گزینش اجزای DOM

• کنترل رویدادها

• ایجاد تغییرات در کد CSS

• داشتن برنامه‌های کمکی – مثل نسخه‌ی مخصوص مرورگر

• پلاگین‌های جاوا اسکریپت

• ویرایش و اصلاح مدل DOM

متدهای جی کوئری

این متدها به شما اجازه می‌دهند که روی اجزای HTML و مدل DOM تغییرات مورد نظر خود را اعمال کنید. با توسعه یافتن کتابخانه jquery، متدهای بی‌شماری برای این نرم‌افزار طراحی شده‌اند. ما در این بخش قصد داریم بعضی از پرکاربردترین این متدها را معرفی کنیم.

متد add()

برای اضافه کردن یک جزء یا عنصر جدید به کدهای HTML از این متد استفاده می‌شود. معمولا نحوه‌ی استفاده از متد به این صورت است که دستور مورد نظر مثل add را می‌نویسید و سپس نام عنصر مورد نظر خود را در پرانتز روبروی دستور تایپ می‌کنید. برای مثال، برای اضافه کردن عنصری به نام «b»، دستور add("b") را به مجموعه کد مورد نظر خود اضافه می‌کنیم.

متد not()

اگر قصد حذف برخی از عناصر در یک مجموعه کد را دارید، می‌توانید از این متد استفاده کنید.

Data()

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

Each()

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

RemoveData()

گاهی ممکن است از داده‌ای که به جزء مورد نظر خود اضافه کرده‌اید پشیمان شوید. راه حل این کار حذف آن داده است و برای حذف داده از متد RemoveData استفاده می‌شود.

Find()

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

مزایای jquery

• سادگی استفاده به دلیل داشتن ساختار ساده و کدهای مختصر

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

• جامعه‌ی کاربری قوی و منبع باز بودن. افراد زیادی وجود دارند که وقت زیادی برای توسعه و بهبود این کتابخانه صرف می‌کنند. همچنین پلاگین‌های از پیش نوشته‌ای برای دانلود وجود دارند که می‌توانند سرعت کار شما را بالا ببرند.

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

• پشتیبانی از Ajax. آژاکس یک رابط کاربری است که به شما اجازه می‌دهد بدون بارگزاری مجدد تمامی صفحه، تغییراتی که می‌خواهید را روی آن انجام بدهید.

معایب jquery

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

• نیاز به فایل جاوا اسکریپت. برای اجرا کردن دستورات جی کوئری حتما به فایل جاوا اسکریپت نیاز است. با وجود آنکه معمولا حجم این فایل کم است (بین 25 تا 100 کیلوبایت)، باز هم این حجم می‌تواند در سرور مشتری مشکل ایجاد کند.

آشنایی بیشتر با jquery با ذکر یک مثال

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

$(document); // Activate jQuery for object

$('#mydiv') // Element with ID "mydiv"

$('p.first') // P tags with class first.

$('p[title="Hello"]') // P tags with title "Hello"

$('p[title^="H"]') // P tags title starting with H

بیایید ببینیم هر کدام از این دستورها چه معنایی دارند.

1. $(document): این دستور باعث می‌شود متدهای کتابخانه jquery روی یک جزء یا عنصر از DOM یا HTML اجرا شوند. در این مثال، عنصر مورد نظر ما یک فایل داکیومنت است.

2. $(‘#mydiv’): با استفاده از این دستور، هر عنصری که مشخصه‌ی mydiv را در خود دارد انتخاب می‌شود.

3. $(‘p.first’): با اجرای این دستور تمامی تگ‌هایی که جزو دسته بندی first محسوب می‌شوند را انتخاب می‌کنید.

4. $(‘p[title=“Hello”]‘): این دستور باعث می‌شود که تمامی تگ‌های موجود در صفحه که عبارت Hello را در عنوان خود دارند انتخاب شوند.

5. $(‘p[title^=“H”]‘): به طور مشابه این دستور هم تمامی تگ‌های موجود در صفحه که عنوانشان با H شروع می‌شود را انتخاب می‌کند.

البته این مثال خیلی ساده بود و برنامه نویسان کارهایی بسیار حرفه‌ای‌تر با این زبان انجام می‌دهند.

آیا جی کوئری در همه مرورگرها قابل استفاده است؟

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

:reference

www.w3schools.com/jquery/jquery_intro.asp