JQuery چیست ؟ ( جیکوئری چیست ؟)

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

جی کوئری چیست؟ یک چارچوب یا کتابخانه جاوا اسکریپت است که هدف آن آسان ساختن استفاده از جاوا اسکریپت در صفحات طراحی وب سایت شماست. با استفاده از این ابزار می توان به عناصر صفحه دسترسی پیدا کرد، ظاهر آنها را تغییر داد یا در زمان مناسب به رویدادهایی مانند کلیک کاربر پاسخ داد. برای آشنایی با خدمات طراحی سایت نیز می توانید این پیوند را ببینید. jQuery خودش جایگزین HTML یا CSS نیست؛ بلکه در کنار این فناوری ها، رفتارهای تعاملی را به صفحه اضافه می کند.

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

در نمونه زیر، انتخابگر $("#message") عنصری را پیدا می کند که شناسه آن message است. متد text() سپس متن آن عنصر را تغییر می دهد. شناسه باید در صفحه یکتا باشد تا انتخاب نتیجه روشن و قابل پیش بینی داشته باشد.

$("#message").text("سلام، به صفحه خوش آمدید");

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

در این مثال، کلیک روی دکمه ای با شناسه show-message باعث نمایش پیام می شود. دستور on("click", ...) رویداد کلیک را مدیریت می کند و show() عنصر پنهان را نمایش می دهد. این کد زمانی اجرا می شود که کتابخانه jQuery پیش از آن به صفحه اضافه شده باشد.

$("#show-message").on("click", function() {
  $("#message").show();
});

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

DOM یا مدل شیء سند، ساختاری است که مرورگر از عناصر HTML می سازد و به جاوا اسکریپت اجازه می دهد با اجزای صفحه کار کند. jQuery متدهایی برای پیمایش این ساختار، افزودن عناصر جدید و تغییر ویژگی ها دارد. همچنین متدهایی مانند نمایش، پنهان سازی و محو شدن می توانند برای بازخوردهای ساده استفاده شوند. برای طراحی حرفه ای، افکت ها را کوتاه و هدفمند نگه دارید؛ حرکت زیاد یا طولانی ممکن است تمرکز کاربر را مختل کند یا در دستگاه های ضعیف تجربه نامناسبی بسازد.

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

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

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

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

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

نیاز را مشخص کنید: پیش از انتخاب ابزار، روشن کنید قرار است چه رفتاری به صفحه اضافه شود. گاهی چند خط جاوا اسکریپت ساده برای نیاز شما کافی است و استفاده از کتابخانه ضرورتی ندارد.

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

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

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

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

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

در الگوی زیر، کد داخل رویداد آماده شدن صفحه قرار می گیرد. به این ترتیب انتخابگرها پس از آماده شدن ساختار HTML اجرا می شوند. در نسخه های جدید jQuery می توان از $(function() { ... }) برای این کار استفاده کرد.

$(function() {
  $("#show-message").on("click", function() {
    $("#message").text("سلام، به صفحه خوش آمدید");
  });
});

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

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